OSMBuildings Leaflet - Bring OSMBuildings above all layers

Question

I got the following problem. I have a leaflet map where I want to load a geojson containing building informations and set it to OSMBuildings. I need to have both 2.5D layer and the footprint. So far no problem. The footprint has to be behind the 2.5D Buildings. I tried to set the bringtofront()/bringtoback() but does not work. I tried to create 2 panes and define a z index on them and still did not work. I tried this solution Vector under OSMbuildings but did not work too.

Regarding my code, the buildings information is retrieved through an ajax call. After that I set the geojson to the OSMB layer. An empty OSMB layer is created before the call.

EDIT1 Adding relevant portion of code.

var blastMap = L.map('blastMapID', {rotate:true, touchRotate: true}).setView([50.850346, 4.351721], 14);
blastMap.doubleClickZoom.disable(); 
blastMap.pm.setGlobalOptions({ snappable: false });

//EDIT2
blastMap.createPane('footprint');
blastMap.getPane('footprint').style.zIndex = 300;
var loadedItems = new L.featureGroup({pane: 'footprint'}).addTo(blastMap);
//
var loadedItems = new L.featureGroup().addTo(blastMap);
var bomb = new L.featureGroup().addTo(blastMap);
var osmb= new OSMBuildings(blastMap)

//
//    
//
$(document).ready(function(){
$('#expTA').on('click', function(){
    var exportData = drawnItems.toGeoJSON();
if (drawnItems.pm._layers.length >0){        
    let overlayTa = L.geoJSON(drawnItems.toGeoJSON(), {style: function(feature){return{color: 'white', opacity: 0, fillcolor:'white', fillOpacity: 0.45}}}).addTo(blastMap);
    
    console.log(exportData);
    var defaultHeight = parseFloat(document.getElementById('defaultHeight').value);
    console.log(defaultHeight); 
    if(exportData.length == 0) {
        alert('Define a target area first') 
        return
    }
    $.ajax({
        type: 'POST',
        url: $('#TargetArea').data('url'),
        dataType: 'json',
        data: {'targetArea': JSON.stringify(exportData), 'default_height': defaultHeight, 'csrfmiddlewaretoken': csrftoken,},
        success: function(res){
            

            //
            //Do stuff with res and prepare sort of info like wallcolor 
            //and roofcolor based on conditions
            //
            osmb = osmb.set(buildings_json); //set the geojson to OSMB
                    

            keep going.........

EDIT2 Added part regarding the panes. Sadly same result.

EDIT3

At creation time loadedItems is empty. It will be filled dynamically after the ajax call.

Answer 1

Using map panes is the right way to go. It's impossible to say why it didn't work for your, since you didn't publish relevant code.

If you use browser debugger and have a look at map's elements, you'll see that OSMBuildings layer is using overlayPane which has Z-index 400. Since tilePane has Z-index 200, you have to create map pane with Z-index somewhere in between for your GeoJSON layer to be displayed above tiles and below OSMBuildings layer.

Code could then look something like this:

map.createPane('footprint');
map.getPane('footprint').style.zIndex = 300;

var footprint = L.geoJson(footprintData, {
  pane: 'footprint'
};

Here is an example of how it looks like then: