Using multiple layers with mapbox-gl-leaflet

Question

I have a Leaflet based application, and have recently started using mapbox-gl-leaflet to access Mapbox GL's vector based layers in legacy Leaflet code.

Today I've come across an issue that I can't resolve. I have a base map layer and an optional overlay (hiking routes). In Mapbox studio, the hiking route layer has no background - it's completely transparent.

I was expecting to be able to add the hiking route layer on top of the base map layer, and have both be visible at the same time. However, that's not what happens. Only one layer is visible at a time.

Here's a minimal example of the issue I'm seeing: https://osm.trailrouter.com/stackoverflow.html

Run map.removeLayer(layers.default); in the dev tool's console to remove the base layer, and then you'll see my hiking routes underneath.

I'd like to have the blue hiking routes overlaid on top of the map.

Any ideas?

Answer 1

I've figured it out for you. Leaflet supports multiple "panes" (groups of layers), and what you want is the basemap in the tilePane and the hiking route in the overlayPane.

The current version of mapbox-gl-leaflet puts all layers into tilePane. Previously they fixed this issue, but then they unfixed it.

First, replace your current version of leaflet-mapbox-gl.js with this version.

Then, update your code to pass in the panes:

var layers = {},
   attribution = '&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   mapboxkey = 'pk.eyJ1Ijoic2FtY3Jhd2ZvcmQiLCJhIjoiY2oweWUxZ3VhMDAxMTJxa2V1ZHV5dHNvZyJ9.k6t1XvJ0ayzILpxUcb4Khg';
layers.default = L.mapboxGL({
    accessToken: mapboxkey,
    style: 'mapbox://styles/samcrawford/ckajn11fl21ng1ir187w6f0yi',
    attribution: attribution,
    pane: 'tilePane'
});
layers.fkt = L.mapboxGL({
    accessToken: mapboxkey,
    style: 'mapbox://styles/samcrawford/ckc29yjv64ndy1iocamivme4q',
    attribution: attribution,
    pane: 'overlayPane'
});

Voila.