Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to retain text symbols on MultiLineString at lower zoom #13363

Open
tshropshire opened this issue Dec 19, 2024 · 0 comments
Open

How to retain text symbols on MultiLineString at lower zoom #13363

tshropshire opened this issue Dec 19, 2024 · 0 comments

Comments

@tshropshire
Copy link

tshropshire commented Dec 19, 2024

mapbox-gl-js version: v2.14.1

Question

Here is a gif showing the issue

gif_example

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant