Geospatial Plugin: Improve Event Support

editions/tw5.com/tiddlywiki.info

@@ -7,7 +7,8 @@
 		"tiddlywiki/menubar",
 		"tiddlywiki/confetti",
 		"tiddlywiki/dynannotate",
-		"tiddlywiki/tour"
+		"tiddlywiki/tour",
+		"tiddlywiki/geospatial"
 	],
 	"themes": [
 		"tiddlywiki/vanilla",

plugins/tiddlywiki/geospatial/docs/geolayer.tid

@@ -17,6 +17,7 @@ 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 |
+|''onclick'' |<<.from-version "5.3.7">> Optional actions when the marker is clicked. The variable ''properties'' contains the JSON properties 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>] }}}/>
+"""/>
+<$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>] }}} onclick={{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/widgets/geomap.js

@@ -172,6 +172,7 @@ GeomapWidget.prototype.refreshMap = function() {
 		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) {
@@ -234,8 +236,20 @@ GeomapWidget.prototype.refreshMap = function() {
 						});
 						return container;
 					});
+					// Add event handlers
+					if(widget.hasAttribute("onclick")) {
+						layer.on("click",function(event) {
+							self.invokeActionString(widget.getAttribute("onclick"),null,event.originalEvent,{
+								lat: event.latlng.lat,
+								long: event.latlng.lng,
+								alt: event.latlng.alt,
+								properties: JSON.stringify(feature.properties)
+							});
+						});
+					}
 				}
 			}).addTo(self.map);
+		// Create a name for this layer
 		var name = widget.getAttribute("name") || ("Untitled " + untitledCount++);
 		self.renderedLayers.push({name: name, layer: layer});
 	});