Master ticket: Variable label placement enhancements
@asheemmamoowala is already working on this.
Since Aug 22, 2019.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.