Imageoverlay state lost when using BringToFront() : leaflet

Question

Introduction

I am working with leaflet api, to create an application which uses two imageoverlays(added to map).

Problem

As i loaded two imageoverlays to map with fixed bounds. Now i am have put the controls to toggle the imageoverlays i.e next and previous

I've used function bringToFront(); behind these controls....

But when i draw something like rectangle and toggle the imageoverlay, then the shapes drawn on image or points will be lost or i guess loses their appearance...i dont now how to solve this.....

Part of Script which has the incomplete implementation

var map = L.map('map', {
                    minZoom: 1,
                    maxZoom: 4,
                    center: [0, 0],
                    zoom: 0,
                    crs: L.CRS.Simple
                });

                // dimensions of the image
                var w = 3200,
                    h = 1900,
                    url = 'assets/img/isbimg.jpg';
                url1 = 'assets/img/fjmap.png';
                // calculate the edges of the image, in coordinate space
                var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
                var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
                var bounds = new L.LatLngBounds(southWest, northEast);

                var featureGroup = L.featureGroup().addTo(map);

                var drawControl = new L.Control.Draw({
                    edit: {
                        featureGroup: featureGroup
                    },
                    draw: {
                        polygon: true,
                        polyline: true,
                        rectangle: true,
                        circle: true,
                        marker: true
                    }
                }).addTo(map);


                map.on('draw:created', showPolygonArea);
                map.on('draw:edited', showPolygonAreaEdited);
                // add the image overlay,
                // so that it covers the entire map

                var iii = L.imageOverlay(url1, bounds);
                var jjj = L.imageOverlay(url, bounds);
                var ggg = iii.addTo(map);
                var hhh = jjj.addTo(map);

                jjj.addTo(map);
                $('#layerControl').on('click', function layerControl() {
                    ggg.bringToFront();
                    return this;
                });

                $('#layerControl2').on('click', function layerControl2() {
                    hhh.bringToFront();
                    return this;
                });

I know, i havent saved the drawn vector or state of imageoverlay which creates problem, is there any method to solve this problem or with setting id to imageoverlay ???

If someone have idea about it please do help, any kind of help or reference will be appreciated .... thanks for your time

Answer 1

You can get it to work by doing the exact opposite: instead of bringing the imagelayer you want to see to the front, you need to bring the other imagelayer to the back:

$('#layerControl').on('click', function layerControl() {
    // ggg.bringToFront();
    hhh.bringToBack();
    return this;
});

$('#layerControl2').on('click', function layerControl2() {
    // hhh.bringToFront();
    ggg.bringToBack();
    return this;
});

Here's a working example on Plunker: http://plnkr.co/edit/3Hd9FR?p=preview

Personally i would have expected that a call to the bringToFront method of L.FeatureLayer after calling the bringToFront method of L.ImageOverlay would also have done the trick, but it somehow doesn't. Since the image and featurelayer are both contained within leaflet's overlay pane, that should also work. I would need to do some more testing when i find the time.