Updating the color on maps.sensor.community to reflect the new WHO recommendation for PM "safe limits"

[MagTun]

The problem: sometimes the sensor on the map are green but the air looks healthy but the level of pollution is (relatively) high.

This is even more problematic as the WHO has recently updated their "safe limits" for PM10 and PM2.5 as explained here.
The transition from the color green to yellow on the sensor maps should reflect these new recommendations especially for PM2.5 which is much lower now

Edit:
It's important because "the harm increases fastest at the low levels of pollution." A jump from 5 to 20 micrograms has a worst effect than a jump from 100 to 115 micrograms. (source)

[ohheyitsdave]

Hi @MagTun ,

thanks for you comment and information 👌
Will transfer to the map repo, since the map is displaying the current values.

Best regards,
David

[pjgueno]

@MagTun please check the branch Feature/newcolors and tell me. I made it a few days ago. Just clone then npm install npm start

[MagTun]

@pjgueno , thanks for letting me know. I wanted to check but I get a bug.

I have downloaded the feinstaub-map-v2-feature-newcolors then in the folder I run npm install and npm start. The server starts and I can start to load the page in my browser but it is stuck on the "Loading data...".

Here is the log:

ERROR in ./src/js/index.js
Module not found: Error: Can't resolve './config.js' in 'C:\Users\Me\Desktop\feinstaub-map-v2-feature-newcolors\src\js'
 @ ./src/js/index.js 27:0-38 144:54-68 144:79-93 148:0-12 148:15-34 148:37-54 150:26-38 151:14-32 152:10-24 153:10-24 154:13-36 165:12-28 179:32-49 179:62-79 180:32-49 180:62-79 181:38-61 181:74-97 188:0-16 188:65-81 189:63-79 191:26-42 192:19-32 193:16-27 466:50-66 577:5-22 583:5-22 606:24-40
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 10.1 KiB {HtmlWebpackPlugin_0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/leaflet-geosearch/dist/geosearch.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/leaflet-geosearch/dist/geosearch.css] 5.04 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css] 663 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/leaflet/dist/leaflet.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/leaflet/dist/leaflet.css] 16.5 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/getUrl.js] 830 bytes {mini-css-extract-plugin} [built]
    [./node_modules/leaflet/dist/images/layers-2x.png] 80 bytes {mini-css-extract-plugin} [built]
    [./node_modules/leaflet/dist/images/layers.png] 80 bytes {mini-css-extract-plugin} [built]
    [./node_modules/leaflet/dist/images/marker-icon.png] 80 bytes {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!src/css/style.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./src/css/style.css] 13.7 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/getUrl.js] 830 bytes {mini-css-extract-plugin} [built]
    [./src/images/facebook.svg] 37 bytes {mini-css-extract-plugin} [built]
    [./src/images/github.svg] 35 bytes {mini-css-extract-plugin} [built]
    [./src/images/gitlab.svg] 35 bytes {mini-css-extract-plugin} [built]
    [./src/images/mastodon.svg] 37 bytes {mini-css-extract-plugin} [built]
    [./src/images/meetup.svg] 35 bytes {mini-css-extract-plugin} [built]
    [./src/images/telegram.svg] 37 bytes {mini-css-extract-plugin} [built]
    [./src/images/twitter.svg] 36 bytes {mini-css-extract-plugin} [built]
i ｢wdm｣: Failed to compile.

I tried npm run build which told me to run npx browserslist@latest --update-db which I did.

npm run build also find the same error (even after the npx update):

ERROR in ./src/js/index.js
Module not found: Error: Can't resolve './config.js' in 'C:\Users\Me\Desktop\feinstaub-map-v2-feature-newcolors\src\js'
 @ ./src/js/index.js 27:0-38 144:54-68 144:79-93 148:0-12 148:15-34 148:37-54 150:26-38 151:14-32 152:10-24 153:10-24 154:13-36 165:12-28 179:32-49 179:62-79 180:32-49 180:62-79 181:38-61 181:74-97 188:0-16 188:65-81 189:63-79 191:26-42 192:19-32 193:16-27 466:50-66 577:5-22 583:5-22 606:24-40

