[GIS] Make a leaflet TileLayer appear above a GeoJSON layer

leaflet

I'm trying to add a layer of place labels above a GeoJSON layer, so that these labels remain visible. However when I add the layer per the code below, the tileLayer remains below the GeoJSON layer. 

    var CartoDB_PositronOnlyLabels = 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> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
        subdomains: 'abcd',
        maxZoom: 19,
        zIndex: 3
    });
    CartoDB_PositronOnlyLabels.addTo(map);

Adding a few more things that don't work for the future reader:

  1. According to this leaflet PR you could add a pane: 'overlayPane' option upon layer creation.

  2. The hack appearing here and here only works if the tileLayer you're adding is of tileJSON format 

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

Best Answer

Panes might help your cause. The idea being you can control what layers draw in what panes and then control the pane order. Here is the original GIT discusson on it.

There is also a similar SO question regarding overlay layers and tile layers and how they are implemented on custom panes.

Related Question