How to build a noise pollution map with heatmap.js

Question

I have to build something like a heatmap but representing the noise sources in a colour, and in the noise expansion radious keep gradient to low level. My problem is that the heapmap.js library takes sense of the points concentration.

I want that the colorize depends on the noise level, and not on the concentration of noise sources.

Also I want to use it not only over a map, also over plant plains and images.

I don't know how can I do it with heatmap.js. If anyone knows or some other libraries... Thanks in advance!

Answer 1

To show heatmap based on noise level first you will have to define lower and upper bounds of your data. For example, 0 = 0dB lower bound; 10 = 200dB upper bound.

heatmapInstance.setDataMax(10);    
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);

Then assign weight Values to each of your data point based on the noise level. You can assign 0 values to the sources which are quiet and 7-8 to the noisy ones. It should produce nice heatmap of the noise intensity.

Also I want to use it not only over a map, also over plant plains and images. I don't know how can I do it with heatmap.js

AFAIK, heatmap.js uses pixel position values to plot the data, so it won't be a problem to show heatmap on anything on your screen; be it an image, map or any other canvas.

If you are talking about Google Heatmap apis, I think then it only applies for maps.

Check documentation of Heatmap.js , it is pretty straightforward.