Creare una mappa interattiva personalizzata con Mapbox in 4 semplici passi
Le mappe interattive sono ottimi strumenti da utilizzare in un sito web per mostrare informazioni utili e per far partecipare in modo attivo gli stessi visitatori del sito web.
Negli ultimi anni vi è stato un notevole sviluppo della geolocalizzazione grazie all’avvento delle API di Google Maps che hanno incoraggiato l’utilizzo delle mappe in molti siti web per mostrare dei numeri importanti.
Vediamo alcuni esempi pratici:
Tao Community
Tao Community utilizza la mappa come metodo di esplorazione della comunità Tao. La mappa è trascinabile e mette in evidenza i punti fondamentali con degli indicatori di colore verde rispetto allo sfondo in bianco e nero. Inoltre, è stato fatto un grosso sforzo grafico per realizzare la mappa in modo stilizzato con bellissime immagini, così dettagliate che non si può fare a meno di esplorarla e muoversi al suo interno.
Startup-weekend
Startup Weekend utilizza la mappa per mettere in evidenza gli eventi organizzati in tutto il mondo. Anche questa mappa è trascinabile e presenta degli elementi in verde che danno indicazioni all’utente sugli eventi una volta cliccato sopra i tooltip. In questo modo, infatti, si aprirà una finestra informativa con tutto quello che può riguardare la data occasione.
Best of British unsigned
Mappa interattiva creata per far navigare gli utenti alla ricerca di gruppi musicali inglesi. Sono presenti dei tooltip con icone musicali che aprono una finestra con tantissime utili informazioni sui gruppi stessi e che, addirittura, a volte possono rimandare l’utente a qualche brano del gruppo presente sulla piattaforma musicale Soundcloud.
Heartlands cornwall
Heartlands è l’esempio che ti mostro che più mi piace, perché combina una serie di elementi come design, interazione e usabilità che la rende più accattivante degli esempi precedenti.
Si tratta di idee da cui prendere spunto. Ma veniamo a noi e vediamo cosa ci serve per creare una mappa interattiva trascinabile.
TUTORIAL: CREIAMO LA MAPPA CON MAPBOX
Per creare la nostra mappa utilizzeremo uno strumento che ho scoperto casualmente, ma che ho trovato fantastico sia per il risultato ottenuto, sia per la semplicità di utilizzo; senza contare poi un livello di personalizzazione molto elevato.
Mapbox è piattaforma open source che ci permette di realizzare delle analisi sul territorio creando mappe originali e personalizzate con informazioni importanti. È utilizzata dai maggiori social network e applicazioni come Pinterest, Foursquare, Mozilla, Le Monde ed Evernote.
Andando sul sito web di Mapbox ho ottenuto questa mappa, diversa da quella solitamente visualizzata su Goole Map. È la mappa di Milano che mette in evidenza alcuni luoghi di attrazione artistica, commerciale e sportiva. La mappa è cliccabile, zoomabile e interattiva. Vi piace? Vediamo come fare per realizzarla!
Andiamo sul sito web e cominciamo la personalizzazione, non prima di esserci registrati con una semplice procedura.
1# Tipo di mappa
In primo luogo scegliamo il tipo di mappa che vogliamo usare tra quelle:
- Stradali
- Terrene
- Satellitari
Andiamo su stile -> baselayer -> typemap e scegliamo il tipo della mappa. Tra le opzioni potremo anche impostare la lingua tra inglese, francese e spagnolo.
2# Area di interesse
Nell’icona “Cerca” inseriamo la città e il paese che vogliamo visualizzare e zoomiamo la mappa fino alla dimensione desiderata. Andiamo nel pannello stile e cominciamo a impostare i colori base dei seguenti elementi nella nostra mappa:
- Strade
- Palazzi
- Aree verdi
- Acqua
- Terra
In questo momento potete sbizzarrirvi come volete e sfruttare la vostra creatività.
Possiamo anche trascinare i valori a destra HSL, in cui H sta per “tinta/colore”, S “saturazione” ed L “luminosità” per ottenere il colore desiderato. Anche l’etichetta modificherà il colore, oltre alla mappa stessa.
3# Aggiungiamo degli indicatori
Dal pannello dati possiamo aggiungere dei dati cliccabili per segnalare dei punti di particolare interesse e far interagire l’utente che sta visualizzando la mappa. I dati sono di tre tipi:
- Indicatori
- Linee
- Forme poligonali
Gli indicatori sono delle icone di localizzazione di vario tipo atti a segnalare punti di interesse. Una volta cliccato sul punto della mappa, comparirà l’indicatore del quale potremo modificare lo stile del colore, l’icona, la latitudine e la longitudine, oltre ad aggiungere del testo personale che visualizzeremo nel momento in cui cliccheremo sull’indicatore.
Le linee invece possono servire per segnalare delle strade, o dei percorsi di particolare interesse, ed essere utilizzate per esempio per indicare un percosso da un punto di partenza a un punto di arrivo.
Infine, le forme poligonali servono per circondare delle aree con una linea chiusa e un riempimento. Anche in questo caso è possibile cliccarle per visualizzare le informazioni aggiuntive inserite nel campo testo.
4# Condividiamo la nostra mappa su un sito web
Una volta personalizzata la mappa, potremo anche integrarla su un nostro sito web semplicemente copiando il codice visualizzato nel campo “embed” del pannello progetto e incollandolo nella nostra pagina HTML. In alternativa, possiamo condividere la nostra mappa sui maggiori social network aggiungendo il link che compare nel campo share.
Possiamo creare un numero infinito di mappe e visualizzarle quando vogliamo nel nostro pannello di controllo.
Guardate l’esempio della mappa integrata in una pagina web che ho creato per farvi un’idea.
Vi piace il risultato? Se volete, potete anche scaricarlo da qui!
Potrete vedere tantissimi altri esempi sul sito web di Mapbox e prendere spunto per realizzare la vostra mappa.
Conoscevate questo ottimo strumento per realizzare le mappe? Ne conoscete altri? Fatecelo sapere nei commenti!
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
17 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Interessante questo servizio, un paio di domande:
1) se in futuro dovrò aggiungere o togliere o modificare qualcosa devo rifare il tutto o ritrovo quello che avevo fatto?
2) agli indicatori si può associare un link
grazie
Ciao,
si certamente salvando la mappa è possibile editarla in qualsiasi momento, inoltre puoi salvare nel tuo profilo una quantità illimitata di mappe.
Per quanto riguarda il link all’indicatore è possibile ed in questo link è spiegato come fare:
https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-as-links/
Ciao
articolo interessante sono un patito di mappe, mi piace personalizzarle; purtroppo i clienti preferiscono googlemap nuda e cruda (la personalità disorienta!!!!),
La cosa che non mi è chiara (ho dato un occhiata davvero rapida) è se questa risorsa è solo un generatore di stili per googlemap straordinariamente pratico e maneggevole (ne uso e mi è bastato poco per rendermene conto) o offre qualcosa di ontologicamente diverso
>è solo un generatore di stili per googlemap
Attenzione, non stiamo parlando di mappe Google, ma di Open Street Map! Per ulteriori informazioni vi consiglio di andare direttamente sul sito di Open Street Map http://www.openstreetmap.org, li troverete il wiki http://wiki.openstreetmap.org/wiki/Using_OpenStreetMap (versione in italiano http://wiki.openstreetmap.org/wiki/IT:Using_OpenStreetMap) e l’ elenco non completo di tutti gli strumenti a disposizione per tutte le vostre domande che avete posto.
Non è possibile modificare stili o quant’ altro con GoogleMaps per motivi di copyright. Con Open Street Map è tutto diverso, leggetevi il copyright e vedete la libertà che vi offre!
Se avete problemi chiedete pure. Rimango a disposizione per chiarimenti.
Fantastico questo strumento, non lo conoscevo! Lo userò sicuramente per il mio blog di grafica in futuro.
Lorenzo.
Salve,
articolo molto interessante, ora, però volevo porle una domanda; creando la mappa è possibile poi scaricarla in locale per utilizzarla in un programma di geolocalizzazione di utenti nel quale diciamo la mappa dell’Europa fa da sfondo e gli utenti cliccando su localizzami vengono portati nella zona in cui sono con zoom ecc.. ?!
Sarebbe molto interessante perchè in questo modo per creare questo servizio non dovrei sempre richiedere le mappe al server di mappe ma potrei scaricare le mappe direttamente sui dispositivi, ad esempio, limitando il consumo di dati 3G.
Grazie
Salve ! una sola domanda.
Nella mappa si possono inserire fotofrafie nomi ( esempio gli amici residenti in vie ,piazze etc ).
articolo valido, ma come faccio a inviduare un punto sulla mappa? è possibile inserire un indirizzo o devo usare esclusivamente le coordinate?
Grande, sembra proprio quello che cerco. Sono un tecnico e devo effettuare un rilievo di un’area con molti fabbricati. Partendo da autocad, come posso far diventare “interattivi” i fabbricati tipo cliccandoci sopra mi escono informazioni come foto e nome proprietario ecc…Mapbox mi fa lavorare su una “mia” mappa (il rilievo). Grazie!
Se non usi sistemi GIS, e ti serve qualche cosa di “veloce” ti consiglio di dare un occhio a http://leafletjs.com/.
Guarda la documentazione e vedi se può andarti bene.
Scusa ma di strumenti per OSM (Open Street Map) ce ne sono un infinità, quindi se leafletjs no ti va bene fammi sapere che ti trovo un altro strumento.
Ciao, bellissimo articolo, complimenti.
Avrei una domandina, con questo plugin è possibile aggiungere i punti d’interesse temporizzati, cioè che appaiano solo in determinati giorni/orari? Nel caso non fosse possibile conosci un metodo per inserirli senza utilizzare linguaggi di programmazione?
Grazie in anticipo, continua così! :)
Ti consiglio di dare un occhio al wiki di OSM e di vedere se fa per te http://leafletjs.com/ o http://openlayers.org/
Complimenti, fantastico articolo.
Comunque, mi sembra che ci siano app un po più semplici da usare e anche più polivalenti. Ad esempio, Io di solito uso Genially, e i risultati sono secondo me veramente ottimi. Ecco il link https://www.genial.ly/
Ciao!
Concordo con FlaviaR, pure io uso Genial.ly e posso anch’io dirvi che i risultati sono fantastici.
L’uso per il lavoro, sono insegnante si Storia, e gli studenti sono più coinvolti dalla lezione sempre che metto sulla lavagna una mappa interattiva o una infografica.
Se non l’avete provato, vi consiglio di farlo.
Saluti.
e metto sulla lavagna una mappa interattiva o una infografica.
Se non l’avete
E’ molto interessante. Ma su heartlandscornwall.com e credo pure nel caso di Tao Community la mappa pare fatta su una immagine. Vale a dire su una jpg uploadata su cui sono poi stati inseriti i marker. E’ possibile non geolocalizzare ma referenziare ad elementi di una immagine?
Seguo con attenzione la discussione tutto molto interessante cerhero di farne tesoro =:)