Adding multiple style layers

[superchad]

Hello,

We would like to be able to add two style layers to the map. An imagery style that sits below our leaflet data, and a labels style that sits on top of the imagery and data. We have not succeeded at getting this to work. Here is a simple example of what we tried:

https://jsfiddle.net/4j9ghubc/

This only shows the labels. We would like to see the imagery behind the transparent parts of the labels.

Please let us know if you need more example or clarification.

Thanks!

[webberig]

Leaflet allows you to control this by using "panes". Depending on the situation you can create your own "custom pane" and define its z-index. Check out this article: https://leafletjs.com/examples/map-panes/

I created an updated (working) version of the jsfiddle: https://jsfiddle.net/3hcgp6at/2/

map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
map.getPane('labels').style.pointerEvents = 'none';

//add the labels to the labels pane
var gl_labels = new L.MapboxGL({
    accessToken: 'pk.eyJ1Ijoic2VtY29nIiwiYSI6ImlvNEFUcmMifQ.VmDLZZG7l6syscFzkBs5eg',
    style: 'mapbox://styles/semcog/cje93r8vr0flv2sqsyzi99oib',
    pane: 'labels'
}).addTo(map);