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

[client/heatmap] Dynamically change gradient based on reading type

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-01-19 14:31:46 +00:00
parent 0b5713c74e
commit 45509725e4
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 52 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
client_src/js/LayerHeatmap.mjs
View file

@ -12,23 +12,64 @@ class LayerHeatmap {
this.overlay_config = { this.overlay_config = {
radius: Config.heatmap.blob_radius, radius: Config.heatmap.blob_radius,
minOpacity: 0.25,
maxOpacity: 0.8, maxOpacity: 0.8,
scaleRadius: true, scaleRadius: true,
useLocalExtrema: false, useLocalExtrema: false,
latField: "latitude", latField: "latitude",
lngField: "longitude", lngField: "longitude",
valueField: "value" valueField: "value",
gradient: {
// 0 to 35 low (green), 36 to 53 moderate (amber) 54 to 70 high (red) and above 71 (purple)
0.233: "green",
0.593: "orange",
0.827: "red",
1: "purple"
}
}; };
this.layer = new HeatmapOverlay(this.overlay_config); this.layer = new HeatmapOverlay(this.overlay_config);
this.map.addLayer(this.layer); this.map.addLayer(this.layer);
// Custom configuration directives to apply based on the reading type displayed.
this.reading_type_configs = {
"PM25": {
// 0 to 35 low (green), 36 to 53 moderate (amber) 54 to 70 high (red) and above 71 (purple)
max: 75,
gradient: {
0.233: "green",
0.593: "orange",
0.827: "red",
1: "purple"
}
},
"PM10": {
// 0 to 50 low (green) 51 to75 moderate (amber) 76 to 100 high (red) and more than 100 very high (purple)
max: 100,
gradient: {
0.45: "green",
0.573: "orange",
0.8: "red",
1: "purple"
}
}
};
} }
set_data(readings_list) { set_data(readings_list) {
let data_object = { let data_object = {
max: readings_list.reduce((prev, next) => next.value > prev ? next.value : prev, 0), max: 0,
data: readings_list data: readings_list
} };
if(typeof this.reading_type_configs[this.reading_type] != "undefined")
data_object.max = this.reading_type_configs[this.reading_type].max;
else
data_object.max = readings_list.reduce((prev, next) => next.value > prev ? next.value : prev, 0);
console.log("[map/heatmap] Displaying", data_object);
this.layer.setData(data_object); this.layer.setData(data_object);
} }
@ -43,6 +84,13 @@ class LayerHeatmap {
console.log("[map/heatmap] Updating values to", this.reading_type, "@", this.datetime); console.log("[map/heatmap] Updating values to", this.reading_type, "@", this.datetime);
if(typeof this.reading_type_configs[this.reading_type] != "undefined") {
this.overlay_config.gradient = this.reading_type_configs[this.reading_type].gradient;
}
else {
delete this.overlay_config.gradient;
}
this.set_data(JSON.parse(await GetFromUrl( this.set_data(JSON.parse(await GetFromUrl(
`${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(this.datetime.toISOString())}&reading_type=${encodeURIComponent(this.reading_type)}` `${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(this.datetime.toISOString())}&reading_type=${encodeURIComponent(this.reading_type)}`
))); )));

2
client_src/js/Map.mjs
View file

@ -60,7 +60,7 @@ class Map {
// TODO: Use leaflet-timedimension here // TODO: Use leaflet-timedimension here
// TODO: Allow configuration of the different reading types here // TODO: Allow configuration of the different reading types here
this.heatmap.update_data(new Date(), "PM25"); this.heatmap.update_data(new Date(new Date-10*60), "PM25");
} }
setup_layer_control() { setup_layer_control() {