Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » JavaScript & jQuery » Leaflet: Interaktive Karten mit JavaScript und OpenStreetMap

Leaflet: Interaktive Karten mit JavaScript und OpenStreetMap

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 11 Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 14. April 2013

Inhaltsverzeichnis

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
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

leaflet_beispiel
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

  • Leaflet

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

YOYOBA Performance Marketing Hamburg Logo.

YOYABA

Hamburg

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

Trendmarke Logo.

Trendmarke GmbH

Stuttgart

AMZ Marketing in Regensburg Logo.

AMZ-Marketing GmbH

Regensburg

WordPress Agentur Kreativdenker

Speyer

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

11 Antworten zu „Leaflet: Interaktive Karten mit JavaScript und OpenStreetMap“
— was ist Deine Meinung?

  1. Max sagt:
    2. Januar 2015 um 14:50 Uhr

    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);

    Antworten
    1. penguin sagt:
      26. Januar 2015 um 18:35 Uhr

      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

      Antworten
  2. Patrick sagt:
    5. März 2014 um 20:40 Uhr

    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

    Antworten
  3. Andreas sagt:
    22. April 2013 um 15:23 Uhr

    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?

    Antworten
    1. Andreas sagt:
      8. Mai 2013 um 15:14 Uhr

      Keine Idee dazu?

      Antworten
  4. knut sagt:
    18. April 2013 um 11:46 Uhr

    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/

    Antworten
  5. tom sagt:
    15. April 2013 um 21:53 Uhr

    Schöner Beitrag, aber es sollte wohl geometrische und nicht geometrische Formen heißen?

    Antworten
    1. Denis Potschien sagt:
      16. April 2013 um 10:52 Uhr

      Ja, das stimmt. Es soll „geometrische Formen“ heißen. Da war ich wohl zu sehr in der Thematik vertieft 🙂

      Antworten
      1. Dieter Petereit sagt:
        16. April 2013 um 11:30 Uhr

        Korrigiert 😉

  6. Rainer sagt:
    15. April 2013 um 15:03 Uhr

    Welche kostenlose Alternative gibt es eigentlich sonst noch?

    Antworten
  7. er sagt:
    14. April 2013 um 14:15 Uhr

    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

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