Map with (raster) data overlays

Dash Python
1

I am currently looking into implementing a map component in Dash that supports (raster) data overlays, i.e. the user can provide a grid of (lat, lon, value) points which are then visualized on the map as colors (not just dots). I am using the Leaflet map component as the base, but i am having doubts on how to achieve the coloring in the best way. So far, i have been looking into

  • Generate the raster via matplotlibs pcolor function, convert to a base64 encoded string and inject it as an overlay
    (+) the implementation is simple (most of the heavy lifting is done in python) and performance is surprisingly good
    (-) the image overlay is fixed, i.e. it won’t react on pan/zoom (unless some javascript magic is added)
    (-) i will have to deal with the map projections separately, as they are not covered by matplotlib (i skipped this so far)
    (-) i will have to add a colorbar manually (in javascript i guess)

  • Generate the raster via cartopys contourf function, convert to a base64 encoded string and inject it as an overlay
    (+) cartopy takes care of coordinate projection stuff (at least it should)
    (-) in my initial tests, i had to tweak the figure size ratio to get a decent match between the coastlines of cartopy and the Leaflet map (maybe someone knows how to fix this?) Furthermore, performance seems to be much worse as compared the pcolor solution
    (-) the image overlay is fixed, i.e. it won’t reach on pan/zoom unless some javascript magic is added
    (-) i will have to add a colorbar manually (in javascript i guess)

  • Port the react-leaflet-heatmap-layer component
    (+) rendering looks good, performance seems good (i used 10k points), since points are drawn on-map no manual coordinate transformation is needed
    (-) the color scale adopts continuously, and there seems to be no way to disable it
    (-) there is no colorbar, so i would have to add it manually (in javascript i guess)

I was also thinking of whether if would be a good idea to draw a plotly graph on top of the Leaflet map. What solution(s) do you think are the best? Do you have any other suggestions? :slight_smile:

2 Likes
2

Hi Emil,
I would like to know if you were able to solve this problem? I have a similar problem.
I would like to click on a NDVI (vegetation index) raster and have the pixel value displayed (instead of the coordinates for example).

Regards

3

Yes, I developed a few different solutions. Since my actual data were huge, I ended up with tile based solution. Here is a small example,