Tools: Mapbox Demo: Bike route visualization color gradient and data scrubbing UX

The Challenge ## The Solution ## Key Implementation Details ## Performance Benefits ## Cross-Platform Compatibility A developer on Reddit recently asked for help building a ride playback feature with speed visualization. They had detailed GPS and speed data from a bike ride and wanted to show speed variations along the route. The original question centered on two main requirements: Here's the working implementation on codepen. The line visualizes the variations in speed along the bike trip. Move your mouse over the line to "scrub" and see data for a specific spot on the line. Speed Gradient Instead of creating separate line segments for each speed zone, we use a single GeoJSON LineString with lineMetrics: true and build a dynamic gradient using the line-gradient paint property: Each speed data point gets mapped to a position along the line (0 to 1) and assigned a color based on its speed value. Check out the official line-gradient example for more details on this technique. A Note on Accuracy This demo simplifies the gradient calculation by evenly distributing speed data points along the line based on timestamps. In a production app, you'd want to map each speed measurement to its actual GPS coordinate along the route for precise gradient placement. This ensures the gradient accurately reflects where speed changes occurred geographically, not just temporally. Interactive Scrubbing The scrubber uses geometry calculations to find the nearest point on the route as you move your mouse, then interpolates between speed data points to show accurate values at that location. A pink circle marker follows your cursor along the route, displaying the time and speed in a floating tooltip. This approach renders a single line layer with a gradient instead of dozens of individual geometries, resulting in: While this example uses Mapbox GL JS for the web, the same line-gradient technique works on iOS and Android using the native Maps SDKs. The gradient expression syntax is consistent across all platforms. Check out the full code in the CodePen above to see how the speed interpolation and distance calculations work. Happy mapping! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: 'line-gradient': [ 'interpolate', ['linear'], ['line-progress'], ...gradientStops // Dynamically generated from speed data ] Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 'line-gradient': [ 'interpolate', ['linear'], ['line-progress'], ...gradientStops // Dynamically generated from speed data ] CODE_BLOCK: 'line-gradient': [ 'interpolate', ['linear'], ['line-progress'], ...gradientStops // Dynamically generated from speed data ] - Visualize speed variations along the route with color-coded gradients (slow = green, medium = yellow, fast = red) - Interactive scrubbing that shows detailed speed and time data when the user hovers over any point on the route - Faster initial render - Smooth interactions - Lower memory usage - Simpler state management