mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-27 02:20:28 +00:00
Rename $:/tags/GeoLayer to $:/tags/GeoFeature
And make sure that it works with all GeoJSON features, not just polygons
This commit is contained in:
parent
e6b9bac236
commit
546e55dcde
14
editions/geospatialdemo/tiddlers/Features.tid
Normal file
14
editions/geospatialdemo/tiddlers/Features.tid
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
title: GeoFeatures
|
||||||
|
tags: $:/tags/GeospatialDemo
|
||||||
|
|
||||||
|
This is a list of all the tiddlers containing ~GeoJSON feature collections in this wiki (identified by the tag <<tag "$:/tags/GeoFeature">>). A ~GeoJSON feature collection is a list of features, each of which consists of a geometry and associated metadata.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoFeature]sort[caption]]">
|
||||||
|
<li>
|
||||||
|
<$link>
|
||||||
|
<$view field="caption"><$view field="title"/></$view>
|
||||||
|
</$link>
|
||||||
|
</li>
|
||||||
|
</$list>
|
||||||
|
</ul>
|
@ -12,16 +12,16 @@ This demo requires that the API keys needed to access external services be obtai
|
|||||||
|
|
||||||
!! Demos
|
!! Demos
|
||||||
|
|
||||||
* Visit the ~GeoLayers and ~GeoMarkers tabs to see the data loaded into this wiki
|
* Visit the ~GeoFeatures and ~GeoMarkers tabs to see the data loaded into this wiki
|
||||||
* Click on a link to a layer or marker to open the corresponding tiddler that includes a map
|
* Click on a link to a layer or marker to open the corresponding tiddler that includes a map
|
||||||
* Use the Flickr tab to retrieve geotagged photographs from Flickr
|
* Use the Flickr tab to retrieve geotagged photographs from Flickr
|
||||||
* Visit a ~GeoMarker tiddler and use the "Call ~TravelTime" button to calculate an isochrone from that location using the ~TravelTime API
|
* Visit a ~GeoMarker tiddler and use the "Call ~TravelTime" button to calculate an isochrone from that location using the ~TravelTime API
|
||||||
|
|
||||||
! Map Showing All Layers and Markers
|
! Map Showing All Features and Markers
|
||||||
|
|
||||||
<$geomap
|
<$geomap
|
||||||
markers="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]"
|
markers="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]"
|
||||||
layers="[all[tiddlers+shadows]tag[$:/tags/GeoLayer]]"
|
features="[all[tiddlers+shadows]tag[$:/tags/GeoFeature]]"
|
||||||
state=<<qualify "$:/state/demo-map">>
|
state=<<qualify "$:/state/demo-map">>
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
@ -1,14 +0,0 @@
|
|||||||
title: GeoLayers
|
|
||||||
tags: $:/tags/GeospatialDemo
|
|
||||||
|
|
||||||
This is a list of all the tiddlers containing ~GeoJSON layers in this wiki (identified by the tag <<tag "$:/tags/GeoLayer">>). A ~GeoJSON layer identifies a region of the surface of the earth via a series of polygons defined as lines between consecutive points specified via latitude and longitude (and optional altitude). ~GeoJSON layers may also contain associated metadata in JSON format.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoLayer]sort[caption]]">
|
|
||||||
<li>
|
|
||||||
<$link>
|
|
||||||
<$view field="caption"><$view field="title"/></$view>
|
|
||||||
</$link>
|
|
||||||
</li>
|
|
||||||
</$list>
|
|
||||||
</ul>
|
|
@ -2,5 +2,5 @@ title: $:/plugins/geospatial/demo/ViewTemplateBodyFilters
|
|||||||
tags: $:/tags/ViewTemplateBodyFilter
|
tags: $:/tags/ViewTemplateBodyFilter
|
||||||
list-before: $:/config/ViewTemplateBodyFilters/stylesheet
|
list-before: $:/config/ViewTemplateBodyFilters/stylesheet
|
||||||
|
|
||||||
[tag[$:/tags/GeoLayer]then[ui/geolayer]]
|
[tag[$:/tags/GeoFeature]then[ui/geofeature]]
|
||||||
[tag[$:/tags/GeoMarker]then[ui/geomarker]]
|
[tag[$:/tags/GeoMarker]then[ui/geomarker]]
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
title: $:/geospatialdemo/features/canada-census-subdivision-millesime
|
title: $:/geospatialdemo/features/canada-census-subdivision-millesime
|
||||||
caption: Canada Census Subdivisions Millesime
|
caption: Canada Census Subdivisions Millesime
|
||||||
type: application/json
|
type: application/json
|
||||||
tags: $:/tags/GeoLayer
|
tags: $:/tags/GeoFeature
|
||||||
color: #f8f
|
color: #f8f
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
title: $:/geospatialdemo/features/us-states
|
title: $:/geospatialdemo/features/us-states
|
||||||
caption: US State Boundaries
|
caption: US State Boundaries
|
||||||
type: application/json
|
type: application/json
|
||||||
tags: $:/tags/GeoLayer
|
tags: $:/tags/GeoFeature
|
||||||
color: #88f
|
color: #88f
|
||||||
|
38
editions/geospatialdemo/tiddlers/ui/geofeature.tid
Normal file
38
editions/geospatialdemo/tiddlers/ui/geofeature.tid
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
title: ui/geofeature
|
||||||
|
|
||||||
|
\define create-intersection()
|
||||||
|
<$let
|
||||||
|
intersectLayer={{{ =[<currentTiddler>get[text]] =[<otherFeature>get[text]] +[geointersect[]] }}}
|
||||||
|
>
|
||||||
|
<$action-createtiddler $basetitle="$:/temp/_IsochroneLayer" text={{{ [<intersectLayer>] }}} tags="$:/tags/GeoFeature" caption={{{ [<captionThisFeature>addsuffix[ intersected with ]addsuffix<captionOtherFeature>] }}}/>
|
||||||
|
</$let>
|
||||||
|
\end
|
||||||
|
|
||||||
|
!! Mapped
|
||||||
|
|
||||||
|
|
||||||
|
<$geomap
|
||||||
|
features="[<currentTiddler>]"
|
||||||
|
state=<<qualify "$:/state/demo-map">>
|
||||||
|
/>
|
||||||
|
|
||||||
|
!! Intersect with other features
|
||||||
|
|
||||||
|
<$let
|
||||||
|
captionThisFeature={{{ [<currentTiddler>get[caption]else<currentTiddler>] }}}
|
||||||
|
>
|
||||||
|
<ul>
|
||||||
|
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoFeature]sort[caption]] -[<currentTiddler>]" variable="otherFeature">
|
||||||
|
<$let
|
||||||
|
captionOtherFeature={{{ [<otherFeature>get[caption]else<otherFeature>] }}}
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
<$link to=<<otherFeature>>><$transclude tiddler=<<otherFeature>> field="caption"><$view tiddler=<<otherFeature>> field="title"/></$transclude></$link>
|
||||||
|
<$button actions=<<create-intersection>>>
|
||||||
|
Create intersection
|
||||||
|
</$button>
|
||||||
|
</li>
|
||||||
|
</$let>
|
||||||
|
</$list>
|
||||||
|
</ul>
|
||||||
|
</$let>
|
@ -1,38 +0,0 @@
|
|||||||
title: ui/geolayer
|
|
||||||
|
|
||||||
\define create-intersection()
|
|
||||||
<$let
|
|
||||||
intersectLayer={{{ =[<currentTiddler>get[text]] =[<otherLayer>get[text]] +[geointersect[]] }}}
|
|
||||||
>
|
|
||||||
<$action-createtiddler $basetitle="$:/temp/_IsochroneLayer" text={{{ [<intersectLayer>] }}} tags="$:/tags/GeoLayer" caption={{{ [<captionThisLayer>addsuffix[ intersected with ]addsuffix<captionOtherLayer>] }}}/>
|
|
||||||
</$let>
|
|
||||||
\end
|
|
||||||
|
|
||||||
!! Mapped
|
|
||||||
|
|
||||||
|
|
||||||
<$geomap
|
|
||||||
layers="[<currentTiddler>]"
|
|
||||||
state=<<qualify "$:/state/demo-map">>
|
|
||||||
/>
|
|
||||||
|
|
||||||
!! Intersect with other layers
|
|
||||||
|
|
||||||
<$let
|
|
||||||
captionThisLayer={{{ [<currentTiddler>get[caption]else<currentTiddler>] }}}
|
|
||||||
>
|
|
||||||
<ul>
|
|
||||||
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoLayer]sort[caption]] -[<currentTiddler>]" variable="otherLayer">
|
|
||||||
<$let
|
|
||||||
captionOtherLayer={{{ [<otherLayer>get[caption]else<otherLayer>] }}}
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<$link to=<<otherLayer>>><$transclude tiddler=<<otherLayer>> field="caption"><$view tiddler=<<otherLayer>> field="title"/></$transclude></$link>
|
|
||||||
<$button actions=<<create-intersection>>>
|
|
||||||
Create intersection
|
|
||||||
</$button>
|
|
||||||
</li>
|
|
||||||
</$let>
|
|
||||||
</$list>
|
|
||||||
</ul>
|
|
||||||
</$let>
|
|
@ -10,7 +10,7 @@ title: ui/geomarker
|
|||||||
<$action-setfield $tiddler="$:/temp/_Result" text=<<data>>/>
|
<$action-setfield $tiddler="$:/temp/_Result" text=<<data>>/>
|
||||||
<$action-setfield $tiddler="$:/temp/_Headers" text=<<headers>>/>
|
<$action-setfield $tiddler="$:/temp/_Headers" text=<<headers>>/>
|
||||||
<$list filter="[<status>compare:number:gteq[200]compare:number:lteq[299]]" variable="ignore">
|
<$list filter="[<status>compare:number:gteq[200]compare:number:lteq[299]]" variable="ignore">
|
||||||
<$action-createtiddler $basetitle="$:/temp/_IsochroneLayer" text={{{ [<data>] }}} tags="$:/tags/GeoLayer" caption={{{ [<currentTiddler>get[caption]else<currentTiddler>addprefix[Travel time from ]] }}}/>
|
<$action-createtiddler $basetitle="$:/temp/_IsochroneLayer" text={{{ [<data>] }}} tags="$:/tags/GeoFeature" caption={{{ [<currentTiddler>get[caption]else<currentTiddler>addprefix[Travel time from ]] }}}/>
|
||||||
</$list>
|
</$list>
|
||||||
\end
|
\end
|
||||||
|
|
||||||
@ -88,13 +88,13 @@ title: ui/geomarker
|
|||||||
</ul>
|
</ul>
|
||||||
</$let>
|
</$let>
|
||||||
|
|
||||||
!! GeoLayer Lookups
|
!! GeoFeature Lookups
|
||||||
|
|
||||||
<$let
|
<$let
|
||||||
thisLocation={{{ [geopoint{!!long},{!!lat}] }}}
|
thisLocation={{{ [geopoint{!!long},{!!lat}] }}}
|
||||||
>
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoLayer]sort[caption]]">
|
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoFeature]sort[caption]]">
|
||||||
<li>
|
<li>
|
||||||
<$text text={{{ [<currentTiddler>get[caption]] :else[<currentTiddler>] }}}/> --
|
<$text text={{{ [<currentTiddler>get[caption]] :else[<currentTiddler>] }}}/> --
|
||||||
<$text text={{{ [<thisLocation>geolookup{!!text}] }}}/>
|
<$text text={{{ [<thisLocation>geolookup{!!text}] }}}/>
|
||||||
|
@ -54,11 +54,11 @@ The following attributes are supported:
|
|||||||
<$testcase>
|
<$testcase>
|
||||||
<$data
|
<$data
|
||||||
title="Description"
|
title="Description"
|
||||||
text="Map with geolayer"
|
text="Map with geofeature"
|
||||||
/>
|
/>
|
||||||
<$data
|
<$data
|
||||||
title="Layer"
|
title="Layer"
|
||||||
tags="$:/tags/GeoLayer"
|
tags="$:/tags/GeoFeature"
|
||||||
type="application/json"
|
type="application/json"
|
||||||
color="red"
|
color="red"
|
||||||
text="""{
|
text="""{
|
||||||
@ -66,7 +66,7 @@ The following attributes are supported:
|
|||||||
"features": [
|
"features": [
|
||||||
{
|
{
|
||||||
"type": "Feature",
|
"type": "Feature",
|
||||||
"id": "An example geolayer feature",
|
"id": "An example geofeature feature",
|
||||||
"properties": {
|
"properties": {
|
||||||
"custom": "A custom property of this feature"
|
"custom": "A custom property of this feature"
|
||||||
},
|
},
|
||||||
@ -87,7 +87,7 @@ The following attributes are supported:
|
|||||||
}"""/>
|
}"""/>
|
||||||
<$data title="Output" text="""<$geomap
|
<$data title="Output" text="""<$geomap
|
||||||
state=<<qualify "$:/state/demo-map">>
|
state=<<qualify "$:/state/demo-map">>
|
||||||
layers="[all[tiddlers+shadows]tag[$:/tags/GeoLayer]]"
|
features="[all[tiddlers+shadows]tag[$:/tags/GeoFeature]]"
|
||||||
/>
|
/>
|
||||||
"""/>
|
"""/>
|
||||||
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
|
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
|
||||||
|
@ -71,7 +71,7 @@ GeomapWidget.prototype.renderMap = function(domNode) {
|
|||||||
});
|
});
|
||||||
// Add scale
|
// Add scale
|
||||||
$tw.Leaflet.control.scale().addTo(this.map);
|
$tw.Leaflet.control.scale().addTo(this.map);
|
||||||
// Listen for pan and zoom events
|
// Listen for pan and zoom events and update the state tiddler
|
||||||
this.map.on("moveend zoomend",function(event) {
|
this.map.on("moveend zoomend",function(event) {
|
||||||
if(self.geomapStateTitle) {
|
if(self.geomapStateTitle) {
|
||||||
var c = self.map.getCenter(),
|
var c = self.map.getCenter(),
|
||||||
@ -79,6 +79,7 @@ GeomapWidget.prototype.renderMap = function(domNode) {
|
|||||||
long = "" + c.lng,
|
long = "" + c.lng,
|
||||||
zoom = "" + self.map.getZoom(),
|
zoom = "" + self.map.getZoom(),
|
||||||
tiddler = self.wiki.getTiddler(self.geomapStateTitle);
|
tiddler = self.wiki.getTiddler(self.geomapStateTitle);
|
||||||
|
// Only write the tiddler if the values have changed
|
||||||
if(!tiddler || tiddler.fields.lat !== lat || tiddler.fields.long !== long || tiddler.fields.zoom !== zoom) {
|
if(!tiddler || tiddler.fields.lat !== lat || tiddler.fields.long !== long || tiddler.fields.zoom !== zoom) {
|
||||||
self.wiki.addTiddler(new $tw.Tiddler({
|
self.wiki.addTiddler(new $tw.Tiddler({
|
||||||
title: self.geomapStateTitle,
|
title: self.geomapStateTitle,
|
||||||
@ -89,19 +90,25 @@ GeomapWidget.prototype.renderMap = function(domNode) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// Track the geolayers filter
|
// Track the geofeatures filter
|
||||||
this.trackerGeoLayersFilter = new FilterTracker({
|
this.trackerGeoFeaturesFilter = new FilterTracker({
|
||||||
wiki: this.wiki,
|
wiki: this.wiki,
|
||||||
widget: this,
|
widget: this,
|
||||||
filter: this.geomapLayerFilter,
|
filter: this.geomapFeaturesFilter,
|
||||||
enter: function(title,tiddler) {
|
enter: function(title,tiddler) {
|
||||||
var text = (tiddler && tiddler.fields.text) || "[]",
|
var text = (tiddler && tiddler.fields.text) || "[]",
|
||||||
layer = $tw.Leaflet.geoJSON($tw.utils.parseJSONSafe(text,[]),{
|
geoJson = $tw.utils.parseJSONSafe(text,[]),
|
||||||
|
layer = $tw.Leaflet.geoJSON(geoJson,{
|
||||||
style: function(geoJsonFeature) {
|
style: function(geoJsonFeature) {
|
||||||
return {
|
return {
|
||||||
color: (tiddler && tiddler.getFieldString("color")) || "yellow"
|
color: (tiddler && tiddler.getFieldString("color")) || "yellow"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
pointToLayer: function(geoJsonPoint,latlng) {
|
||||||
|
return L.circleMarker(latlng,{
|
||||||
|
radius: 8
|
||||||
|
});
|
||||||
|
},
|
||||||
onEachFeature: function(feature,layer) {
|
onEachFeature: function(feature,layer) {
|
||||||
if(feature.properties) {
|
if(feature.properties) {
|
||||||
layer.bindPopup(JSON.stringify(feature.properties,null,4));
|
layer.bindPopup(JSON.stringify(feature.properties,null,4));
|
||||||
@ -162,8 +169,8 @@ Compute the internal state of the widget
|
|||||||
*/
|
*/
|
||||||
GeomapWidget.prototype.execute = function() {
|
GeomapWidget.prototype.execute = function() {
|
||||||
this.geomapStateTitle = this.getAttribute("state");
|
this.geomapStateTitle = this.getAttribute("state");
|
||||||
this.geomapLayerFilter = this.getAttribute("layers");
|
|
||||||
this.geomapMarkerFilter = this.getAttribute("markers");
|
this.geomapMarkerFilter = this.getAttribute("markers");
|
||||||
|
this.geomapFeaturesFilter = this.getAttribute("features");
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -172,7 +179,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
|
|||||||
GeomapWidget.prototype.refresh = function(changedTiddlers) {
|
GeomapWidget.prototype.refresh = function(changedTiddlers) {
|
||||||
var changedAttributes = this.computeAttributes();
|
var changedAttributes = this.computeAttributes();
|
||||||
// Refresh entire widget if layers or marker filter changes
|
// Refresh entire widget if layers or marker filter changes
|
||||||
if(changedAttributes.layers || changedAttributes.markers || changedAttributes.state) {
|
if(changedAttributes.features || changedAttributes.markers || changedAttributes.state) {
|
||||||
this.refreshSelf();
|
this.refreshSelf();
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@ -184,7 +191,7 @@ GeomapWidget.prototype.refresh = function(changedTiddlers) {
|
|||||||
this.setMapView();
|
this.setMapView();
|
||||||
}
|
}
|
||||||
// Check whether the layers or markers need updating
|
// Check whether the layers or markers need updating
|
||||||
this.trackerGeoLayersFilter.refresh(changedTiddlers);
|
this.trackerGeoFeaturesFilter.refresh(changedTiddlers);
|
||||||
this.trackerGeoMarkersFilter.refresh(changedTiddlers);
|
this.trackerGeoMarkersFilter.refresh(changedTiddlers);
|
||||||
// No children to refresh
|
// No children to refresh
|
||||||
return false;
|
return false;
|
||||||
|
Loading…
Reference in New Issue
Block a user