13 bibliotek JavaScript do tworzenia interaktywnych i dostosowanych map

Wcześniej korzystaliśmy z Kreatora map Google i 10 innych narzędzi ułatwiających tworzenie map. Jeśli jednak wolisz korzystać z bibliotek JavaScript, czy otrzymaliśmy dla ciebie post. Oto biblioteki JS, których można użyć do wyświetlania specjalnych znaczników map, rysowania niestandardowych linii tras lub nawet pokazywania okna dialogowego po najechaniu kursorem lub kliknięciu określonych punktów mapy.

Spersonalizuj swoje mapy w wybranym stylu - niektóre z nich mogą być stylizowane za pomocą CSS - lub dostosuj swoją mapę, aby była tak interaktywna, jak chcesz. Źródło danych mapy, zależności i licencje każdej biblioteki zostały dołączone dla Twojej wygody.

Więcej o Hongkiat:

Jak stylizować Mapy Google
Uzyskanie lokalizacji użytkownika za pomocą API geolokalizacji HTML5
Wizualizacja danych: ponad 20 przydatnych narzędzi i zasobów

GMapsy

GMapsy ułatwia dodawanie i dostosowywanie Map Google. Oprócz dodawania mapy, możesz również dodać do mapy kilka rzeczy, takich jak polilinie, które mogą być przydatne do rysowania trasy, specjalne sterowanie menu, a nawet elementy HTML.

GMaps jest kompatybilny z danymi sformatowanymi w JSON, które można wykorzystać do zintegrowania mapy z konkretną aplikacją, np. Foursquare.

Źródło danych mapy: Mapy Google
Zależności: Żaden
Licencja: Licencja MIT

j

Przy 5 KB, jHERE pokazuje, że rozmiar nie ma znaczenia; wciąż możesz zbudować potężną interaktywną mapę z kilkoma opcjami dostosowywania. jHERE wywodzi wizualizację mapy z mapy HERE, która jest jednym z najpopularniejszych dostawców map dla Windows Phone.

Bibliotekę można rozszerzyć o nowe funkcje, a dla tej biblioteki opracowano kilka rozszerzeń, w tym jedno do dodawania kształtów, tras i niestandardowych znaczników.

Źródło danych mapy: TUTAJ Mapy
Zależności: jQuery lub ZeptoJS
Licencja: Licencja MIT

Kartograf

Kartograf składa się z dwóch plików, Kartograph.ph do generowania mapy w formacie SVG, oraz Kartograph.js, aby dodać interaktywne elementy na górze mapy. Ponieważ Kartograph.js jest zbudowany na szczycie Raphael.js, mapa działałaby dobrze do IE7. Możesz obejrzeć interaktywne prezentacje map, aby dowiedzieć się, co może zrobić Kartograph.

Źródło danych mapy: Kartograf
Zależności: Kartograph.py, Raphael i jQuery
Licencja: AGPL i LGPL

Mapael

jQuery Mapael pozwala tworzyć mapy z elegancką wizualizacją danych oraz interaktywnością. Możesz na przykład utworzyć mapę i wyznaczyć każdy region na mapie różnymi kolorami w zależności od regionu. Możesz także dodać podpowiedź w regionie, a także obsługę zdarzeń Kliknij lub wahać się.

Mapa jest zbudowana z myślą o SEO, udostępniając alternatywne treści dla robotów wyszukiwarek, które nie są w stanie indeksować treści generowanych przez JavaScript.

Źródło danych mapy: Raphael.js
Zależności: jQuery
Licencja: Licencja MIT

D3js

D3.js to kompleksowa biblioteka JavaScript, która ożywi Twoje dane za pomocą HTML, SVG i CSS. Korzystanie z D3 jest bardzo zróżnicowane, w tym do tworzenia wysoce interaktywnej mapy. Zobacz mapę globalnego rozwoju Banku Światowego, a zobaczysz możliwości tego, co możesz zbudować za pomocą D3.js.

Źródło danych mapy: D3.js
Zależności: Żaden
Licencja: Niezdefiniowany

DataMaps

