Um Heatmap (ou mapa de calor) é uma representação gráfica de dados em que os valores individuais contidos em uma matriz são representados como cores. “Mapa de calor” é um termo mais recente, porém as matrizes de sombreamento existem há mais de um século.
Você pode criar um heatmap para apresentar suas informações na internet com o Leaflet. O plugin Leaflet.heat é uma forma simples e rápida de você agrupar pontos em uma grade.
1. Instalação
Para incluir o plugin, basta usar a leaflet-heat.js a partir da pasta dist:
<script src="leaflet-heat.js"></script>
2. Uso do plugin
Para usar o plugin você precisa instanciar uma classe do tipo L.heatLayer:
var heat = L.heatLayer([
[50.5, 30.5, 0.2], // lat, lng, intensity
[50.6, 30.4, 0.5],
...
], {radius: 25}).addTo(map);
3. Parâmetros
Quando você está criando seu heatmap, como demonstrado acima, você precisar utilizar a classe L.heatLayer, porém ela possui algumas opções de configurações que você precisa ter conhecimento, e é o que vamos mostrar agora.
minOpacity – Opacidade mínima de início do heatmap
maxZoom – Nível de zoom em que os pontos atingem a intensidade máxima (conforme a intensidade é dimensionada com zoom)
max – Intensidade máxima do ponto (1.0 por padrão)
radius – raio de cada “ponto” do mapa de calor (25 por padrão)
blur – quantidade de desfoque (15 por padrão)
gradiente – Configuração do gradiente, por exemplo {0.4: ‘blue’, 0.65: ‘lime’, 1: ‘red’}
Cada ponto no array de entrada pode ser um array [50.5, 30.5, 0.5] ou um objeto Leaflet LatLng.
O terceiro argumento opcional em cada ponto LatLng (altitude) representa a intensidade do ponto. A menos que a opção max seja especificada, a intensidade deve variar entre 0.0 e 1.0.
4. Métodos
setOptions(opções) : Define novas opções do mapa de calor e redesenha-o.
addLatLng(latlng) : Adiciona um novo ponto ao mapa de calor e o redesenha.
setLatLngs(latlngs) : Redefine os dados do mapa de calor e os redesenha.
redraw() : Redesenha o mapa de calor.
5. O Código
<!DOCTYPE html>
<html>
<head>
<title>Leaflet.heat demo</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/11F4BF7B-5932-2746-A043-363BD8528A2C/main.js" charset="UTF-8"></script><script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style>
#map { width: 800px; height: 600px; }
body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
.ghbtns { position: relative; top: 4px; margin-left: 5px; }
a { color: #0077ff; }
</style>
</head>
<body>
<div id="map"></div>
<script src="js/leaflet-heat.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.10000.js"></script>
<script>
var map = L.map('map').setView([-37.87, 175.475], 12);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
addressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });
var heat = L.heatLayer(addressPoints).addTo(map);
</script>
</body>
</html>
Fonte: GitHub
