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