Leaflet.js ist die einfachste Kartenbibliothek, die Sie jemals finden werden

Google Maps ist sicherlich das beliebteste einbindbare Karten-Widget für Webdesigner. Aber was ist mit benutzerdefinierten Features wie Tooltips und Pin-Markern?

Dies ist, wo eine wunderbare Bibliothek wie Leaflet.js eine Tonne hilft.

Dies ist ein komplett kostenloses Open-Source-Projekt, das ursprünglich von einem der Väter von Mapbox namens Vladimir Agafonkin entwickelt wurde. Seitdem ist Leaflet auf Dutzende von Mitwirkenden auf der ganzen Welt angewachsen.

Es wird häufig mit Bugfixes und neuen Funktionen aktualisiert, die die gesamte Implementierung auf jeder Website verbessern. Dies ist bei weitem meine Lieblings-Mapping-Bibliothek wegen seiner schiere Kraft und Design-Ästhetik.

Es hat so viele Funktionen, dass ich sie nicht alle aufzählen könnte, aber hier sind die interessantesten :

• Mobile Hardwarebeschleunigung
• Stiftmarkierungen, Formüberlagerungen und QuickInfos
• Benutzerdefinierte Zoom- und Panning-Animation
• Keine JS-Abhängigkeiten
• Unterstützung für alle gängigen Browser einschließlich IE7 +

Die Implementierung ist ein bisschen schwierig, weil Sie Koordinaten eingeben müssen und definieren, wie groß die Karte sein soll .

Benutzer können immer herauszoomen und schwenken, so dass sich die Ansicht immer ändern kann. Es basiert aber auch darauf, wie Sie die Karte auf der Seite definieren.

Es gibt eine riesige Dokumentationsseite voller Informationen für jeden Aspekt von Leaflet. Leider ist es so dicht, dass ich nicht empfehlen kann, einfach hineinzutauchen, denn Sie werden sich wahrscheinlich verlaufen. Schauen Sie sich stattdessen die Seite "Leaflet Tutorials" an, die auch eine Kurzanleitung für Neulinge enthält.

Sie erfahren, wie Sie Karten einbetten, die Größe / Position ändern und oben benutzerdefinierte Grafiken wie Kreise oder Stiftmarkierungen hinzufügen können.

Dieser eine Intro-Guide kann Ihnen alles beibringen, was Sie benötigen, um Leaflet in einem Blog, auf der Unternehmenswebseite oder bei einem zukünftigen Projekt zu verwenden.

Es gibt viele gute Gründe, Google Maps zu verwenden: Es ist leistungsstark, vertrauenswürdig und kostenlos. Aber Leaflet kommt mit so vielen weiteren Funktionen aus der Box und Sie müssen nur die CSS / JS-Dateien zu Ihrer Webseite hinzufügen, um zu beginnen. Sie können sogar online gehostete Kopien finden, wenn Sie die CDN-Route bevorzugen.

Lassen Sie sich nicht von der Dokumentation abschrecken. Es gibt eine Menge zu lernen, aber nicht alle Funktionen sind notwendig für eine grundlegende Leaflet-Setup.

Und es braucht nicht viel, um eine erstaunliche Karte von Grund auf zu erstellen . Werfen Sie einen Blick auf diese Codepen-Demo, die mit Leaflet.js & Google Maps API erstellt wurde .