1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-09-29 23:40:45 +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:
jeremy@jermolene.com 2023-04-25 17:27:17 +01:00
parent e6b9bac236
commit 546e55dcde
11 changed files with 80 additions and 73 deletions

View 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>

View File

@ -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">>
/> />

View File

@ -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>

View File

@ -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]]

View File

@ -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

View File

@ -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

View 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>

View File

@ -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>

View File

@ -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}] }}}/>

View File

@ -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"/>

View File

@ -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;