mapbox/mapbox-gl-leaflet

The mapbox gl map does not show if a TileLayer is added to the map.

mb12 opened this issue · 1 comments

The 'mapbox GL JS' does not show if a L.TileLayer is added to the map.
Its easy to reproduce. I edited basic.html to illustrate the issue. It does not matter in what order you add layer to the map. The 'mapbox GL JS' map is never shown. It looks like its getting drawn behind the TileLayer. It doesn't matter in which order I added TileLayer to the map. I have included the testcode below.
Is there some way to force TileLayer to be drawn behind the L.mapboxGL layer?
I even tried adding addLayer(osm, true) to add it to the bottom of the stack but it does not work.

    <title>WebGL</title>
    
    
    <style>
      html, body, #map {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<!-- Mapbox GL -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css" rel='stylesheet' />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js"></script>
<script src="../leaflet-mapbox-gl.js"></script> <script> var map = L.map('map').setView([38.912753, -77.032194], 15); L.marker([38.912753, -77.032194]) .bindPopup("Hello Leaflet GL!
Whoa, it works!") .addTo(map) .openPopup(); var osm = new L.TileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:19, attribution: 'Map data © OpenStreetMap contributors' } ); map.addLayer(osm); var gl = L.mapboxGL({ accessToken: 'no-token', // get your own MapTiler token at https://cloud.maptiler.com/ or use MapBox style style: 'https://api.maptiler.com/maps/topo/style.json?key=gbetYLSD5vR8MdtZ88AQ' }).addTo(map); </script>

It can be worked around by changing the z index property of the div that contains the gl layer.
I could not find a better way to resolve it. It looks like leaflet has added support for custom panes, but that also requires fiddling with z index.