question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

zIndexOffset for marker is not working as expected

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:29 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
lentyaishecommented, Jun 14, 2017

Well, finally I came up with a solution that works fine for me: Since in your algo you just sum the zIndex calculated by leaflet and zIndexOffset provided from outside and since all zIndexes you deal with are hundreds I’m just working with zIndexOffsets in multiplications of 1000s. A bit dirty but it does the job.

Anyway, thanks a bunch for your rapid help!

0reactions
Falke-Designcommented, Feb 7, 2022

It is not always that simple to understand what somebody else tries to explain. I hope for you that you find someone who wants to help you because I will not and I don’t think that anyone is willing to help you if you keep that attitude.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Controlling zindex on leaflet icons layer - Stack Overflow
eachLayer() method to apply a zIndexOffset to each marker (you may need to check if the layer is an L.Marker if your group...
Read more >
Cannot get weight / z-index option to work [#3281635] - Drupal
Problem /Motivation I am trying to prioritise points from a ... It does not affect the z-index that leaflet is assigning to each...
Read more >
Custom ordering/z-index of icons in Leaflet layer
Force zIndex of Leaflet (function(global){ var MarkerMixin ... if no forceZIndex option declared, Marker will work with normal behaviour.
Read more >
Create Interactive Web Maps with the JavaScript 'Leaflet' Library
BugReports https://github.com/rstudio/leaflet/issues ... different types of layers (e.g. markers and polygons) can share the same group.
Read more >
leaflet source: R/layers.R - Rdrr.io
The \code{zoomLevels} option #' is not compatible with ... strings from unintentionally being treated as HTML when #' they are intended to be...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found