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

Update gradients of PM2.5 to match DEFRA standards

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-04-23 14:43:21 +01:00
parent 94f28b2cad
commit 0c446f2864
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 42 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client_src/js/Helpers/RenderGradient.mjs Normal file
View file

@ -0,0 +1,13 @@
"use strict";
function RenderGradient(stops, max) {
let result = {};
for(let value in stops) {
result[value / max] = stops[value];
}
return result;
}
export default RenderGradient;

36
client_src/js/LayerHeatmap.mjs
View file

@ -3,7 +3,9 @@
import HeatmapOverlay from 'leaflet-heatmap'; import HeatmapOverlay from 'leaflet-heatmap';
import Config from './Config.mjs'; import Config from './Config.mjs';
import GetFromUrl from './Helpers/GetFromUrl.mjs'; import GetFromUrl from './Helpers/GetFromUrl.mjs';
import RenderGradient from './Helpers/RenderGradient.mjs';
class LayerHeatmap { class LayerHeatmap {
@ -41,14 +43,31 @@ class LayerHeatmap {
// 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 = {
"PM25": { "PM25": {
// 0 to 35 low (green), 36 to 53 moderate (amber) 54 to 70 high (red) and above 71 (purple) /*
* Range Midpoint Name Colour
* 0 - 11 5.5 Low 1 #9CFF9C
* 12 - 23 17.5 Low 2 #31FF00
* 24 - 35 29.5 Low 3 #31CF00
* 36 - 41 38.5 Moderate 1 #FFFF00
* 42 - 47 44.5 Moderate 2 #FFCF00
* 48 - 53 50.5 Moderate 3 #FF9A00
* 54 - 58 56 High 1 #FF6464
* 59 - 64 61.5 High 2 #FF0000
* 65 - 70 67.5 High 3 #990000
* 71+ n/a Very high #CE30FF
*/
max: 75, max: 75,
gradient: { gradient: {
"0": "hsla(111, 76%, 42%, 0.00)", "0": "#9CFF9C", "5.5": "#9CFF9C", // Low 1
"0.233": "hsl(111, 76%, 42%)", // green "17.5": "#31FF00", // Low 2
"0.593": "orange", "29.5": "#31CF00", // Low 3
"0.827": "red", "38.5": "#FFFF00", // Moderate 1
"1": "purple" "44.5": "#FFCF00", // Moderate 2
"50.5": "#FF9A00", // Moderate 3
"56": "#FF6464", // High 1
"61.5": "#FF0000", // High 2
"67.5": "#990000", // High 3
"72.5": "#CE30FF", "75": "#CE30FF", // Very high
} }
}, },
"PM10": { "PM10": {
@ -143,7 +162,10 @@ 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") { 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 = RenderGradient(
this.reading_type_configs[this.reading_type].gradient,
this.reading_type_configs[this.reading_type].max
);
console.log("[map/heatmap] Gradient is now", this.overlay_config.gradient); console.log("[map/heatmap] Gradient is now", this.overlay_config.gradient);
this.recreate_overlay(); this.recreate_overlay();
} }