mapbox-gl-js

mapbox-gl-js copied to clipboard

Hi,

I can't find how to do how to do an heatmap with lines similar to

I have a Geojson source with a lot of routes and I would like to style with a scale of color where high traffic road are "hot" and low traffic are "cold"

Thank you very much

There's no way to make a "line heatmap" the same way the point heatmap works at the moment. What you could try to get a similar look is overlaying all the lines on top of each other with varying opacities.

Thank you for your answer. Yes, I already did that but I'm not very happy with the result. I also tried to applied a "line-gradient" and "line-progress" interpolation but it does not look great

It must be a way !

Strava has an heatmap with popular routes here. Like they explained in a blog post, they use MapboxGL

Hi, @cedricdelpoux,

this could only be done if mapbox-gl supported blending modes, similarly to what you'd expect in Adobe Photoshop (or even CSS as well) – sadly, it does not.

As an alternative, you might want to preprocess your data on the server side. If you're familiar with PostGIS, you could try something along the lines of this, this or this stackexchange post.

The linked solutions might be different, but they all share a similar goal: they split your lines so that for each newly split segment, you can compute the number of original lines that overlap with it.

Once you've obtained this metric for all your segments, you may use mapbox-gl to visualize it in a heatmap-like way (the higher the number of overlaps, the brighter the color).

Yes it's too bad mapbox-gl does not support blending modes.

I discovered that Strava fetch an image of the heatmap.

So, I have confirmation that they use preprocess.

Do you know some node libraries (not websites) to achieve this?

I’m not sure I’m the most appropriate person to help you with this but you might want to look at the mapnik project with which you can do compositing on the server side and send pre-composed tiles to the client.

A brief google search lead me to this part of their node-related documentation: https://mapnik.org/documentation/node-mapnik/3.5/#mapnik.compositeOp

Ok thank you I will take a look

I would also love to be able to reproduce something similar to the Strava personal heatmaps inside mapbox. I asked Strava for their shape file output but they refused. I think mapbox could easily monetize this - allow people to export their track data gpx files out of strava or other tracking apps and generate real heatmaps (not just overlays) natively without programming. Please consider!

I think deck.gl has a layer that does the additive blending effect that you want: https://deck.gl/examples/line-layer/

That looks very promising, thanks Derek I’ll give it a whirl! On 6 Feb 2021, 18:22 +0000, Derek Ellis [email protected], wrote:

I think deck.gl has a layer that does the additive blending effect that you want: https://deck.gl/examples/line-layer/ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

This issue has been quiet for a while, but just wanted to leave my comment here: from a map design perspective this feature would (still) be really awesome to have.

Found also another open issue on the topic: https://github.com/mapbox/mapbox-gl-js/issues/6818

Anyone had any luck with this yet?

I am interested in this as well. There must be a way.

I started with the line layer from Deck.gl then switched to their heatmap layer but it doesn't provide the effect I'm looking for. I'll be working on automating an aggregation process to produce new lines, based on the initial data, which would act like a heatmap (gathering close lines together basically).

But, and I guess this will be common to all of us, that will be more work, take more time, and I am not even guaranteed to achieve the expected result.

If anyone found something or has another suggestion, I am all ears.

Blending modes would be really helpful!