Bound popup removed when layer changed in control

Question

I have a map with a layer control that has overlays specified in the baselayer parameter:

var overlays = {
    'Layer 1': mylayer1,
    'Layer 2': mylayer2
};

L.control.layers( overlays, null, { collapsed: false } ).addTo( map );

I specify my layers as follows:

var mylayer1 = L.esri.featureLayer({
    url: 'https://.../MapServer/5'
}).on( 'load', function ( e ) {
    ...
}).on( 'loading', function ( e ) {
    ...
}).bindPopup( function ( layer ) {
    return L.Util.template( '<p>{_score}</p>', layer.feature.properties );
});

The issue is that when I change layers in the control the bindPopup event no longer gets called.

It's almost like the layer z-index is not updated. Would appreciate any insight on how I can address this.

See: https://codepen.io/jvanulde/pen/LYyOWZo

Can you create a reproducible example? I'm having trouble understanding. Is this issue that when the layercontrol switches away from the layer that has the popup, the popup is no longer available on the map? Or is it that when you switch back to that layer again, the popup is no longer there? Please clarify, and sample codesandboxes are always the best way to help us see your issue. — Seth Lutske, Jul 22 '21 at 23:26
I'm confused. When layer 1 is selected and you click, you get layer 1 popups. When you switch the selection to layer two, and you click, you get layer 2 popups. What is the problem? What is the difference between the current behavior and the expected behavior? — Seth Lutske, Jul 23 '21 at 15:17
The issue is random, sometimes you switch to a layer and it's not clickable. It's almost like an event is not getting propagated consistently. — jvanulde, Jul 23 '21 at 15:25
If you disable `renderer: L.canvas()` everything will work fine. This is some bug related to L.canvas take a look here - [issues](https://github.com/Leaflet/Leaflet/issues/6680) — Grzegorz T., Jul 23 '21 at 15:59
I can confirm that disabling the Canvas renderer solved the issue. — jvanulde, Jul 23 '21 at 16:07

score 0 · Answer 1 · answered Jul 23 '21 at 20:34

I see no one has given an answer. A little around, but it works.
You add the id: x to each layer. Later in the loop you check which layer is active, and all the rest of the layers you add the style display: none.

window.addEventListener('DOMContentLoaded', () => {
  let tiles = L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
  });

  let l1 = L.esri.featureLayer({
    url: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/nhsl_en/MapServer/1',
    id: 0, // required
    simplifyFactor: 0.25,
    precision: 5,
    fields: ['OBJECTID'],
    renderer: L.canvas()
  }).bindPopup(function(layer) {
    return L.Util.template('<p>Layer 1: <strong>{OBJECTID}</strong></p>', layer.feature.properties);
  });

  let l2 = L.esri.featureLayer({
    url: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/nhsl_en/MapServer/2',
    id: 1, // required
    simplifyFactor: 0.25,
    precision: 5,
    fields: ['OBJECTID'],
    renderer: L.canvas()
  }).bindPopup(function(layer) {
    return L.Util.template('<p>Layer 2: <strong>{OBJECTID}</strong></p>', layer.feature.properties);
  });

  let map = L.map('map', {
    center: [49.2827, -123.1207],
    zoom: 12,
    layers: [tiles]
  });

  let overlays = {
    'Layer 1': l1,
    'Layer 2': l2
  };

  L.control.layers(overlays, null, {
    collapsed: false
  }).addTo(map);

  l1.addTo(map);

  map.on('baselayerchange', function(e) {
    const layersCanvas = document.querySelectorAll('.leaflet-overlay-pane > canvas');

    layersCanvas.forEach((layer, index) => {
      layer.style.display = '';
      if (index !== e.layer.options.id) {
        layer.style.display = 'none';
      }
    });
  });
});

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  width: 100%;
  height: 100vh;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet@3.0.2/dist/esri-leaflet.js"></script>
<div id="map"></div>

Bound popup removed when layer changed in control

1 Answers1