1

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

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, privacy policy and cookie policy

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