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/]].

The following attributes are supported:

|!Attribute |!Description |
|''state'' |The title of a state tiddler used to track the state of the map in the `zoom`, `long` and `lat` fields |
|''layers'' |A filter identifying the GeoJSON layer tiddlers to be displayed on the map |
|''markers'' |A filter identifying the GeoJSON marker tiddlers to be displayed on the map |


!! 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="""This is Oxford!"""/>
<$data title="Output" text="""<$geomap
	state=<<qualify "$:/state/demo-map">>
	markers="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]"
/>
"""/>
<$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">>
	features="[all[tiddlers+shadows]tag[$:/tags/GeoFeature]]"
/>
"""/>
<$data $tiddler="$:/plugins/tiddlywiki/geospatial"/>
</$testcase>