Jeśli tworzenie mapy z D3.js jest przytłaczające, możesz użyć DataMaps. DataMaps jest zasadniczo wtyczką D3.js, która została opracowana specjalnie do tworzenia map. Dziedziczy wiele możliwości D3.js, dzięki czemu można budować proste lub bardzo dostosowane mapy. Czy wspomniałem, że mapa reaguje?

Źródło danych mapy: D3.js
Zależności: D3.js i TopoJSON
Licencja: Licencja MIT

GeoChart

GeoChart to uproszczona mapa Google, która wyświetla region, markery i tekst zamiast pełnej mapy z drobnymi szczegółami. Mapa jest generowana w SVG i może być dostosowywana na wiele sposobów, w tym poprzez zmianę kolorów regionu, dodawanie wyskakujących okien i niestandardowych znaczników map.

Źródło danych mapy: Mapy Google
Zależności: Żaden
Licencja: Przeczytaj Google Maps TOS

Maplace

Maplace, wtyczka jQuery do generowania mapy przez Google Maps API v3. Maplace działa we wszystkich przeglądarkach, w tym w IE6. Więc jest to kolejna wspaniała wtyczka warta uwagi, jeśli chcesz zbudować mapę w najprostszy możliwy sposób.

Źródło danych mapy: Mapy Google
Zależności: jQuery
Licencja: Licencja MIT

Dostojny

Okazała jest biblioteka JavaScript, która została opracowana do generowania map USA. Biblioteka jest stosunkowo lekka, biorąc pod uwagę, że można dodawać interaktywne elementy na wierzchu wygenerowanych map.

Źródło danych mapy: Stately / SVG
Zależności: Żaden
Licencja: Licencja MIT

GeoComplete

GeoComplete to osobna biblioteka JavaScript. Biblioteka doda pole wprowadzania wraz z mapą, która pokaże sugestie miast, krajów lub stanów podczas pisania.

Źródło danych mapy: Mapy Google
Zależności: jQuery
Licencja: Licencja MIT

Narzędzia mapy

Narzędzia do map udostępniają intuicyjne API do dodawania Map Google. Obsługuje ładowanie danych JSON w formacie geo, takich jak TopoJSON i GeoJSON, aby renderować mapę. Ponadto możesz dodać animowane znaczniki, które moim zdaniem ożywią mapę, wstawią treść HTML ze zmiennymi lub symbolami zastępczymi Kierownicy ala.

Źródło danych mapy: Mapy Google
Zależności: GeoJSON / TopoJSON
Licencja: Licencja MIT

OpenLayers

OpenLayers to wysokowydajny framework JavaScript o otwartym kodzie źródłowym do tworzenia interaktywnych map przy użyciu różnych usług mapowania. Możesz wybrać źródło warstwy mapy przy użyciu warstwy lub warstwy wektorowej z wielu usług map.

OpenLayer jest gotowy do pracy po wyjęciu z pudełka, nadaje się do budowania map na urządzeniach i przeglądarkach. Możesz użyć CSS do innego wyglądu mapy. Aby zaimplementować mapę w swojej sieci za pomocą OpenLayers, oto tutorial, który pomoże.

Źródło danych mapy: OpenStreetMap
Zależności: Żaden
Licencja: Niezdefiniowany

Ulotka

Deweloperzy dali Ulotka podstawowe funkcje do perfekcyjnego działania, zachowując niewielki rozmiar, idealny dla urządzeń mobilnych. W przypadku określonych funkcji wystarczy rozszerzyć broszurę za pomocą wtyczek. Ulotka zawiera większość funkcji mapy online, których potrzebujesz: warstwy kafli, wyskakujące okienka, markery i bezpłatne warstwy wektorowe, takie jak polilinie, wielokąty, okręgi lub prostokąty. Jest dostarczany z ładnymi, domyślnymi projektami, chociaż możesz z łatwością dostosować styl za pomocą CSS3.

Ulotka ma najbardziej użyteczne funkcje interakcji zarówno dla przeglądarek mobilnych, jak i stacjonarnych.

Źródło danych mapy: OpenStreetMap
Zależności: Żaden
Licencja: Niezdefiniowany