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

score 1 · Accepted Answer · answered Sep 03 '15 at 07:17

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.

answered Sep 03 '15 at 07:17

iH8

27,722
4
67
76

thanks for reply ,, i will surely accept the answer, +1 for effort... thanks again for help – Suhail Mumtaz Awan Sep 03 '15 at 08:11
Actually i didn't have clear understanding about imageoverlay, i was willing to do like, when i draw some shapes on image1, then these shapes should be only for image1 ,,, image two has its own shapes or draqings....if its possible please let me know...thanks for effort although answer has perfect implementation regarding another requirement of mine..... – Suhail Mumtaz Awan Sep 03 '15 at 08:16
1

No thanks, always welcome. I think what you want is possible although it would require writing a fair amount of logic. Why not post a new question with this so other can help too? I'll keep an eye out. Good luck with your project. – iH8 Sep 03 '15 at 10:19
got it, yes i am going to post the question about it – Suhail Mumtaz Awan Sep 03 '15 at 10:21

Imageoverlay state lost when using BringToFront() : leaflet

1 Answers1