CODEWITHSUNDEEP
javascriptcssleaflet
JoeyJoeJoe
JoeyJoeJoe

Reputation: 25

Leaflet.js - Tilelayer visible above geojson layer. GeoJSON interactivity issue

I have a leaflet.js project where I have a baselayer, a polygon geojson layer, and another tilelayer above the geojson layer which shows placenames. I've managed to get the placenames tilelayer to visualise above the geojson layer by adding it to a map pane. However, this has disabled click and hover events on the geojson layer. I'm thinking I probably have to add the goejson layer to it's own pane, or possibly the same pane as the placenames tilelayer, but I'm not sure.

Here's my code which add my placenames layer to a pane:

var topPane = map.createPane('leaflet-top-pane', map.getPanes().mapPane);
    topPane.appendChild(CartoDB_PositronOnlyLabels.getContainer());

Here's my CSS code for the pane:

    .leaflet-top-pane {
    pointer-events: none;
}

I've tried adding my geojson layer to the same pane, and changing the pointer-events option, but either it won't work, or I haven't hit on the right combination. Has anyone any ideas as to how I can resolve this so that I can have my tilelayer overlay above my geojson layer but still be able to interact with the geojson layer?

Upvotes: 0

Views: 423

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19079

You're not using the Leaflet library properly (e.g. manually appending a layer to a HTML container), assuming you will know the CSS class of the pane, etc).

Use this instead:

map.createPane('labels');    
map.getPane('labels').style.zIndex = 1000;
map.getPane('labels').style.pointerEvents = 'none';

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);

var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    pane: 'labels'
}).addTo(map);

You can see a working example here.

Upvotes: 1

Related Questions