[GIS] How to prevent zoom-in when clicking in the Leaflet table of contents window

leaflettable of contents

The Leaflet grouped layer control plugin has a demo page, where double-clicking within the Table of Contents window has no effect on the map. This sample uses Leaflet 0.73.

When using this plugin with Leaflet 1.x, I'm finding that when I double-click within the table of contents window the map zooms in. You can test this in the simple JSFiddle app here.

Are there any workarounds to avoid this behaviour? It's easy to accidentally double-click within the Table of Contents, causing the map to zoom unexpectedly.

Best Answer

This is a browser-specific bug, it seems. I can replicate it on Chromium browsers as well as Edge, but not on Firefox.

It also seems an issue related to this has been filed already on their Github.

To quickly fix it yourself, I suggest following the recomendation in that link, and remove the check in the .js yourself: Change the code at line ca 91

if (L.Browser.touch) {
  L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
} else {
  L.DomEvent.disableClickPropagation(container);
  L.DomEvent.on(container, 'wheel', L.DomEvent.stopPropagation);
}

to

  L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
  L.DomEvent.disableClickPropagation(container);
  L.DomEvent.on(container, 'wheel', L.DomEvent.stopPropagation);

By removing the if/else check on the touch event, propagation of any clicks or mousewheel movements is disabled when inside the layer control container for all devices.

This should be a good-enough interim fix until the plugin is updated to handle touch devices better.

Related Question