mapbox / mapbox/mapbox-gl-js

Adding direction arrow to a line with line-offset

Open
#10,674 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

I need to add an arrow to a Line that has an offset (line-offset=2) to display the direction of it.

However, it seems that icon does not support offsetting!

![Screenshot from 2021-05-11 16-18-44](https://user-images.githubusercontent.com/1327949/117879292-c8381080-b274-11eb-8cf1-efc5286ce08b.png)

https://jsfiddle.net/9eo4py7x/

PS: I took the jsfiddle from [this](https://stackoverflow.com/questions/46102553/showing-direction-arrow-on-line-in-mapboxgl) topic and added line-offset property to the line->paint.

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

Start with the linked JSFiddle and compare the line's line-offset paint property with the direction-arrow icon behavior. Trace the relevant line and symbol rendering entry points in mapbox-gl-js, then verify that an arrow can follow the offset line; the issue is done when the direction indicator renders on the offset geometry.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.