Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » JavaScript & jQuery » Leaflet: Interaktive Karten mit JavaScript und OpenStreetMap

Leaflet: Interaktive Karten mit JavaScript und OpenStreetMap

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 11 Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 14. April 2013
Bookmarke mich
Share on pocket

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

netkin digital Marketing

Köln

YOYABA

Hamburg

4eck Media GmbH & Co. KG

Waren (Müritz)

PRIMA LINE

Berlin

dskom GmbH (SEO Profi Berlin)

Berlin

Alle Agenturpartner

Jobs

WordPress Developer – Vollzeit

Remote

Senior SEO Manager

München

Senior Online Marketing Manager

München

Webtexter für SEO Agentur

Salzburg (Österreich)

Junior Media Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Grav CMS: Blitzschnell, einfach und modern

Grav CMS ist eines der interessantesten neuen Content Management Systeme am Markt. Es geht einen völlig anderen Weg als bisher bekannte Ansätze und kommt sehr

 →   

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung

 →   

Atomic Design: So gestaltest du deine Website modular

Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem

 →   

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 😉

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

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.