"Label tileLayer" hack leads to an unclickable overlay layer

Question

Using the code from this question I managed to successfully add a tileLayer of place/road labels above my overlay layer. However, this has had the unfortunate side-effect of blocking any clicks to the overlay layer below.

Broadly, how can I reenable detection of clicks to layers/objects below the top tileLayer?

See this example where I add a layer of labels to the top with:

var CartoDB_PositronOnlyLabels = {
    "tilejson": "2.0.1",
    "tiles":['http://c.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png'], 
    "attribution": '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    "maxzoom": 19,
    "minzoom": 13       
};

var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var labelLayer = L.mapbox.tileLayer(CartoDB_PositronOnlyLabels).addTo(map);
topPane.appendChild(labelLayer.getContainer());
labelLayer.setZIndex(9);

Update Originally this was a problem because I am using a special draw function to draw in routes by clicking to add waypoints to the route. With the addition of the tileLayer, users can still add waypoints. But they can't drag waypoints to move the route, nor can they click on the last point to end the route.

I fixed this by setting the ZIndex of the label tileLayer to 5, so that it would be in-between the overlay layer (zIndex: 4) and the marker layer (zIndex:6). I would however still like to know if it's possible to have a clickable overlay layer under a tilelayer.

iH8 iH8 · Accepted Answer · 2016-01-30T04:27:27

I'de give CSS rule pointer-events: none a try on the tiles/tilelayer that's on top of your features/overlays. When set to none the images shouldn't respond to any mouse/cursor events, so every event should delegate to the layer that's underneath it:

Pointer-events:

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

None:

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

"Label tileLayer" hack leads to an unclickable overlay layer

1 Answers