13 Knihovny JavaScriptu pro vytváření interaktivních a přizpůsobených map

V minulosti jsme zobrazovali Google Map Maker a 10 dalších nástrojů, které vám pomohou vytvořit mapy. Pokud však dáváte přednost použití knihoven Javascript, máme místo pro vás. Zde jsou JS knihovny, které můžete použít k zobrazení speciálních mapových značek, kreslení vlastních linií trasy nebo dokonce zobrazení dialogu při přechodu nebo kliknutí na určité body mapy.

Přizpůsobte si mapy ve stylu, který chcete - některé z nich lze stylizovat pomocí CSS - nebo upravte svou mapu tak, aby byla stejně interaktivní, jak chcete. Zdroj mapových dat, závislostí a licencí každé knihovny byl zahrnut pro vaše pohodlí.

Více o Hongkiatu:

• Jak nastavit Mapy Google
• Získání umístění uživatele pomocí rozhraní HTML5 Geolocation API
• Vizualizace dat: 20 a více užitečných nástrojů a zdrojů

GMaps

GMaps umožňuje přidávat a přizpůsobovat Mapy Google vánek. Kromě přidání mapy můžete do mapy přidat několik věcí, například křivky, které mohou být užitečné pro kreslení trasy, speciální ovládací prvek nabídky a dokonce i prvky HTML..

GMaps je kompatibilní s daty ve formátu JSON, které můžete využít k integraci své mapy s konkrétní aplikací, jako je například Foursquare.

• Zdroj dat mapy: Google mapy
• Závislosti: žádný
• Licence: Licence MIT

JHere

U 5KB vám JHERE ukazuje, že na velikosti nezáleží; stále můžete vytvořit výkonnou interaktivní mapu s několika možnostmi přizpůsobení. jHERE získává vizualizaci map z mapy HERE, která je jedním z nejpopulárnějších poskytovatelů map pro Windows Phone.

Knihovna může být rozšířena o nové funkce a pro tuto knihovnu bylo vyvinuto několik rozšíření, včetně rozšíření pro přidávání tvarů, tras a vlastních značek..

• Zdroj dat mapy: ZDE Mapy
• Závislosti: jQuery nebo ZeptoJS
• Licence: Licence MIT

Kartograf

Kartograf se skládá ze dvou souborů, Kartograph.ph generovat mapu ve formátu SVG, a Kartograph.js přidat interaktivní prvky v horní části mapy. Vzhledem k tomu, Kartograph.js je postaven na vrcholu Raphael.js mapa by fungovala pěkně dolů na IE7. Můžete si prohlédnout ukázky interaktivní mapy a zjistit, co dokáže Kartograph udělat.

• Zdroj dat mapy: Kartograf
• Závislosti: Kartograph.py, Raphael a jQuery
• Licence: AGPL a LGPL

Mapael

jQuery Mapael umožňuje vytvářet mapy s elegantní vizualizací dat a interaktivitou. Můžete například vytvořit mapu a určit jednotlivé oblasti na mapě různými barvami podle regionu. Můžete také přidávat popisky v regionu, stejně jako obslužné rutiny událostí klikněte nebo vznášet se.

Mapa je postavena na SEO s ohledem na to, že poskytuje alternativní obsah pro roboty pro vyhledávače, které nejsou schopny procházet obsah generovaný JavaScriptem.

• Zdroj dat mapy: Raphael.js
• Závislosti: jQuery
• Licence: Licence MIT

D3js

D3.js je komplexní JavaScript knihovna, která přinese vaše data do života prostřednictvím HTML, SVG a CSS. Využití D3 je poměrně pestré, včetně budování vysoce interaktivní mapy. Podívejte se na tuto mapu globálního rozvoje Světové banky a uvidíte možnosti toho, co můžete postavit s D3.js.

• Zdroj dat mapy: D3.js
• Závislosti: žádný
• Licence: Nedefinováno

DataMaps

