Curso sobre creación y desarrollo de mapas – Parte 7: Heatmap

Continuamos con el curso de mapas. En esta séptima parte estaré mostrando como tener un mapa de calor usando Leaflet.
En la primera parte realizamos un mapa simple, ahora copiamos ese código y nombramos la carpeta por ejemplo_heatmap.

ejemplo_heatmap
ejemplo_heatmap

Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.

Modificación del index.html
Modificación del index.html

Si se fijan modificamos el título y lo que está en el body. Ahora entramos a nuestro navegador favorito y tecleamos en la barra de direcciones: http://localhost/curso_mapas/ejemplo_heatmap

Mapa inicial
Mapa inicial

Un heatmap o mapa de calor representa a partir de una capa de puntos, la densidad de los mismos en una determinada área. De forma que a mayor densidad de esos puntos el área quedará más coloreada según determinados parámetros.

Los mapas de calor permiten una rápida identificación de los “puntos calientes” de un área.

Necesitamos dos archivos para agregar en nuestro mapa un mapa de calor.

Una vez descargado esos dos archivos, creamos una carpeta plugins/Heatamp dentro de la carpeta leaftlet.

Archivos js para el mapa de calor
Archivos js para el mapa de calor

Ahora agregamos esos dos archivos en el index.html
<script src="libs/leaflet/plugins/Heatmap/HeatLayer.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/leaflet/plugins/Heatmap/simpleheat.js" type="text/javascript" charset="utf-8"></script>

Agregar los archivos js en el index.html
Agregar los archivos js en el index.html

Ahora editamos el archivo MapaOSM.js
// USA
var latitud = 41.4881;
var longitud = -80.1468;
var zoom = 4;

Cambiamos de zona y de zoom
Cambiamos de zona y de zoom

Ahora debemos de colocar puntos que contengan latitud, longitud e intensidad. Copian este archivo y pegan en el código.

Datos de prueba para el mapa de calor
Datos de prueba para el mapa de calor

Agregamos la configuración del heatmap.
var cfg = {
    // radius should be small ONLY if scaleRadius is true (or small radius is intended)
    // if scaleRadius is false it will be the constant radius used in pixels
    "radius": 2,
    "maxOpacity": .8,
    // scales the radius based on map zoom
    "scaleRadius": true,
    // if set to false the heatmap uses the global maximum for colorization
    // if activated: uses the data maximum within the current map boundaries
    // (there will always be a red spot with useLocalExtremas true)
    "useLocalExtrema": true,
    // which field name in your data represents the latitude - default "lat"
latField: 'lat',
    // which field name in your data represents the longitude - default "lng"
lngField: 'lng',
    // which field name in your data represents the data value - default "value"
    valueField: 'count'
};

Configuración del heatmap
Configuración del heatmap

Agregamos la capa heatmap.
// Mapa de calor.
var heat = L.heatLayer(data, {
    maxZoom: zoom
}).addTo(mapa);

Agregar capa heatmap al mapa
Agregar capa heatmap al mapa

Refrescamos el navegador.

Mapa de calor
Mapa de calor

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo heatmap
Código fuente: ejemplo_heatmap

(Visited 291 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*