Es uno de los mapas más representativos en cuanto a la presentación de información en tiempo real, hablamos del mapa de calor, ya que nos permite identificar rápidamente donde se presenta mayor incidencia de algún evento que queramos buscar. Este mapa por ejemplo es muy utilizado en Analítica Web para determinar desde donde se acceden a tu página web o aplicaciones como Twitter lo utilizan para determinar desde que lugar se dicen que cosas ( algo fundamental para el cálculo de los Trending Topics). Así que no hablemos más y vayamos a construir uno con Google Maps.
Lo primero que debemos realizar es incluir la librería de Google Maps.
1 2 |
Lo siguiente es crear nuestro mapa, para ello llamamos a una función de incialización cuando el DOM esté totalmente cargado en el navegador:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | google.maps.event.addDomListener(window, 'load',initMap); function initMap() { google.maps.visualRefresh = true; var mapOptions = { center: new google.maps.LatLng(40.415363,-3.707398), // Centro de Madrid zoom: 13, mapTypeId: google.maps.MapTypeId.HYBRID // Tipo de Mapa }; //obtenemos el DIV "Mapa" var mapElement = document.getElementById('mapa'); //Creamos el mapa con las opciones y lo incluimos en el DIV "Mapa" map = new google.maps.Map(mapElement, mapOptions); |
Hasta aquí nada especial, es decir, creamos nuestro mapa ( clásico) centrado en la ciudad de Madrid y lo mostramos, ahora vamos a añadir nuestro mapa de calor ( Heat Map), para ello debemos seguir los siguientes pasos:
- Definir los puntos en el mapa que representarán los puntos de calor ( lugares donde se realiza el evento que estamos midiendo).
- Crear nuestra capa de calor con los puntos definidos.
- Agregar esta capa a nuestro mapa.
Los puntos de calor son los datos de entrada que representaremos en el mapa, representan la información geolocalizada del evento que estamos midiendo, mientras mas puntos se generen en una latitud y longitud determinada más intenso será la marca de calor alli.
1 2 3 4 5 6 7 8 9 10 11 12 | var heatmapPoints = [ new google.maps.LatLng(40.40490,-3.67180), new google.maps.LatLng(40.41401,-3.67048), new google.maps.LatLng(40.39919,-3.67229), new google.maps.LatLng(40.38216,-3.68826), new google.maps.LatLng(40.40340,-3.67501), ................ new google.maps.LatLng(40.39641,-3.66883), new google.maps.LatLng(40.39095,-3.71527) ]; |
Añadimos estos puntos a la capa de Calor de Google Maps y los mostramos en nuestro div.
1 2 3 4 | var heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapPoints, map: map }); |
Hagamos un Toggle
Lo bueno de estas herramientas de Mapas es que nos permiten ser muy flexible con la presentación de la información, por ejemplo si vemos que nuestra capa de Calor nos interfiere con otro tipo de informacón, siempre podremos ocultarla, como?:
1 2 3 4 5 | function hideHeatMap() { heatmap.setMap(heatmap.getMap() ? null : map); } <button onclick="hideHeatMap();">Toggle HeatMap</button> |
Agregando un sencillo botón que llama a un método en Javascript podremos activar o desactivar la capa.
Trabajando con los Gradientes
Otra carácteristica que podemos modificar es el color del mapa de calor, es decir podemos alterar la escala de colores para hacer enfásis en algún aspecto:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function gradient() { var gradientScheme = [ 'rgba(0, 0, 255, 0)', 'rgba(0, 60, 200, 1)', 'rgba(0, 120, 120, 1)', 'rgba(125, 125, 125, 0)', 'rgba(125, 120, 60, 0)', 'rgba(200, 60, 0, 0)', 'rgba(255, 0, 0, 1)' ]; heatmap.set('gradient', heatmap.get('gradient') ? null : gradientScheme); } <button onclick="gradient();">Cambiar Gradiente</button> |
Te Puede Interesar:
Detectando Eventos en Google Maps
Trabajando con Overlays en Google Maps, I Parte