Mappe geografiche interattive – ovvero Google Maps, ma non solo: un compito semplice che affronteremo in molti modi diversi (WordPress incluso).
Come funzionano le mappe interattive sul web
L’interattività di una mappa geografica digitale può essere intesa in più modi: per gli scopi di questo articolo parleremo di quella che si esplica soprattutto lato front-end del sito, e che permette di creare regioni colorate/sovrapponibili, di renderle cliccabili o di attivare particolari eventi su di esse (al passaggio del mouse, banalmente). Nello specifico mi riferirò a mappe geografiche interattive, ma con qualche passaggio in più sarebbe possibile estendere il discorso, ad esempio, a mappe di edifici o luoghi.
In questo caso, poi, corre l’obbligo di premettere che non esistono soluzioni banali al problema, nel senso che un lavoro del genere per essere realmente degno di nota dovrebbe, a mio modesto parere, essere realizzato da un professionista.
Usa il codice
189ed7ca010140fc2065b06e3802bcd5
per ricevere 5 € dopo l'iscrizione
Cosa sono le mappe interattive in HTML
La creazione di mappe interattive è una caratteristica senza dubbio tipica di numerosi siti web, a partire dai siti di annunci (che mostrano le inserzioni per area geografica, ad esempio) a finire con quelli che genericamente catalogano prodotti o servizi per zona.
Una cartina cliccabile in formato personalizzato, con annesse azioni o link esterni, del resto, è senza dubbio molto utile per gli utenti: in questo articolo vedremo i vari modi per crearla, con qualche ulteriore accortezza da prendere nel caso in cui le mappe debbano essere responsive (nel qual caso, come vedremo, servirà qualche ragionamento sul viewport più adatto, in modo da rendere le aree distinte sufficentemente distanti tra loro).
Come creare mappe responsive
Su questo bisognerebbe discutere a parte, per cui perdonerete se semplifico il problema: se il responsive non fosse supportato – e questo vale per le librerie più vecchie, almeno in teoria: ma in genera una mappa interattiva è poco adatta ad occupare solo una parte dello schermo, e dovrebbe quantomeno potersi mettere in primo piano per facilitare l’interazione dell’utente – è necessario prevederlo almeno a due livelli.
Tali livelli sono:
- (markup) uno a livello di (div) container della mappa, che dovrebbe essere messo su singola riga (la classe col-md-12 di Bootstrap, per esempio) per garantire la massima espansione, con l’accortezza di non superare i classici 300 px di larghezza;
- (script) un secondo a livello di Javascript (o jQuery), nel senso che il viewport deve essere tarata su 10 mm (la dimensione del dito in termini di touch minimale), secondo Android addirittura 7 mm: questo serve ad evitare che due link possano essere premuti involontariamente, o che non si riesca a premere sul link desiderato. Per maggiori informazioni su questo delicato problema, suggerisco la guida di Google sull’argomento e di fare numerosi test per assicurarsi che le mappe possano funzionare adeguatamente anche sugli schermi più piccoli.
Vediamo ora, finalmente, nel concreto come creare una mappa interattiva sul nostro sito web.
Usare Vector Maps di WordPress
Forse il metodo più semplice e pratico per chi non fosse troppo pratico o avvezzo a programmare: Enrico Urbinati ha sviluppato una soluzione di plugin per WordPress (gratuito) che si basa su jVectorMap, con la possibilità di includere le mappe pagando un piccolo contributo dal sito ufficiale. Si tratta della soluzione ideale per creare mappe interattive dentro WordPress, con possibilità di evidenziare sia aree che punti e con una discreta interattività . In pratica il plugin e le mappe base sono gratis, quelle specialistiche o divise in modo particolare costano circa 10 euro ciascuna e si comprano dal sito ufficiale del progetto.
- Pro: libreria aggiornata e funzionale, user friendly, non serve saper manipolare jQuery + HTML
- Contro: nessuno
Usare Google Maps
La prima possibilità da considerare è quella di fare uso di Google Maps, che ha certamente dalla sua un tasso di aggiornamento dei contenuti della mappa molto alto, oltre al supporto di una comunità di sviluppatori ed utilizzatori molto ampia. Creare una mappa interattiva con Google Maps richiederà , quasi certamente, di fare uso della nota (e sviluppatissima) API disponibile per Javascript come per Android ed iOS.
Su Github e Stackoverflow ci sono moltissimi esempi live e funzionanti per tutto quello che ci serve, per quanto alcune caratteristiche siano a pagamento.
- Pro: facile da avviare, codice ben strutturato, fin troppe opzioni disponibili
- Contro: in molte circostanze servizio a pagamento, evidenziare o colorare aree come regioni e province potrebbe non essere banale
Usare Image Mapster
Si tratta di una libreria in jQuery che permette di attivare, creare ed editare mappe senza ricorrere al vetusto Flash (che in questo post, per brevità , eviterò di prendere in considerazione). L’ultima versione è del 2013 per cui non parliamo di una libreria aggiornatissima, che potrebbe non funzionare per alcune caratteristiche più recenti dei browser. Resta comunque uno dei principali punti di riferimento del settore.
- Pro: libreria consolidata, file unico da includere, permette di realizzare anche mappe generiche non geografiche
- Contro: non aggiornata (ultima versione del 2013), va programmata in jQuery + HTML
Usare jVectorMap
Si tratta della libreria top, probabilmente la migliore in circolazione ad oggi, per gestire mappe di ogni genere nel dettaglio: è possibile sfruttare liberamente la libreria stessa, che dispone sia delle API che delle mappe vere e proprie (ad esempio quella delle province d’Italia già pronte all’uso). Permette di associare eventi ai click ed al passaggio del mouse e, in breve, è la scelta consigliata per chi debba realizzare una mappa interattiva.
- Pro: libreria molto aggiornata e funzionale
- Contro: non troppo semplice da usare, va programmata in jQuery + HTML
Usare MapBox
Mapbox è una soluzione per creare mappe di tipo interattivo certamente da considerare: è molto user-friendly e non richiede skill di programmazione, a quanto pare. La versione base (fino a 50.000 visualizzazioni della mappa) è free, mentre le altre si pagano a seconda dell’uso che ne farete. La versione gratuita supporta fino a 600 richieste di geolocalizzazione al minuto con 1 GB di spazio disponibile, per cui si candida ad essere più che altro indicato per applicazioni più avanzate del front-end di un sito.
- Pro: facile da avviare, codice ben strutturato, tante opzioni disponibili, ideale anche per non programmatori
- Contro: nessuno
(fonte: Quag)
👇 Contenuti da non perdere 👇
- Cellulari 📱
- Domini Internet 🌍
- Informatica 🖥
- Marketing & SEO 🌪
- Programmare 🖥
- Reti 💻
- Scrivere 🖋
- 💬 Il nostro canale Telegram: iscriviti
- 🟢 Come impostare i DNS di CloudFlare per una connessione più veloce su internet
- 🟢 Alternative a Youtube: altri portali per ospitare video
- 🟢 Come scrivere un programma per contare le vocali