Z-Order of multiple rotated image overlays not respected

[KarloX2]

Hello,

I created two similar fiddles:

Sample A is using normal image overlays and sample B is using rotated image overlays (though the images don't appear rotated, but that's not the point here). In both cases, the overlays can be checked on and off in a layers control.

A) https://jsfiddle.net/ngbjpv6L/ B) https://jsfiddle.net/49rpsn2b/

Now please note the difference: When you check/uncheck the two images in the layers control (button in the top-right corner of the Map), in sample A the first image (Opera House) will always be in the background of the second image (Anzac Bridge), no matter in which order you switch the checks on or off (this is how it's supposed to be).

In sample B, the overlay that is check on last will be in the foreground (which is highly undesired!).

I guess this has to do with repositioning. Any idea how I can resolve this?

Thanks! Karlo

[IvanSanchez]

I think this is a case of RTFM. Also, tutorial on map panes.

[KarloX2]

Hi @IvanSanchez,

I read into the documentation and I already experimented with setZLayer(), without success so far.

As you see in my sample A, the Z-Layer seems to be applied and maintained automatically when I add normal ImageOverlay objects. I think this happens because the autoZIndex property of the Layers control is true by default. The same should apply for sample B (with rotated image overlays and autoZIndex is true here as well), but it doesn't work in the same way.

Maybe I missed a point. If so, could you please advice what to look for?

Thanks Karlo

[IvanSanchez]

I read into the documentation and I already experimented with setZLayer(), without success so far.

This is important to mention. If you didn't, I would keep on assuming that you didn't try that.

If ImageOverlay.Rotated does not respect calls to setZIndex() or their zIndex option, or the autoZIndex option of a L.Control.Layers, then this is a bug. (Your original report does not mention this)

Can this be reproduced just with the zIndex option of the image overlays, without a layers control?

[KarloX2]

I thought the problem was clear from the title of my post and from the samples. Never mind.

I dug a bit deeper and found that the z-index css property isn't added to the inline styles. That seems to be why the images just appear in the click-order.

I'm not a JavaScript hero, but here's a possible fix:

https://jsfiddle.net/5hd92cap/

In the code window, the lines from 58 to 60 are new:

if (this.options.zIndex) { this._image.style.zIndex = this.options.zIndex; } Please compare to the (unchanged) problem demo case: https://jsfiddle.net/49rpsn2b/

If you agree with this solution, can you please re open this issue and I'll then post a pull request.

Thanks Karlo

[IvanSanchez]

It wasn't too clear, but it is now. No worries :smile:

I think a slightly better solution is to replicate the code from L.ImageOverlay at https://github.com/Leaflet/Leaflet/blob/0b6e0cd24b68d5dc4a698d72310f375cf288a8b2/src/layer/ImageOverlay.js#L203 , and put that in _initImage after this._image has been instantiated, around

https://github.com/IvanSanchez/Leaflet.ImageOverlay.Rotated/blob/331ac8219436cefbc8d1955c627e64ac54fb29d2/Leaflet.ImageOverlay.Rotated.js#L88

[KarloX2]

Good point. Here's the PR: #9

Once you're satisfied and merge it in, could you please update the NPM (or tell me how I can do that, I have no clue).

Thanks