13 JavaScript biblioteka za stvaranje interaktivnih i prilagođenih karata

Prethodno smo prikazali Google Map Maker i 10 drugih alata koji će vam pomoći pri izradi karata. Međutim, ako radije koristite knjižnice Javascripta, imamo li post za vas. Ovdje su JS knjižnice koje možete koristiti za prikazivanje posebnih oznaka na karti, crtanje prilagođenih linija rute ili čak prikazivanje dijaloga kada pomičete ili kliknete na određene točke na karti.

Prilagodite svoje karte u željenom stilu - neke od njih možete stilizirati pomoću CSS-a ili prilagodite svoju kartu tako da bude interaktivna koliko želite. Izvor podataka mapa, ovisnosti i licenci svake knjižnice je uključen radi vaše udobnosti.

Više o Hongkiatu:

Kako oblikovati Google karte
Dobivanje lokacije korisnika s HTML5 Geolocation API
Vizualizacija podataka: 20+ korisnih alata i resursa

Gmaps

Gmaps čini dodavanje i prilagođavanje Google karata lakim. Osim dodavanja karte, možete također dodati nekoliko stvari na kartu, kao što su polilinije koje mogu biti korisne za crtanje rute, posebnu kontrolu izbornika, pa čak i HTML elemente.

GMaps je kompatibilan s JSON formatiranim podacima koje možete upotrijebiti za integraciju karte s određenom aplikacijom, kao što je Foursquare.

Izvor podataka karte: Google karte
ovisnosti: nijedan
licenca: Licenca MIT

jHere

Na 5KB, JHERE vam pokazuje da veličina nije važna; još uvijek možete izgraditi moćnu interaktivnu kartu s pregršt opcija prilagodbe. jHERE izvodi vizualizaciju karte iz HERE karte, koja je jedan od najpopularnijih davatelja karata za Windows Phone.

Knjižnica se može proširiti novom funkcionalnošću, a za tu je knjižnicu razvijeno nekoliko proširenja, uključujući jednu za dodavanje oblika, ruta i prilagođenih markera..

Izvor podataka karte: HERE Karte
ovisnosti: jQuery ili ZeptoJS
licenca: Licenca MIT

Kartograph

Kartograph sastoji se od dvije datoteke, Kartograph.ph za generiranje karte u SVG formatu, i Kartograph.js za dodavanje interaktivnih elemenata na vrh karte. Budući da je Kartograph.js izgrađen na vrhu Raphael.js, karta bi dobro funkcionirala do IE7. Možete pogledati demonstracije interaktivne karte kako biste otkrili što Kartograf može učiniti.

Izvor podataka karte: Kartograf
ovisnosti: Kartograph.py, Raphael i jQuery
licenca: AGPL i LGPL

Mapael

jQuery Mapael omogućuje stvaranje mapa s elegantnom vizualizacijom podataka, kao i interaktivnosti. Možete, na primjer, stvoriti kartu i označiti svaku regiju na karti različitim bojama na temelju regije. Također možete dodati tooltip na regiju, kao i događaj rukovatelje poput klik ili lebdjeti.

Karta je izgrađena na temelju SEO-a pružajući alternativni sadržaj robotima tražilica koji ne mogu indeksirati sadržaj koji je generirao JavaScript.

Izvor podataka karte: Raphael.js
ovisnosti: jQuery
licenca: Licenca MIT

D3js

D3.js je sveobuhvatna JavaScript biblioteka koja će oživjeti vaše podatke kroz HTML, SVG i CSS. D3 uporaba je vrlo raznolika, uključujući i izgradnju vrlo interaktivne karte. Pogledajte ovu kartu Globalnog razvoja Svjetske banke i vidjet ćete mogućnosti onoga što možete izgraditi s D3.js.

Izvor podataka karte: D3.js
ovisnosti: nijedan
licenca: Nedefiniran

DataMaps

