Leaflet: zIndexOffset for marker is not working as expected

Hi,

Leaflet is a very useful component but I’m facing currently a behavior which seems very weird and I could not find a workaround for it.

I’m using Leaflet 1.0.3. I’m using Chrome Version 58.0.3029.110 (64-bit). The same happens on mobile devices my app is ported to (android/iOS). I’m running Windows 10 Pro 64 bit

1. I’m adding a marker to the map and I want to affect its ordering by zIndex means: var marker = new L.Marker(location, { icon: new L.Icon( { iconUrl: iconUrl, iconSize: [size.width, size.height], iconAnchor: [anchor.leftOffset, anchor.topOffset] }), draggable: draggable, clickable: true, zIndexOffset: zIndexOffset }); In my example I’m using zIndexOffset of 202.

2. After adding the marker to the map (marker.addTo(map)) immediately I see that the marker object changes and get a zIndex of 619. Actually each application run with the same initial zIndexOffset I get a different zIndex on marker object after adding it to the map.

3. I have an event listener on ‘mousedown’ event and when I inspect the marker object received by the listener zIndex is again different (477). Meaning it has changed even from the arbitrary value set in setp 2.

4. In case I zoom in and out the map the zIndex will change again.

All of this doesn’t allow me to set different markers on top of others since step 2 change ruins any logic I may use in my code.

Here’s the example of what happens in the leaflet playground:

How could this be fixed or maybe any workaround?

Thanks in advance