React-Map-GL：如何使悬停标记出现在顶部？

Question

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

Answer 1

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

Answer 2

This would be my first answer on stack, so I hope I meet the requirements. After trying many avenues it turns out the solution could be simpler with css. With the same setup as in question:

in your App.css

.maplibregl-marker:hover {
  z-index: 1000;
}