Pokud je stavba mapy s D3.js ohromující, můžete použít DataMaps. DataMaps je v podstatě plugin D3.js vyvinutý speciálně pro tvorbu map. Zdědí mnoho ze schopností D3.js, a proto s ním můžete vytvářet jednoduché nebo velmi přizpůsobené mapy. Zmínil jsem se, že mapa je citlivá?

• Zdroj dat mapy: D3.js
• Závislosti: D3.js a TopoJSON
• Licence: Licence MIT

GeoChart

GeoChart je zjednodušená mapa Google, která namísto plnohodnotné mapy s malými detaily vykresluje oblast, značky a text. Mapa je generována v SVG a může být přizpůsobena mnoha způsoby, včetně změny barev v regionu, přidávání vyskakovacích oken a vlastních značek map..

• Zdroj dat mapy: Google mapy
• Závislosti: žádný
• Licence: Přečtěte si Google Maps TOS

Maplace

Maplace, plugin jQuery pro generování map přes rozhraní Google Maps API v3. Maplace funguje ve všech prohlížečích, včetně IE6. Takže to je další skvělý plugin stojí za pozornost, pokud chcete vytvořit mapu v nejjednodušším možným způsobem.

• Zdroj dat mapy: Google mapy
• Závislosti: jQuery
• Licence: Licence MIT

Majestátní

Stately je JavaScript knihovna, která je vyvinuta pro generování map USA. Knihovna je poměrně lehká vzhledem k tomu, že můžete přidat interaktivní prvky v horní části generovaných map.

• Zdroj dat mapy: Stately / SVG
• Závislosti: žádný
• Licence: Licence MIT

GeoComplete

GeoComplete je samostatná knihovna jazyka JavaScript. Knihovna přidá vstupní pole spolu s mapou, která bude zobrazovat návrhy měst, zemí nebo států při psaní.

• Zdroj dat mapy: Google mapy
• Závislosti: jQuery
• Licence: Licence MIT

Nástroje mapy

Mapové nástroje poskytují intuitivní rozhraní API pro přidání Map Google. Podporuje načítání geo-formátovaných dat JSON, jako je topoJSON a GeoJSON, aby se mapa vykreslila. Kromě toho můžete přidat animované značky, které podle mého názoru učiní mapu živější, vloží obsah HTML s proměnnými nebo zástupnými symboly ala řídítka..

• Zdroj dat mapy: Google mapy
• Závislosti: GeoJSON / TopoJSON
• Licence: Licence MIT

OpenLayers

OpenLayers je vysoce výkonný open source JavaScript rámec pro vytváření interaktivních map pomocí různých mapovacích služeb. Zdroj vrstvy mapy můžete vybrat pomocí vrstvené vrstvy nebo vektorové vrstvy z řady mapových služeb.

OpenLayer přichází mobilní připraven z krabice, vhodný pro vytváření map napříč zařízeními a prohlížeči. CSS můžete použít pro jiný vzhled vaší mapy. Chcete-li implementovat mapu ve vašem webu pomocí OpenLayers, zde je návod, který vám pomůže.

• Zdroj dat mapy: OpenStreetMap
• Závislosti: žádný
• Licence: Nedefinováno

Leták

Vývojáři dali Leták základní funkce pro perfektní práci, udržení své velikosti malé, ideální pro mobilní zařízení. Pro specifické funkce stačí rozšířit leták o pluginy. Leták obsahuje většinu online mapových funkcí, které potřebujete: vrstvy dlaždic, vyskakovací okna, značky a volné vektorové vrstvy, jako jsou křivky, polygony, kruhy nebo obdélníky. Dodává se s pěknou výchozí návrhy, i když můžete přizpůsobit styl pomocí CSS3 s lehkostí.

Leták má nejpoužívanější funkce interakce jak pro mobilní, tak pro stolní prohlížeče.

• Zdroj dat mapy: OpenStreetMap
• Závislosti: žádný
• Licence: Nedefinováno