Leaflet.js ist eine Open-Source-JavaScript-Bibliothek für interaktive Karten auf der eigenen Webseite.
Die JavaScript Bibliothek ist klein, einfach und flexibel und
derzeit wahrscheinlich die beliebteste Open-Source-Mapping-Bibliothek. Gleichzeitig
ist Leaflet.js auch eine gute Alternative zu Google Maps, da eine Verwendung nur
noch nach Registrierung möglich ist und nur noch in einem geringen Umfang kostenlos ist.
Die Bibliothek ist kostenlos und frei nutzbar (2-Clause BSD License).
Desweiteren ist es möglich, dass die Karten vom eigenen Server ausgeliefert werden können, somit muss im Impressum bei der Datenschutzerklärung (DSGVO) nicht auf einen externen Service verwiesen werden.
Aktuelles Beispiel, wenn die Verwendung der Google Maps API ohne Registrierung erfolgt:
Folgende Informationen fehlen Google: https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=keyless#api-key-and-billing-errors
- Are you using an API key?
- Is billing enabled on your account?
- Is the provided billing method no longer valid (for example an expired credit card)?
- Is there an exceeded self-imposed daily limit on the API?
- Does your API key have an IP addresses restriction?
Integration von Leaflet.js in die eigene Webseite:
- Download der Bibliothek: https://leafletjs.com/download.html
- Ordner entpacken und unter ../leaflet speichern
- In der HTML-Datei ein div element mit einer id hinterlegen:
- <div id="map_leaflet"></div>
- Die CSS‐Datei und das Leaflet‐API‐Script einbinden:
- <link rel="stylesheet" href="leaflet/leaflet.css" rel="stylesheet" />
- <script src="leaflet/leaflet.js"></script>
- Der Kartencontainer (mapid) muss eine definierte Höhe hat z.B. per CSS festlegen:
- #map_leaflet{ height: 392px; }
- <div id="map_leaflet" style="width:800px; height:392px"></div>
- Damit ein Layer anzeigt werden kann, muss der Kartenbereich (hier mit den Koordinaten) initalisiert werden:
- var map = L.map('map_leaflet').setView([50.869333, 9.715948], 14);
- Wie auch die Google Maps API benötigt die Leaflet API Kartenbilder (Tiles im .png oder .jpeg Format), diese werden je nach Zoomstufe schachbrettartig zu einer Karten zusammengesetzt:
- https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png (Templatestring hinzufügen)
- Servernummer = (s)
- Zoomlevel = (z)
- Koordinaten = (x,y)
- Zoom Bereich und Copyright werden festgelegt
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Map data © OpenStreetMap and contributors CC-BY-SA',
maxZoom: 18,
minZoom: 9
}).addTo(map);
- Metrischen Maßstab in der Karte einblenden:
- L.control.scale({imperial:false}).addTo(map); // metrisch
- Mit der Methode L.marker. kann man Orte auf der Karte markieren:
- L.marker([50.869333, 9.715948]).addTo(map);
- Mit bindPopup kann ein Popup hinterlegt werden und beim Aufrufen der Karte geöffnet werden:
- L.marker([50.869333, 9.715948]).addTo(map).bindPopup("Bahnhofsmission Bad Hersfeld").openPopup();
Weitere Beispiele finden sich auch auf der Herstellerseite: https://leafletjs.com/examples.html
Anbei der komplette Quellcode:
<html><head>
...
<link rel="stylesheet" href="leaflet/leaflet.css" rel="stylesheet" />
...
<script src="leaflet/leaflet.js"></script>
...
<script type="text/javascript">
function showMap() {
// initialize the map
var map = L.map('map_leaflet').setView([50.869333, 9.715948], 14);
// load a tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Map data © OpenStreetMap and contributors CC-BY-SA',
maxZoom: 18,
minZoom: 9
}).addTo(map);
L.control.scale({imperial:false}).addTo(map); // metrisch
//L.marker([50.869333, 9.715948]).addTo(map);
L.marker([50.869333, 9.715948]).addTo(map).bindPopup("Bahnhofsmission Bad Hersfeld").openPopup();
}
</script>
</head>
<body onload="showMap()">
...
<div id="map_leaflet" style="width:800px; height:392px"></div>
...
</body>
</html>
Keine Kommentare:
Kommentar veröffentlichen