{leaflet}

Diese Funktion ist ab der Version 23 verfügbar.

Die Funktion verwendet Leaflet um eine Karte anzuzeigen. Die Karte wird von OpenStreetMap kostenlos zur Verfügung gestellt.

Eine Dokumentation zu Leaflet findet man hier!

Außerdem wird das Plugin Leaflet Geosearch verwendet. Eine Dokumentation dazu findet man hier!

Des Weiteren wird das Plugin Leaflet Markercluster verwendet. Eine Dokumentation dazu findet man hier!

Attribut	Typ und Standardwert	Erforderlich	Beschreibung
var	String => "var"	ja	Wird verwendet um das Map-Objekt im Layout weiter verwenden zu können.
crs	String => {}	nein	Man kann ein anderes Kartensystem verwenden. Die Kartensysteme kann man unter `'bin/js/leaflet/crs/crs.js'` finden und erweitern.
width	String => "100%"	nein	Die Breite der Karte. Der Typ muss mit angegeben werden. (Bsp.: 200px)
height	String => "400px"	nein	Die Höhe der Karte. Der Typ muss mit angegeben werden. (Bsp.: 100%)
longitude	String => "49.343927119763265"	ja	Der Längengrad, der auf der Karte dargestellt werden soll.
latitude	String => "9.1336262544674"	ja	Der Breitengrad, der auf der Karte dargestellt werden soll.
address	String => null	nein, aber kann longitude und latitude ersetzen	Lat und Lon werden von der Adresse ermittelt und dann in die Felder Longitude und latitude gesetzt
zoom.start	Float => 17	nein	Der Startzoom, der beim Laden der Seite eingestellt werden soll.
zoom.min	Float => 1	nein	Der minimale Zoom, der beim Zoomen geleistet werden kann. Je kleiner die Zahl desto weiter kann man raus zoomen.
zoom.max	Float => 19	nein	Der maximale Zoom, der beim Zoomen geleistet werden kann. Je größer die Zahl desto weiter kann man rein zoomen.
zoom.snap	Float => 0	nein	Wenn gesetzt, wird das Zoomen auf die gesetzte Werte einrasten.
zoom.controls	Boolean => true	nein	Wenn gesetzt, werden die Kontrolelemente oben Links angezeigt. Diese werden verwendet um per Klick zoomen zu können.
fixed	Boolean => false	nein	Wenn gesetzt, wird die Karte nicht bewegbar sein. Weder zoomen noch ziehen ist dann möglich. Außerdem werden die Zoom-Kontrolelemente entfernt.
search.show	Boolean => false	nein	Lässt die Suche anzeigen.
search.style	String => 'bar'	nein	Verändert das Aussehen der Suche. Möglichkeiten: 'bar' \| 'button'
search.label	String => 'Suche'	nein	Verändert den Inhalt der Suchleiste
layer.INDEX.label	String => null	nein	Man kann Marker auf Schichten verteilen. Name der Schicht.
layer.INDEX.wrapper	String => null	nein	Der Wrapper kann zu dem angezeigtem Label, Html hinzufügen. Format: <h1><%></h1>
marker.INDEX.long	Float => null	nein (Wird für einen Marker selbst benötigt)	Longitude des Markers
marker.INDEX.lati	Float => null	nein (Wird für einen Marker selbst benötigt)	Latitude des Markers
marker.INDEX.address	String => null	nein	Adresse des Markers. Wenn gesetzt, wird es Longitude und Latitude ersetzen.
marker.INDEX.title	String => null	nein (Wird für einen Marker selbst benötigt)	Der Titel des Markers.
marker.INDEX.alt	String => null	nein (Wird für einen Marker selbst benötigt)	Der Alternativtext des Markers.
marker.INDEX.url	Sting => null	nein	Die URL zu einem Bild, welches das Standardaussehen des Markers verändert.
marker.INDEX.url_height	Float => 50	nein	Höhe des neuen Markericons.
marker.INDEX.url_width	Float => 25	nein	Breite des neuen Markerions.
marker.INDEX.url_custom_class	String => null	nein	Damit können Icons beliebige Klassen bekommen.
marker.INDEX.popup	String => null	nein	Wenn man hier Text einträgt, wird, wenn man auf den Marker klickt, ein Popup über diesem Marker angezeigt.
marker.INDEX.layer	String => null	nein	Marker können auf Schichten verteilt werden. Man kann Schichten besser einstellen, wenn man das unter 'layer' macht. Die Schichten werden durch die Namen, die hier eingetragen wurden, verbunden. Sollte hier eine Schicht genannt werden, die nicht zuvor unter 'layer' eingestellt wurde, wird eine neue Schicht erstellt.

Eine Verwendung der Funktion könnte so aussehen:

{leaflet var=$map_id height="600px"
	address="Mosbach 74821 Pfalzgraf-Otto Straße 81"
	zoom.start=5
	search.show=true
	search.style="bar"
	layer.0.lable="Gruppe 1"
	marker.0.long=1
	marker.0.lati=1
	marker.0.title="Title 1"
	marker.0.alt="Alt 1"
	marker.0.layer="Gruppe 1"
	marker.0.url="https://as1.ftcdn.net/v2/jpg/02/80/87/48/1000_F_280874872_tVNxGcKAMB3s1rVuNtcB8MeloTb0PV28.jpg"
	marker.0.url_width=25
	marker.0.url_height=42
	marker.0.url_custom_class="custom-123"
	marker.1.long=2
	marker.1.lati=2
	marker.1.title="Title 2"
	marker.1.alt="Alt 2"
	marker.1.layer="Gruppe 2"
	marker.2.title="Title 3"
	marker.2.alt="Alt 3"
	marker.2.popup="test"
	marker.2.address="Mosbach 74821 Pfalzgraf-Otto Straße 81"
}

Wenn man das Map-Objekt weiter modifizieren will, kann man das so machen:

{assign var="map_id" value="map"}
{leaflet var=$map_id}

<script>
	{literal}
		(function() {
			let map = window.leaflet_maps['{/literal}{$map_id}{literal}'];
			console.log(map)
		})();
	{/literal}
</script>

Sollte man die Funktion in einem Block verwenden und man das Map-Objekt weiter modifizieren, sollte man, wie im Beispiel unten, vorgehen.

Das Augenmerk sollte dabei auf dem {assign} liegen. Die Map wird durch die Orientierung und durch den Index des Blocks eindeutig gemacht.

{assign var="map_id" value="map-{$_orient}-{$_index}"}
{leaflet var=$map_id}

<script>
	{literal}
		(function() {
			let map = window.leaflet_maps['{/literal}{$map_id}{literal}'];
			console.log(map)
		})();
	{/literal}
</script>