Al finalizar cualquier trabajo de realización de medidas ambientales georeferenciadas en una determinada zona, debemos encontrar la manera de poder visualizarlos para estudiarlos o simplemente divulgarlos.

Una manera de hacer la tarea de visualización de información georeferenciada es utilizar un Heat Map basándonos en las facilidades que Google Map nos proporciona para este fin.

Por ejemplo, si tenemos una lista de medidas no muy grande de una variable ambiental cualquiera georeferenciada como las que presento a continuación

(LATITUD , LONGITUD) INTENSIDAD

( 42.848897 , -2.692205 ) 209
(42.8435160, -2.681536 ) 206
( 42.842954 , -2.683447 ) 202
( 42.836904 , -2.662042 ) 196
( 42.834330 , -2.660764 ) 200
( 42.841545 , -2.648737 ) 194

( 42.83433 0, -2.660764 ) 191

Una manera de representar la información es utilizar el código que se encuentra al final de este post.

En este código debemos tener en cuenta que siempre hay que especificar:

– El adecuado zoom de la imagen , en nuestro caso
zoom: 13,

– El correcto centro de la imagen, en nuestro caso
center :new google.maps.LatLng(42.858696, -2.654207),

– El título del mapa, en nuestro caso
<body onload=”initialize()”>

<strong>SENSODIDIT DATA-BTSENSOR CONTAMINACION 10/Octubre/2014</strong>

<div id=”map_canvas” style=”height: 550px; width: 750px;”></div>”



Este código debe ser escrito en un fichero de extensión html que al ser abierto por un navegador nos proporcionará una imagen como esta

CODIGO PARA REPRESENTAR LOS DATOS EN UN HEAT MAP DE GOOGLE MAP

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>

<link href=”maps/documentation/javascript/examples/default.css” rel=”stylesheet”>

<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization”></script>

<script>

var map, pointarray, heatmap;

var signatureData = [

{location:new google.maps.LatLng ( 42.848897 , -2.692205 ) , weight: 209 },

{location:new google.maps.LatLng ( 42.843516 , -2.681536 ) , weight: 206 },

{location:new google.maps.LatLng ( 42.842954 , -2.683447 ) , weight: 202 },

{location:new google.maps.LatLng ( 42.836904 , -2.662042 ) , weight: 196 },

{location:new google.maps.LatLng ( 42.83433 , -2.660764 ) , weight: 200 },

{location:new google.maps.LatLng ( 42.841545 , -2.648737 ) , weight: 194 },

{location:new google.maps.LatLng ( 42.83433 , -2.660764 ) , weight: 191 }

];

function initialize() {

var mapOptions = {

zoom: 13,

center: new google.maps.LatLng(42.858696, -2.654207),

mapTypeId: google.maps.MapTypeId.SATELLITE

};

map = new google.maps.Map(document.getElementById(‘map_canvas’),

mapOptions);

pointArray = new google.maps.MVCArray(signatureData);

heatmap = new google.maps.visualization.HeatmapLayer({

data: pointArray,

radius: 25,

});

heatmap.setMap(map);

}

</script>

</head>

<body onload=”initialize()”>

<strong>SENSODIDIT DATA-BTSENSOR CONTAMINACION 10/Octubre/2014</strong>

<div id=”map_canvas” style=”height: 550px; width: 750px;”></div>

</body>

</html>