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

plugins/tiddlywiki/geospatial/docs/geolayer.tid

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

plugins/tiddlywiki/geospatial/docs/geomap.tid

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

plugins/tiddlywiki/geospatial/images/markers/pin.svg

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

plugins/tiddlywiki/geospatial/templates/default-popup-template.tid

@@ -0,0 +1,3 @@
+title: $:/plugins/tiddlywiki/geospatial/templates/default-popup-template
+
+Feature: <$text text={{{ [<feature>] }}}/>

plugins/tiddlywiki/geospatial/widgets/geomap.js

@@ -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();
 		}
 	}