ERROR in chunk index [entry]
main.js
C:\Users\Me\Desktop\feinstaub-map-v2-feature-newcolors\src\js\index.js 88a95c1423b46fd3277ec64849533def
Assigning to rvalue (149:0)
| var data_host = "";
| data_host = "https://maps.sensor.community";
| !(function webpackMissingModule() { var e = new Error("Cannot find module './config.js'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()) = !(function webpackMissingModule() { var e = new Error("Cannot find module './config.js'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()) + !(function webpackMissingModule() { var e = new Error("Cannot find module './config.js'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
|
| const tiles = L.tileLayer(!(function webpackMissingModule() { var e = new Error("Cannot find module './config.js'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()), {

..............  SIMILAR LINES AS ABOVE  .............. 
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! map.sensor.community@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the map.sensor.community@1.0.0 build script.

[pjgueno]

Sorry, I forgot you have to copy the config (look at the instructions in the README.md):

cp src/js/config.js.dist src/js/config.js

Or do it manually.

It should work then.

It is basically the same map as the master branch.

[MagTun]

Thansk this is working now... but I don't see any color change related to the PM value (for PM10 as well as PM2.5) :

your branch:

the website:

[pjgueno]

Did you click on the dropdown list? You know you can choose between different values and zoom and open graphs even with the current map, don‘t you?

[pjgueno]

I choose to keep also our live values not only the 24h means

[MagTun]

Sorry for the delay and also for not paying attention to the other elements on the dropdown than PM25 and PM10. I expected the new color to be on the main PM10 and PM25 and not on the different maps. The problem with keeping what you call "our live value" is that they give a false impression of the quality of the air: I think it is better for the viewer if the WHO 24h value thresholds are used for the current values, at least we would know when the current PM value is above this 24h mean. The research shows that the values you display as "green = good" are actually bad and the WHO is the first one to take this research into account.

Also, the color scheme you use for the WHO and EU doesn't make a clear enough cut between good and bad. To me, the current color scheme used for PM25 and PM10 is perfect (the transition from green to yellow is brief and clear), it is just that the thresholds used are not right.

[pjgueno]

Let's have a call. I can do any scaling. We will probably release a new map in January.

[pjgueno]

Or send me the values for the scale you would want for PM2.5 et PM10. Is the graph you have sent official?

[pjgueno]

Actually I could do some scale for each death cause...

-> Next Sensor.Community Global Community Calls
10.11.2021

You could participate.

[MagTun]

I won't be able to participate to the community call.

The graph is from this meta-analysis.

I think that it's better to keep it simple than to overflow the user with many scales.

To me, the most important thing is that the values used by WHO for the annual limit and the 24h limit are used are thresholds.

The clearest scale would be:

● for PM2.5: green before 5μg/m3 (annual limit), then yellow until 15 μg/m3 (24h limit) where the orange starts. Then, the rest of the color scale. Concerning the purple, I would keep the current threshold (≈ 100 μg/m3) to make theses most extreme values stand out. If this threshold would be set lower, everything would be purple which won't be very appealing.

● for PM10 : green before 15μg/m3 then yellow until 45 μg/m3 where the orange starts. Then the rest of the scale (keeping the same threshold for purple)

This scale would be more correct but still far from perfect because it's tempting to think that only the purple is dangerous and not the yellow. But people should start to worry about their air quality when it is yellow (above 5 μg/m3 for PM2.5 and 15μg/m3, the air is toxic and starts to kill people).

[pjgueno]

Thanks for your advices. I will modify the scaling according to them. It is quite easy. Then I can actually make the map open on the WHO layer.

Concerning the annual limit, we unfortunately can't implement it in our API...

I check the link and I found the graphs. It is actually in a journal paper.

We keep in touch.

[MagTun]

I am confused by your response: "I will modify the scaling according to them. It is quite easy. [...] Concerning the annual limit, we unfortunately can't implement it in our API".

Just to be clear, I am not asking for a separate map which calculates the 24h/annual value. My point is just to update the color scale on the map with the current values of the sensors. I just mentioned the WHO annual and 24h limit to justify my request for changing the color scale and to justify the threshold I suggested. To make it clear, I suggest that the threshold that WHO used for the annual/24h limit should be used as the limit for the green/yellow and yellow/orange on the map which shows the current values of the sensors.