<p>In diesem Artikel beschreibe ich, wie mit dem <strong>Leaflet API</strong> eine Karte erstellt wird, wie man auf der Karte Marker platziert und wie man auf der Karte Linien zeichnen kann. <!--more-->Für darüber hinaus gehende Anforderungen verweise ich auf die <a href="https://leafletjs.com/">Leaflet-Dokumentation</a>.</p> <p>Die Beispiele laden das Leafletscript und das Leaflet-CSS von <a href="https://unpkg.com/#/">unpkg.com</a> sowie das Kartenmaterial von <a href="https://www.openstreetmap.org/#map=6/51.330/10.453">OpenStreetMap</a>, <a href="https://www.openstreetmap.de/">OpenStreetMapDe</a>, <a href="https://opentopomap.org/about">OpenTopoMap</a> und <a href="https://www.esri.com/de-de/home">Esri</a>. Dabei werden aus technischen Gründen Daten der Seitenbesucher, wie z.B. deren IP-Adresse, an diese Dienste übertragen. Um den Datenschutz zu wahren, werden die Besucher auf diesen Umstand hingewiesen und um Zustimmung gebeten.</p> <h2>Die Karte</h2> <p>Um Karten anzeigen zu können, benötigt man im HTML nur ein Block-Level-Element mit einer ID, z.B. ein <a href="https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure">figure</a>, das sich hier mittels CSS-Angaben über den ganzen Viewport erstreckt.</p> ~~~CSS <style> #map { width: 100vw; height: 100vh; margin:0; padding:0 } </style> ~~~ ~~~ HTML <figure id="map></figure> ~~~ Zusätzlich müssen eine css-Datei und das Leaflet-API-Script eingebunden werden. Damit dieses erst nach der Zustimmung der Besucher erfolgt, werden nicht die Elemente <code>link</code> und <code>script</code> verwendet, sondern die Hilfsfunktionen <code>loadCSS</code> und <code>loadScript</code>: ~~~Javascript // CSS laden loadCSS("https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"); // Leafletscript laden loadScript("https://unpkg.com/leaflet@1.4.0/dist/leaflet.js", kartenScript); ~~~ <p>In der Funktion <code>kartenScript</code>, die nach dem Laden des Leafletscripts aufgerufen wird, werden die Kartenelemente erstellt.</p> <p>Das Leaflet-API benötigt wie auch das Google Maps API Kartenbilder im png- oder jpeg-Format. Diese Bilder werden von diversen Servern mehr oder weniger frei zur Verfügung gestellt. Dabei wird die Welt schachbrettartig mit Kartenbildern abgedeckt. In der 1. Zoomstufe hat man ein Bild, in der zweiten 4, in der dritten 16 usw.. Diese Bilder werden Tiles genannt.</p> <p>Für diese Tiles muss ein Layer erstellt werden. ~~~Javascript var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Map data © <a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank" rel="noopener">CC-BY-SA</a>' }); ~~~ <p>Hierbei ist <code>https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</code> ein Templatestring, bei dem zur Laufzeit die in geschweiften Klammern stehenden Angaben durch die Servernummer (s), den Zoomlevel (z) sowie die Koordinaten der Tiles (x,y) ersetzt werden. Mit dem sich so ergebenden URL können dann die Tiles vom Server geholt werden. Zusätzlich wird noch der Zoom-Bereich festgelegt und ein Copyright-String übergeben.</p> <p>Um diesen Layer anzeigen zu können, muss ein Kartenbereich angelegt werden, der den Kartensatz zeigt. Mit <code>tap: false</code> sorgt man dafür, auch auf Smartphones und Tabletts noch scrollen zu können. Unten wird noch ein Maßstab eingeblendet.</p> ~~~Javascript var map = L.map('map', { layers: osm, tap: false } ) ; L.control.scale({imperial:false}).addTo(map); // Mit metrischem Maßstab ~~~ <p>Zum Schluss muss noch ein Kartenausschnitt gewählt werden und dann ist die Karte zu sehen: ~~~Javascript var bounds = [ [52.6, 13.1], [52.4, 13.7] ]; map.fitBounds( bounds ); ~~~ <p>Da sich in diesem Beispiel die Kartengröße an die Viewportgröße anpasst, wird für das Ereignis "resize" ein Eventhandler notiert, der bei Größenänderung die Karte neu skaliert.</p> ~~~Javascript map.on("resize", function(e){ map.fitBounds( bounds ); }); ~~~ <h2>Eine einfache Karte</h2> <p><a href="https://blog.selfhtml.org/images/f9863396-5e29-11eb-8fed-b42e9947ef30.png"><img class="aligncenter wp-image-1655 size-full" src="https://blog.selfhtml.org/images/f9863396-5e29-11eb-8fed-b42e9947ef30.png?size=medium" alt="" width="870" height="420" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet1.html" target="_blank" rel="noopener">Dieses Beispiel im eigenen Fenster</a>.</p> <p>Diese Karte kann jetzt mit der Maus oder per Touch bewegt werden. Über die [+/-]-Schaltfläche, mit dem Scrollrad oder per Doppelklick kann der Kartenausschnitt vergrößert oder verkleinert werden.</p> <h2>Mehrere Karten zur Auswahl</h2> <p>Es können auch mehrere Kartensätze angelegt werden. Im Folgenden werden zusätzlich Layer für die deutsche Version der Open Steet Map Karte, für die Open Topo und für ein Satellitenbild erstellt.</p> ~~~Javascript var osmde = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Map data © <a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank" rel="noopener">CC-BY-SA</a>' }); var opentopo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { maxZoom: 17, attribution: 'Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © <a href="https://opentopomap.org/about">OpenTopoMap</a> (CC-BY-SA)' }); var satellit = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 18, attribution: 'Map data © <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }); ~~~ <p>Um zwischen den Karten wählen zu können, wird dafür ein Kontrollelement benötigt:</p> ~~~Javascript var baseLayers = { "OSM": osm, "OSMDE": osmde, "Open Topo": opentopo, "Satellit": satellit }; L.control.layers(baseLayers).addTo(map); ~~~ <p>Über den "Kartenstapel" rechts oben kann ein anderes Kartenlayout gewählt werden. Hier finden wir die Angaben aus der "baseLayers"-Definition wieder.</p> <h2>Eine Karte mit Kartenauswahl</h2> <p><a href="https://blog.selfhtml.org/images/f99549d0-5e29-11eb-8c0c-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f99549d0-5e29-11eb-8c0c-b42e9947ef30.png?size=medium" alt="" width="870" height="419" class="aligncenter size-full wp-image-1656" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet2.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster</a>.</p> <h2>Marker</h2> <p>Zum Markieren von Orten auf der Karte gibt es die Methode <code>L.marker</code>. Für einen einfachen Marker müssen dieser Methode nur die Koordinaten als Array übergeben werden:</p> ~~~ JavaScript L.marker([52.45, 13.4]).addTo(map); ~~~ Wenn bei einem Klick auf den Marker Infos angezeigt werden sollen, geht dieses mit <code>bindPopup</code>. Auf Wunsch kann das Infofenster schon beim Aufrufen der Karte offen sein: ~~~Javascript L.marker([52.55, 13.4]).addTo(map).bindPopup("<b>Hello world!</b> I am a popup.").openPopup(); ~~~ <p>Mit <code>L.icon</code> kann ein eigenes Icon für den Marker definiert werden, und mit <code>on</code> können mit dem Marker Eventhandler verknüpft werden, z.B. für <code>click</code>:</p> ~~~Javascript var logo = L.icon({ iconUrl: 'S-Logo-vektor.svg', iconSize: [41, 41], iconAnchor: [21, 21] }); L.marker([52.5, 13.4], {icon: logo}).addTo(map).on("click",function(event){ console.info(event) }); ~~~ <h3>Eine Karte mit Markern</h3> <p><a href="https://blog.selfhtml.org/images/f9a2972a-5e29-11eb-bc67-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9a2972a-5e29-11eb-bc67-b42e9947ef30.png?size=medium" alt="" width="870" height="421" class="aligncenter size-full wp-image-1657" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet3.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster.</a></p> <h2>Linien</h2> <p>Ein weiteres Gestaltungselement sind Linien. Mit der Methode <code>L.polyline</code> können Linienzüge gezeichnet werden. Diese Methode benötigt als Parameter ein Array aus Arrays mit den Koordinatenpaaren, sowie u.A. Angaben zur Farbe, zur Stärke und zur Opazität der Linien. Auch Linien können mit einem Infofenster oder mit Eventhandlern verknüpft werden:</p> ~~~Javascript // Linie, mit Popup L.polyline([ [52.4, 13.7], [52.5, 13.7], [52.55, 13.6], [52.5, 13.5], [52.4, 13.5], [52.4, 13.7], [52.5, 13.5], [52.5, 13.7], [52.4, 13.5] ], {color: "red", weight: 10, opacity: 0.5} ).addTo(map).bindPopup("Das ist das Haus vom Ni-ko-laus"); // Linie mit Mouseover-Effekt L.polyline([ [52.45, 13.2], [52.55, 13.3] ], {color: "green", weight: 10, opacity: 1} ).addTo(map) .on("mouseover", function(e) { e.sourceTarget.setStyle({color: "red"}) }) .on("mouseout", function(e) { e.sourceTarget.setStyle({color: "green"}) }); ~~~ <h3>Eine Karte mit Markern und Linien</h3> <p><a href="https://blog.selfhtml.org/images/f9af4ff6-5e29-11eb-babc-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9af4ff6-5e29-11eb-babc-b42e9947ef30.png?size=medium" alt="" width="870" height="419" class="aligncenter size-full wp-image-1658" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet4.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster.</a></p> <h2>Eine Karte mit Klick-Event</h2> <p>Zum Schluss erhält die Karte noch einen Eventhandler, der bei Klick auf die Karte die Koordinaten in einem Popup angezeigt. ~~~Javascript // Bei Klick auf Karte Koordinaten im Popup anzeigen var popup = L.popup(); map.on("click", function(e) { popup .setLatLng(e.latlng) .setContent('<p>'+e.latlng.lat+','+e.latlng.lng+'</p>') .openOn(map); }); ~~~ <h3>Eine Karte mit Klickevent</h3> <p><a href="https://blog.selfhtml.org/images/f9bccb72-5e29-11eb-81ef-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9bccb72-5e29-11eb-81ef-b42e9947ef30.png?size=medium" alt="" width="870" height="422" class="aligncenter size-full wp-image-1659" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet5.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster</a>.</p> <h2 id="ueber_den_autor">über den Autor</h2> <p>Autor: <a href="https://forum.selfhtml.org/users/68">Jürgen Berkemeier</a> (SELFHTML-Urgestein seit 2005)<br> Webseite: <a href="https://www.j-berkemeier.de/">www.j-berkemeier.de</a></p> # Siehe auch * [Einbinden einer OSM-Karte als Beispiel für Custom Elements](https://blog.selfhtml.org/2020/dec/03/einbinden-einer-osm-karte-als-beispiel-fuer-custom-elements) Jürgen Berkemeier am 03.12.2020

