1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-10-30 14:46:19 +00:00
TiddlyWiki5/plugins/tiddlywiki/geospatial/docs/geomap.tid
2024-06-18 15:45:40 +01:00

123 lines
3.3 KiB
Plaintext

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 |
|''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 |
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="""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 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>