JSFiddle - React, Tailwind, and code Playground

by Michael Underwood

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
<div id="map">
    
</div>

CSS

#map {
  width: 640px;
  height: 480px;
}

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

console.log('Generating data...', new Date());
const heatData = [];
for (let lat = -90; lat < 90; lat += 4) {
	for (let lon = -180; lon < 180; lon += 4) {
  	heatData.push([lat, lon, 100*Math.random()]);
  }
}
//var heat = L.heatLayer(heatData, {radius: 25}).addTo(map);
console.log('...converting to features', new Date());
const heatFeatures = heatData.map(data => turf.point([data[1], data[0]], { speed: data[2] }));
console.log('...generating bands', new Date());
const bands = turf.isobands(turf.featureCollection(heatFeatures), [0, 20, 40, 60, 80, 100], { zProperty: 'speed' });
console.log('...adding to map', new Date());
L.geoJSON(bands, {
    style: function(feature) {
    	  let color;
        switch (feature.properties.speed) {
            case '0-20': color = "#ccffff"; break;
            case '20-40': color = "#99ff66"; break;
            case '40-60': color = "#ffff00"; break;
            case '60-80': color = "#ff6600"; break;
            case '80-100': color = "#ff0000"; break;
        }
        
        return {fillColor: color, fillOpacity: 0.1, weight: 0};
    }
}).addTo(map);
console.log('Ready!', new Date());