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

[agdhruv]

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

@Scarysize How do you serve vector tiles? I have thousands of contour GeoJSONs (generated using d3-contour) which need to be displayed as and when the user requests them. I don't think sending the entire requested GeoJSON is the best option. Instead, I want to fetch vector tiles as and when the user pans/zooms. How do I convert GeoJSON into zoom/x/y indexed vector tiles? Or is there another better way to do this?

[stevage]

@agdhruv Typically, you use a tool like tippecanoe or GDAL to generate the vector tools, then serve them with something like tessera or tegola.