Skip to content

Support line-progress for line-offset property #12729

@chuhlomin

Description

@chuhlomin

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:
Screenshot 2023-05-28 at 23 37 11

While they are in bunch, I use line-pattern:
mta_subway_pattern-GA

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:

Screenshot 2023-05-28 at 23 54 22

Design Alternatives

Split line into smaller chunks, assign an offset property to each segment separately.

"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:

Screenshot 2023-05-28 at 23 48 02

Design

Ideally, I will need to set something like this:

"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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions