Heatmap & Leaflet

      Comments Off on Heatmap & Leaflet
How the heatmap algorithm works

The Heatmaps are one of the most powerful tools for visualizing very dense data groups . The concentration maps are often used to   identify  clusters easily in which  data or phenomena concentrations are.

The main feature is their thematics because the area is normally classified by colour blurs which pass from blue (low concentration) to red (high concentration) ,  crossing through intermediate values between green and yellow.

The values scale is basically included between 0 and 1. A float value normalization is performed: the scale represents point data values, tied to a colour gradient (legend).

The reasons behind a proper Heatmap is the map symbolizes a continuous point distribution starting from discrete one.

Hence, the heatmap is a result of a point interpolation processing. The optimization depends on parameters  such as cell resolution, discovery radius and the point interpolation type.

  • The resolution used by Leaflet tool is 1 unit per pixel in order to avoid “pixelized” effects.
  • By default the radius is set to 25.
  • The interpolation algorithm is IDW – Inverse Distance Weighting.

Radius explicitly determinates the effect which singular points  have on the others. In details, several circular buffers as much as the points belonging to dataset are created on a point density. By fixed radius the buffers create several overlapping circles which determinate a more or less colour strength on draw area.

Figure 4. How buffers overlap within the heat map.

The interpolation follows the IDW algorithm it based on basics that a given point has a value more similar to neighbourhood points than far ones. It is often used to define the point altitudes when they are unknown. In other words, the weight of a point is in inverse proportion with mutual distance than other.


The algorithm change when the p exponent in the formula changes:

idw formula


Zi =  single weights they fall in the given radius established by heatmap.

di = distance of  single pixel from the other points (constant because similar for everyone).

Zp = weight for each single point.

The distance is constant, so:

Z= Zi x N

Given the radius and the kind of interpolation only those points falling within discovery radius will be used in order to define the strength of heat on single pixels of the raster map.

IDW Search Radius

The consequent density surface is visualized by a colour gradient that permits to immediately identify areas with high concentration rate for a phenomenon.  

Leaflet and Heatmaps

Leaflet easily permits to create a concentration map by his own several plugin. 

Leaflet.heat is a Leaflet plugin,that renders a heatmap by setting some parameter passed into option of JavaScript library.

It manages a point array as input and a JavaScript object having the following parameters as input:

  • minOpacity – the minimum opacity the heat will start at
  • maxZoom – zoom level where the points reach maximum intensity (as intensity scales with zoom), equals maxZoom of the map by default
  • max – maximum point intensity, 1.0 by default
  • radius – radius of each “point” of the heatmap, 25 by default
  • blur – amount of blur, 15 by default
  • gradient – color gradient config, e.g. {0.4: ‘blue’, 0.65: ‘lime’, 1: ‘red’}

We want to referrer to a point array based on shapefile which I freely downloaded by opendata website of Campania Region Council. The zipfile is downloaded from this link.

Dataset contains a shapefile with 1.389cultural places in Naples, Italy. The shapes are classified by a macro-typology in a single geojson,  performed in QGIS. Hence, the index.html has its database in luoghi_cultura_napoli.geojson.


Import all the necessary libraries into  <head> section:

<!DOCTYPE html>

  <title>Concentrazione dei Luoghi della cultura a Napoli</title>
  <meta charset=”UTF-8″>
  <link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css” />
  <script src=”http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js”></script>
  <script src=”http://code.jquery.com/jquery-2.1.0.min.js”></script>
  <script src=”http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js”></script>
        #map { width: 100%; height: 600px; }
       body { font: 16px/1.4 “Helvetica Neue”, Arial, sans-serif; }

      .ghbtns { position: relative; top: 4px; margin-left: 5px; }
      a { color: #0077ff; }

Once declared the head section, we will pass to analyse the code in the section <body>:

<div id=”map”></div>
<script src=”http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js”></script>

//Map Object with setView e Zoom

var map = L.map(‘map’).setView([40.842, 14.24], 13);

//OSM Tiles

var tiles = L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’, {
attribution: ‘© <a href=”http://osm.org/copyright”>OpenStreetMap</a> contributors’,

// Get GeoJSON file from URL

$.getJSON(‘luoghi_cultura_napoli.geojson’,function (data) {

// Building POI array for HeatMap by for cycle

for (i = 0; i <data.features.length; i++)
{ addressPoints.push([data.features[i].geometry.coordinates[1],data.features[i].geometry.coordinates[0],Math.random()])

L.heatLayer(addressPoints, {radius: 25}).addTo(map);


//end $.getJSON


We pay attention on <script> section. We can observe the construction of object that manage our geojson by JQuery command $.getJSON . It will permit to recall the dataset. Whitin this object there is  a for cycle which read the attributes, building an useful array for L.heatLayer object.

The addressPoints array is made by three values for each row: two coordinate and intensity (in the example a random function with values between 0 and 1 is used).

That’s the final result :

Enlarge map


Please follow and like us: