Cómo crear un heatmap con OpenLayers

Un mapa de calor o heatmap es una representación visual de los datos en la que se muestra una gama de colores para mostrar los datos, permitiendo conocer en qué lugares la concentración de datos es mayor.

En otra entrada hemos explicado cómo crear un heatmap en GeoServer. Pero en esta ocasión vamos a prescindir del servidor para no sobrecargarlo y será el navegador del cliente el que se encargará de realizar este renderizado.

El equipo de desarrolladores de OpenLayers 3 ha lanzado oficialmente la primera versión estable (3.0.0) en septiembre de 2014 y unas de las novedades que trae es la posibilidad de crear un heatmap de una manera sencilla.

OpenLayers 3 nos proporciona la clase ol.layer.Heatmap, ésta clase es una subclase de ol.layer.Vector, que nos permite el acceso y representación de datos vectoriales.

Para utilizar la clase ol.layer.Heatmap utilizaremos como fuente de datos origen (source) una capa vectorial:

En el código anterior hemos instanciado una capa y la hemos denominado heatmap, cuya fuente es un archivo GeoJSON, dentro de las propiedades del GeoJSON debemos especificar la url en la que se encuentra el archivo .json y el formato, que en este caso es GeoJSON, aunque se podría utilizar otra fuente vectorial como un KML.

Una vez creada la capa heatmap solo tendremos que añadirla al mapa, la incluimos en la propiedad layers, junto con la capa watercolor del proveedor Stamen:

Este sería el resultado:

Puedes ver el código completo utilizado para crear este mapa descargando el html utilizado:

https://mappinggis.com/visores_webmapping/ol3_heatmap.html

y abriéndolo con un editor de texto.

Otro ejemplo de creación de un heatmap con OpenLayers 3 en la página de ejemplos de OpenLayers 3

¿Quieres aprender a crear mapas web como el que hemos visto? Apúntate a nuestro curso online desarrollo de aplicaciones webmapping.

 

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

Los comentarios están cerrados.