Mapbox: is it possible to update layer hierarchy?

Question

I have a Mapbox with my own layers, says labels of towns and landmarks...

say I want to highlight one specific landmark and I want to move its z-index higher because otherwise, it would overlap with some other elements...

Can I use map.setLayoutProperty or is there anything else that I can do?

score 33 · Accepted Answer · answered Dec 12 '18 at 13:30

33

If I got your question correctly, you're looking for a way to change z-index of some layer above another layer. (not some feature above another feature). Here it the way:

https://www.mapbox.com/mapbox-gl-js/api/#map#movelayer

map.moveLayer(yourLandmarkLayerId, someAnotheLayerId);

If you would like just to move landmark layer to top of layer hierarchy:

map.moveLayer(yourLandmarkLayerId);

P.S. For moving layer, you should know it's ID:

var layers = map.getStyle().layers;
var layerId = layers[i].id;

answered Dec 12 '18 at 13:30

Yurii Bratchuk

920
9
12

1

Note, that `moveLayer` doesn't change order of event handlers execution. So you can't change layers this way to make `stopPropagation()` or `preventDefault()` work. It's not very intuitive, see the issue: https://github.com/mapbox/mapbox-gl-js/issues/5783 – RomanistHere Jun 20 '22 at 19:33

score 0 · Answer 2 · answered Nov 30 '22 at 16:50

For someone looking to do it on android, the simplest way to do it is to remove the layer and add it again above or below another layer. I do not find a better way:

    /**
     * Remove the target layer and add it again above the specific layer
     */
    fun moveLayerAvobe(layer: Layer, breakpointLayerID: String, style: Style) {
        // Remove Layer
        style.removeLayer(layer)

        // Add it again
        style.addLayerAbove(layer, breakpointLayerID)
    }

Mapbox: is it possible to update layer hierarchy?

2 Answers2