From 3fb2f980c8f5f507e16a9e7ab49395bcff0db6c4 Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Fri, 15 Nov 2024 12:03:16 +0000 Subject: [PATCH] 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 --- .../tiddlywiki/geospatial/docs/geolayer.tid | 3 +- plugins/tiddlywiki/geospatial/docs/geomap.tid | 30 +++++++++++ .../templates/default-popup-template.tid | 3 -- .../tiddlywiki/geospatial/widgets/geomap.js | 51 ++++++++++++------- 4 files changed, 66 insertions(+), 21 deletions(-) delete mode 100644 plugins/tiddlywiki/geospatial/templates/default-popup-template.tid diff --git a/plugins/tiddlywiki/geospatial/docs/geolayer.tid b/plugins/tiddlywiki/geospatial/docs/geolayer.tid index 262aebb32..2ef34a9d4 100644 --- a/plugins/tiddlywiki/geospatial/docs/geolayer.tid +++ b/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 | diff --git a/plugins/tiddlywiki/geospatial/docs/geomap.tid b/plugins/tiddlywiki/geospatial/docs/geomap.tid index 37b7e869d..9e8b89126 100644 --- a/plugins/tiddlywiki/geospatial/docs/geomap.tid +++ b/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> +<$data + title="Description" + text="Map with geomarker with actions" +/> +<$data title="MarkerClickActions" text=""" + <$action-setfield $tiddler="$:/clicked-marker" text={{{ =[] =[] =[] =[] +[join[,]] }}}/> +"""/> +<$data title="Output" text="""Marker: <$text text={{$:/clicked-marker}}/> + +<$geomap + state=<> +> + <$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]"> + <$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}} properties={{{ [[{}]jsonset[title],] }}} clickActions={{MarkerClickActions}}/> + + +"""/> +<$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> <$data title="Description" diff --git a/plugins/tiddlywiki/geospatial/templates/default-popup-template.tid b/plugins/tiddlywiki/geospatial/templates/default-popup-template.tid deleted file mode 100644 index 4540dd3f3..000000000 --- a/plugins/tiddlywiki/geospatial/templates/default-popup-template.tid +++ /dev/null @@ -1,3 +0,0 @@ -title: $:/plugins/tiddlywiki/geospatial/templates/default-popup-template - -Feature: <$text text={{{ [] }}}/> \ No newline at end of file diff --git a/plugins/tiddlywiki/geospatial/widgets/geomap.js b/plugins/tiddlywiki/geospatial/widgets/geomap.js index f1b693c14..f3cad0377 100644 --- a/plugins/tiddlywiki/geospatial/widgets/geomap.js +++ b/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}); });