1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-26 10:00:34 +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
* 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
* 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
! Map Showing All Layers and Markers
! Map Showing All Features and Markers
<$geomap
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">>
/>

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
list-before: $:/config/ViewTemplateBodyFilters/stylesheet
[tag[$:/tags/GeoLayer]then[ui/geolayer]]
[tag[$:/tags/GeoFeature]then[ui/geofeature]]
[tag[$:/tags/GeoMarker]then[ui/geomarker]]

View File

@ -1,5 +1,5 @@
title: $:/geospatialdemo/features/canada-census-subdivision-millesime
caption: Canada Census Subdivisions Millesime
type: application/json
tags: $:/tags/GeoLayer
tags: $:/tags/GeoFeature
color: #f8f

View File

@ -1,5 +1,5 @@
title: $:/geospatialdemo/features/us-states
caption: US State Boundaries
type: application/json
tags: $:/tags/GeoLayer
tags: $:/tags/GeoFeature
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/_Headers" text=<<headers>>/>
<$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>
\end
@ -88,13 +88,13 @@ title: ui/geomarker
</ul>
</$let>
!! GeoLayer Lookups
!! GeoFeature Lookups
<$let
thisLocation={{{ [geopoint{!!long},{!!lat}] }}}
>
<ul>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoLayer]sort[caption]]">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoFeature]sort[caption]]">
<li>
<$text text={{{ [<currentTiddler>get[caption]] :else[<currentTiddler>] }}}/> --
<$text text={{{ [<thisLocation>geolookup{!!text}] }}}/>

View File

@ -54,11 +54,11 @@ The following attributes are supported:
<$testcase>
<$data
title="Description"
text="Map with geolayer"
text="Map with geofeature"
/>
<$data
title="Layer"
tags="$:/tags/GeoLayer"
tags="$:/tags/GeoFeature"
type="application/json"
color="red"
text="""{
@ -66,7 +66,7 @@ The following attributes are supported:
"features": [
{
"type": "Feature",
"id": "An example geolayer feature",
"id": "An example geofeature feature",
"properties": {
"custom": "A custom property of this feature"
},
@ -87,7 +87,7 @@ The following attributes are supported:
}"""/>
<$data title="Output" text="""<$geomap
state=<<qualify "$:/state/demo-map">>
layers="[all[tiddlers+shadows]tag[$:/tags/GeoLayer]]"
features="[all[tiddlers+shadows]tag[$:/tags/GeoFeature]]"
/>
"""/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>

View File

@ -71,7 +71,7 @@ GeomapWidget.prototype.renderMap = function(domNode) {
});
// Add scale
$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) {
if(self.geomapStateTitle) {
var c = self.map.getCenter(),
@ -79,6 +79,7 @@ GeomapWidget.prototype.renderMap = function(domNode) {
long = "" + c.lng,
zoom = "" + self.map.getZoom(),
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) {
self.wiki.addTiddler(new $tw.Tiddler({
title: self.geomapStateTitle,
@ -89,19 +90,25 @@ GeomapWidget.prototype.renderMap = function(domNode) {
}
}
});
// Track the geolayers filter
this.trackerGeoLayersFilter = new FilterTracker({
// Track the geofeatures filter
this.trackerGeoFeaturesFilter = new FilterTracker({
wiki: this.wiki,
widget: this,
filter: this.geomapLayerFilter,
filter: this.geomapFeaturesFilter,
enter: function(title,tiddler) {
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) {
return {
color: (tiddler && tiddler.getFieldString("color")) || "yellow"
}
},
pointToLayer: function(geoJsonPoint,latlng) {
return L.circleMarker(latlng,{
radius: 8
});
},
onEachFeature: function(feature,layer) {
if(feature.properties) {
layer.bindPopup(JSON.stringify(feature.properties,null,4));
@ -162,8 +169,8 @@ Compute the internal state of the widget
*/
GeomapWidget.prototype.execute = function() {
this.geomapStateTitle = this.getAttribute("state");
this.geomapLayerFilter = this.getAttribute("layers");
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) {
var changedAttributes = this.computeAttributes();
// 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();
return true;
}
@ -184,7 +191,7 @@ GeomapWidget.prototype.refresh = function(changedTiddlers) {
this.setMapView();
}
// Check whether the layers or markers need updating
this.trackerGeoLayersFilter.refresh(changedTiddlers);
this.trackerGeoFeaturesFilter.refresh(changedTiddlers);
this.trackerGeoMarkersFilter.refresh(changedTiddlers);
// No children to refresh
return false;