I have a map with different markers and as much as I am aware the markers are rendered in the order they appear which means marker 3 is on top of marker 1 and 2. I am using React Map Gl with mapblibre-gl and React(typescript) I'm fine with that, but if I hover an marker I want the hovered marker to be on top(when overlaying with another marker). I tried z-index but it does not work at all.
Maker:
<Marker latitude={station.lat} longitude={station.lng} key={station.id} >
<div className='locDot'>
<div className='priceTag'>
<span id="brand">{station.brand ? station.brand : 'freie Tankstelle'}</span>
<span id="price">{price}</span>
</div>
</div>
</Marker >
This marker is than pushed in an array and returned as component of many markers.
CSS:
.locDot{
/* position: absolute; */
height: 12px;
width: 12px;
display: flex;
justify-content: center;
align-items: flex-end;
background-color: #1E90FF;
border: 2px solid #fff;
border-radius: 100%;
/* z-index: 1; */
}
.priceTag{
/* position: relative; */
display: flex;
flex-direction: column;
background-color: #1E90FF;
padding: 4px 6px;
font-size: 1rem;
font-weight: 400;
color: white;
margin-bottom: 18px;
border-radius: 5px;
/* line-height: 1rem; */
z-index: 1;
}
.priceTag:hover{
position: absolute;
border: 5px solid red;
z-index: 5;
}
Sandox: codesandbox.io/s/vigorous-mahavira-gxk6wj?file=/src/App.tsx
You need to apply zIndex to marker itself, you can do this by adding className or inline styling.
I have updated the codesandbox with solution, basically we will map simple array and return Markers, based on the Marker index we will set active state and then check whats the current activeIndex in Marker inline style. If you hover over that div, set an activeIndex to its index..
But as I said, this could be simply achieved by passive active className and then giving it z-index: 1
Here is the codesandbox