mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-30 05:19:57 +00:00
Geospatial Plugin: Support for custom popups (#8404)
* Allow width, height and maxZoom to be specified * Add images to city marker tiddlers * Initial support for custom popups * Custom popup templates for the US and Canadian example data * Popups should use the geomap as their parent widget This lets root widget messages work * Typo in default popup template * Clean up the use of popup templates * Allow GeoJSON features to be hidden via a checkbox * Popup template for volcano dataset * Add Natural Earth country data * Optimise marker SVG
This commit is contained in:
Jeremy Ruston
GitHub
parent
acb2602d78
commit
b1cd1306ef
@ -4,11 +4,17 @@ 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>
|
||||
<$transclude field="caption"><$view field="title"/></$view>
|
||||
</$link>
|
||||
</li>
|
||||
</$list>
|
||||
<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoFeature]sort[caption]]">
|
||||
<li>
|
||||
<$checkbox
|
||||
tiddler={{{ [[$:/config/GeospatialDemo/FeatureVisibility/]addsuffix<currentTiddler>] }}}
|
||||
field="text" checked="show" unchecked="hide" default="show"
|
||||
>
|
||||
<<lingo Description>>
|
||||
</$checkbox>
|
||||
<$link>
|
||||
<$transclude field="caption"><$view field="title"/></$view>
|
||||
</$link>
|
||||
</li>
|
||||
</$list>
|
||||
</ul>
|
||||
|
||||
@ -27,11 +27,12 @@ This demo requires that the API keys needed to access external services be obtai
|
||||
<$geobaselayer title=<<currentTiddler>>/>
|
||||
</$list>
|
||||
<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]">
|
||||
<$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}} name={{!!caption}}/>
|
||||
<$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}} name={{!!caption}} properties={{{ [[{}]jsonset[title],<currentTiddler>] }}}
|
||||
popupTemplate="ui/PopupTemplate"/>
|
||||
</$list>
|
||||
<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoFeature]]">
|
||||
<$geolayer json={{!!text}} color={{!!color}} name={{!!caption}}/>
|
||||
<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoFeature]] :filter[[$:/config/GeospatialDemo/FeatureVisibility/]addsuffix<currentTiddler>get[text]else[show]match[show]]">
|
||||
<$geolayer json={{!!text}} color={{!!color}} name={{!!caption}} popupTemplate={{!!popup-template}}/>
|
||||
</$list>
|
||||
</$geomap>
|
||||
|
||||
<<tabs tabsList:"[all[tiddlers+shadows]tag[$:/tags/GeospatialDemo]]" default:"GeoMarkers">>
|
||||
<<tabs tabsList:"[all[tiddlers+shadows]tag[$:/tags/GeospatialDemo]]" default:"GeoFeatures">>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
@ -0,0 +1,3 @@
|
||||
title: cities/LimehouseTownHall/image
|
||||
type: image/jpeg
|
||||
tags: $:/tags/Demo/Cities
|
||||
@ -1,9 +1,11 @@
|
||||
title: cities/LimehouseTownHall
|
||||
tags: $:/tags/GeoMarker
|
||||
tags: $:/tags/GeoMarker $:/tags/Demo/Cities
|
||||
caption: Limehouse Town Hall
|
||||
lat: 51.51216651476898
|
||||
long: -0.03138562132137639
|
||||
alt: 0
|
||||
|
||||
{{cities/LimehouseTownHall/image}}
|
||||
|
||||
This is Limehouse Town Hall!
|
||||
|
||||
|
||||
BIN
editions/geospatialdemo/tiddlers/cities/Motovun-image.jpeg
Normal file
BIN
editions/geospatialdemo/tiddlers/cities/Motovun-image.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@ -0,0 +1,3 @@
|
||||
title: cities/Motovun/image
|
||||
type: image/jpeg
|
||||
tags: $:/tags/Demo/Cities
|
||||
@ -1,9 +1,11 @@
|
||||
title: cities/Motovun
|
||||
tags: $:/tags/GeoMarker
|
||||
tags: $:/tags/GeoMarker $:/tags/Demo/Cities
|
||||
icon: Motovun Jack.svg
|
||||
caption: Motovun
|
||||
lat: 45.336453407749225
|
||||
long: 13.828231379455806
|
||||
alt: 0
|
||||
|
||||
{{cities/Motovun/image}}
|
||||
|
||||
This is Motovun!
|
||||
|
||||
BIN
editions/geospatialdemo/tiddlers/cities/NewYork-image.jpeg
Normal file
BIN
editions/geospatialdemo/tiddlers/cities/NewYork-image.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
@ -0,0 +1,3 @@
|
||||
title: cities/NewYork/image
|
||||
type: image/jpeg
|
||||
tags: $:/tags/Demo/Cities
|
||||
@ -1,8 +1,10 @@
|
||||
title: cities/NewYork
|
||||
tags: $:/tags/GeoMarker
|
||||
tags: $:/tags/GeoMarker $:/tags/Demo/Cities
|
||||
caption: New York
|
||||
lat: 40.712778
|
||||
long: -74.006111
|
||||
alt: 0
|
||||
|
||||
{{cities/NewYork/image}}
|
||||
|
||||
This is New York!
|
||||
|
||||
BIN
editions/geospatialdemo/tiddlers/cities/Oxford-image.jpeg
Normal file
BIN
editions/geospatialdemo/tiddlers/cities/Oxford-image.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
@ -0,0 +1,3 @@
|
||||
title: cities/Oxford/image
|
||||
type: image/jpeg
|
||||
tags: $:/tags/Demo/Cities
|
||||
@ -1,8 +1,10 @@
|
||||
title: cities/Oxford
|
||||
tags: $:/tags/GeoMarker
|
||||
tags: $:/tags/GeoMarker $:/tags/Demo/Cities
|
||||
caption: Oxford
|
||||
lat: 51.751944
|
||||
long: -1.257778
|
||||
alt: 0
|
||||
|
||||
{{cities/Oxford/image}}
|
||||
|
||||
This is Oxford!
|
||||
|
||||
BIN
editions/geospatialdemo/tiddlers/cities/Toronto-image.jpeg
Normal file
BIN
editions/geospatialdemo/tiddlers/cities/Toronto-image.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@ -0,0 +1,3 @@
|
||||
title: cities/Toronto/image
|
||||
type: image/jpeg
|
||||
tags: $:/tags/Demo/Cities
|
||||
@ -1,8 +1,10 @@
|
||||
title: cities/Toronto
|
||||
tags: $:/tags/GeoMarker
|
||||
tags: $:/tags/GeoMarker $:/tags/Demo/Cities
|
||||
caption: Toronto
|
||||
lat: 43.651070
|
||||
long: -79.347015
|
||||
alt: 0
|
||||
|
||||
{{cities/Toronto/image}}
|
||||
|
||||
This is Toronto!
|
||||
|
||||
BIN
editions/geospatialdemo/tiddlers/cities/Winchester-image.jpeg
Normal file
BIN
editions/geospatialdemo/tiddlers/cities/Winchester-image.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@ -0,0 +1,3 @@
|
||||
title: cities/Winchester/image
|
||||
type: image/jpeg
|
||||
tags: $:/tags/Demo/Cities
|
||||
@ -1,8 +1,10 @@
|
||||
title: cities/Winchester
|
||||
tags: $:/tags/GeoMarker
|
||||
tags: $:/tags/GeoMarker $:/tags/Demo/Cities
|
||||
caption: Winchester
|
||||
lat: 51.0632
|
||||
long: -1.308
|
||||
alt: 0
|
||||
|
||||
{{cities/Winchester/image}}
|
||||
|
||||
This is Winchester!
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
title: $:/config/GeospatialDemo/FeatureVisibility/$:/
|
||||
|
||||
geospatialdemo/features/harvard-volcanoes-of-the-world: hide
|
||||
geospatialdemo/features/natural-earth-countries-low-res: hide
|
||||
@ -0,0 +1,12 @@
|
||||
title: $:/geospatialdemo/features/canada-census-subdivision-millesime/popupTemplate
|
||||
|
||||
!!! Canadian Census Subdivision Boundary
|
||||
|
||||
|!Field |!English |!French |
|
||||
|Year |<$text text={{{ [<feature>jsonget[properties],[year]] }}}/> |<|
|
||||
|Province Code |<$text text={{{ [<feature>jsonget[properties],[prov_code]join[,]] }}}/> |<|
|
||||
|Province Name |<$text text={{{ [<feature>jsonget[properties],[prov_name_en]join[,]] }}}/> |<$text text={{{ [<feature>jsonget[properties],[prov_name_fr]join[,]] }}}/> |
|
||||
|Census Division Code |<$text text={{{ [<feature>jsonget[properties],[cd_code]join[,]] }}}/> |<|
|
||||
|Census Division Name |<$text text={{{ [<feature>jsonget[properties],[cd_name_en]join[,]] }}}/> |<$text text={{{ [<feature>jsonget[properties],[cd_name_fr]join[,]] }}}/> |
|
||||
|Census Subdivision Code |<$text text={{{ [<feature>jsonget[properties],[csd_area_code]join[,]] }}}/> |<|
|
||||
|Census Subdivision Name |<$text text={{{ [<feature>jsonget[properties],[csd_name_en]join[,]] }}}/> |<$text text={{{ [<feature>jsonget[properties],[csd_name_fr]join[,]] }}}/> |
|
||||
@ -3,3 +3,4 @@ caption: Canada Census Subdivisions Millesime
|
||||
type: application/json
|
||||
tags: $:/tags/GeoFeature
|
||||
color: #f8f
|
||||
popup-template: $:/geospatialdemo/features/canada-census-subdivision-millesime/popupTemplate
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
title: $:/geospatialdemo/features/harvard-volcanoes-of-the-world/popupTemplate
|
||||
|
||||
!!! Harvard Volcanoes of the World
|
||||
|
||||
|Number |<$text text={{{ [<feature>jsonget[properties],[NUMBER_]] }}}/> |
|
||||
|Name |<$text text={{{ [<feature>jsonget[properties],[NAME_]] }}}/> |
|
||||
|Location |<$text text={{{ [<feature>jsonget[properties],[LOCATION]] }}}/> |
|
||||
|Type |<$text text={{{ [<feature>jsonget[properties],[TYPE_]] }}}/> |
|
||||
|Status |<$text text={{{ [<feature>jsonget[properties],[STATUS]] }}}/> |
|
||||
|Time Frame |<$text text={{{ [<feature>jsonget[properties],[TIME_FRAME]] }}}/> |
|
||||
@ -1,5 +1,6 @@
|
||||
title: $:/geospatialdemo/features/harvard-volcanoes-of-the-world
|
||||
caption: Harvard Volcanoes of the World
|
||||
type: application/json
|
||||
tags: $:/tags/GeoFeature/Hidden
|
||||
tags: $:/tags/GeoFeature
|
||||
color: #f88
|
||||
popup-template: $:/geospatialdemo/features/harvard-volcanoes-of-the-world/popupTemplate
|
||||
@ -0,0 +1,32 @@
|
||||
title: $:/geospatialdemo/features/natural-earth-countries-low-res/popupTemplate
|
||||
|
||||
!!! Countries of the World from Natural Earth
|
||||
|
||||
''<$text text={{{ [<feature>jsonget[properties],[name_en]] }}}/>'' (<$text text={{{ [<feature>jsonget[properties],[formal_en]] }}}/>)
|
||||
|
||||
<div style=`height: 10em; overflow: scroll;`>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Field
|
||||
</th>
|
||||
<th>
|
||||
Value
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<$list filter="[<feature>jsonindexes[properties]]">
|
||||
<tr>
|
||||
<td>
|
||||
<$text text=<<currentTiddler>>/>
|
||||
</td>
|
||||
<td>
|
||||
<$text text={{{ [<feature>jsonget[properties],<currentTiddler>] }}}/>
|
||||
</td>
|
||||
</tr>
|
||||
</$list>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@
|
||||
title: $:/geospatialdemo/features/natural-earth-countries-low-res
|
||||
caption: Countries of the World from Natural Earth
|
||||
type: application/json
|
||||
tags: $:/tags/GeoFeature
|
||||
color: #88f
|
||||
popup-template: $:/geospatialdemo/features/natural-earth-countries-low-res/popupTemplate
|
||||
@ -0,0 +1,6 @@
|
||||
title: $:/geospatialdemo/features/us-states/popupTemplate
|
||||
|
||||
!!! US State Boundary
|
||||
|
||||
|State |<$text text={{{ [<feature>jsonget[properties],[name]] }}}/> |
|
||||
|Population Density |<$text text={{{ [<feature>jsonget[properties],[density]] }}}/> |
|
||||
@ -3,3 +3,4 @@ caption: US State Boundaries
|
||||
type: application/json
|
||||
tags: $:/tags/GeoFeature
|
||||
color: #88f
|
||||
popup-template: $:/geospatialdemo/features/us-states/popupTemplate
|
||||
@ -14,7 +14,7 @@ title: ui/geofeature
|
||||
state=<<qualify "$:/state/demo-map">>
|
||||
startPosition="bounds"
|
||||
>
|
||||
<$geolayer json={{!!text}} color={{!!color}}/>
|
||||
<$geolayer json={{!!text}} color={{!!color}} popupTemplate={{!!popup-template}}/>
|
||||
</$geomap>
|
||||
|
||||
!! Intersect with other features
|
||||
|
||||
@ -67,7 +67,7 @@ title: ui/geomarker
|
||||
state=<<qualify "$:/state/demo-map">>
|
||||
startPosition="bounds"
|
||||
>
|
||||
<$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}}/>
|
||||
<$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}} properties={{{ [[{}]jsonset[title],<currentTiddler>] }}} popupTemplate="ui/PopupTemplate"/>
|
||||
</$geomap>
|
||||
|
||||
!! Distance to other markers
|
||||
|
||||
9
editions/geospatialdemo/tiddlers/ui/popuptemplate.tid
Normal file
9
editions/geospatialdemo/tiddlers/ui/popuptemplate.tid
Normal file
@ -0,0 +1,9 @@
|
||||
title: ui/PopupTemplate
|
||||
|
||||
<div width="300px">
|
||||
<$let currentTiddler={{{ [<feature>jsonget[properties],[title]] }}}>
|
||||
<$link><$text text=<<currentTiddler>>/></$link>
|
||||
<!-- <$codeblock code={{{ [<feature>] }}}/> -->
|
||||
<$transclude $tiddler=<<currentTiddler>> $mode="block"/>
|
||||
</$let>
|
||||
</div>
|
||||
@ -17,8 +17,10 @@ The following attributes are supported:
|
||||
|''alt'' |Optional altitude of marker if json attribute missing |
|
||||
|''draggable'' |Set to "yes" to make the marker draggable |
|
||||
|''updateActions'' |Optional actions when the marker is dragged other otherwise modified. The variables ''lat'' and ''long'' contain the new coordinates of the marker |
|
||||
|''properties'' |<<.from-version "5.3.6">> Optional JSON properties to be attached to the marker (only supported for non-JSON layers) |
|
||||
|''popupTemplate'' |<<.from-version "5.3.6">> Optional template to be used for popups. The template is rendered with the variable ''feature'' containing the JSON text of the feature |
|
||||
|
||||
Note that the `<$geolayer>` widget can be used in one of two modes:
|
||||
|
||||
* With the ''json'' attibute specifying the layer to be drawn
|
||||
* With the ''lat'', ''long'' and optional ''alt'' attributes specifying a marker to be drawn
|
||||
* With the ''lat'', ''long'' and optional ''alt'' and ''properties'' attributes specifying a marker to be drawn
|
||||
|
||||
@ -9,9 +9,13 @@ The `<$geomap>` widget displays an interactive map using [[Leaflet.js|https://le
|
||||
The following attributes are supported:
|
||||
|
||||
|!Attribute |!Description |
|
||||
|''width'' |<<.from-version "5.3.6">> The width of the map in CSS units (defaults to `100%`) |
|
||||
|''height'' |<<.from-version "5.3.6">> The height of the map in CSS units (defaults to `600px`) |
|
||||
|''state'' |The title of a state tiddler used to track the state of the map in the `zoom`, `long` and `lat` fields |
|
||||
|''startPosition'' |Optional keyword representing the starting position for the map: "world" (the default) shows the entire map, "bounds" zooms to the bounds of the loaded layers |
|
||||
|''layersPanel'' |Optional starting status for the layers panel: "collapsed" (the default) causes the layers panel to initially be shown collapsed, "open" causes the layers panel to initially be shown opened |
|
||||
|''maxZoom'' |<<.from-version "5.3.6">> Optional maximum zoom level, from 1 to the maximum zoom level supported by the background layer |
|
||||
|''popupTemplate'' |<<.from-version "5.3.6">> Optional template to be used for popups. The template is rendered with the variable ''feature'' containing the JSON text of the feature |
|
||||
|
||||
If no base layers are defined by `<$geobaselayer>` widgets within the `<$geomap>` widget then all the available base layers will be loaded by the equivalent of the following code:
|
||||
|
||||
@ -61,6 +65,25 @@ If no base layers are defined by `<$geobaselayer>` widgets within the `<$geomap>
|
||||
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
|
||||
</$testcase>
|
||||
|
||||
<$testcase>
|
||||
<$data
|
||||
title="Description"
|
||||
text="Map with geomarker with popup"
|
||||
/>
|
||||
<$data $filter="[tag[$:/tags/Demo/Cities]sort[title]]"/>
|
||||
<$data title="Output" text="""<$geomap
|
||||
state=<<qualify "$:/state/demo-map">>
|
||||
popupTemplate="ui/PopupTemplate"
|
||||
>
|
||||
<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]">
|
||||
<$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}} properties={{{ [[{}]jsonset[title],<currentTiddler>] }}}/>
|
||||
</$list>
|
||||
</$geomap>
|
||||
"""/>
|
||||
<$data $tiddler="ui/PopupTemplate"/>
|
||||
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
|
||||
</$testcase>
|
||||
|
||||
<$testcase>
|
||||
<$data
|
||||
title="Description"
|
||||
|
||||
@ -1,9 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 365 560">
|
||||
<g>
|
||||
<path fill="#00AEEF" stroke="#000000" stroke-width="5" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9
|
||||
C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8
|
||||
c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365 560"><path fill="#00AEEF" stroke="#000" stroke-width="5" d="M182.9 551.7c0 .1.2.3.2.3s175.2-269 175.2-357.4c0-130.1-88.8-186.7-175.4-186.9C96.3 7.9 7.5 64.5 7.5 194.6 7.5 283 182.8 552 182.8 552l.1-.3zm-60.7-364.5c0-33.6 27.2-60.8 60.8-60.8 33.6 0 60.8 27.2 60.8 60.8S216.5 248 182.9 248c-33.5 0-60.7-27.2-60.7-60.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 645 B After Width: | Height: | Size: 382 B |
@ -0,0 +1,3 @@
|
||||
title: $:/plugins/tiddlywiki/geospatial/templates/default-popup-template
|
||||
|
||||
Feature: <$text text={{{ [<feature>] }}}/>
|
||||
@ -48,8 +48,7 @@ GeomapWidget.prototype.render = function(parent,nextSibling) {
|
||||
this.contentRoot.render(this.contentContainer,null);
|
||||
// Render a wrapper for the map
|
||||
this.domNode = this.document.createElement("div");
|
||||
this.domNode.style.width = "100%";
|
||||
this.domNode.style.height = "600px";
|
||||
this.setMapSize();
|
||||
// Insert it into the DOM
|
||||
parent.insertBefore(this.domNode,nextSibling);
|
||||
this.domNodes.push(this.domNode);
|
||||
@ -63,7 +62,13 @@ GeomapWidget.prototype.render = function(parent,nextSibling) {
|
||||
GeomapWidget.prototype.renderMap = function() {
|
||||
var self = this;
|
||||
// Create the map
|
||||
this.map = $tw.Leaflet.map(this.domNode);
|
||||
var options = {
|
||||
|
||||
};
|
||||
if(this.geomapMaxZoom) {
|
||||
options.maxZoom = $tw.utils.parseInt(this.geomapMaxZoom);
|
||||
}
|
||||
this.map = $tw.Leaflet.map(this.domNode,options);
|
||||
// No layers rendered
|
||||
this.renderedLayers = [];
|
||||
this.baseLayers = [];
|
||||
@ -73,16 +78,17 @@ GeomapWidget.prototype.renderMap = function() {
|
||||
$tw.Leaflet.control.scale().addTo(this.map);
|
||||
// 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(),
|
||||
if(self.hasAttribute("state")) {
|
||||
var stateTitle = self.getAttribute("state"),
|
||||
c = self.map.getCenter(),
|
||||
lat = "" + c.lat,
|
||||
long = "" + c.lng,
|
||||
zoom = "" + self.map.getZoom(),
|
||||
tiddler = self.wiki.getTiddler(self.geomapStateTitle);
|
||||
tiddler = self.wiki.getTiddler(stateTitle);
|
||||
// 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,
|
||||
title: stateTitle,
|
||||
lat: lat,
|
||||
long: long,
|
||||
zoom: zoom
|
||||
@ -161,8 +167,10 @@ GeomapWidget.prototype.refreshMap = function() {
|
||||
});
|
||||
this.map.addLayer(markers);
|
||||
// Process embedded geolayer widgets
|
||||
var defaultPopupTemplateTitle = self.getAttribute("popupTemplate","$:/plugins/tiddlywiki/geospatial/templates/default-popup-template");
|
||||
this.findChildrenDataWidgets(this.contentRoot.children,"geolayer",function(widget) {
|
||||
var jsonText = widget.getAttribute("json"),
|
||||
popupTemplateTitle = widget.getAttribute("popupTemplate",defaultPopupTemplateTitle),
|
||||
geoJson = [];
|
||||
if(jsonText) {
|
||||
// Layer is defined by JSON blob
|
||||
@ -171,7 +179,8 @@ GeomapWidget.prototype.refreshMap = function() {
|
||||
// Layer is defined by lat long fields
|
||||
var lat = $tw.utils.parseNumber(widget.getAttribute("lat","0")),
|
||||
long = $tw.utils.parseNumber(widget.getAttribute("long","0")),
|
||||
alt = $tw.utils.parseNumber(widget.getAttribute("alt","0"));
|
||||
alt = $tw.utils.parseNumber(widget.getAttribute("alt","0")),
|
||||
properties = widget.getAttribute("properties");
|
||||
geoJson = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
@ -184,6 +193,9 @@ GeomapWidget.prototype.refreshMap = function() {
|
||||
}
|
||||
]
|
||||
};
|
||||
if(properties) {
|
||||
geoJson.features[0].properties = $tw.utils.parseJSONSafe(properties);
|
||||
}
|
||||
}
|
||||
var draggable = widget.getAttribute("draggable","no") === "yes",
|
||||
layer = $tw.Leaflet.geoJSON(geoJson,{
|
||||
@ -205,9 +217,23 @@ GeomapWidget.prototype.refreshMap = function() {
|
||||
return marker;
|
||||
},
|
||||
onEachFeature: function(feature,layer) {
|
||||
if(feature.properties) {
|
||||
layer.bindPopup(JSON.stringify(feature.properties,null,4));
|
||||
layer.bindPopup(function() {
|
||||
var widget = self.wiki.makeTranscludeWidget(popupTemplateTitle, {
|
||||
document: self.document,
|
||||
parentWidget: self,
|
||||
parseAsInline: false,
|
||||
importPageMacros: true,
|
||||
variables: {
|
||||
feature: JSON.stringify(feature)
|
||||
}
|
||||
});
|
||||
var container = self.document.createElement("div");
|
||||
widget.render(container,null);
|
||||
self.wiki.addEventListener("change",function(changes) {
|
||||
widget.refresh(changes,container,null);
|
||||
});
|
||||
return container;
|
||||
});
|
||||
}
|
||||
}).addTo(self.map);
|
||||
var name = widget.getAttribute("name") || ("Untitled " + untitledCount++);
|
||||
@ -226,12 +252,12 @@ GeomapWidget.prototype.refreshMap = function() {
|
||||
overlayLayers[layer.name] = layer.layer;
|
||||
});
|
||||
this.layerControl = $tw.Leaflet.control.layers(baseLayers,overlayLayers,{
|
||||
collapsed: this.geomapLayersPanel !== "open"
|
||||
collapsed: this.getAttribute("layersPanel") !== "open"
|
||||
}).addTo(this.map);
|
||||
// Restore the saved map position and zoom level
|
||||
if(!this.setMapView()) {
|
||||
// If there was no saved position then look at the startPosition attribute
|
||||
switch(this.geomapStartPosition) {
|
||||
switch(this.getAttribute("startPosition")) {
|
||||
case "bounds":
|
||||
var bounds = null;
|
||||
$tw.utils.each(this.renderedLayers,function(layer) {
|
||||
@ -259,6 +285,11 @@ GeomapWidget.prototype.refreshMap = function() {
|
||||
Set the map center and zoom level from the values in the state tiddler. Returns true if the map view was successfully set
|
||||
*/
|
||||
GeomapWidget.prototype.setMapView = function() {
|
||||
// Set the maximum zoom level
|
||||
if(this.hasAttribute("maxZoom")) {
|
||||
this.map.setMaxZoom($tw.utils.parseInt(this.getAttribute("maxZoom")));
|
||||
}
|
||||
// Set the view to the content of the state tiddler
|
||||
var stateTiddler = this.geomapStateTitle && this.wiki.getTiddler(this.geomapStateTitle);
|
||||
if(stateTiddler) {
|
||||
this.map.setView([$tw.utils.parseNumber(stateTiddler.fields.lat,0),$tw.utils.parseNumber(stateTiddler.fields.long,0)], $tw.utils.parseNumber(stateTiddler.fields.zoom,0));
|
||||
@ -267,13 +298,15 @@ GeomapWidget.prototype.setMapView = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
GeomapWidget.prototype.setMapSize = function() {
|
||||
this.domNode.style.width = this.getAttribute("width","100%");
|
||||
this.domNode.style.height = this.getAttribute("height","600px");
|
||||
};
|
||||
|
||||
/*
|
||||
Compute the internal state of the widget
|
||||
*/
|
||||
GeomapWidget.prototype.execute = function() {
|
||||
this.geomapStateTitle = this.getAttribute("state");
|
||||
this.geomapStartPosition = this.getAttribute("startPosition");
|
||||
this.geomapLayersPanel = this.getAttribute("layersPanel");
|
||||
};
|
||||
|
||||
/*
|
||||
@ -286,9 +319,12 @@ GeomapWidget.prototype.refresh = function(changedTiddlers) {
|
||||
if(result) {
|
||||
this.refreshMap();
|
||||
} else {
|
||||
// Reset the width and height and max zoom if they have changed
|
||||
if(changedAttributes.width || changedAttributes.height) {
|
||||
this.setMapSize();
|
||||
}
|
||||
// If we're not doing a full refresh, reset the position if the state tiddler has changed
|
||||
if(changedAttributes.state || changedTiddlers[this.geomapStateTitle]) {
|
||||
this.geomapStateTitle = this.getAttribute("state");
|
||||
if(changedAttributes.state || (this.hasAttribute("state") && changedTiddlers[this.getAttribute("state")]) || changedAttributes.maxZoom) {
|
||||
this.setMapView();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user