How to set "layer height"/"Z index" of markers and layers?

[myrkvi]

Hi! I've got one set of Marker components, and a MarkerLayer inside of a GeoJSON. Currently, the markers in the MarkerLayer appear above the other (non-GeoJSON) markers, but I'd like it to be the other way around. Switching the order of them around doesn't seem to do anything.

Is there a way to achieve this?

[dimfeld]

This isn't directly supported at the moment, but I think it could be added. Probably the simplest way to try it without any changes to the library would be to use CSS classes that set the z-index, such as z-10, z-20 and so on for Tailwind or the equivalent if you're not using Tailwind. You can set the class property on either a Marker or a MarkerLayer to apply the CSS class.

I'm not totally sure if this will work, but if it does, then proper z-index support should be pretty easy to add.

[dimfeld]

Created #79 to track adding real z-index support to the library.

[myrkvi]

It doesn't seem to affect it, having set both types of elements' z-index and setting their position to be relative

[dimfeld]

Hm I got it to work at https://github.com/dimfeld/svelte-maplibre/blob/master/src/routes/tests/marker-z-index/%2Bpage.svelte.

Note that it doesn't work if the z-index is applied to the element inside the Marker; it has to be applied on the Marker/MarkerLayer components themselves.

[myrkvi]

Ah, I see! I did try to set it on the element within the Marker and the MarkerLayer. Tested again on them directly and can confirm it works. Thank you! :)

[dimfeld]

Just published 0.5.2, which allows you to set the zIndex property on both Marker and MarkerLayer.