Geospatial Plugin: Improve Event Support (#8740)

* Add onclick attribute to geolayer widget

* Temporarily add the plugin to tw5.com for the Netlify preview

* Rename onclick to clickActions

And add docs for the lat, long, alt variables

* No longer apply the default popup template

Now that we have customisable popups the default one is pretty useless

* Prepare for merging to v5.3.6

The special circumstances are that this PR is confined to a plugin, and that the new work is an extension of the new features already merged in v5.3.6

plugins/tiddlywiki/geospatial/docs/geolayer.tid

@@ -16,7 +16,8 @@ The following attributes are supported:
 |''long'' |Optional longitude of marker if json attribute missing |
 |''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 |
+|''updateActions'' |Optional actions when the marker is dragged other otherwise modified. The variables ''lat'', ''long'' and ''alt'' contain the new coordinates of the marker |
+|''clickActions'' |<<.from-version "5.3.6">> Optional actions when the marker is clicked. The variable ''properties'' contains the JSON properties of the marker.  The variables ''lat'', ''long'' and ''alt'' contain the 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 |
 

plugins/tiddlywiki/geospatial/docs/geomap.tid

@@ -101,6 +101,36 @@ 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 actions"
+/>
+<$data title="MarkerClickActions" text="""
+	<$action-setfield $tiddler="$:/clicked-marker" text={{{ =[<properties>] =[<lat>] =[<long>] =[<alt>] +[join[,]] }}}/>
+"""/>
+<$data title="Output" text="""Marker: <$text text={{$:/clicked-marker}}/>
+
+<$geomap
+	state=<<qualify "$:/state/demo-map">>
+>
+	<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]">
+		<$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}} properties={{{ [[{}]jsonset[title],<currentTiddler>] }}} clickActions={{MarkerClickActions}}/>
+	</$list>
+</$geomap>
+"""/>
+<$data
+	title="Oxford"
+	tags="$:/tags/GeoMarker"
+	caption="Oxford"
+	lat="51.751944"
+	long="-1.257778"
+	alt="0"
+	text="""{{$:/core/images/star-filled}} This is Oxford!"""/>
+	properties={{{ [[{}]jsonset[title],[Oxford] }}}/>
+<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
+</$testcase>
+
 <$testcase>
 <$data
 	title="Description"

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

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

plugins/tiddlywiki/geospatial/widgets/geomap.js

@@ -167,11 +167,12 @@ GeomapWidget.prototype.refreshMap = function() {
 	});
 	this.map.addLayer(markers);
 	// Process embedded geolayer widgets
-	var defaultPopupTemplateTitle = self.getAttribute("popupTemplate","$:/plugins/tiddlywiki/geospatial/templates/default-popup-template");
+	var defaultPopupTemplateTitle = self.getAttribute("popupTemplate");
 	this.findChildrenDataWidgets(this.contentRoot.children,"geolayer",function(widget) {
 		var jsonText = widget.getAttribute("json"),
 			popupTemplateTitle = widget.getAttribute("popupTemplate",defaultPopupTemplateTitle),
 			geoJson = [];
+		// Build up the geojson of the layer
 		if(jsonText) {
 			// Layer is defined by JSON blob
 			geoJson = $tw.utils.parseJSONSafe(jsonText,[]);
@@ -197,6 +198,7 @@ GeomapWidget.prototype.refreshMap = function() {
 				geoJson.features[0].properties = $tw.utils.parseJSONSafe(properties);
 			}
 		}
+		// Create and add layer for the geojson
 		var draggable = widget.getAttribute("draggable","no") === "yes",
 			layer = $tw.Leaflet.geoJSON(geoJson,{
 				style: function(geoJsonFeature) {
@@ -211,31 +213,46 @@ GeomapWidget.prototype.refreshMap = function() {
 						var latlng = event.sourceTarget.getLatLng();
 						self.invokeActionString(widget.getAttribute("updateActions"),null,event,{
 							lat: latlng.lat,
-							long: latlng.lng
+							long: latlng.lng,
+							alt: latlng.alt
 						});
 					});
 					return marker;
 				},
 				onEachFeature: function(feature,layer) {
-					layer.bindPopup(function() {
-						var widget = self.wiki.makeTranscludeWidget(popupTemplateTitle, {
-								document: self.document,
-								parentWidget: self,
-								parseAsInline: false,
-								importPageMacros: true,
-								variables: {
-									feature: JSON.stringify(feature)
-								}
+					if(popupTemplateTitle) {
+						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;
 						});
-						var container = self.document.createElement("div");
-						widget.render(container,null);
-						self.wiki.addEventListener("change",function(changes) {
-							widget.refresh(changes,container,null);
+					}
+					// Add event handlers
+					if(widget.hasAttribute("clickActions")) {
+						layer.on("click",function(event) {
+							self.invokeActionString(widget.getAttribute("clickActions"),null,event.originalEvent,{
+								lat: event.latlng.lat,
+								long: event.latlng.lng,
+								alt: event.latlng.alt,
+								properties: JSON.stringify(feature.properties)
+							});
 						});
-						return container;
-					});
+					}
 				}
 			}).addTo(self.map);
+		// Create a name for this layer
 		var name = widget.getAttribute("name") || ("Untitled " + untitledCount++);
 		self.renderedLayers.push({name: name, layer: layer});
 	});