Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot add multiple instances of L.MaplibreGL to a leaflet map #19

Closed
cwassert opened this issue Dec 14, 2021 · 3 comments
Closed

Cannot add multiple instances of L.MaplibreGL to a leaflet map #19

cwassert opened this issue Dec 14, 2021 · 3 comments

Comments

@cwassert
Copy link

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/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <!-- Maplibre GL -->
    <script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js" integrity="sha256-DZX5P4DwrMTAQcrxknJKB7yvckwa5gw12lN0KL+Qz/Q=" crossorigin="anonymous"></script>
    <link href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css" rel="stylesheet" integrity="sha256-Ql8WB81mu27BVBng2iDbDN28cueGCEnDWtZ5U/fKIBA=" crossorigin="anonymous" />
    <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.15/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>

The root of the problem is that the .leaflet-gl-layer container has position: relative; which causes the second layer to be placed just outside of the viewport. It also seems that the zIndex option is not working, which causes problems when combining maplibre-gl layer with other leaflet layers. But I would consider this a separate issue.
@wipfli
Copy link
Contributor

wipfli commented Dec 15, 2021

Thanks for reporting. What is the fix?

@cwassert
Copy link
Author

It's in the <style> section above.

@webberig
Copy link
Contributor

This problem has also been reported in the upstream mapbox-gl-leaflet repo:
mapbox/mapbox-gl-leaflet#111

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 from the other ticket:
https://jsfiddle.net/3hcgp6at/2/

My addition is this snippet (which I think would also be the solution for @cwassert ):

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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@webberig @cwassert @wipfli