Qual’è il modo migliore per creare mappe interattive sul web? Un compito apparentemente banale che affronteremo in cinque modi diversi (WordPress incluso)

<span class="entry-title-primary">Qual’è il modo migliore per creare mappe interattive sul web?</span> <span class="entry-subtitle">Un compito apparentemente banale che affronteremo in cinque modi diversi (WordPress incluso)</span>

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 con annesse azioni o link, 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).

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.

Come creare una mappa interattiva sul nostro sito web?

Opzione 1: 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

Opzione 2: 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

Opzione 3: 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

Opzione 4: Vector Maps di WordPress

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. Arrivata alla versione 5.0 è la soluzione ideale per creare mappe interattive in WP, 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

Opzione 5: 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

Nota finale: mappe responsive

Su questo bisognerebbe discutere a parte, per cui perdonerete se semplifico brutalmente 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:

  1. (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;
  2. (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.

(fonti: Quag)

Tophost
Ti piace questo articolo?

0 voti

Su Trovalost.it puntiamo sulla qualità dei contenuti da quando siamo nati: la tua sincera valutazione può aiutarci a migliorare ogni giorno.

Ti potrebbero interessare (Guide per webmaster):

Cerca altro nel sito

Clicca sul box, e scegli la sezione per vederne i contenuti.