title: $:/plugins/tiddlywiki/geospatial/docs/geomap
caption: geomap widget
tags: $:/tags/GeospatialDocs

!! `<$geomap>` widget

The `<$geomap>` widget displays an interactive map using [[Leaflet.js|https://leafletjs.com/]]. `<$geolayer>` and `<$geobaselayer>` widgets inside the `<$geomap>` widget are used to indicate the overlay layers and markers to display, and the base map layer to be used.

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:

```
<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoBaseLayer]]">
	<$geobaselayer title=<<currentTiddler>>/>
</$list>
```

!! Examples

<$testcase>
<$data
	title="Description"
	text="Map with state preservation"
/>
<$data
	title="Output"
	text="""<$geomap
	state=<<qualify "$:/state/demo-map">>
/>
"""/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>

<$testcase>
<$data
	title="Description"
	text="Map with geomarker"
/>
<$data
	title="Oxford"
	tags="$:/tags/GeoMarker"
	caption="Oxford"
	lat="51.751944"
	long="-1.257778"
	alt="0"
	text="""{{$:/core/images/star-filled}} This is Oxford!"""/>
<$data title="Output" text="""<$geomap
	state=<<qualify "$:/state/demo-map">>
>
	<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]">
		<$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}}/>
	</$list>
</$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
	title="Oxford"
	tags="$:/tags/GeoMarker"
	caption="Oxford"
	lat="51.751944"
	long="-1.257778"
	alt="0"
	text="""{{$:/core/images/star-filled}} This is Oxford!"""/>
	properties=""/>
<$data title="ui/PopupTemplate" text="""
	<div width="300px">
		<$let currentTiddler={{{ [<feature>jsonget[properties],[title]] }}}>
			<$link><$text text=<<currentTiddler>>/></$link>
			<!-- <$codeblock code={{{ [<feature>] }}}/> -->
			<$transclude $tiddler=<<currentTiddler>> $mode="block"/>
		</$let>
	</div>
"""/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>

<$testcase>
<$data
	title="Description"
	text="Map with geofeature"
/>
<$data
	title="Layer"
	tags="$:/tags/GeoFeature"
	type="application/json"
	color="red"
	text="""{
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"id": "An example geofeature feature",
			"properties": {
				"custom": "A custom property of this feature"
			},
			"geometry": {
				"type": "Polygon",
				"coordinates": [
					[
						[-90,35],
						[-90,30],
						[-85,30],
						[-85,35],
						[-90,35]
					]
				]
			}
		}
	]
}"""/>
<$data title="Output" text="""<$geomap
	state=<<qualify "$:/state/demo-map">>
>
	<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoFeature]]">
		<$geolayer json={{!!text}} color={{!!color}}/>
	</$list>
</$geomap>
"""/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>

<$testcase>
<$data $compound-tiddler="$:/plugins/tiddlywiki/geospatial/tests/widgets/geomap"/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>

<$testcase>
<$data $compound-tiddler="$:/plugins/tiddlywiki/geospatial/tests/widgets/geomap-refresh"/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>

<$testcase>
<$data $compound-tiddler="$:/plugins/tiddlywiki/geospatial/tests/widgets/geomap-draggable-marker"/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>