[GIS] leaflet layerGroup is rendered behind baselayer

leaflet

I have several baselayers and overlays. Everything is fine except the lauerGroup is rendered behind the baselayer.
First I define the baselayers and add them to a 'baselayer' variable. 

// 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
};

Then I do the same for some overlays:

// 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);

Best Answer

use L.featureGroup() instead of L.layerGroup() and use the .bringToFront() method on it.

Related Question