Wenn es um die Einbindung von Kartenausschnitten in eine Website geht, ist Google Maps die erste Wahl. Dank der JavaScript-API ist es zudem leicht, Karten mit Markern und anderen Overlays zu versehen. Das freie Pendant OpenStreetMap liefert eine solch einfache Möglichkeit der Herangehensweise nicht. Die JavaScript-Bibliothek Leaflet jedoch bietet viele Features, die man von Google Maps kennt, um interaktive Karten auf der Grundlage von OpenStreetMap zu erzeugen.
Leaflet
Einfache Einbindung von OpenStreetMap-Karten
Um Karten per Leaflet nutzen zu können, müssen die JavaScript- sowie die Stylesheet-Datei im HTML-Kopf eingebunden werden. Anschließend wird ein Blockelement erstellt, welches als Container für die darzustellende Karte dient:
<div id="karte"></div>
Per CSS werden die Maße der Karte beziehungsweise des Containers definiert. Folgender JavaScript-Aufruf sorgt dafür, dass ein bestimmter Kartenausschnitt innerhalb des Containers angezeigt wird:
var karte = L.map("karte").setView([51.387, 7.664], 13);
Die Werte innerhalb des Aufrufs von setView() stellen die Koordinaten (in eckigen Klammern) sowie den Zoomfaktor dar. Standardmäßig werden Schaltflächen zum Vergrößern und Verkleinern des Kartenausschnittes angezeigt.
Karten mit Markers und Popups versehen
Beispiele für Overlays mit Leaflet
Um Orte mit zusätzlichen Informationen zu versehen, können auf einer Karte verschiedene Overlays platziert werden. Der von Google Maps bekannte klassische Marker wird mit folgendem Aufruf erreicht:
var marker = L.marker([51.387, 7.664]).addTo(karte);
Hierbei verwendet man als Marker ein ähnliches Symbol, wie jenes in Google Maps. Zusätzlich zum Marker besteht die Möglichkeit, eine Popup-Sprechblase über dem Marker zu platzieren, um dort Text unterzubringen:
marker.bindPopup("Das ist Berlin.").openPopup();
Darüber hinaus ist es möglich, geometrische Formen wie Rechtecke, Kreise oder individuelle Polygone auf der Karte zu platzieren. Vom Aussehen erinnert alles sehr stark an Google Maps, weshalb Leaflet durchaus als Alternative eingesetzt werden kann.
Geolocation und Unterstützung von Touch-Displays
Leaflet ist nicht nur für Desktopgeräte, sondern insbesondere auch für Mobilgeräte geeignet. Hier ist Leaflet in der Lage, per Geolocation die aktuelle Position auszulesen und diese im Kartenausschnitt auszugeben:
karte.locate({setView: true, maxZoom: 13});
Darüber hinaus funktioniert auf Mobilgeräten die Navigation durch die Karte per Multi-Touch-Zoom.
Fazit: Leaflet ist eine gute Alternative für alle, die auf Google Maps verzichten wollen, nicht aber auf dessen Look and Feel. Die grundsätzlichen Schwächen von OpenStreetMap, besonders bezogen auf die Genauigkeit und Detailtiefe der hinterlegten Daten, kann aber natürlich auch Leaflet nicht ausgleichen.
Links zum Beitrag
(dpe)
11 Antworten zu „Leaflet: Interaktive Karten mit JavaScript und OpenStreetMap“
— was ist Deine Meinung?
Hallo,
danke für die gute Einführung – ich habe eine kurze Frage bzw. ein Problem. ich habe alles so gemacht,w ie es beschrieben ist, also Webseite erstellt, leaflet eingebunden mit var map = L.map(‚map‘).setView([51.227741, 6.773456], 13);, aber die Karte wird mir nicht angezeigt – es wird der Rahmen angezeit aber kein Inhalt (der Inhalt des Rahmens ist leer) – … weißt Du was mir noch fehlt?
var map = L.map(‚map‘).setView([51.227741, 6.773456], 13);
Hallo Max,
Dir fehlt ein Blick auf den Quick-Start-Guide von leafletjs.com. Dort wird nämlich erwähnt, dass man noch einen Kartenlayer einbinden muss. Das wird hier nicht sonderlich erwähnt. Im Quick-Start-Guide wird Mapbox empfohlen. Dafür musst Du dich aber registrieren. Wenn Du OSM-Material benutzen willst, brauchst Du zusätzlich leaflet-providers.js von Github. Die Beispiele sind dort hilfreich und ich konnte nach kleinen Anpassungen auch mehrere Karten auf einer Seite platzieren.
Ist echt prima!
Gruß, Penguin
Hallo allerseits,
ich war vor rund 8 Monaten auch sehr erfreut euren (und andere) Artikel zu Leaflet gefunden zu haben und damit die OSM etwas praktischer, flexibler und ansprechender einbinden zu können.
Seit kurzem scheinen die Karten jetzt jedoch besonders in höheren Zoomstufen nicht mehr zu funktionieren, bzw. die Karten nicht mehr geladen werden zu können. Wenn mein hinauszoomt, etc. sieht man die Veränderung bzw. das Ladeproblem der Kacheln. Dies ist nicht nur bei mir, sondern scheinbar auch auf den Entwicklerseiten der Fall.
Habt ihr hier eine Idee woran dies liegen könnte, bzw. wie man das Problem beheben kann. Bei mir sind einige Kundenkarten betroffen und ich stehe derzeit echt auf dem Schlauch.
Gruß Patrick
Hallo
Danke für das Tutorial.
Wie ist das aber wenn ich eine eigene Karte nutzen möchte. Ich habe eine Karte auf die ich Leaflet anwenden möchte. Kann ich einfach eine beliebige Karte nutzen? Oder muss die in irgendeiner Art und Weise vorbereitet werden für die Nutzung?
Keine Idee dazu?
Schöner Artikel über die Möglichen Nutzungen von Leaflet und OSM.
„Die grundsätzlichen Schwächen von OpenStreetMap, besonders bezogen auf die Genauigkeit und Detailtiefe der hinterlegten Daten, kann aber natürlich auch Leaflet nicht ausgleichen.“
OSM hat weltweit sicher einige Schwächen was den Datenbestand angeht, wenn man jedoch den deutschsprachigen Raum anschaut (D, Ö, CH), dann steht GoogleMaps meistens eher relativ schwach da. Insbesondere in grösseren Städten, aber mittlerweile auch in vielen ländlichen Regionen gibt es in OSM Wander- & Feldwege, Gassen, Plätze und Treppen die man bei GoogleMaps vergeblich sucht. Lücken gibt es aber nach wie vor sicher bei beiden.
Schönen Gruss,
Knut
Zum schnellen Vergleich
http://tools.geofabrik.de/mc/
Schöner Beitrag, aber es sollte wohl geometrische und nicht geometrische Formen heißen?
Ja, das stimmt. Es soll „geometrische Formen“ heißen. Da war ich wohl zu sehr in der Thematik vertieft 🙂
Korrigiert 😉
Welche kostenlose Alternative gibt es eigentlich sonst noch?
Danke für das Tutorial, das sehr schön zeigt, dass es gute freie Alternativen zu Google Maps gibt 🙂
Allerdings darf man nicht ganz vergessen, dass auch OSM nur begrenzte technische Ressourcen hat. Also gerade größere Seiten sollten unbedingt auf externe Anbieter zurückgreifen, die OSM aufbereiten: http://www.switch2osm.org