Leaflet + L.heatLayer

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="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<div id="map"></div>

CSS

html,body,#map{
    width:100%;
    height:100%;  
}
body{
    perspective:600px;
    overflow:hidden;
    width:100%;
    height:100%;
}

		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}

JavaScript

/// URL libreria
/// https://github.com/Leaflet/Leaflet.heat

var addressPoints = [
[40.424127, -3.711656, 0.1],
[40.624127, -3.911656, 1],
[40.624127, -3.911656, 1],
[40.624127, -3.911656, 1],
[40.524127, -3.811656, 1],
[40.624127, -3.911656, 1]
];

for(var i=0;i<100; i++){
	addressPoints.push([40.424127+(Math.random()*7-3),
  									-3.711656+(Math.random()*7-3),
                    1]);
}


var map = L.map('map').setView([40.424127, -3.711656], 5.4);
L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
    {maxZoom: 19}).addTo(map); 
    
addressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });

var heat = L.heatLayer(addressPoints, {radius: 25, minOpacity:0.2 }).addTo(map);