13 Biblioteci JavaScript pentru a crea hărți interactive și personalizate

Am prezentat anterior Google Map Maker și alte 10 instrumente care vă ajută să creați hărți. Cu toate acestea, dacă preferați să utilizați în schimb bibliotecile Javascript, avem postul pentru dvs. Iată bibliotecile JS pe care le puteți utiliza pentru a afișa marcaje speciale de hartă, pentru a desena linii de traseu personalizate sau chiar a afișa un dialog atunci când plasați cursorul sau faceți clic pe anumite puncte ale hărții.

Personalizați hărțile în stilul pe care doriți - unele dintre ele pot fi decorate cu CSS - sau personalizați-vă hărțile astfel încât acestea să fie la fel de interactive pe cât doriți. Sursa datelor de hartă, dependențele și licențele fiecărei biblioteci a fost inclusă pentru confortul dvs..

Mai multe despre Hongkiat:

Cum să stil Google Maps
Obtinerea locatiei utilizatorului cu API Geolocation HTML5
Vizualizarea datelor: 20 de instrumente și resurse utile

GMaps

GMaps face adăugarea și personalizarea Google Maps o briză. În afară de adăugarea unei hărți, puteți și câteva lucruri pe hartă, cum ar fi polilinii care pot fi utile pentru trasarea unui traseu, un control de meniu special și chiar elemente HTML.

GMaps este compatibil cu datele în format JSON pe care le puteți utiliza pentru a integra harta cu o anumită aplicație, cum ar fi Foursquare.

Sursa de date a hărții: Hărți Google
dependenţe: nici unul
Licență: Licență MIT

jHere

La 5KB, jHERE vă arată că dimensiunea nu contează; puteți construi în continuare o hartă interactivă puternică, cu o mulțime de opțiuni de personalizare. jHERE derivă vizualizarea hărții din harta AICI, care este unul dintre cei mai cunoscuți furnizori de hărți pentru Windows Phone.

Biblioteca poate fi extinsă cu noi funcționalități și există câteva extensii dezvoltate pentru această bibliotecă, inclusiv una pentru adăugarea de forme, rute și marcaje personalizate.

Sursa de date a hărții: HERE Maps
dependenţe: jQuery sau ZeptoJS
Licență: Licență MIT

Kartograph

Kartograph cuprinde două fișiere, Kartograph.ph pentru a genera hartă în format SVG și Kartograph.js pentru a adăuga elemente interactive în partea superioară a hărții. Deoarece Kartograph.js este construit pe partea de sus a Raphael.js, harta va funcționa foarte bine în jos până la IE7. Puteți să aruncați o privire la demo-urile hărților interactive pentru a descoperi ce poate face Kartograful.

Sursa de date a hărții: Cartograf
dependenţe: Kartograph.py, Raphael și jQuery
Licență: AGPL și LGPL

Mapael

jQuery Mapel vă permite să creați hărți cu o vizualizare elegantă a datelor, precum și o interactivitate. Puteți, de exemplu, să creați o hartă și să desemnați fiecare regiune de pe hartă cu culori diferite bazate pe regiune. De asemenea, puteți adăuga un sfat util în regiune, precum și agenții de gestionare a evenimentelor clic sau planare.

Harta este construită cu SEO în minte prin furnizarea unui conținut alternativ pentru robotii motoarelor de căutare care nu sunt capabili să acceseze cu crawlere conținutul generat de JavaScript.

Sursa de date a hărții: Raphael.js
dependenţe: jQuery
Licență: Licență MIT

D3js

D3.js este o bibliotecă cuprinzătoare JavaScript care va aduce viața dvs. de date prin intermediul HTML, SVG și CSS. Utilizarea D3 este destul de variată, inclusiv pentru construirea unei hărți extrem de interactive. Vedeți această hartă a dezvoltării globale a Băncii Mondiale și veți vedea posibilitățile a ceea ce puteți construi cu D3.js.

Sursa de date a hărții: D3.js
dependenţe: nici unul
Licență: Nedefinit

DataMaps

