Mappa dinamica colorata (1)

E’ possibile colorare dinamicamente una nazione su una cartina senza ricorrere alla tradizionale soluzione in flash?
La risposta è sì e ci sono due opzioni: la prima passa attraverso google chart e svg, maentre la seconda, sempre tramite google chart, presente l’output sotto forma di immagine.

Vediamo la prima opzione, come sempre occorr collegare la libreria e chiamare la funzione vera e proprai all’onload:

<script type=’text/javascript’ src=’https://www.google.com/jsapi’></script>
<script type=’text/javascript’>
google.load(‘visualization’, ’1′, {‘packages’: ['geochart']});
google.setOnLoadCallback(drawRegionsMap);

Nella funzione come prima cosa impostiamo la label:

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Country’);
data.addColumn(‘number’, ‘Articoli’);

e successivamente il paese da visualizzare, attenzione a utilizzare la nomeclatura standard ISO-3166-1

data.addRows([['Peru', 1]]);

potermmo già concludere il nostro lavoro con le seguenti istruzioni

var chart = new google.visualization.GeoChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

che permettono di disegnare la cartina, tuttavia è opprtuno settare alcune opzioni:

var options = {
colorAxis: {colors: ['FF0000']},
displayMode: ‘regions’,
region: ’005′,
width:’300′,
height:’225′,
legend:’none’,
datalessRegionColor:’000000′,
resolution:’countries’
};

dove colorAxis è il colore del paese da evidenziare, displayMode serve per impostare il livello di zoom, region serve per definire la regione da visualizzare (sempre secondo le codifiche standard), quindi larghezza e altezza del nostro oggetto, se vogliamo o meno visualizzare la legenda e per concludere risoluzione e colore delle regioni senza dati.

Vedi l’esempio competo.