13 knižníc jazyka JavaScript na vytváranie interaktívnych a prispôsobených máp

Predtým sme v službe Google Map Maker predstavili 10 ďalších nástrojov, ktoré vám pomôžu vytvoriť mapy. Ak však preferujete používanie knižníc Javascript, získali sme pre vás príspevok. Tu sú knižnice JS, ktoré môžete použiť na zobrazenie špeciálnych značiek na mape, na vytváranie vlastných riadkov trasy alebo dokonca na zobrazenie dialógu pri presúvaní alebo kliknutí na určité body mapy.

Prispôsobte si mapy v požadovanom štýle - niektoré z nich môžu byť štylizované pomocou CSS - alebo prispôsobte svoju mapu tak, aby bola interaktívna, ako sa vám páči. Zdroj informácií o mapách, závislosti a licencie každej knižnice bol zahrnutý pre vaše pohodlie.

Viac informácií o Hongkiatu:

• Ako štýlovať Mapy Google
• Získanie umiestnenia používateľa s rozhraním API pre geolokáciu HTML5
• Vizualizácia dát: 20+ užitočných nástrojov a zdrojov

GMaps

GMaps pridáva a prispôsobuje Mapy Google vietor. Okrem pridania mapy môžete do mapy zadať aj niekoľko vecí, ako napríklad križovatky, ktoré môžu byť užitočné pre kreslenie trasy, špeciálne ovládanie menu a dokonca aj prvky HTML.

GMaps je kompatibilný s formátovanými údajmi JSON, ktoré môžete využiť na integráciu vašej mapy s konkrétnou aplikáciou, ako napríklad Foursquare.

• Zdroj údajov mapy: Google Mapy
• závislosti: nikto
• licencie: Licencia MIT

Jheri

Pri 5 kB, jHERE ukazuje, že veľkosť nezáleží; stále môžete vytvoriť silnú interaktívnu mapu s niekoľkými možnosťami prispôsobenia. jHERE odvodzuje vizualizáciu mapy zo ZDE mapy, ktorá je jedným z najpopulárnejších poskytovateľov máp pre Windows Phone.

Knižnica môže byť rozšírená o nové funkcie a pre túto knižnicu je vytvorených niekoľko rozšírení vrátane jednej pre pridávanie tvarov, ciest a vlastných značiek.

• Zdroj údajov mapy: ZDE Mapy
• závislosti: jQuery alebo ZeptoJS
• licencie: Licencia MIT

Kartograph

Kartograph obsahuje dve súbory, Kartograf.ph na generovanie mapy vo formáte SVG a Kartograph.js na pridanie interaktívnych prvkov na vrchole mapy. Vzhľadom k tomu, Kartograph.js je postavený na vrchole Raphael.js mapa by fungovať pekne až do IE7. Môžete sa pozrieť na interaktívne demografické mapy, aby ste zistili, čo môže Kartograf urobiť.

• Zdroj údajov mapy: Kartograf
• závislosti: Kartograf.py, Raphael a jQuery
• licencie: AGPL a LGPL

Mapael

jQuery Mapel umožňuje vytvárať mapy s elegantnou vizualizáciou dát ako aj interaktivitou. Môžete napríklad vytvoriť mapu a označiť každý región na mape s rôznymi farbami podľa regiónu. Môžete tiež pridať nástroj pre oblasť, ako aj spracovatelia udalostí cvaknutie alebo vznášať sa.

Mapa je postavená so sebou na mysli tým, že poskytuje alternatívny obsah pre roboty vyhľadávacích nástrojov, ktoré nie sú schopné indexovo prehľadávať obsah vytvorený pomocou jazyka JavaScript.

• Zdroj údajov mapy: Raphael.js
• závislosti: jQuery
• licencie: Licencia MIT

D3js

D3.js je ucelená JavaScriptová knižnica, ktorá prinesie vaše dáta do života prostredníctvom HTML, SVG a CSS. D3 používanie je pomerne rozmanité, vrátane pre vybudovanie vysoko interaktívnej mapy. Pozrite si túto mapu Globálneho rozvoja Svetovej banky a uvidíte možnosti toho, čo môžete vytvoriť s D3.js.

• Zdroj údajov mapy: D3.js
• závislosti: nikto
• licencie: nedefinovaný

DataMaps

Ak je stavba mapy s D3.js drvivá, môžete ju použiť DataMaps. DataMaps je v podstate doplnok D3.js, ktorý je vyvinutý špeciálne na vytváranie máp. To zdedí mnohé z možností D3.js, takže môžete s ním vytvoriť jednoduché alebo veľmi prispôsobené mapy. Spomenul som, že mapa je citlivá?

• Zdroj údajov mapy: D3.js
• závislosti: D3.js a TopoJSON
• licencie: Licencia MIT

GeoChart

GeoChart je zjednodušená mapa Google, ktorá vykresľuje región, značky a text namiesto plnohodnotnej mapy s malými detailmi. Mapa je generovaná v SVG a môže byť prispôsobená mnohými spôsobmi vrátane zmeny farieb regiónu, pridania vyskakovacích okien a vlastných značiek mapy.

• Zdroj údajov mapy: Google Mapy
• závislosti: nikto
• licencie: Prečítajte si TOS služby Mapy Google

Maplace

Maplace, plugin jQuery na vytváranie máp prostredníctvom API služby Google Maps v3. Mapovanie funguje vo všetkých prehliadačoch, vrátane IE6. Takže toto je ďalší skvelý plugin, ktorý stojí za pozornosť, ak chcete čo najjednoduchšie vytvoriť mapu.

• Zdroj údajov mapy: Google Mapy
• závislosti: jQuery
• licencie: Licencia MIT

majestátne

Skvelá je knižnica JavaScript, ktorá je vyvinutá na vytváranie amerických máp. Knižnica je porovnateľne ľahká vzhľadom na to, že môžete pridať interaktívne prvky navyše k vygenerovaným mapám.

• Zdroj údajov mapy: Stane / SVG
• závislosti: nikto
• licencie: Licencia MIT

GeoComplete

GeoComplete je samostatná JavaScriptová knižnica sama o sebe. Knižnica pridá spolu s mapou vstupné pole, ktoré počas zadávania ukáže návrhy miest, krajín alebo štátov.

• Zdroj údajov mapy: Google Mapy
• závislosti: jQuery
• licencie: Licencia MIT

Mapové nástroje

Mapové nástroje ponúkajú intuitívne rozhranie API na pridanie Mapy Google. Podporuje načítanie geograficky formátovaných údajov JSON, ako sú TopoJSON a GeoJSON, aby sa zobrazila mapa. Okrem toho môžete pridať animované značky, ktoré podľa môjho názoru urobia mapu živšou, vložte HTML obsah s premennými alebo zástupcami ala Handlebars.

• Zdroj údajov mapy: Google Mapy
• závislosti: GeoJSON / TopoJSON
• licencie: Licencia MIT

OpenLayers

OpenLayers je vysoko výkonný open source JavaScript framework na vytváranie interaktívnych máp pomocou rôznych mapovacích služieb. Môžete si vybrať zdroj vrstvy mapy pomocou dlaždicovej vrstvy alebo vrstvy vektora z množstva mapových služieb.

OpenLayer je mobilný pripravený z krabice, vhodný na vytváranie máp medzi zariadeniami a prehliadačmi. CSS môžete použiť na iný vzhľad vašej mapy. Ak chcete implementovať mapu na vašom webe pomocou aplikácie OpenLayers, nájdete tu návod, ktorý vám pomôže.

• Zdroj údajov mapy: OpenStreetMap
• závislosti: žiadny
• licencie: Nedefinované

leták

Vývojári to dali leták základné funkcie pracovať perfektne, zachovanie jeho veľkosti malé, ideálne pre mobilné zariadenia. Pre špecifické funkcie stačí rozšíriť leták pomocou doplnkov. Leták má väčšinu online funkcií mapy, ktoré potrebujete: vrstvy dlaždíc, vyskakovacie okienka, značky a voľné vektorové vrstvy ako sú polylinky, polygóny, kruhy alebo obdĺžniky. Dodáva sa s peknými predvolenými dizajnmi, aj keď môžete jednoducho prispôsobiť štýl pomocou CSS3.

Leaflet má najrozšírenejšie funkcie interakcie pre mobilné aj desktopové prehliadače.

• Zdroj údajov mapy: OpenStreetMap
• závislosti: žiadny
• licencie: Nedefinované