CODEWITHSUNDEEP
javascriptleaflet
amitdar
amitdar

Reputation: 927

leafletjs overlay layer got hidden

I have 3 layers in my map. All layers are imageOverlay type in order to show a big image instead of tile style. The first 2 layers are the base image which i can switch between (radio) and the third layer is the overlay that should be displayed on top of them if checked (checkbox).

My problem is that when i choose one of the base layers the overlay layer (third layer) got hidden instead of showing on top of it.

this is how i initiate the layers:

var image1Layer = L.imageOverlay(image1Url, imageBounds);
var image2Layer = L.imageOverlay(image2Url, imageBounds);
var image3Layer = L.imageOverlay(image3Url, imageBounds);

L.control.layers({
  'New': image2Layer,
  'Old': image1Layer
}, 
{
  'Changes': image3Layer
}, 
{collapsed:false}).addTo(map);

Upvotes: 1

Views: 873

Answers (1)

Alexandru Pufan
Alexandru Pufan

Reputation: 1922

You can check to see if the overlayLayer is present on map, and if it is, bring it to front whenever a base layer is changed. 

map.on('baselayerchange', function() {
    if (map.hasLayer(image3Layer)) {
        image3Layer.bringToFront();
    }
});

Upvotes: 1

Related Questions