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'

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

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

1 Answer 1


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.