map.on('baselayerchange') or ('overlayadd') problem

[neerajM]

Hey team,

Have a little problem I need help with. I am following the Layer Groups tutorial. I have added a listener for 'baselayerchange' which works fine capturing the change:

map.on('baselayerchange', function(a) {
    alert("The layer changed to " + a.name);
});

AND/OR the code:
map.on('overlayadd', function(a) {
    alert("The layer changed to " + a.name);
});


I added the alert in to make sure it actually captures the layer name value, which in the tutorial is midnight, not the name string which in the tutorial is Night View. However it does not, and returns "Night View". So I changed the part of the code to "+ a.layer" which is what the API says should reference the layer name, however this is just returning "The layer changed to [object Object]", which is where I am stuck at the moment.

Ideally, at the end of all of this, for each layer I have defined another latlng variable, called for example midnight_LL. So on my function(a) or function(b) I essentially will manipulate the layer name to return back the layername "+ _LL", and that should return the latlng variable for that layer, as I want to panTo this point when the layer changes.

I hope I have been relatively clear on my issue. I am happy to post my code if need be, although I have referred to the Tutorial in this question as it is the same organisation.

Thanks in advance!
Kind Regards

[Bryan McBride]

The function returns the layer object (a). Of course you can get the layer name by returning a.name, but it sounds like you are looking for the layer variable.

[neerajM]

Thank you! Just needed some pointing in the right direction. Works perfectly now.

For anyone who perhaps is in the same boat at some point or another I'll leave an explanation of the steps to get there:

I have a several layers and layer groups:
var layer1_polygon = polygon-coordinates-here;
var layer1_marker = L.marker([some lat,lng here]);
var layer1_group =  L.layerGroup([layer1_polygon, layer1_marker]);

    var baseLayers = {
    "Layer 1": layer1_group,
    };

    var control = L.control.layers(baseLayers, null, {collapsed: false}); // so the menu is always visible & in this example no overlayLayers
    control.addTo(map);

// to get you started/in the right direction

map.on('baselayerchange', function(a) {
    alert("The layer changed to " + baseLayers[a.name].getLayers()[0].getLatLng().lat);
});




and that is all!

thanks Bryan for your help.
Layers is awesome so far!

[neerajM]

Actually need some help with this function:

    alert("The layer changed to " + baseLayers[a.name].getLayers()[0].getLatLng().lat);

works fine in chrome, but in Firefox it doesn't work, and Firebug throws the following problem:

TypeError: baseLayers[a.name].getLayers(...)[0].getLatLng is not a function

Weird as in Chrome and even iexplore it works fine.

Any suggestions most welcome!