<p>In diesem Artikel beschreibe ich, wie mit dem <strong>Leaflet API</strong> eine Karte erstellt wird, wie man auf der Karte Marker platziert und wie man auf der Karte Linien zeichnen kann. <!--more-->Für darüber hinaus gehende Anforderungen verweise ich auf die <a href="https://leafletjs.com/">Leaflet-Dokumentation</a>.</p> <p>Die Beispiele laden das Leafletscript und das Leaflet-CSS von <a href="https://unpkg.com/#/">unpkg.com</a> sowie das Kartenmaterial von <a href="https://www.openstreetmap.org/#map=6/51.330/10.453">OpenStreetMap</a>, <a href="https://www.openstreetmap.de/">OpenStreetMapDe</a>, <a href="https://opentopomap.org/about">OpenTopoMap</a> und <a href="https://www.esri.com/de-de/home">Esri</a>. Dabei werden aus technischen Gründen Daten der Seitenbesucher, wie z.B. deren IP-Adresse, an diese Dienste übertragen. Um den Datenschutz zu wahren, werden die Besucher auf diesen Umstand hingewiesen und um Zustimmung gebeten.</p> <h2>Die Karte</h2> <p>Um Karten anzeigen zu können, benötigt man im HTML nur ein Block-Level-Element mit einer ID, z.B. ein <a href="https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure">figure</a>, das sich hier mittels CSS-Angaben über den ganzen Viewport erstreckt.</p> ~~~CSS <style> #map { width: 100vw; height: 100vh; margin:0; padding:0 } </style> ~~~ ~~~ HTML <figure id="map></figure> ~~~ Zusätzlich müssen eine css-Datei und das Leaflet-API-Script eingebunden werden. Damit dieses erst nach der Zustimmung der Besucher erfolgt, werden nicht die Elemente <code>link</code> und <code>script</code> verwendet, sondern die Hilfsfunktionen <code>loadCSS</code> und <code>loadScript</code>: ~~~Javascript // CSS laden loadCSS("https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"); // Leafletscript laden loadScript("https://unpkg.com/leaflet@1.4.0/dist/leaflet.js", kartenScript); ~~~ <p>In der Funktion <code>kartenScript</code>, die nach dem Laden des Leafletscripts aufgerufen wird, werden die Kartenelemente erstellt.</p> <p>Das Leaflet-API benötigt wie auch das Google Maps API Kartenbilder im png- oder jpeg-Format. Diese Bilder werden von diversen Servern mehr oder weniger frei zur Verfügung gestellt. Dabei wird die Welt schachbrettartig mit Kartenbildern abgedeckt. In der 1. Zoomstufe hat man ein Bild, in der zweiten 4, in der dritten 16 usw.. Diese Bilder werden Tiles genannt.</p> <p>Für diese Tiles muss ein Layer erstellt werden. ~~~Javascript var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Map data © <a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank" rel="noopener">CC-BY-SA</a>' }); ~~~ <p>Hierbei ist <code>https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</code> ein Templatestring, bei dem zur Laufzeit die in geschweiften Klammern stehenden Angaben durch die Servernummer (s), den Zoomlevel (z) sowie die Koordinaten der Tiles (x,y) ersetzt werden. Mit dem sich so ergebenden URL können dann die Tiles vom Server geholt werden. Zusätzlich wird noch der Zoom-Bereich festgelegt und ein Copyright-String übergeben.</p> <p>Um diesen Layer anzeigen zu können, muss ein Kartenbereich angelegt werden, der den Kartensatz zeigt. Mit <code>tap: false</code> sorgt man dafür, auch auf Smartphones und Tabletts noch scrollen zu können. Unten wird noch ein Maßstab eingeblendet.</p> ~~~Javascript var map = L.map('map', { layers: osm, tap: false } ) ; L.control.scale({imperial:false}).addTo(map); // Mit metrischem Maßstab ~~~ <p>Zum Schluss muss noch ein Kartenausschnitt gewählt werden und dann ist die Karte zu sehen: ~~~Javascript var bounds = [ [52.6, 13.1], [52.4, 13.7] ]; map.fitBounds( bounds ); ~~~ <p>Da sich in diesem Beispiel die Kartengröße an die Viewportgröße anpasst, wird für das Ereignis "resize" ein Eventhandler notiert, der bei Größenänderung die Karte neu skaliert.</p> ~~~Javascript map.on("resize", function(e){ map.fitBounds( bounds ); }); ~~~ <h2>Eine einfache Karte</h2> <p><a href="https://blog.selfhtml.org/images/f9863396-5e29-11eb-8fed-b42e9947ef30.png"><img class="aligncenter wp-image-1655 size-full" src="https://blog.selfhtml.org/images/f9863396-5e29-11eb-8fed-b42e9947ef30.png?size=medium" alt="" width="870" height="420" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet1.html" target="_blank" rel="noopener">Dieses Beispiel im eigenen Fenster</a>.</p> <p>Diese Karte kann jetzt mit der Maus oder per Touch bewegt werden. Über die [+/-]-Schaltfläche, mit dem Scrollrad oder per Doppelklick kann der Kartenausschnitt vergrößert oder verkleinert werden.</p> <h2>Mehrere Karten zur Auswahl</h2> <p>Es können auch mehrere Kartensätze angelegt werden. Im Folgenden werden zusätzlich Layer für die deutsche Version der Open Steet Map Karte, für die Open Topo und für ein Satellitenbild erstellt.</p> ~~~Javascript var osmde = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Map data © <a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank" rel="noopener">CC-BY-SA</a>' }); var opentopo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { maxZoom: 17, attribution: 'Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © <a href="https://opentopomap.org/about">OpenTopoMap</a> (CC-BY-SA)' }); var satellit = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 18, attribution: 'Map data © <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }); ~~~ <p>Um zwischen den Karten wählen zu können, wird dafür ein Kontrollelement benötigt:</p> ~~~Javascript var baseLayers = { "OSM": osm, "OSMDE": osmde, "Open Topo": opentopo, "Satellit": satellit }; L.control.layers(baseLayers).addTo(map); ~~~ <p>Über den "Kartenstapel" rechts oben kann ein anderes Kartenlayout gewählt werden. Hier finden wir die Angaben aus der "baseLayers"-Definition wieder.</p> <h2>Eine Karte mit Kartenauswahl</h2> <p><a href="https://blog.selfhtml.org/images/f99549d0-5e29-11eb-8c0c-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f99549d0-5e29-11eb-8c0c-b42e9947ef30.png?size=medium" alt="" width="870" height="419" class="aligncenter size-full wp-image-1656" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet2.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster</a>.</p> <h2>Marker</h2> <p>Zum Markieren von Orten auf der Karte gibt es die Methode <code>L.marker</code>. Für einen einfachen Marker müssen dieser Methode nur die Koordinaten als Array übergeben werden:</p> ~~~ JavaScript L.marker([52.45, 13.4]).addTo(map); ~~~ Wenn bei einem Klick auf den Marker Infos angezeigt werden sollen, geht dieses mit <code>bindPopup</code>. Auf Wunsch kann das Infofenster schon beim Aufrufen der Karte offen sein: ~~~Javascript L.marker([52.55, 13.4]).addTo(map).bindPopup("<b>Hello world!</b> I am a popup.").openPopup(); ~~~ <p>Mit <code>L.icon</code> kann ein eigenes Icon für den Marker definiert werden, und mit <code>on</code> können mit dem Marker Eventhandler verknüpft werden, z.B. für <code>click</code>:</p> ~~~Javascript var logo = L.icon({ iconUrl: 'S-Logo-vektor.svg', iconSize: [41, 41], iconAnchor: [21, 21] }); L.marker([52.5, 13.4], {icon: logo}).addTo(map).on("click",function(event){ console.info(event) }); ~~~ <h3>Eine Karte mit Markern</h3> <p><a href="https://blog.selfhtml.org/images/f9a2972a-5e29-11eb-bc67-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9a2972a-5e29-11eb-bc67-b42e9947ef30.png?size=medium" alt="" width="870" height="421" class="aligncenter size-full wp-image-1657" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet3.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster.</a></p> <h2>Linien</h2> <p>Ein weiteres Gestaltungselement sind Linien. Mit der Methode <code>L.polyline</code> können Linienzüge gezeichnet werden. Diese Methode benötigt als Parameter ein Array aus Arrays mit den Koordinatenpaaren, sowie u.A. Angaben zur Farbe, zur Stärke und zur Opazität der Linien. Auch Linien können mit einem Infofenster oder mit Eventhandlern verknüpft werden:</p> ~~~Javascript // Linie, mit Popup L.polyline([ [52.4, 13.7], [52.5, 13.7], [52.55, 13.6], [52.5, 13.5], [52.4, 13.5], [52.4, 13.7], [52.5, 13.5], [52.5, 13.7], [52.4, 13.5] ], {color: "red", weight: 10, opacity: 0.5} ).addTo(map).bindPopup("Das ist das Haus vom Ni-ko-laus"); // Linie mit Mouseover-Effekt L.polyline([ [52.45, 13.2], [52.55, 13.3] ], {color: "green", weight: 10, opacity: 1} ).addTo(map) .on("mouseover", function(e) { e.sourceTarget.setStyle({color: "red"}) }) .on("mouseout", function(e) { e.sourceTarget.setStyle({color: "green"}) }); ~~~ <h3>Eine Karte mit Markern und Linien</h3> <p><a href="https://blog.selfhtml.org/images/f9af4ff6-5e29-11eb-babc-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9af4ff6-5e29-11eb-babc-b42e9947ef30.png?size=medium" alt="" width="870" height="419" class="aligncenter size-full wp-image-1658" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet4.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster.</a></p> <h2>Eine Karte mit Klick-Event</h2> <p>Zum Schluss erhält die Karte noch einen Eventhandler, der bei Klick auf die Karte die Koordinaten in einem Popup angezeigt. ~~~Javascript // Bei Klick auf Karte Koordinaten im Popup anzeigen var popup = L.popup(); map.on("click", function(e) { popup .setLatLng(e.latlng) .setContent('<p>'+e.latlng.lat+','+e.latlng.lng+'</p>') .openOn(map); }); ~~~ <h3>Eine Karte mit Klickevent</h3> <p><a href="https://blog.selfhtml.org/images/f9bccb72-5e29-11eb-81ef-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9bccb72-5e29-11eb-81ef-b42e9947ef30.png?size=medium" alt="" width="870" height="422" class="aligncenter size-full wp-image-1659" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet5.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster</a>.</p> <h2 id="ueber_den_autor">über den Autor</h2> <p>Autor: <a href="https://forum.selfhtml.org/users/68">Jürgen Berkemeier</a> (SELFHTML-Urgestein seit 2005)<br> Webseite: <a href="https://www.j-berkemeier.de/">www.j-berkemeier.de</a></p>

