Defining which layer (overlay) is displayed on Leaflet map?

Question

I have 7 layers overlay on a base map, i need to define which layer is selected (active,displayed,shown) on the map.

var overlays = {
        "AL HOUDA Espaces_Verts": alhouda6_layer,
        "AL_HOUDA_imm": alhouda7_layer,
        "AL_HOUDA_villa": alhouda8_layer,
        "AL HOUDA_ECO": alhouda5_layer,
        "AL_HOUDA_EQUIP": alhouda4_layer,
        "AL_HOUDA_REC": alhouda3_layer,
        "AL_HOUDA_PARK": alhouda2_layer,
        "AL_HOUDA_200lOG": alhouda1_layer,
    };

L.control.layers(baseLayers,overlays).addTo(map);

For example when i select "AL_HOUDA_villa" and it's shown on the map i want to define that it's selected so i can show data just for this layer

Answer 1

It sounds like you want to designate just that overlay layer to be shown/active/displayed when you first load the map?

You just need to add the layer to the map:

var overlays = {
    "AL HOUDA Espaces_Verts": alhouda6_layer,
    "AL_HOUDA_imm": alhouda7_layer,
    "AL_HOUDA_villa": alhouda8_layer,
    "AL HOUDA_ECO": alhouda5_layer,
    "AL_HOUDA_EQUIP": alhouda4_layer,
    "AL_HOUDA_REC": alhouda3_layer,
    "AL_HOUDA_PARK": alhouda2_layer,
    "AL_HOUDA_200lOG": alhouda1_layer,
};

//this just adds the layers control to the map
L.control.layers(baseLayers,overlays).addTo(map);

//make the layer active. 
alhouda8_layer.addTo(map);

You can add that one line of code before or after defining your layers control, so this should work too:

//make the layer active. 
alhouda8_layer.addTo(map);

var overlays = {
    "AL HOUDA Espaces_Verts": alhouda6_layer,
    "AL_HOUDA_imm": alhouda7_layer,
    "AL_HOUDA_villa": alhouda8_layer,
    "AL HOUDA_ECO": alhouda5_layer,
    "AL_HOUDA_EQUIP": alhouda4_layer,
    "AL_HOUDA_REC": alhouda3_layer,
    "AL_HOUDA_PARK": alhouda2_layer,
    "AL_HOUDA_200lOG": alhouda1_layer,
};

//this just adds the layers control to the map
L.control.layers(baseLayers,overlays).addTo(map);

According to the documentation: "The layers control is smart enough to detect what layers we’ve already added and have corresponding checkboxes and radioboxes set." (http://leafletjs.com/examples/layers-control/)

Answer 2

I tried this and it works fine

 var layerObj = {};
layerObj["test_layer:EV_Lot_ALHOUDA_wgs"] = alhouda6_layer;
layerObj["test_layer:Imm_Coll_Lot_ALHOUDA_wgs84"] =alhouda7_layer;
layerObj["test_layer:Villa_Lot_ALHOUDA_wgs84"] = alhouda8_layer; 
layerObj["test_layer:Eco_Lot_ALHOUDA_wgs84"] =alhouda5_layer;
layerObj["test_layer:Equip_Lot_ALHOUDA_wgs84"] = alhouda4_layer; 
layerObj["test_layer:Rec_Lot_ALHOUDA_wgs84"] =alhouda3_layer;
layerObj["test_layer:Parking_Lot_ALHOUDA_wgs84"] = alhouda2_layer; 
layerObj["test_layer:P200Log_Lot_ALHOUDA_wgs84"] =alhouda1_layer;


queryLayers = [];
for (key in layerObj) { 
if(map.hasLayer(layerObj[key])) {
 queryLayers.push(key);
 }
}
var urlLayers = queryLayers.join();

        var URL = 'http://localhost:8082/geoserver/test_layer/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=test_layer:Imm_Coll_Lot_ALHOUDA_wgs84,test_layer:Villa_Lot_ALHOUDA_wgs84,test_layer:Eco_Lot_ALHOUDA_wgs84,test_layer:Equip_Lot_ALHOUDA_wgs84,test_layer:Rec_Lot_ALHOUDA_wgs84,test_layer:EV_Lot_ALHOUDA_wgs,test_layer:P200Log_Lot_ALHOUDA_wgs84,test_layer:Parking_Lot_ALHOUDA_wgs84&QUERY_LAYERS='+urlLayers+'&propertyName=Zone_Urb,Type_Urb&STYLES=&BBOX='+BBOX+'&FEATURE_COUNT=5&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&FORMAT=image%2Fpng&INFO_FORMAT=text%2fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;