Come creare una mappa interattiva delle regioni italiane


Se in un sito web vi capita di dover far selezionare una regione italiana, potete risolvere il problema in diversi modi. Il più immediato sarà quello di usare una <select> con venti <option> con i nomi delle regioni italiane, ma un altro metodo piuttosto usato è quello di presentare una cartina dell’Italia, di quelle che vengono definite cartine mute, cioè col solo contorno dell’Italia e delle singole regioni. Al passare del mouse su una regione questa si colorerà e naturalmente attiverà un link.
Anche per questa soluzione non c’è ovviamente un metodo unico per risolvere il problema. Ce ne sono di diversa difficoltà, diversa efficacia ed anche di diverso grado di compatibilità con i vari browsers.

Qua vogliamo fornire una soluzione che abbina semplicità alla estrema compatibilità e, a parer nostro, anche di discreto impatto visivo.
Qua sotto vedete subito quello che sarà il risultato finale.

Val d'Aosta Piemonte Lombardia Trentino Veneto Friuli Liguria Emilia Toscana Marche Umbria Lazio Abruzzo Molise Campania Puglia Basilicata Calabria Sicilia Sardegna


Vediamo dunque come si può costruire questa cartina. Alla fine dell’articolo troverete il link per scaricare tutto quello che serve.

Il sistema è molto semplice: si userà la funzione html ‘map ‘ con aree poligonali.

Mostriamo come esempio la sola area della Val d’Aosta:

<img id="mappaitalia" usemap="#Map" src="images/cartina_italia.png" name="Italia" />
<map id="Map" name="Map">
   <area shape="poly" coords="61,53,62,65,56,67,37,69,35,61,30,55,38,52,41,55,50,53,54,49" href="#" alt="Val d'Aosta" title="Val d'Aosta" onMouseOver="document.Italia.src='images/Aosta.png';" onMouseOut="document.Italia.src='mages/cartina_italia.png';"/>
</map>

Il tag <img> altro non fa che visualizzare la cartina iniziale dicendo che userà una mappa di nome ‘Map’.

All’interno dei tag <map> e </map> inseriamo i tag <area> specificando per ciascuno che la forma è poligonale (shape=”poly”) e dando le coordinate che ne definiscono il contorno. Questa è la parte difficile e così le abbiamo calcolate tutte noi per voi. Ovviamente nel nostro esempio mancherà il link alla pagina relativa alla regione.
L’ evento onMouseOver definisce cosa fare quando si posiziona il mouse su una regione, cioè colorare la regione stessa. Questo effetto si ottiene richiamando nel documento corrente al posto dell’immagine di nome “Italia” [<img … … name=”Italia” />]quella indicata dal valore di “src” che altro non è che la stessa cartina con la Valle d’Aosta colorata in rosso. L’evento onMouseOut viceversa farà l’operazione inversa, cioè richiamerà l’immagine originaria quando viene tolto il mouse dalla regione.

Da notare che le coordinate servono solo per definire il contorno ai fini del puntamento del mouse e non della volorazione della regione. Quindi non è necessario che siano precisissime. Noi viceversa le abbiamo calcolate in modo da seguire il contorno della regione con estrema precisione, magari un giorno vi serviranno.

L’unico difetto che questo approccio ha è la possibile lentezza nel caricamento dell’immagine in presenza di connessioni internet lente o peggio ancora servers sovraccarichi e lenti. E’ necessario quindi che le diverse immagini siano di dimensioni molto contenute (13 KB ciascuna nel nostro esempio). Noi nell’esempio che potrete scaricare abbiamo anche inserito una routine javascript (richiamata dall’evento ‘onload‘ nel tag <body>) che permette il precaricamento delle immagini in memoria all’atto dell’apertura della pagina. Non è evidentemente necessaria per il funzionamento di questa soluzione, ma garantisce velocità di reazione allo spostamento del mouse e quindi rende la navigazione più gradevole per il visitatore.

Non resta che scaricare pagina html e immagini.

33 thoughts on “Come creare una mappa interattiva delle regioni italiane”

  1. salve Franco, grazie innanzitutto per lo script, utilissimo!

    Ti segnalo che nel file scaricato la riga 14:
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    Va sostituita con:
    var i,j=d.MM_p.length,a=fd_preloadImages.arguments; for(i=0; i<a.length; i++)

    Perché MM_preloadImages non esiste. Probabilmente era il vecchio nome che avevi assegnato alla funzione.

    Nella speranza di aver fatto cosa utile,

    Marco

  2. Molto utile, era proprio quello che stavo cercando. Però mi sono reso.conto che in questa maniera da mobile alcune regioni vengono tagliate, come ad esempio la Puglia. Sapresti dirmi come agire per rendere responsive la mappa?

    1. E’ la tua pagina che deve essere responsive. In tal caso il contenitore (div) della mappa si adatterà alle dimensioni del device.

  3. Ciao grazie per questo lavoro.
    Vorrei chiederti dove devo agire per modificare lo sfondo della cartina e delle regioni. Considera che ho già modificato le immagini .png, ma lo sfondo resta sempre grigio.
    Grazie.
    SRC

  4. Ciao,
    ottima mappa delle regioni.
    Io ho bisogno di una mappa delle province dove posso trovarla?
    Grazie in anticipo.
    Emanuele

    1. La cosa più ovvia è adattare questo procedimento utilizzando una cartina muta della regione che ti interessa, che sicuramente trovi su internet. Altrimenti prova a cercare con Googlese trovi il tutto già fatto.

  5. Ciao,
    Premetto che non so niente d programmazione, ma vorrei realizzare un sito personale su jimdo dove pubblicare i miei Giri MotoTuristici e avrei pensato di mettere una cartina cliccabile dell’Italia e perciò vi ho trovato 🙂 🙂
    Il problema è che dopo che ho inserito il codice html non visualizzo niente ma solo un quadratino. A logica dovrei andare a modificare i campi “images” mettendoci che cosa? O non c’entra niente?
    Scusate per le domande gnocche 😀 😀 😀

    1. Scarica l’intero file, nell’ultima riga dove vedi scritto “Non resta che scaricare pagina html e immagini.”
      Come potrai verificare c’è tutto ciò che occorre ed è funzionante. Naturalmente dovrai mettere i link corretti alle tue pagine dove c’è scritto href=”#”. Al posto del cancelletto devi inserire il nome della pagina a cui rimandare cliccando su quella regione.

  6. Per Luigi. LINK PAGINA AOSTA col target NEW ti aprirà il link in una nuova pagina, o senza a quel tag te lo aprirà in quella in cui ti trovi. Scusate l intrusione, ma mi ha fatto piacere da morire vedere questi post. Mi sono tornati in mente i primi momenti in cui programmavo. Tenerissimo 🙂

  7. Ciao a tutti, non sono un programmatore, avrei bisogno del codiìce html per la piantina dell’italia interattiva, poi i vari link da inserire per le regioni sono capace a inserirli, grazie anticipatamente a chi può aiutarmi!

  8. non sono un programmatore, avrei bisogno del codiìce html per la piantina dell’italia interattiva, poi i vari link da inserire per le regioni sono capace a inserirli, grazie anticipatamente a chi può aiutarmi!

    1. io sono in alto mare avrei bisogno del codice intero in html della piantina con le regioni e poi pe so di sapere come abbinare i link alle regioni, se me lo puoi inviare mi faresti un grande favore!
      Saluti
      Max

      1. Buongiorno Max. Quello che chiedi c’è già nell’articolo. In fondo, ultima riga, c’è l’intero file html da scaricare; dove vedi scritto ‘Non resta che scaricare pagina html e immagini.’

        1. io ho cliccato su Non resta che scaricare pagina html e immagini e mi esce un file immagini di tutte le regioni e una pagina denominata italia.html che riporta non un codice ma la scritta file:///Users/Federica/Downloads/Regioni-10/Italia.html
          Ma come faccio a inserire nel mio sito questa scritta che non è un codice html?

  9. sto costruendo il sito senza avere esperienza ma piano piano mi sto istruendo. volevo utilizzare una cartina interattiva come quella che hai mostrato ma non so come inserire i link. puoi aiutarmi? grazie infinite. Alessandra

  10. Ciao,
    per caso hai la possibilità di farmi scaricare il file vettoriale dal quale hai realizzato la mappa?
    Grazie! 😉

    1. Beh, questo sito è fatto con WordPress, quindi la risposta è ovviamente si, però non puoi lavorare solo a livello visuale, ma devi inserire il codice nella tab ‘Testo’.

  11. premetto, che non so programmare, ho inserito la mappa interattiva e funziona benissimo, chiedo è possibile sapere come si fa un collegamento per far aprire un’altra pagina web, facendo un clic sulla regione. mi spiego meglio se ad esempio clicco marche, in un’altra pagina inserire la regione con le provincie, e così via è possibile? grazie comunque per l’italia interattiva.

    1. Dove io ho scritto href=”#” devi inserire il link alla pagina (al posto di #).
      Ad esempio href=”aosta.html”
      Mi sa che devi seguire il corso html che trovi qui (i link delle prime lezioni nella sidebar qui a destra) 😀

  12. Ciao,
    ottima guida! Purtroppo però non capisco cosa non vada bene ma non funziona, credo le coordinate…
    Guarda, questa è la pagina con la mappa.
    Se posso contattarti in pvt ti mando il codice che ho messo.
    Grazie mille

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *