mapbox / mapbox/mapbox.js-plugins

arc.js has a weird rendering artifact over the north pole

Open
#42 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
13
Forks
16
PR merge metrics
No merged PRs in 30d

Description

In the process of investigating this issue (https://github.com/mapbox/mapbox-gl-js/issues/13121), I discovered some weird rendering artifacts when ``arc.GreatCircle`` draws a line across/near the North Pole:

```html

```

```js
let arcs = [];

let start = { x: -122.375, y: 37.61899948120117};
let end = { x: 55.3643989563, y: 25.2527999878};

var generator = new arc.GreatCircle(start, end);
var line = generator.Arc(100, { offset: 20});
arcs.push(line.json());

map.getSource('LineString').setData({
'type': 'FeatureCollection',
'features': arcs
});
```

Screenshot 2024-03-18 at 11 51 49 AM

Contributor guide

Open the contributing guide

Research direction

Start with the provided arc.js loading snippet and the arc.GreatCircle(...).Arc(100, { offset: 20 }) reproduction. Inspect how the generated line is represented by line.json() and rendered through the LineString source, then verify the north-pole case no longer shows the reported artifact.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.