mapbox / mapbox/mapbox-gl-js

Symbol layer offset should be relative to geometry when placement is line

Open
#7,702 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation
My specific use case: Drawing arrows on line.

## Problem with current functionality
My current implementation is two separate layers. One of `type: 'line'` the other (with the arrows) of `type: 'symbol'` with `symbol-placement: 'line'`

Giving the line layer an offset helps visualize when the track is going both ways. However it seems to be impossible to align the symbol layer with the line layer in this case. The line layer's 'offset' property is a single number relative to the line direction, whereas the symbol layers offset requires an absolute offset (with two values) relative to the map. This also applies `symbol-placement: 'line'`.
See screenshot of problem below.

## Suggested solution
Change the offset behaviour of symbol layers to match line layers when `symbol-placement: 'line'`

![screenshot 2018-12-13 at 17 21 24](https://user-images.githubusercontent.com/3245228/49953261-03945080-fefe-11e8-908e-a249e860b671.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

No file or test is named in the issue. Start by tracing how symbol layers with symbol-placement: 'line' apply offset, then compare that behavior with line-layer offset handling. Done means arrow symbols align with an offset line in both directions without changing the intended map-relative behavior elsewhere.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.