En el pasado artículo Gráfico geográfico hemos visto como utilizar un mapa mundial para mostrar información sobre los diferentes países.

En este lo que vamos a ver es como realizar la misma tarea sobre las ciudades de un país.

Por si alguien está interesado y lo que le gustaría es mostrar información sobre cierta región de un país el sistema sólo admite esta opción para los estados de EE.UU.

Este es el código que debemos pegar en HTML incrustado…


<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {var data = google.visualization.arrayToDataTable([
['provinces',   'Población'],
['Ferrol',      79520],
['Fene',     14638],
['Narón',    29263],
['Mugardos',     5859]
]);
var options = { region: 'ES',
displayMode: 'markers',
resolution: 'provinces',
colorAxis: {colors: ['#7B68EE', '#00FF7F']}

};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

En donde pone Población podemos escribir el texto referente al dato a mostrar. A continuación, el nombre de las localidades, en el siguiente documento ISO_3166-2 encontrareis en la tercera columna los nombres que podemos escribir correspondientes a cada país. Luego cambiamos el dato numérico correspondiente a cada ciudad.

Donde está escrito region: 'ES' escribiremos el código correspondiente al país, buscar el código en ISO_3166-1 después, como vimos en el artículo anterior, las variaciones de color en valores hexadecimales.

Si ponemos ciudades muy cercanas como en el ejemplo al pasar el puntero sobre ellas veremos una lupa para mostrar mejor la información.


También podemos observar que no admite la acentuación, así que mejor procurar no utilizar palabras acentuadas. Aunque eso sólo ocurre en ActivInspire en un navegador Web actualizado no parece ese problema.

Mi ejemplo


Si deseamos que el país aparezca con sus respectivas regiones añadimos en las opciones, por ejemplo, después de region la siguiente línea.

resolution: 'provinces',

Ya solo os queda ir probando, ya que esta opción no es admitida para todos los países.

Deja un comentario