I am loading a layer of chairlifts. It loads correctly and this is the definition:
map.addSource('aa_lifts', {
type: 'vector',
url: 'mapbox://'+ aa_lifts_source,
});
map.addLayer({
'id': 'aa_lifts',
'type': 'line', // background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade, sky.
'source': 'aa_lifts', // from above
'source-layer': aa_lifts_source_layer,
'paint': {
'line-color': '#000',
'line-opacity': 1,
'line-width': 5,
'line-dasharray': [0, 2], // length of line and then length of gap.
},
'layout': {
'line-join': 'round',
'line-cap': 'round' //"butt", "round", "square" - default butt.
},
});
I want to finally add some icons on the chairlift lines showing if it is a single person lift, double, triple and son on. Before I do that I thought I would just get the symbols working but I ran into a strange problem. If I zoom in from 9.0 to 13.99, the arrow shows, however, from 14 and great it disappears. I have another layer of trails with names on it. It also disappears from 14 and greater. I cannot see what I am doing wrong so any pointer or debugging technique highly appreciated.
/** addLayer aa_lift **/
map.addLayer({
'id': 'aa_lifts_symbol',
'type': 'symbol', // background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade, sky.
'source': 'aa_lifts', // from above
'source-layer': aa_lifts_source_layer,
"layout": {
"text-field": "►",
"text-size": 18,
"symbol-placement": "line-center",
"symbol-spacing": 10,
"text-rotation-alignment": "map",
"text-keep-upright": false
},
'paint': {
"text-color": [
"get",
"color"
]
},
});
You need to set a maxZoom for the source - forget if it's maxzoom or maxZoom. Once you set that to 14 it will just use that zoom level for the data and show it on subsequent zoom levels. This differs from setting the max zoom on the layer - this will hide the layer after that zoom.