CODEWITHSUNDEEP
javascriptcssreactjsreact-map-glmaplibre-gl
carlo711
carlo711

Reputation: 715

React-Map-GL: How to make hovered marker appear on top?

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

Upvotes: 2

Views: 3108

Answers (2)

Phiana
Phiana

Reputation: 56

The solution could be add this in your styles.css.

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

Here is reproducible code.

Upvotes: 3

Damian Busz
Damian Busz

Reputation: 1848

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

Upvotes: 3

Related Questions