Sneak peek at heatmaps in Mapbox GL
We’re actively working on one of the most requested features for Mapbox GL — heatmaps! It allows you to visualize and explore massive datasets of points, reflecting the shape and density of data well while also looking beautiful.
Let’s take a glimpse of what it will look like by loading a 40MB GeoJSON of 400,000 points into a Mapbox GL JS map as a heatmap layer:
Note: in mathematical terms, such a heatmap is a bivariate kernel density estimation with zoom-dependent bandwidth and weight (to make it more useful for data exploration), but you’ll be able to make it fixed using the style spec language as well.
Heatmap performance
To render the heatmap efficiently on the GPU, we draw a Gaussian kernel (which looks like a blurred circle) around each point into an offscreen float texture with additive blending, and then colorize it in a separate step — an approach popularized by Florian Boesch in his heatmap.js library.
In his blog post, Florian says that you can render about 10,000 points per frame with this approach. How do we manage to render 40 times more? This is where Mapbox GL clustering and data-driven styling come into play.
Each point in the heatmap has a weight property which controls how much density it contributes to the output, with linear relation. If a point has a weight of 100, for example, it will be visually equivalent to 100 points of 1 weight sitting in exactly the same spot.
Enabling clustering for our data allows us to group points that are close together into one object (for every integer zoom level). And using data-driven styling, we can set the point count of each cluster as the weight, significantly reducing the amount of points we have to render.
If the clustering radius is very small (e.g. 3–5 pixels), the visual difference compared to cluster-less rendering will be almost unnoticeable. When you increase the radius, more points will be grouped, improving heatmap performance, but the shape of the heatmap will change more noticeably as you zoom in. So by varying the clustering radius, you can find a balance between performance and precision. Here’s an example with an exaggerated radius to see the effect:
Check out my previous post on how we cluster millions of points on a map if you missed it. See how our tools can help you to visualize data today and stay tuned for more news about heatmaps for web and mobile. Don’t hesitate to get in touch on Twitter (@mourner) if you have questions, and let us know how you plan to use the upcoming heatmap feature in your app!
P.S. Bonus points if you can guess what type of data is in the video. Hint: it’s a sample from OpenStreetMap.
