6

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

enter image description here

1
  • What does an overlay object look like here?
    – chovy
    May 3, 2022 at 20:23

2 Answers 2

4

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

1
  • That does it, thanks!
    – Web Dev
    Feb 4, 2020 at 23:17
0

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;

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.