This is a minimal example showing the problem and a quick fix.
<!DOCTYPE html>
<html>
<head>
<title>WebGL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
/* this is the quick fix */
/*
.maplibregl-map.leaflet-gl-layer {
z-index: 2;
position: absolute;
}
*/
</style>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!-- Maplibre GL -->
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" integrity="sha256-DZX5P4DwrMTAQcrxknJKB7yvckwa5gw12lN0KL+Qz/Q=" crossorigin="anonymous"></script>
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" integrity="sha256-Ql8WB81mu27BVBng2iDbDN28cueGCEnDWtZ5U/fKIBA=" crossorigin="anonymous" />
<script src="https://unpkg.com/@maplibre/[email protected]/leaflet-maplibre-gl.js" integrity="sha256-eUY3Ak8dlanzgNHMl6V+uOFMR6y6PIgdArTaG/dqn2k=" crossorigin="anonymous"></script>
</head>
<body>
<div id="map"></div>
<script>
var leafletMap = L.map('map').setView([0,0], 2);
var gl1 = L.maplibreGL({
style: {
"version": 8,
"name": "blah",
"sources": {
"points": {
"type": "geojson",
"data": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[10,10],
[20,10],
[20,20],
[10,20]]]
}
}
}
},
"layers": [
{
"id": "points",
"source": "points",
"type": "fill",
"paint": {
"fill-color": "#800",
"fill-opacity": 0.8
}
}
]
}
}).addTo(leafletMap);
var gl2 = L.maplibreGL({
style: {
"version": 8,
"name": "blah",
"sources": {
"points": {
"type": "geojson",
"data": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[30,10],
[40,10],
[40,20],
[30,20]]]
}
}
}
},
"layers": [
{
"id": "points",
"source": "points",
"type": "fill",
"paint": {
"fill-color": "#008",
"fill-opacity": 0.8
}
}
]
}
}).addTo(leafletMap);
var layerCtrl = new L.Control.Layers({}, {gl1, gl2}, {collapsed: false});
layerCtrl.addTo(leafletMap);
</script>
</body>
</html>