<p>Oft möchte man auf seiner Website eine Landkarte anzeigen, z.B. um Besuchern den Weg zu zeigen, den Standort von Filialen oder Partnern zu zeigen, oder auch die Wohnorte von Mitgliedern einer Community oder eines Vereins.</p> <p>Inzwischen gibt es mehrere Anbieter von interaktiven Karten, z.B. Bing Maps, Google Maps oder Open Street Map. Möchte man Karten von einem dieser Anbieter in seine Seite einbinden, benötigt man eine Schnittstelle, ein <a href="https://wiki.selfhtml.org/wiki/API">Application Programming Interface</a> (API).</p> <p>In diesem Artikel beschreibe ich, wie mit dem <strong>Leaflet API</strong> eine Karte erstellt wird, wie man auf der Karte Marker platziert und wie man auf der Karte Linien zeichnen kann. <!--more-->Für darüber hinaus gehende Anforderungen verweise ich auf die <a href="https://leafletjs.com/">Leaflet-Dokumentation</a>.</p> <p>Die Beispiele laden das Leafletscript und das Leaflet-CSS von <a href="https://unpkg.com/#/">unpkg.com</a> sowie das Kartenmaterial von <a href="https://www.openstreetmap.org/#map=6/51.330/10.453">OpenStreetMap</a>, <a href="https://www.openstreetmap.de/">OpenStreetMapDe</a>, <a href="https://opentopomap.org/about">OpenTopoMap</a> und <a href="https://www.esri.com/de-de/home">Esri</a>. Dabei werden aus technischen Gründen Daten der Seitenbesucher, wie z.B. deren IP-Adresse, an diese Dienste übertragen. Um den Datenschutz zu wahren, werden die Besucher auf diesen Umstand hingewiesen und um Zustimmung gebeten.</p> <h2>Die Karte</h2> <p>Um Karten anzeigen zu können, benötigt man im HTML nur ein Block-Level-Element mit einer ID, z.B. ein <a href="https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure">figure</a>, das sich hier mittels CSS-Angaben über den ganzen Viewport erstreckt.</p> <pre>&lt;st</p> tyle&gt; #map { width: 100vw; height: 100vh; margin:0; padding:0 } &lt;/style> ... &lt;figure id="map"&gt;&lt;/figure&gt; </pre> <p>Zusätzlich müssen eine css-Datei und das Leaflet-API-Script eingebunden werden. Damit dieses erst nach der Zustimmung der Besucher erfolgt, werden nicht die Elemente <code>link</code> und <code>script</code> verwendet, sondern die Hilfsfunktionen <code>loadCSS</code> und <code>loadScript</code>: <pr re>// CSS laden loadCSS("https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"); // Leafletscript laden loadScript("https://unpkg.com/leaflet@1.4.0/dist/leaflet.js", kartenScript) </pre> <p>In der Funktion <code>kartenScript</code>, die nach dem Laden des Leafletscripts aufgerufen wird, werden die Kartenelemente erstellt.</p> <p>Das Leaflet-API benötigt wie auch das Google Maps API Kartenbilder im png- oder jpeg-Format. Diese Bilder werden von diversen Servern mehr oder weniger frei zur Verfügung gestellt. Dabei wird die Welt schachbrettartig mit Kartenbildern abgedeckt. In der 1. Zoomstufe hat man ein Bild, in der zweiten 4, in der dritten 16 usw.. Diese Bilder werden Tiles genannt.</p> <p>Für diese Tiles muss ein Layer erstellt werden. <pre e>var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Map data © <a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank" rel="noopener">CC-BY-SA</a>' }); </pre> <p>Hierbei ist <code>https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</code> ein Templatestring, bei dem zur Laufzeit die in geschweiften Klammern stehenden Angaben durch die Servernummer (s), den Zoomlevel (z) sowie die Koordinaten der Tiles (x,y) ersetzt werden. Mit dem sich so ergebenden URL können dann die Tiles vom Server geholt werden. Zusätzlich wird noch der Zoom-Bereich festgelegt und ein Copyright-String übergeben.</p> <p>Um diesen Layer anzeigen zu können, muss ein Kartenbereich angelegt werden, der den Kartensatz zeigt. Mit <code>tap: false</code> sorgt man dafür, auch auf Smartphones und Tabletts noch scrollen zu können. Unten wird noch ein Maßstab eingeblendet.</p> <pre>var</p> r map = L.map('map', { layers: osm, tap: false } ) ; L.control.scale({imperial:false}).addTo(map); // Mit metrischem Maßstab </pre> <p>Zum Schluss muss noch ein Kartenausschnitt gewählt werden und dann ist die Karte zu sehen: <p pre>var bounds = [ [52.6, 13.1], [52.4, 13.7] ]; map.fitBounds( bounds ); </pre> <p>Da sich in diesem Beispiel die Kartengröße an die Viewportgröße anpasst, wird für das Ereignis "resize" ein Eventhandler notiert, der bei Größenänderung die Karte neu skaliert.</p> <pre>map.</p> .on("resize", function(e){ map.fitBounds( bounds ); }); </pre> <h2>Eine einfache Karte</h2> <p><a href="https://blog.selfhtml.org/images/f9863396-5e29-11eb-8fed-b42e9947ef30.png"><img class="aligncenter wp-image-1655 size-full" src="https://blog.selfhtml.org/images/f9863396-5e29-11eb-8fed-b42e9947ef30.png?size=medium" alt="" width="870" height="420" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet1.html" target="_blank" rel="noopener">Dieses Beispiel im eigenen Fenster</a>.</p> <p>Diese Karte kann jetzt mit der Maus oder per Touch bewegt werden. Über die [+/-]-Schaltfläche, mit dem Scrollrad oder per Doppelklick kann der Kartenausschnitt vergrößert oder verkleinert werden.</p> <h2>Mehrere Karten zur Auswahl</h2> <p>Es können auch mehrere Kartensätze angelegt werden. Im Folgenden werden zusätzlich Layer für die deutsche Version der Open Steet Map Karte, für die Open Topo und für ein Satellitenbild erstellt.</p> <pre>var os</p> smde = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Map data © <a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank" rel="noopener">CC-BY-SA</a>' }); var opentopo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { maxZoom: 17, attribution: 'Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © <a href="https://opentopomap.org/about">OpenTopoMap</a> (CC-BY-SA)' }); var satellit = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 18, attribution: 'Map data © <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }); </pre> <p>Um zwischen den Karten wählen zu können, wird dafür ein Kontrollelement benötigt:</p> <pre> >var baseLayers = { "OSM": osm, "OSMDE": osmde, "Open Topo": opentopo, "Satellit": satellit }; L.control.layers(baseLayers).addTo(map); </pre> <p>Über den "Kartenstapel" rechts oben kann ein anderes Kartenlayout gewählt werden. Hier finden wir die Angaben aus der "baseLayers"-Definition wieder.</p> <h2>Eine Karte mit Kartenauswahl</h2> <p><a href="https://blog.selfhtml.org/images/f99549d0-5e29-11eb-8c0c-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f99549d0-5e29-11eb-8c0c-b42e9947ef30.png?size=medium" alt="" width="870" height="419" class="aligncenter size-full wp-image-1656" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet2.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster</a>.</p> <h2>Marker</h2> <p>Zum Markieren von Orten auf der Karte gibt es die Methode <code>L.marker</code>. Für einen einfachen Marker müssen dieser Methode nur die Koordinaten als Array übergeben werden:</p> <pre> L.marker([52.45, 13.4]).addTo(map); </pre> <p>Wenn bei einem Klick auf den Marker Infos angezeigt werden sollen, geht dieses mit <code>bindPopup</code>. Auf Wunsch kann das Infofenster schon beim Aufrufen der Karte offen sein:<br> < <pre> L.marker([52.55, 13.4]).addTo(map).bindPopup("<b>Hello world!</b> I am a popup.").openPopup(); </pre> <p>Mit <code>L.icon</code> kann ein eigenes Icon für den Marker definiert werden, und mit <code>on</code> können mit dem Marker Eventhandler verknüpft werden, z.B. für <code>click</code>:</p> <pre> > var logo = L.icon({ iconUrl: 'S-Logo-vektor.svg', iconSize: [41, 41], iconAnchor: [21, 21] }); L.marker([52.5, 13.4], {icon: logo}).addTo(map).on("click",function(event){console.info(event)}); </pre> <h3>Eine Karte mit Markern</h3> <p><a href="https://blog.selfhtml.org/images/f9a2972a-5e29-11eb-bc67-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9a2972a-5e29-11eb-bc67-b42e9947ef30.png?size=medium" alt="" width="870" height="421" class="aligncenter size-full wp-image-1657" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet3.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster.</a></p> <h2>Linien</h2> <p>Ein weiteres Gestaltungselement sind Linien. Mit der Methode <code>L.polyline</code> können Linienzüge gezeichnet werden. Diese Methode benötigt als Parameter ein Array aus Arrays mit den Koordinatenpaaren, sowie u.A. Angaben zur Farbe, zur Stärke und zur Opazität der Linien. Auch Linien können mit einem Infofenster oder mit Eventhandlern verknüpft werden:</p> <pre> //</p> / Linie, mit Popup L.polyline([ [52.4, 13.7], [52.5, 13.7], [52.55, 13.6], [52.5, 13.5], [52.4, 13.5], [52.4, 13.7], [52.5, 13.5], [52.5, 13.7], [52.4, 13.5] ], {color: "red", weight: 10, opacity: 0.5} ).addTo(map).bindPopup("Das ist das Haus vom Ni-ko-laus"); // Linie mit Mouseover-Effekt L.polyline([ [52.45, 13.2], [52.55, 13.3] ], {color: "green", weight: 10, opacity: 1} ).addTo(map) .on("mouseover", function(e) { e.sourceTarget.setStyle({color: "red"}) }) .on("mouseout", function(e) { e.sourceTarget.setStyle({color: "green"}) }); </pre> <h3>Eine Karte mit Markern und Linien</h3> <p><a href="https://blog.selfhtml.org/images/f9af4ff6-5e29-11eb-babc-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9af4ff6-5e29-11eb-babc-b42e9947ef30.png?size=medium" alt="" width="870" height="419" class="aligncenter size-full wp-image-1658" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet4.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster.</a></p> <h2>Eine Karte mit Klick-Event</h2> <p>Zum Schluss erhält die Karte noch einen Eventhandler, der bei Klick auf die Karte die Koordinaten in einem Popup angezeigt. <p pre> // Bei Klick auf Karte Koordinaten im Popup anzeigen var popup = L.popup(); map.on("click", function(e) { popup .setLatLng(e.latlng) .setContent(' '+e.latlng.lat+','+e.latlng.lng+' ') .openOn(map); }); </pre> <h3>Eine Karte mit Klickevent</h3> <p><a href="https://blog.selfhtml.org/images/f9bccb72-5e29-11eb-81ef-b42e9947ef30.png"><img src="https://blog.selfhtml.org/images/f9bccb72-5e29-11eb-81ef-b42e9947ef30.png?size=medium" alt="" width="870" height="422" class="aligncenter size-full wp-image-1659" /></a></p> <p><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet5.html" rel="noopener" target="_blank">Dieses Beispiel im eigenen Fenster</a>.</p> <h2 id="ueber_den_autor">über den Autor</h2> <p>Autor: <a href="https://forum.selfhtml.org/users/68">Jürgen Berkemeier</a> (SELFHTML-Urgestein seit 2005)<br> Webseite: <a href="https://www.j-berkemeier.de/">www.j-berkemeier.de</a></p>