mapbox / mapbox/mapbox-maps-android
Inconsistent lineGradient colors at different zoom levels
Nobody has claimed this yet.
- Dominant language
- Kotlin
- Stars
- 578
- Forks
- 161
- PR merge metrics
- No merged PRs in 30d
Description
## Sample code
Here's a small sample app that highlights the problem. Just add the tokens (see README.md).
https://github.com/alexandrupele/mapbox-gradient
## Environment
- Android OS version: 15
- Devices affected: All (Tested on various Pixels and emulators)
- Maps SDK Version: 11.11.0
## Observed behavior and steps to reproduce
**Preconditions**
- long line layer - this example uses 1754 location points
- linear line gradient with 1754 stops
- for each gradient stop, the progress is proportional to the physical (turf) distance between location points (normalized values between 0.0 and 1.0); the RGB color is representative of speed (i.e red is fast, etc)
**Example steps**

🚨 **Issue**: The line colors are are shifting between different zoom levels. It looks like there are specific zoom thresholds at which the colors abruptly "jump" - change is not linear, but sudden.
See videos here:
1. https://github.com/user-attachments/assets/10630826-da37-4aa4-830c-306ba2c2f6ff
2. https://github.com/user-attachments/assets/400dae81-550e-4342-baa0-058923bb4edc
Screenshots at different zoom levels (take a look at videos too, it is easier to notice):


## Expected behavior
The colors should be consistent at all zoom levels.
## Notes / preliminary analysis
⚠️ The use case here is to visually represent changes in speed using linear gradient. Due to this issue, speed changes cannot be accurately represented.
## Additional links and references
**Sample code**
Full sample app here: https://github.com/alexandrupele/mapbox-gradient
```
fun createStyle(
points: List,
gradientStops: List,
): StyleContract.StyleExtension {
return style(style = Style.SATELLITE_STREETS) {
val sourceId = "session"
val lineLayerId = "line"
val lineString = LineString.fromLngLats(points)
val feature = Feature.fromGeometry(lineString)
+geoJsonSource(sourceId) {
feature(feature)
lineMetrics(true)
}
+lineLayer(layerId = lineLayerId, sourceId = sourceId) {
lineCap(LineCap.ROUND)
lineJoin(LineJoin.ROUND)
lineWidth(3.0)
lineGradient(
interpolate {
linear()
lineProgress()
gradientStops
.forEach { (progress, rgb) ->
val (r, g, b) = rgb
stop(progress) {
rgb {
literal(r)
literal(g)
literal(b)
}
}
}
}
)
}
}
}
```
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the sample app linked in the issue and its createStyle function, then review the README.md instructions and the lineGradient/lineMetrics setup. Reproduce the abrupt color changes across zoom levels using the provided long line and gradient stops. Done means the line colors remain consistent while zooming, with verification against the sample videos and screenshots.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, kotlin
- Domain
- computer-graphics, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100