mapbox / mapbox/mapbox-gl-js

Different line-offset values for start and end of line segments

Open
#10,374 3 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs discussion :speech_balloon:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

The main purpose of this feature would be to enable smooth transitions between line segments with different `line-offset` values. By using a separate line segment that could have different offset values for the start and end of the line, the offset of the separate line segment could be interpolated from the start and end values along the length of the line to join the line segments that have different `line-offset` values.

This would be very useful for mapping transit networks where different routes/lines overlap and diverge throughout the network.

## Design

A `line-offset-start` and `line-offset-end` paint property could be provided. If used, it could just override the value being supplied through `line-offset` (if any).

### Mock-Up

From a developer perspective, it would ideally look just like a normal `line-offset`
```js
const paint = {
"line-offset-start": 5,
"line-offset-end": 0
}
```

Using the above example^, to an end user it would look like a smooth transition between two lines with different offsets. compared to now where there would have to be an abrupt jump.

### Implementation

Polygons may be a special case since `line-offsets` behave as inset/outsets.

How the offset is interpolated may affect how this appears to end users.
For example:
![image](https://user-images.githubusercontent.com/6743693/107383085-a33dd100-6abe-11eb-96a4-25ea3616bf2e.png)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue does not name a source file, test, or entry point. Start by locating the existing line-offset paint-property implementation and determine how start/end interpolation and polygon inset/outset behavior should work; done means a specified, tested design for smooth transitions between differing offsets.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.