Visitas: 2
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](http://proyectosbeta.net/wp-content/uploads/2016/05/ejemplo_heatmap.png)
Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.
![Modificación del index.html Modificación del index.html](http://proyectosbeta.net/wp-content/uploads/2016/05/Modificación-del-index.html-1.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/05/Mapa-inicial-2.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/05/Archivos-js-para-el-mapa-de-calor.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/05/Agregar-los-archivos-js-en-el-index.html.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/05/Cambiamos-de-zona-y-de-zoom.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/05/Datos-de-prueba-para-el-mapa-de-calor.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/05/Configuración-del-heatmap.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/05/Agregar-capa-heatmap-al-mapa.png)
Refrescamos el navegador.
![Mapa de calor Mapa de calor](http://proyectosbeta.net/wp-content/uploads/2016/05/Mapa-de-calor.png)
Si tienen dudas o comentarios, háganlo.
Curso de mapas
Demo: Ejemplo heatmap
Código fuente: ejemplo_heatmap