mapbox / mapbox/mapbox-gl-js

dynamic popup anchor with a non bottom preference

Open
#6,965 6 comments 13 reactions 0 assignees Claimed by @anthony-hull View on GitHub
breaking change :warning: feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

The [Popup `anchor` option](https://www.mapbox.com/mapbox-gl-js/api/#popup) is documented as

> A string indicating the part of the Popup that should be positioned closest to the coordinate set via Popup#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset the anchor will be dynamically set to ensure the popup falls within the map container **with a preference for 'bottom' .**

I'd like to retain the dynamic feature to ensure the popup doesn't fall off the map, while setting a preference other than `bottom`.

I think the best solution is to change the definition of the `anchor` option to be the preferred anchor and introduce a new `fixedAnchor` option to tell if you want it to avoid falling of the map or not.

This is a backwards incompatible change, but I think any change made in a backwards compatible way would introduce to much complexity to the API (for example leaving anchor as is and adding a new `anchorPreference` option).

I don't mind trying to do a PR, but what do people think about this breaking change?

Contributor guide

Open the contributing guide

Research direction

Review the Popup `anchor` option documentation and `Popup#setLngLat` behavior, then inspect linked pull request #11055. The work is complete when dynamic positioning supports a preference other than `bottom` without allowing the popup to fall outside the map container, with the resulting API behavior documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
api, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.