Dacă construiți o hartă cu D3.js este copleșitoare, puteți folosi DataMaps. DataMaps este în esență un plugin D3.js care este dezvoltat special pentru a construi hărți. Acesta moștenește multe dintre capabilitățile D3.js, prin urmare puteți construi hărți simple sau personalizate cu ajutorul acestuia. Am menționat că harta este receptivă?

Sursa de date a hărții: D3.js
dependenţe: D3.js și TopoJSON
Licență: Licență MIT

GeoChart

GeoChart este o hartă Google simplificată care redă regiune, marcatori și text, în loc de o hartă completă cu detalii minuscule. Harta este generată în SVG și poate fi personalizată în mai multe moduri, inclusiv schimbarea culorilor din regiune, adăugarea de pop-up-uri și marcaje personalizate ale hărții.

Sursa de date a hărții: Hărți Google
dependenţe: nici unul
Licență: Citiți Google Maps TOS

Maplace

Maplace, un plugin jQuery pentru generarea hărții prin API-ul Google Maps v3. Maplace funcționează în toate browserele, inclusiv IE6. Deci, acesta este un alt plugin grozav în valoare de atenția dvs. dacă doriți să construiți hartă în cel mai simplu mod posibil.

Sursa de date a hărții: Hărți Google
dependenţe: jQuery
Licență: Licență MIT

falnic

Binecunoscut este biblioteca JavaScript care este dezvoltată pentru a genera hărți americane. Biblioteca este comparabilă ușor, având în vedere că puteți adăuga elemente interactive pe hărțile tale generate.

Sursa de date a hărții: Stately / SVG
dependenţe: nici unul
Licență: Licență MIT

GeoComplete

GeoComplete este o bibliotecă distinctă JavaScript pe cont propriu. Biblioteca va adăuga un câmp de introducere împreună cu harta, care va afișa sugestii ale orașelor, țărilor sau statelor pe măsură ce tastați.

Sursa de date a hărții: Hărți Google
dependenţe: jQuery
Licență: Licență MIT

Instrumente pentru hărți

Soluțiile Google Maps oferă un API intuitiv pentru a adăuga Google Maps. Acesta susține încărcarea datelor JSON cu format geografic, cum ar fi TopoJSON și GeoJSON, pentru a face harta. Mai mult decât atât, puteți adăuga marcaje animate care cred că va face harta mai plină de viață, inserați conținutul HTML cu variabile sau locașuri ala Handlebars.

Sursa de date a hărții: Hărți Google
dependenţe: GeoJSON / TopoJSON
Licență: Licență MIT

OpenLayers

OpenLayers este un cadru JavaScript de înaltă performanță bazat pe open source pentru a construi hărți interactive utilizând diverse servicii de cartografiere. Aveți posibilitatea să alegeți sursa stratului de hartă utilizând stratul de straturi sau stratul vectorial dintr-un număr de servicii de hărți.

OpenLayer vine mobilă pregătită din cutie, potrivită pentru construirea de hărți pe diferite dispozitive și browsere. Puteți utiliza CSS pentru o imagine diferită a hărții dvs. Pentru a implementa harta pe web folosind OpenLayers, iată un tutorial care vă va ajuta.

Sursa de date a hărții: OpenStreetMap
dependenţe: nici unul
Licență: Undefined

foaie volantă

Dezvoltatorii au dat foaie volantă funcții de bază pentru a funcționa perfect, menținându-și mărimea mică, perfectă pentru dispozitivele mobile. Pentru funcții specifice, extindeți pur și simplu fișa cu ajutorul pluginurilor. Foaia de scris are cele mai multe caracteristici ale hărții online de care aveți nevoie: straturi de țiglă, popup, marcatori și straturi vectoriale gratuite, cum ar fi polilinii, poligoane, cercuri sau dreptunghiuri. Acesta este dotat cu design-uri fiabile, deși puteți personaliza stilul folosind CSS3 cu ușurință.

Foaia de parcurs conține cele mai multe funcții de interacțiune de utilizare, atât pentru browserele mobile, cât și pentru cele desktop.

Sursa de date a hărții: OpenStreetMap
dependenţe: nici unul
Licență: Undefined