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

This commit is contained in:
Starbeamrainbowlabs 2019-01-18 20:12:30 +00:00
parent c4e29e7637
commit a21cb1c3eb
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
5 changed files with 37 additions and 27 deletions

View file

@ -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_blob_size: 5000,
heatmap_opacity: 0.75,
heatmap_alpha_range: 0.5
heatmap: {
// The radius fo blobs on the heatmap
blob_radius: 0.02
}
}

View file

@ -1,8 +1,6 @@
"use strict";
import L from 'leaflet';
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 HeatmapOverlay from 'leaflet-heatmap';
import Config from './Config.mjs';
@ -11,24 +9,25 @@ class LayerHeatmap {
constructor(in_map) {
this.map = in_map;
this.layer = new L.webGLHeatmap({
size: Config.heatmap_blob_size,
opacity: Config.heatmap_opacity,
alphaRange: Config.heatmap_alpha_range
this.layer = new HeatmapOverlay({
radius: Config.heatmap.blob_radius,
maxOpacity: 0.8,
scaleRadius: true,
useLocalExtrema: false,
latField: "latitude",
lngField: "longitude",
valueField: "value"
});
}
setup(initial_data) {
this.set_data(initial_data);
this.map.addLayer(this.layer);
}
set_data(readings_list) {
this.layer.setData(readings_list.map((reading) => [
reading.latitude,
reading.longitude,
reading.value
]));
let data_object = {
max: readings_list.reduce((prev, next) => next.value > prev ? next.value : prev, 0),
data: readings_list
}
this.layer.setData(data_object);
}
}

View file

@ -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`
)));
}

21
package-lock.json generated
View file

@ -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",

View file

@ -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",