Leaflet.js prosta biblioteka do znaczników na mapie | DailyWeb.pl

Leaflet.js prosta biblioteka do znaczników na mapie

Opublikowano 8 miesięcy temu -


Google Maps to najpopularniejsze narzędzie do osadzania map na stronach internetowych. Jest sporo narzędzi do edycji wyglądu mapy, ale nie spotkałem się jeszcze z możliwością dodawania własnych znaczników, a ten problem rozwiązuje prosta biblioteka Leaflet.js.

Darmowy, open-sourceowy projekt stworzony przez Vladimira Agafonkina z zespołu Mapboxa. Dziś już nad projektem pracują dziesiątki ludzi, którzy stale go aktualizują i poprawiają znalezione błędy.

Lista możliwości jakie oferuję biblioteka jest naprawdę spora:
- markery z oknami popup,
- wektorowe elementy,
- dodatkowe elementy graficzne,
- scroll zoom i pinch-zoom na telefonach
- nawigacja za pomocą klawiatury
- wiele dostępnych eventów: (click, mouseover)
- animacje powiększania i zmniejszania mapy,
- przystosowana do urządzeń mobilnych
- ostylowanie map za pomocą CSS3
- wsparcie dla starszych przeglądarek
- wsparcie dla Retiny

Implementacja wymaga na samym początku wprowadzenia manualnie współrzędnych i wielkości mapy. Mapę można swobodnie powiększać i oddalać, a marker dynamicznie przystosowuję się do stopnia zoomu. Więcej informacji o możliwościach Leaflet.js odnajdziemy w obszernej dokumentacji.

Porównanie "surowego" Google Maps z Leaflet.js:

See the Pen Google Maps and Leaflet.js by chris0stein (@chris0stein) on CodePen.

Podsumowując, możliwości jakie oferują Leaflet.js są naprawdę interesujące. Małe rozmiary nie obciążają już i tak ciężkiego systemu Google Maps, a możemy rozbudować naszą mapę o ciekawe elementy i możliwości.

Leaflet.js