[Feature Request] Display gradient/slope on Track/Route.

[nevvkid]

Something I would love to see in the future is the option to show the gradient / slope directly on the Track/Route.

For Leaflet there is the following plugin to realize that:

• https://iosphere.github.io/Leaflet.hotline/demo/
• https://github.com/iosphere/Leaflet.hotline

As to my understanding you are using Mapbox for the whole rendering of Maps?
The only reference i found with a quick search was that: https://docs.mapbox.com/mapbox-gl-js/example/line-gradient/

Seeing the slope in context rather than in the elevation helps me understand the route better and sometimes even helps me choosing a longer > less steep path.
Especially if i am on my way with a very heavy setup of my bike.

Here is an example how this looks in bikerouter.de

Another example - cyclers.app

Perhaps the feature to render certain route qualities could be used for different features in the future?

• Altitute
• Surface (Quality or Dirt/Paved)

Another tool I know which I would never want to use over gpx.studio is LAND...
https://support.twonav.com/hc/en-us/articles/115001078511-Customize-the-appearance-of-the-tracks

[vcoppe]

This is something I also had in mind, and thought would be easy to add thanks to the resource that you linked.

The only reference i found with a quick search was that: https://docs.mapbox.com/mapbox-gl-js/example/line-gradient/

Unfortunately, there is not straightforward way to generalize this to specify a color stop for each GPS point, based on a data field (see mapbox/mapbox-gl-js#8977). Maybe the most promising solution would be mapbox/mapbox-gl-js#8977 (comment), because other ones involve splitting the lines in many segments to create a sequence of many line gradients.

[nevvkid]

I am wondering what is used for Strava's "PAVED", "DIRT" and "NOT SPECIFIED" Map Styles. As that was another design feature I was hoping to see in gpx.studio in the future.

But not sure if there is one strategy for all these different styling needs.

Reading some github issues in the mapbox gl js repo it seems like some things aren't easy todo.
For the design used for "NOT SPECIFIED" this might be an approach: https://codepen.io/joedazza/pen/QWwKRKP
Does what you found at mapbox/mapbox-gl-js#8977 (comment) allow to get consistent results or is that just impossible without recalculating every file so you have an even amount of points spacing it out?