4

Im trying to make a map containing two separated basemaps one with terrain and second with labels, and with vector data layers in between. The problem is when I try use hover/click events on data layers because the label layer on top is blocking them. Is there a way to ignore specific layer in mouse events?

the code based mostly on choropleth map leaflet tutorial:

var baseMap1 = L.esri.basemapLayer("Oceans");               //terrain without labels

var baseMap2 = L.tileLayer('https://api.mapbox.com/..., {   //mapbox labels only
               pane: 'shadowPane'});                        //just for testing , it will have its own pane on top of everything else

var map = L.map('map',    {
    layers: [baseMap1, baseMap2],
    });

var vectorLayer = L.geoJson(vectors,  {style: style, onEachFeature: onEachFeature,}).addTo(map);

function onEachFeature(feature, layer) {
    layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    });
}

function highlightFeature(e) {
        this.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
        });
       }

 function resetHighlight(e) {
        vectorLayer.resetStyle(this);
        this.bringToBack();
        }

I figured there is an 'interactive' option for vector layers with polygons that can do what I need (polygons are "transparent" for mouse events) but it doesn't work for tileLayer

JS fiddle - http://jsfiddle.net/qkyejuxy/ comment 4th line and set the labels below vector layer and the hover works but labels are not visible

  • Can you put together a simple demo which reproduces this? (You could either post the code here, or perhaps on JS Fiddle). This will help us to understand how you've defined the basemaps and configured the on-hover listener for the vector layer – Stephen Lead Feb 23 '16 at 22:14
  • 1
    I think this thread should help you: Handling mouse events in multiple overlapping shapes? – ghybs Feb 24 '16 at 13:08
  • 1
    Specifically here is the example code for @ghybs solution: jsfiddle.net/ve2huzxw/25 – James Milner Feb 24 '16 at 13:51
3

Is there a way to ignore specific layer in mouse events?

Yes, and it's called pointer-events: none in CSS. How to use that with map panes is explained at the Leaflet tutorial on map panes.

|improve this answer|||||
  • 2
    Be careful with this however as it's not supported pre IE 11 : caniuse.com/#feat=pointer-events – James Milner Feb 24 '16 at 10:05
  • thanks, it works like a charm! First I missed this tutorial because it was for beta leaflet and then I started using the 1.0 version myself and didn't go back for the tutorial – Lukk Feb 24 '16 at 19:15
4

A more "leaflet" way to do it now is to set the interactive flag to be false. This will allow all events to be passed to other layers and ignored on this layer.

L.geoJson(geoJsonData, {
    onEachFeature: aFunction,
    interactive: false
}).addTo(group);
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.