Leaflet: Panes and Popups

Question

I have a leaflet map with a circleMarker layer that has a popup. This works as expected.

dotLayer = new L.geoJson(dots, {
  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, style(feature));
    },
  onEachFeature: onEachDot
  }).addTo(map);

The problem is that I have a tile label layer which should be drawn on top for the labels to be legible.

I can put the tile layer to the markerpane and add the layer after the marker layer to show. But like this the popup will no longer work.

var lDarkMatterLabels = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_only_labels/{z}/{x}/{y}.png',{pane: 'markerPane'});
map.addLayer(lDarkMatterLabels);

I have a jsfiddle here.

Answer 1

Follow the map panes tutorial and create an explicit separate pane for the labels.