visgl
TextLayer Label Collision - Text Allow Overlap Option
Target Use case
It would be great to have an option to selectively hide/show text labels when they overlap/collide. Currently, TextLayer becomes unusable when displaying a large number of text labels (especially as you zoom out) as the labels overlap one another to the point that they cannot be read.
Proposed feature
Ideally, textAllowOverlap/getSortKey props could be added to the TextLayer to mirror the functionality provided by the Mapbox GL SymbolLayer.
The Mapbox GL SymbolLayer has a text-allow-overlap (and icon-allow-overlap) feature that supports enabling/disabling this behavior. The SymbolLayer also accepts a symbol-sort-key attribute to define priority such that labels with a higher sort key will be hidden first when an overlap occurs.
https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/#label-collision https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-text-allow-overlap https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-symbol-sort-key
To Do List
- [ ] Add label and assign to milestone
- [ ] Coding
- [ ] Doc update
- [ ] What’s new update
- [ ] Test
I managed to implement a similar feature using kdbush (MapView) and geokdbush (GlobeView). All symbols are considered as points, and there is a configurable radius to filter overlapping symbols within the radius. I'll take a look if it's possible to generalize the code and contribute it.
The difference from Mapbox is that Mapbox supports long labels. https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/
@zakjan would you mind sharing that code? I'm trying to implement this on one of my projects but if I can get some ideas from that code it will be helpful.
The TextLayer demo on the website implements a similar feature: https://github.com/visgl/deck.gl/tree/master/examples/website/tagmap
