mapbox / mapbox/mapbox-gl-js

How to retain text symbols on MultiLineString at lower zoom

Open
#13,363 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

**mapbox-gl-js version**: v2.14.1

### Question

Here is a gif showing the issue

![gif_example](https://github.com/user-attachments/assets/02385b7b-fedb-4d60-be9f-11499020268d)

I have generated contour lines from topographic data which is in the form of GeoJSON MultiLineStrings. I upload and create a vector tile using Tilesets CLI and add the source and layer to a map using Mapbox GL JS. The issue I am having is that the contour line labels (which are read from the MultiLineString attribute "title") are disappearing as I zoom out far before my prescribed minzoom value. The minzoom value is specified in the tileset recipe and when adding the layer to a map. I have found that if I use "symbol-placement: "point" rather than "line" the labels appear at the correct zoom, albeit not distributed multiple times along the line. Appreciate any suggestions!

I have played around with "text-allow-overlap", "symbol-spacing", "text-justify" and others with no luck.

Here is my recipe

`{
"version": 1,
"layers": {
"bathy_cont_layer": {
"source": "mapbox://tileset-source/USRE_PLACEHOLDER/TILESET_PLACEHOLDER",
"minzoom": 5,
"maxzoom": 12,
"features": {
"simplification": {
"distance": 0
}
}
}
}
}`

Here is how the source and layer are added

map.addSource('bathy_cont_source', {
type: 'vector',
url: 'mapbox://USER_PLACEHOLDER.TILESET_PLACEHOLDER'
});

map.addLayer({
'id': 'bathy_cont_line',
'type': 'line',
'source': 'bathy_cont_source',
'source-layer': 'bathy_cont_layer',
'layout': {
'visibility': 'visible',
},
'paint': {
'line-color': '#000000',
'line-width': ['interpolate',['linear'],['zoom'],7,2,10,3],
}
});

Here is how the contour line labels are added

map.addLayer({
'id': 'bathy_cont_text',
'type': 'symbol',
'source': 'bathy_cont_source',
'source-layer': 'bathy_cont_layer',
'minzoom': 5,
'maxzoom': 12,
'layout': {
'text-field': ['get','title'],
'symbol-placement': 'line',
'text-size': ['interpolate',['linear'],['zoom'],5,10,12,14],
'symbol-spacing':['interpolate',['linear'],['zoom'],5,100,12,10],
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
'icon-allow-overlap': true,
'text-allow-overlap': true,
'icon-ignore-placement': true,
'text-ignore-placement': true,
'text-justify': 'auto',
'visibility': 'visible'
},
'paint': {
'text-color': '#FFFFFF',
'text-halo-color': '#000000',
'text-halo-width': 2
}
});

![image](https://github.com/user-attachments/assets/e74fdaba-4869-4476-9da6-e8f04b23b8d4)

Thanks again for any suggestions!

### Links to related documentation

Here are two pages that I referenced in addition to digging through many forums.

https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/
https://docs.mapbox.com/style-spec/reference/layers/#symbol

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 reproducing the reported label disappearance with the supplied Tileset recipe and Mapbox GL JS source and symbol-layer configuration. Review the linked label-placement troubleshooting and symbol-layer documentation, then determine whether the behavior is expected or requires a change. Done means an identified explanation with documented guidance or a clearly scoped fix.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.