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"