sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-11-22 06:23:01 +00:00
Code Issues Releases Wiki Activity

[client/heatmap] Add horrible hack to change gradient based on reading type

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-01-19 15:09:38 +00:00
parent 45509725e4
commit 497da77e61
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
1 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
client_src/js/LayerHeatmap.mjs
View file

@ -12,7 +12,7 @@ class LayerHeatmap {
this.overlay_config = { this.overlay_config = {
radius: Config.heatmap.blob_radius, radius: Config.heatmap.blob_radius,
minOpacity: 0.25, minOpacity: 0.5,
maxOpacity: 0.8, maxOpacity: 0.8,
scaleRadius: true, scaleRadius: true,
useLocalExtrema: false, useLocalExtrema: false,
@ -29,8 +29,9 @@ class LayerHeatmap {
1: "purple" 1: "purple"
} }
}; };
this.layer = new HeatmapOverlay(this.overlay_config); this.layer = new L.LayerGroup();
this.map.addLayer(this.layer); this.map.addLayer(this.layer);
this.recreate_overlay();
// Custom configuration directives to apply based on the reading type displayed. // Custom configuration directives to apply based on the reading type displayed.
this.reading_type_configs = { this.reading_type_configs = {
@ -38,25 +39,42 @@ class LayerHeatmap {
// 0 to 35 low (green), 36 to 53 moderate (amber) 54 to 70 high (red) and above 71 (purple) // 0 to 35 low (green), 36 to 53 moderate (amber) 54 to 70 high (red) and above 71 (purple)
max: 75, max: 75,
gradient: { gradient: {
0.233: "green", "0": "hsla(111, 76%, 42%, 0.00)",
0.593: "orange", "0.233": "hsl(111, 76%, 42%)", // green
0.827: "red", "0.593": "orange",
1: "purple" "0.827": "red",
"1": "purple"
} }
}, },
"PM10": { "PM10": {
// 0 to 50 low (green) 51 to75 moderate (amber) 76 to 100 high (red) and more than 100 very high (purple) // 0 to 50 low (green) 51 to75 moderate (amber) 76 to 100 high (red) and more than 100 very high (purple)
max: 100, max: 100,
gradient: { gradient: {
0.45: "green", "0": "hsla(111, 76%, 42%, 0)",
0.573: "orange", "0.45": "hsl(111, 76%, 42%)", // green
0.8: "red", "0.573": "orange",
1: "purple" "0.8": "red",
"1": "purple"
}
},
"humidity": {
max: 100,
gradient: {
"0": "hsla(176, 77%, 40%, 0)",
"0.5": "hsl(176, 77%, 40%)",
"1": "blue"
} }
} }
}; };
} }
recreate_overlay() {
if(typeof this.heatmap != "undefined")
this.layer.removeLayer(this.heatmap);
this.heatmap = new HeatmapOverlay(this.overlay_config);
this.layer.addLayer(this.heatmap);
}
set_data(readings_list) { set_data(readings_list) {
let data_object = { let data_object = {
max: 0, max: 0,
@ -68,9 +86,9 @@ class LayerHeatmap {
else else
data_object.max = readings_list.reduce((prev, next) => next.value > prev ? next.value : prev, 0); data_object.max = readings_list.reduce((prev, next) => next.value > prev ? next.value : prev, 0);
console.log("[map/heatmap] Displaying", data_object); console.log("[map/heatmap] Displaying", this.reading_type, data_object);
this.layer.setData(data_object); this.heatmap.setData(data_object);
} }
async update_data(datetime, reading_type) { async update_data(datetime, reading_type) {
@ -86,14 +104,21 @@ class LayerHeatmap {
if(typeof this.reading_type_configs[this.reading_type] != "undefined") { if(typeof this.reading_type_configs[this.reading_type] != "undefined") {
this.overlay_config.gradient = this.reading_type_configs[this.reading_type].gradient; this.overlay_config.gradient = this.reading_type_configs[this.reading_type].gradient;
console.log("[map/heatmap] Gradient is now", this.overlay_config.gradient);
this.recreate_overlay();
} }
else { else {
delete this.overlay_config.gradient; delete this.overlay_config.gradient;
} }
this.set_data(JSON.parse(await GetFromUrl( try {
`${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(this.datetime.toISOString())}&reading_type=${encodeURIComponent(this.reading_type)}` this.set_data(JSON.parse(await GetFromUrl(
))); `${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(this.datetime.toISOString())}&reading_type=${encodeURIComponent(this.reading_type)}`
)));
} catch(error) {
console.log(error);
alert(error);
}
} }