2

I'm relatively new to Mapbox and its GL JS Library, but so far have been really impressed at its capabilities.

I'm currently working with a dataset of approximately 100,000 points and am trying to devise a way of quickly generating/visualising a continuous interpolated surface within the convex hull of the dataset I have (essentially trying to generate something that's as fast/responsive as the heatmap function, but looking to interpolate from the point data values rather than spatial density).

The documentation for the heatmap functionality discusses this exact scenario:

Among maps you'll find on the web, there are two common categories of heatmaps: those that encourage the user to explore dense point data, and those that interpolate discrete values over a continuous surface, creating a smooth gradient between those points. The latter is less common and most often used in scientific publications or when a phenomenon is distributed over an area in a predictable way. For example, your town may only have a few weather stations, but your favorite weather app displays a smooth gradient of temperatures across the entire area of your town. For your local weather service, it is reasonable to assume that, if two adjacent stations report different temperatures, the temperature between them will transition gradually from one to the next.

But then proceeds to explain this is less common and there's no documentation/example provided for this type of application.

At this stage I've tried converting the points to voronoi cell polygons and colour coding by data value (a nearest neighbour approach to visualising), but the render seems to struggle with 100,000 points at lower zoom levels (0 through 8). Does anyone know if it's possible to create a fast-rendering surface interpolation from point values? Any examples would be fantastic.

Improve this question
3
  • 100k points in a mesh doesn't sound like it should be an issue if you generate the mesh once (instead of every frame). Here's 3 planes with 100k points each. Note: I'm not suggesting you use three.js I'm just pointing out that a single mesh of 100k points of voronoi cells with a color at each vertex doesn't sound that big to me. Commented Mar 26, 2020 at 4:29
  • WebGL2 gives you access to texture in the vertex shader meaning you can use a pixel value in a texture to offset the y component of each vertex A two pass render 1: For the map If its basic interpolation you can use a Gaussian blur or box blur to generate the height map. 2: render the mesh using the interpolated texture from first pass to render the final mesh. Should work well (fully animated interpolation and mesh rendering) if you dont go crazzy on the map resolution. And no need to update the mesh each frame as you will only need one static mesh. Commented Mar 26, 2020 at 16:29
  • @Jack I am totally with you. Mapbox explain that could be a useful scenario for weather stations, but then there is no explanation... Commented Jun 7, 2020 at 14:38

2 Answers 2

Reset to default
0

The Mapbox Delaunator library is a very fast JavaScript library for Delaunay triangulation of 2D points. d3-delaunay and d3-geo-voronoi are both based off of this library. You could use these libraries and then display the results on your map via a custom style layer.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Looks like what you are trying to do is some sort of Spatial Interpolation.

Here is a summary of popular methods typically used for this purpose.

https://michaelminn.net/tutorials/r-spatial-interpolation/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.