mapbox / mapbox/mapbox-gl-js

Popup anchor priority array

Open
#12,606 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation

Currently, there are two options to position popup - with a predefined position from enum or automatically.
I need to have the popup on either left or right from the anchor while not reinventing the calculating function.

## Design

I think it could be achieved by adding an ability to pass `anchor` array to popup options as a restriction for positions and then validate available positions by that restriction.

### Implementation

```ts
const isTop = ...;
const isBottom = ...;
const isLeft = ...;
const isRight = ...;

const availablePositions = [];
if (isTop) {
if (isLeft) availablePositions.push('top-left');
if (isRight) availablePositions.push('top-right');
availablePositions.push('top');
}
if (isBottom) {
if (isLeft) availablePositions.push('bottom-left');
if (isRight) availablePositions.push('bottom-right');
availablePositions.push('bottom');
}
if (isLeft) availablePositions.push('left');
if (isRight) availablePositions.push('right');
return this.options.anchor.find((anchor) => availablePositions.includes(anchor)) || 'bottom';
```

### To consider

Some libraries could rely on the fact that `anchor` type is `string | undefined` and this change might break them. It could be a better to option to implement another `anchors` options. Though in this case users will have to wait until libraries developers will start to pass the new option to the core library.

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 by locating the popup options and the existing anchor-position calculation, then trace how the anchor value is typed and how available positions are selected. Review related popup tests if available; done means supporting prioritized anchor choices while preserving existing string behavior and the fallback position.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
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.