leaflet layerGroup se presenta detrás de baselayer

Question

Tengo varios baselayers y superposiciones. Todo va bien excepto que el lauerGroup se renderiza detrás de la capa base. Primero defino las capas base y las añado a una variable 'baselayer'.

// base layers
naturalEarth = L.tileLayer('http://{s}.tiles.mapbox.com/v3/mapbox.natural-earth-2/{z}/{x}/{y}.png'),

grump = L.tileLayer('http://localhost:8000/v2/gdal_urban_rural_pop/{z}/{x}/{y}.png');

var baselayer = {
    'Natural Earth' : naturalEarth,
    'GRUMP Population' : grump
};

Luego hago lo mismo con algunas superposiciones:

// overlay layers
osm = L.tileLayer('http://{s}.tiles.mapbox.com/v3/mapbox.world-bank-borders-en/{z}/{x}/{y}.png'),

df_admin0 = L.tileLayer('http://localhost:8000/v2/dwelling_fractions/{z}/{x}/{y}.png', {
        wax: 'http://localhost:8000/v2/dwelling_fractions.json'
    }),

df_port = L.tileLayer('http://localhost:8000/v2/PRT_dwelling_fractions/{z}/{x}/{y}.png', {
        wax: 'http://localhost:8000/v2/PRT_dwelling_fractions.json'
    });

//add layer group
hazard_curve_group = L.layerGroup();

hazard_curve1 = L.tileLayer('http://localhost:8000/v2/hazard_curve/{z}/{x}/{y}.png', {
        wax: 'http://localhost:8000/v2/hazard_curve.json'
    }).addTo(hazard_curve_group);

hazard_curve2 = L.tileLayer('http://localhost:8000/v2/hazard_curve2/{z}/{x}/{y}.png', {
        wax: 'http://localhost:8000/v2/hazard_curve.json2'
    }).addTo(hazard_curve_group);

var overlays = {
    "OpenStreetMap" : osm,
    "Dwelling Fractions Admin 0" : df_admin0,
    "Dwelling Fractions Portugal" : df_port,
    "Hazard Curves test" : hazard_curve_group,
};

// create the map
var map = L.map('map', {
    ...
});

//add it all to the map
L.control.layers(baselayer, overlays, {collapsed: true, position: 'topleft'}).addTo(map);

Answer 1

Utilizar L.featureGroup() en lugar de L.layerGroup() y utilizar el método .bringToFront() en él.