Support `line-progress` for `line-offset` property
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
## Motivation
I'm trying to draw a subway map: lines are getting together in bunches and branch off.
For example, here C-line (blue) and G-line (ligh-green) branch off:
While they are in bunch, I use `line-pattern`:
But then, I need to make a smooth transition from a pattern to 2 separate lines, which then would be centered normally.
More complicated example where one bunch branches of into 2 other bunches:
## Design Alternatives
Split line into smaller chunks, assign an `offset` property to each segment separately.
```json
"line-offset": [
"case",
["has", "offset"],
["to-number", ["get", "offset"]],
0
]
```
There is a visible staircase effect when number of segments is low, especially on a small zoom:
## Design
Ideally, I will need to set something like this:
```json
"line_offset": [
"interpolate",
["linear"],
["line-progress"],
0, 2.5, // where 2.5 is some magic number for when line is in a bunch
1, 0
]
```
Unfortunately, `line-progress` can only be used in the `line-gradient` property.
https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#line-progress
I wonder how feasible it is to implement it for `line-offset` as well.
Or, perhaps, there are better ways to solve my problem.
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 existing `line-gradient` support and the style-spec expression documentation linked in the issue, then determine how `line-progress` is evaluated for `line-offset`. Done means a style can use the proposed expression with `line-offset` and produce a smooth transition along the line without requiring segmented features.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100