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
|
||||
|
||||
* 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">>
|
||||
/>
|
||||
|
||||
|
@ -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
|
||||
list-before: $:/config/ViewTemplateBodyFilters/stylesheet
|
||||
|
||||
[tag[$:/tags/GeoLayer]then[ui/geolayer]]
|
||||
[tag[$:/tags/GeoFeature]then[ui/geofeature]]
|
||||
[tag[$:/tags/GeoMarker]then[ui/geomarker]]
|
||||
|
@ -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
|
||||
|
@ -1,5 +1,5 @@
|
||||
title: $:/geospatialdemo/features/us-states
|
||||
caption: US State Boundaries
|
||||
type: application/json
|
||||
tags: $:/tags/GeoLayer
|
||||
tags: $:/tags/GeoFeature
|
||||
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/_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}] }}}/>
|
||||
|
@ -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"/>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user