Fix the heatmap. We may need to tweak the blob size a bit though

client_src/js/Config.mjs

@@ -8,9 +8,8 @@ export default {
 	// The default zoom level to use when loading the page.
 	default_zoom: 12,
 	
-	// The size, in metres, of the blobs on the heatmap.
+	heatmap: {
-	heatmap_blob_size: 5000,
+		// The radius fo blobs on the heatmap
-	
+		blob_radius: 0.02
-	heatmap_opacity: 0.75,
+	}
-	heatmap_alpha_range: 0.5
 }

client_src/js/LayerHeatmap.mjs

@@ -1,8 +1,6 @@
 "use strict";
 
-import L from 'leaflet';
+import HeatmapOverlay from 'leaflet-heatmap';
-import 'leaflet-webgl-heatmap';
-import '../../lib/webgl-heatmap/webgl-heatmap.js'; // Someone didn't define this as a dependency. I'm looking at you, leaflet-webgl-heatmap.....
 
 import Config from './Config.mjs';
 
@@ -11,24 +9,25 @@ class LayerHeatmap {
 	constructor(in_map) {
 		this.map = in_map;
 		
-		this.layer = new L.webGLHeatmap({
+		this.layer = new HeatmapOverlay({
-			size: Config.heatmap_blob_size,
+			radius: Config.heatmap.blob_radius,
-			opacity: Config.heatmap_opacity,
+			maxOpacity: 0.8,
-			alphaRange: Config.heatmap_alpha_range
+			scaleRadius: true,
-		});
+			useLocalExtrema: false,
-	}
 			
-	setup(initial_data) {
+			latField: "latitude",
-		this.set_data(initial_data);
+			lngField: "longitude",
+			valueField: "value"
+		});
 		this.map.addLayer(this.layer);
 	}
 	
 	set_data(readings_list) {
-		this.layer.setData(readings_list.map((reading) => [
+		let data_object = {
-			reading.latitude,
+			max: readings_list.reduce((prev, next) => next.value > prev ? next.value : prev, 0),
-			reading.longitude,
+			data: readings_list
-			reading.value
+		}
-		]));
+		this.layer.setData(data_object);
 	}
 }
 

client_src/js/Map.mjs

@@ -56,7 +56,7 @@ class Map {
 		// TODO: Use leaflet-timedimension here
 		// TODO: Allow configuration of the different reading types here
 		
-		this.heatmap.setup(JSON.parse(await GetFromUrl(
+		this.heatmap.set_data(JSON.parse(await GetFromUrl(
 			`${Config.api_root}?action=fetch-data&datetime=2019-01-03 07:52:10&reading_type=PM10`
 		)));
 	}

package-lock.json

@@ -836,6 +836,12 @@
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "heatmap.js": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/heatmap.js/-/heatmap.js-2.0.5.tgz",
+      "integrity": "sha1-Rm07hlE/XUkRKknSVwCrJzAUkVM=",
+      "dev": true
+    },
     "html-comment-regex": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
@@ -1050,6 +1056,16 @@
       "resolved": "https://registry.npmjs.org/leaflet-fullscreen/-/leaflet-fullscreen-1.0.2.tgz",
       "integrity": "sha1-CcYcS6xF9jsu4Sav2H5c2XZQ/Bs="
     },
+    "leaflet-heatmap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/leaflet-heatmap/-/leaflet-heatmap-1.0.0.tgz",
+      "integrity": "sha1-g8wEJJ057ZFSauqn12ab2qhtax8=",
+      "dev": true,
+      "requires": {
+        "heatmap.js": "*",
+        "leaflet": "*"
+      }
+    },
     "leaflet-timedimension": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/leaflet-timedimension/-/leaflet-timedimension-1.1.0.tgz",
@@ -1066,11 +1082,6 @@
         }
       }
     },
-    "leaflet-webgl-heatmap": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/leaflet-webgl-heatmap/-/leaflet-webgl-heatmap-0.2.7.tgz",
-      "integrity": "sha1-mf+/8wrmgDb/4t3tgZjPf+2QSg8="
-    },
     "leaflet.markercluster": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",

package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "@types/leaflet": "^1.2.14",
     "@types/leaflet-fullscreen": "^1.0.4",
+    "leaflet-heatmap": "^1.0.0",
     "postcss-import": "^12.0.1",
     "postcss-url": "^8.0.0",
     "rollup": "^1.1.0",