Leaflet.js ist die einfachste Kartenbibliothek, die Sie jemals finden werden
Google Maps ist sicherlich das beliebteste einbettbares Karten-Widget für Webdesigner. Aber was ist mit Hinzufügen benutzerdefinierter Funktionen wie Tooltips und Stiftmarkierungen?
Dies ist, wo eine tolle Bibliothek gefällt Leaflet.js hilft eine Tonne.
Das ist ein völlig freies Open-Source-Projekt ursprünglich von einem der Jungs von Mapbox namens Vladimir Agafonkin erstellt. Seitdem ist Leaflet gewachsen Dutzende von Mitwirkenden um die Welt.
Es ist häufig mit Fehlerbehebungen und neuen Funktionen aktualisiert die die allgemeine Implementierung auf jeder Website verbessern. Dies ist bei weitem meine Lieblings-Mapping-Bibliothek, aufgrund ihrer schiere Kraft und Designästhetik.
Es hat so viele Funktionen, dass ich sie unmöglich alle auflisten könnte, aber hier sind sie die interessantesten:
- Mobile Hardware-Beschleunigung
- Pin-Markierungen, Formüberlagerungen und QuickInfos
- Benutzerdefinierte Zoom- und Schwenkanimation
- Keine JS-Abhängigkeiten
- Unterstützung für alle gängigen Browser einschließlich IE7+
Die Implementierung ist etwas kompliziert, weil Sie es müssen Koordinaten eingeben und Definieren Sie, wie groß die Karte sein soll.
Benutzer können immer Rauszoomen und schwenken um, Die Sicht kann sich also immer ändern. Aber es basiert auch auf wie Sie die Karte definieren auf der Seite.
Es gibt ein riesiges Dokumentationsseite voller Informationen zu jedem Aspekt des Merkblatts. Leider ist es so dicht, dass ich nicht empfehlen kann, einfach hineinzutauchen, weil Sie sich wahrscheinlich verlaufen. Überprüfen Sie stattdessen die Broschüre-Tutorialseite dazu gehört auch a Schnellstartanleitung für Neulinge.
Du wirst lernen, wie man geht Karten einbetten, Größe / Position ändern, und wie Fügen Sie benutzerdefinierte Grafiken hinzu, wie Kreise oder Pin-Marker.
Diese eine Intro-Anleitung kann lehre dich alles was du brauchst um das Flugblatt auf einem Blog, auf einer Unternehmenswebsite oder einem bevorstehenden Projekt zu verwenden.
Es gibt viele gute Gründe, Google Maps zu verwenden: Es ist leistungsstark, vertrauenswürdig und kostenlos. Aber das Flugblatt kommt mit So viele weitere Funktionen sind sofort verfügbar und du musst nur noch Fügen Sie die CSS / JS-Dateien Ihrer Webseite hinzu anfangen Sie können sogar finden Online gehostete Kopien wenn Sie die CDN-Route bevorzugen.
Lassen Sie sich nicht von der Dokumentation abschrecken. Es gibt viel zu lernen, aber Es sind nicht alle Funktionen erforderlich für ein grundlegendes Leaflet-Setup.
Und es braucht nicht viel Erstellen Sie eine erstaunliche Karte von Grund auf. Werfen Sie einen Blick auf diese erstellte Codepen-Demo mit Leaflet.js und Google Maps API.
