mapbox / mapbox/mapbox-gl-js

Master ticket: Variable label placement enhancements

Open
#8,599 2 comments 3 reactions 1 assignee View on GitHub

@asheemmamoowala is already working on this.

Since Aug 22, 2019.

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

Description

Earlier this year, we released a feature called **variable label placement** which enables map designers to try multiple (up to 9) placement options for labels around their anchor. This was added in https://github.com/mapbox/mapbox-gl-js/pull/7596.

To enable variable label placement, set [`text-variable-anchor`](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-text-variable-anchor), [`text-radial-offset`](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-text-radial-offset) and [`text-justify`](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-text-justify) on a symbol layer. For an excellent write-up of this feature and its benefits, see @nickidlugash's ticket https://github.com/mapbox/mapbox-gl-js/issues/5038.

Since the initial launch of this feature, we've collected valuable insight into how we can improve these properties and their interaction with other style specification properties. We're doing a push to get some of these improvements landed in the next release, `queso`.

I'm cutting a ticket to help us stay organized and to collect future tickets that are open about this feature.

| Enhancement | Ticket | Owner | Timeline | Status |
| -------------- | ------ | ------ | --------- | ------ |
| Anchor positions should be cleared by `setStyle` | https://github.com/mapbox/mapbox-gl-js/issues/8397 | @asheemmamoowala | `release-picklejuice` | ✅ closed by https://github.com/mapbox/mapbox-gl-js/pull/8473 and https://github.com/mapbox/mapbox-gl-native/pull/15129 |
| Account for icon size/bounding boxes | https://github.com/mapbox/mapbox-gl-js/issues/8598; https://github.com/mapbox/mapbox-gl-native/issues/15365 | @pozdnyakov | `release-ristretto` | ✅ closed by https://github.com/mapbox/mapbox-gl-js/pull/8642 and https://github.com/mapbox/mapbox-gl-native/pull/15542 |
| Account for character descenders | https://github.com/mapbox/mapbox-gl-js/issues/8560; https://github.com/mapbox/mapbox-gl-native/issues/15366 | @pozdnyakov / @alexshalamov | none | Depends on #191 |
| Use with `icon-text-fit` | https://github.com/mapbox/mapbox-gl-js/issues/8583; https://github.com/mapbox/mapbox-gl-native/issues/15346 | @alexshalamov / @ansis | `release-queso` | ✅ closed by https://github.com/mapbox/mapbox-gl-native/pull/15367; JS PR forthcoming |
| Use with `icon-`/`text-allow-overlap` | https://github.com/mapbox/mapbox-gl-js/issues/8527; https://github.com/mapbox/mapbox-gl-native/issues/15357 | @pozdnyakov / @ansis | `release-queso` | ✅ closed by https://github.com/mapbox/mapbox-gl-js/pull/8620 and https://github.com/mapbox/mapbox-gl-native/pull/15354 |
| Deduplicate anchor positions | https://github.com/mapbox/mapbox-gl-js/issues/8445 | | `release-ristretto` (lower priority) | needs assignment |
| Reduce jumpiness | https://github.com/mapbox/mapbox-gl-js/issues/8219 | | none | |

Feel free to update this table directly as work moves or assignments change.

cc @mapbox/gl-js @mapbox/gl-native @mapbox/map-design-team @mapbox/maps-android @mapbox/maps-ios @philogb

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.