mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-02 14:29:55 +00:00
160 lines
4.7 KiB
Plaintext
160 lines
4.7 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 |
|
|
|''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">>
|
|
>
|
|
</$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>
|