13 librerie JavaScript per creare mappe interattive e personalizzate

In precedenza abbiamo utilizzato Google Map Maker e altri 10 strumenti per aiutarti a creare mappe. Tuttavia, se preferisci usare le librerie Javascript, abbiamo il post per te. Ecco le librerie JS che puoi usare per mostrare speciali marcatori di mappe, tracciare linee di percorso personalizzate o persino mostrare una finestra di dialogo quando passi con il mouse o fai clic su alcuni punti della mappa.

Personalizza le tue mappe nello stile che desideri - alcune di esse possono essere abbinate a CSS - o personalizza la tua mappa per essere interattiva come preferisci. La fonte dei dati della mappa, le dipendenze e le licenze di ciascuna biblioteca è stata inclusa per comodità.

Altro su Hongkiat:

• Come stile Google Maps
• Ottenere la posizione dell'utente con l'API di geolocalizzazione HTML5
• Visualizzazione dei dati: oltre 20 strumenti e risorse utili

GMaps

GMaps rende l'aggiunta e la personalizzazione di Google Maps un gioco da ragazzi. Oltre ad aggiungere una mappa, puoi anche aggiungere un paio di cose alla mappa, come le polilinee che possono essere utili per disegnare un percorso, un controllo speciale del menu e persino elementi HTML.

GMaps è compatibile con i dati JSON formattati che puoi utilizzare per integrare la tua mappa con una particolare app, come Foursquare.

• Mappa origine dati: Google Maps
• dipendenze: nessuna
• Licenza: Licenza MIT

jHere

A 5KB, jHERE ti mostra che le dimensioni non contano; puoi ancora costruire una potente mappa interattiva con una manciata di opzioni di personalizzazione. jHERE deriva la visualizzazione delle mappe dalla mappa HERE, che è uno dei più diffusi provider di mappe per Windows Phone.

La libreria può essere estesa con nuove funzionalità e sono disponibili un paio di estensioni per questa libreria, inclusa una per aggiungere forme, percorsi e indicatori personalizzati.

• Mappa origine dati: QUI Maps
• dipendenze: jQuery o ZeptoJS
• Licenza: Licenza MIT

Kartograph

Kartograph comprende due file, Kartograph.ph per generare la mappa in formato SVG e Kartograph.js per aggiungere elementi interattivi in ​​cima alla mappa. Poiché Kartograph.js è stato costruito su Raphael.js, la mappa funzionerà bene fino a IE7. Puoi dare un'occhiata alle demo delle mappe interattive per scoprire cosa può fare il Kartograph.

• Mappa origine dati: Kartograph
• dipendenze: Kartograph.py, Raphael e jQuery
• Licenza: AGPL e LGPL

Mapael

jQuery Mapael ti consente di creare mappe con una visualizzazione dei dati elegante oltre all'interattività. È possibile, ad esempio, creare una mappa e designare ciascuna regione sulla mappa con colori diversi in base alla regione. Puoi anche aggiungere suggerimenti sulla regione, così come gestori di eventi come clic o librarsi.

La mappa è stata progettata pensando al SEO fornendo contenuti alternativi per i robot dei motori di ricerca che non sono in grado di eseguire la scansione dei contenuti generati da JavaScript.

• Mappa origine dati: Raphael.js
• dipendenze: jQuery
• Licenza: Licenza MIT

D3js

d3.js è una libreria JavaScript completa che darà vita ai tuoi dati attraverso HTML, SVG e CSS. L'uso di D3 è abbastanza vario anche per la costruzione di una mappa altamente interattiva. Vedi questa mappa dello sviluppo globale della Banca Mondiale e vedrai le possibilità di ciò che puoi costruire con D3.js.

• Mappa origine dati: D3.js
• dipendenze: nessuna
• Licenza: Non definito

mappe dati

Se costruire una mappa con D3.js è travolgente, puoi usare mappe dati. DataMaps è essenzialmente un plugin D3.js sviluppato appositamente per costruire mappe. Esso eredita molte delle funzionalità di D3.js, quindi è possibile creare con essa mappe semplici o molto personalizzate. Ho già detto che la mappa è reattiva?

• Mappa origine dati: D3.js
• dipendenze: D3.js e TopoJSON
• Licenza: Licenza MIT

GeoChart

GeoChart è una mappa Google semplificata che esegue il rendering di regioni, indicatori e testo, invece di una mappa a tutti gli effetti con dettagli minuscoli. La mappa è generata in SVG e può essere personalizzata in molti modi, tra cui la modifica dei colori della regione, l'aggiunta di popup e gli indicatori di mappa personalizzati.

• Mappa origine dati: Google Maps
• dipendenze: nessuna
• Licenza: Leggi i TOS di Google Maps

Maplace

Maplace, un plugin jQuery per generare mappe tramite l'API di Google Maps v3. Maplace funziona su tutti i browser, incluso IE6. Quindi questo è un altro ottimo plugin che merita la tua attenzione se vuoi costruire la mappa nel modo più semplice possibile.

• Mappa origine dati: Google Maps
• dipendenze: jQuery
• Licenza: Licenza MIT

maestoso

Stately è la libreria JavaScript che è stata sviluppata per generare mappe statunitensi. La libreria è relativamente leggera considerando che è possibile aggiungere elementi interattivi sulle mappe generate.

• Mappa origine dati: Signorile / SVG
• dipendenze: nessuna
• Licenza: Licenza MIT

GeoComplete

GeoComplete è una libreria JavaScript distinta a sé stante. La libreria aggiungerà un campo di input insieme alla mappa, che mostrerà suggerimenti di città, paesi o stati durante la digitazione.

• Mappa origine dati: Google Maps
• dipendenze: jQuery
• Licenza: Licenza MIT

Strumenti mappa

Map Tools fornisce un'intuitiva API per aggiungere Google Maps. Supporta il caricamento di dati JSON con formattazione geografica come TopoJSON e GeoJSON per il rendering della mappa. Oltre a questo, puoi aggiungere marcatori animati che penso renderanno la mappa più vivace, inserire contenuti HTML con variabili o segnaposti al manubrio.

• Mappa origine dati: Google Maps
• dipendenze: GeoJSON / TopoJSON
• Licenza: Licenza MIT

OpenLayers

OpenLayers è un framework JavaScript open source ad alte prestazioni per costruire mappe interattive utilizzando vari servizi di mappatura. È possibile scegliere l'origine del livello della mappa usando il layer affiancato o il livello vettoriale da una serie di servizi di mappe.

OpenLayer è pronto per il cellulare pronto all'uso, adatto alla creazione di mappe su dispositivi e browser. Puoi usare i CSS per un aspetto diverso della tua mappa. Per implementare la mappa nel tuo web usando OpenLayers, ecco un tutorial che ti aiuterà.

• Mappa origine dati: OpenStreetMap
• dipendenze: nessuno
• Licenza: Non definito

Volantino

Gli sviluppatori hanno dato Volantino funzioni di base per funzionare perfettamente, mantenendo le sue dimensioni piccole, perfette per i dispositivi mobili. Per funzioni specifiche, estendi semplicemente Leaflet usando i plugin. Il volantino contiene la maggior parte delle caratteristiche delle mappe online di cui hai bisogno: livelli delle tessere, popup, indicatori e livelli vettoriali liberi come polilinee, poligoni, cerchi o rettangoli. Viene fornito con bei disegni predefiniti anche se è possibile personalizzare lo stile utilizzando CSS3 con facilità.

Il volantino ha le funzionalità di interazione più utili sia per i browser mobili che per i desktop.

• Mappa origine dati: OpenStreetMap
• dipendenze: nessuno
• Licenza: Non definito