Leaflet + heatmap.js

Demo of Leaflet + heatmap.js with 10,000 points

by Alex Azuero

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.10000.js"></script>
<script src="http://pvb.io/js/heatmap.js"></script>
<script src="http://pvb.io/js/leaflet-heatmap.js"></script>
<div id="map"></div>

CSS

html,body,#map{
    width:100vw;
    height:100vh; 
    border:0;
    margin: 0;
    padding: 0;
}

JavaScript

//----------------------------------------------------
// DEMO BEGINS
//----------------------------------------------------

var min = 1;
var max = 3910;
var data = addressPoints.map(function (p) { 
	// normalize intensity values to between 0 and 1
	var intensity = parseInt(p[2]) || 0;
  var normalized = (intensity - min) / (max - min);
  return { lat: p[0], lng: p[1], count: parseInt(p[2]) || 0 };
});
console.log("DATA", data);

var testData = {
  max: max,
  data: data
};
  
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": 15,
  "maxOpacity": .5, 
  // scales the radius based on map zoom
  "scaleRadius": false, 
  // 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',
  blur: 0.95,
  gradient: { 
  '.5': 'yellow',
  '.8': 'orange',
  '.95': 'red'
  }
};

var map = new L.Map('map').setView([-37.87, 175.475], 12);
L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
    {maxZoom: 19}).addTo(map); 

var heatmapLayer = new HeatmapOverlay(cfg).addTo(map);

heatmapLayer.setData(testData);

//----------------------------------------------------
// DEMO ENDS
//----------------------------------------------------