Leaflet Tests 2

index.html

<div id="map-canvas" class="map"></div>

leaflet-tests-2.markdown

Leaflet Tests 2

A Pen by Pral2a on CodePen.

License.

script.js

var dublin = [53.310585, -6.235916];

var map = L.map('map-canvas').setView(dublin, 15);

var tiles = L.tileLayer(
  'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoidG9tYXNkaWV6IiwiYSI6ImRTd01HSGsifQ.loQdtLNQ8GJkJl2LUzzxVg',
  {
    attribution: 'Tiles: &copy; <a href="http://osm.org/copyright">OpenStreetMap / Mapbox</a> | Data: &copy <a href="http://osm.org/copyright">iSCAPE Project</a>'
  }
).addTo(map);

var addressPoints = [];

randomHeatMap(dublin);

console.log(JSON.stringify(addressPoints));

addressPoints = addressPoints.map(function(p) {
  return [p[0], p[1]];
});

var heat = L.heatLayer(addressPoints).addTo(map);

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function randomHeatMap(seed){
  var t = 0.005;
  for(var i = 0; i < 200; i++) {
      addressPoints.push([getRandom(seed[0]-t, seed[0]+t), getRandom(seed[1]-t, seed[1]+t),getRandom(1,100)]);
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.2/heatmap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>

style.css

.map {
  width: 100%;
  height: 500px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet" />