Skip to content

Instantly share code, notes, and snippets.

@perliedman

perliedman/click-through-layers.js

Created March 7, 2017 15:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save perliedman/84ce01954a1a43252d1b917ec925b3dd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save perliedman/84ce01954a1a43252d1b917ec925b3dd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. perliedman revised this gist Mar 7, 2017. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion click-through-layers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,6 @@
    // We currently only do this for clicks, since hiding and redisplaying
    // elements is a performance hog if you do it in for example mousemove.
    overlayPane = map.createPane('my-overlays');
    overlayPane.style.zIndex = 300;
    L.DomEvent.on(overlayPane, 'click', function(e) {
    if (e._stopped) { return; }

  2. perliedman created this gist Mar 7, 2017.
    41 changes: 41 additions & 0 deletions click-through-layers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    // Since overlays are VectorGrid layers with canvas rendering,
    // they don't support clicking through them (the topmost canvas
    // swallows the event, lower layers will not see it).
    // We workaround this by this hack (inspired by
    // http://www.vinylfox.com/forwarding-mouse-events-through-layers/):
    //
    // All overlays are in their own Leaflet pane. When a click hits a
    // layer in the pane, we first handle the event like normal, and then
    // hit the event handler below this comment.
    //
    // The event handler will hide the original target layer's DOM element,
    // and then find out which DOM element is under it, and re-dispatch the same
    // event on that element, and continuing this process until all layers
    // have been dispatched, or abort if a layer's event handler stops the
    // event.
    //
    // We currently only do this for clicks, since hiding and redisplaying
    // elements is a performance hog if you do it in for example mousemove.
    overlayPane = map.createPane('my-overlays');
    overlayPane.style.zIndex = 300;
    L.DomEvent.on(overlayPane, 'click', function(e) {
    if (e._stopped) { return; }

    var target = e.target;
    var stopped;
    var removed;
    var ev = new MouseEvent(e.type, e)

    removed = {node: target, display: target.style.display};
    target.style.display = 'none';
    target = document.elementFromPoint(e.clientX, e.clientY);

    if (target && target !== overlayPane) {
    stopped = !target.dispatchEvent(ev);
    if (stopped || ev._stopped) {
    L.DomEvent.stop(e);
    }
    }

    removed.node.style.display = removed.display;
    });