Mapbox-gl-js: Generate contour lines from raster-dem source

[mollymerp]

Cutting this ticket to start a conversation about whether we want to extend the raster-dem source to support contour line generation. I have not started exploring the feasibility of this from a performance standpoint.

I'm not sure how many users would be interested in having configurable contour lines, so if this is something you would use please 👍 this ticket 🙃 .

There is probably a way to do this that I haven't thought of, but the most straightforward method I can think of would be doing a precalculation/Framebuffer pass similar to the hillshade layer that calculates the contours and outputs a new texture with the contour lines encoded which is what is rendered to the map. Making sure the contours line up between tiles would probably be tricky...

cc @mapbox/cartography-cats

[stevage]

Generating contours in the browser? Wow. I had never even considered that possibility. Hmm..

I think this person might like it: https://stackoverflow.com/questions/47434279/how-to-create-contour-heat-map-mapbox

[averas]

I have quite some experience in this area. I'm generating interpolated DEMs and subsequent contour lines offline today, but store them as vector data and serve them to Mapbox GL JS via vector tiles. You can get a feeling for this at https://fishlr.com/29381881-22dd-46da-b3ad-2d561873117a and at https://www.youtube.com/watch?v=Sk3jinu_oD8

I also generate offline maps for download using the node bindings:

I even generate and serve my own RGB based DEMs (which I came up with before Mapbox started using the concept .. :-)) which allows me do do stuff like https://www.youtube.com/watch?v=GYfkZNuyCJE (the plotter is fake, and based on DEM data from RGB-raster tiles).

[Scarysize]

All for it! We experimented with client-side generation using the canvas 2D API and the marching squares algorithm for conturing. Then extracting the contours and rendering them as GeoJSON:

Though we couldn't really get on par with line smoothing and other improvements you can easily do offline. Now we just serve vector tiles:

[mollymerp]

thanks for sharing your past work on this @stevage @averas!

[bcbeta]

This guy seems to have figured it out?
https://www.axismaps.com/blog/2018/04/contours-in-browser/

[mb12]

@averas Is this data publicly available for Sweden? For US, we have very good public data for coastal waterways and Great Lakes but not a whole lot for inland lakes.

[marcofugaro]

Here is another approach which uses d3-contour:
https://blog.mapbox.com/visualizing-radar-data-with-vector-tiles-117bc5ee9a5a