Ako je izrada karte s D3.js neodoljiva, možete je upotrijebiti DataMaps. DataMaps je u biti D3.js dodatak koji je razvijen posebno za izradu karata. Ona nasljeđuje mnoge sposobnosti D3.js, stoga s njom možete graditi jednostavne ili vrlo prilagođene karte. Jesam li spomenuo da je karta odgovorna?

Izvor podataka karte: D3.js
ovisnosti: D3.js i TopoJSON
licenca: Licenca MIT

GeoChart

GeoChart je pojednostavljena Google karta koja prikazuje regiju, oznake i tekst, umjesto punopravne karte sa sitnim detaljima. Karta je generirana u SVG-u i može se prilagoditi na mnogo načina, uključujući promjenu boja regije, dodavanje skočnih i prilagođenih oznaka karte.

Izvor podataka karte: Google karte
ovisnosti: nijedan
licenca: Pročitajte TOS usluge Google karte

Maplace

Maplace, jQuery dodatak za generiranje karte putem API-ja Google Maps v3. Maplace radi u svim preglednicima, uključujući IE6. Dakle, ovo je još jedan veliki dodatak vrijedan vaše pažnje ako želite izgraditi kartu na najlakši mogući način.

Izvor podataka karte: Google karte
ovisnosti: jQuery
licenca: Licenca MIT

veličanstven

Otmjena je JavaScript biblioteka koja je razvijena za generiranje američkih karata. Knjižnica je relativno lagana s obzirom da možete dodati interaktivne elemente na vrh generiranih karata.

Izvor podataka karte: Vračan / SVG
ovisnosti: nijedan
licenca: Licenca MIT

GeoComplete

GeoComplete je zasebna JavaScript knjižnica. Knjižnica će dodati polje za unos zajedno s zemljovidom, koji će prikazivati prijedloge gradova, država ili država dok pišete.

Izvor podataka karte: Google karte
ovisnosti: jQuery
licenca: Licenca MIT

Alati karte

Alati karte pružaju intuitivan API za dodavanje Google karata. Podržava učitavanje JSON podataka s geografskim formatom kao što su TopoJSON i GeoJSON za prikaz karte. Povrh toga, možete dodati animirane markere za koje mislim da će mapu učiniti življom, umetnuti HTML sadržaj s varijablama ili rezerviranim mjestima ala..

Izvor podataka karte: Google karte
ovisnosti: GeoJSON / TopoJSON
licenca: Licenca MIT

OpenLayers

OpenLayers je visokoučinkoviti open source JavaScript okvir za izgradnju interaktivnih karata pomoću raznih usluga mapiranja. Možete odabrati izvorni sloj karte pomoću slojevitog sloja ili vektorskog sloja iz niza mapnih usluga.

OpenLayer dolazi s mobilnim uređajem koji je spreman za upotrebu, pogodan za izradu karata na uređajima i preglednicima. CSS možete koristiti za drugačiji izgled karte. Za implementaciju karte na webu pomoću OpenLayers-a, ovdje je vodič koji će vam pomoći.

Izvor podataka karte: OpenStreetMap
ovisnosti: none
licenca: Nedefiniran

Letak

Programeri su dali Letak osnovne funkcije za besprijekoran rad, zadržavajući svoju veličinu malu, savršenu za mobilne uređaje. Za određene funkcije, samo proširi letak pomoću dodataka. Letak ima većinu značajki mrežne karte koje su vam potrebne: slojevi pločica, popup, oznake i slobodni slojevi vektora kao što su polilinije, poligoni, krugovi ili pravokutnici. Dolazi s lijepim zadanim dizajnom, iako stil možete prilagoditi pomoću CSS3 s lakoćom.

Letak ima najviše mogućnosti za interakciju korištenja i za mobilne i stolne preglednike.

Izvor podataka karte: OpenStreetMap
ovisnosti: none
licenca: Nedefiniran