3

I want to create a card on top of my React-Leaflet map that shows some details of the map. But my first issue is that, I can not overly my div(container of card) on top of map. here is my code:


class SimpleExample extends React.Component {
  constructor() {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    }
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <LeafletMap center={position} zoom={this.state.zoom}
        id='mapDiv'
        >
        <div
          style={{
            width: 500,
            height: 500,
              top: 0,
                left: 0,
                  backgroundColor: 'red',
                    zIndex: 10
          }}  
        />
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br/> Easily customizable.
          </Popup>
        </Marker>
      </LeafletMap>
    );
  }
}


ReactDOM.render(<SimpleExample />, document.getElementById('container'))```
Abolfazl Heidarpour
  • 125
  • 1
  • 8

1 Answers1

4

Make your div a sibling of the map container, not a child:

<div 
  className="container"
  style={{
    position: 'relative'
    width: 500,
    height: 500
  }}
>
  <div
    style={{
      position: 'absolute'
      width: 500,
      height: 500,
      top: 0,
      left: 0,
      zIndex: 10000
    }}  
  />
  <LeafletMap {...props}>
    {mapChildren}
  </LeafletMap>
</div>

You can see an example of this with vanilla leaflet here: Make Select Option Display on top of Leaflet Map

Seth Lutske
  • 9,154
  • 5
  • 29
  • 78
  • Thank you!!! Was facing the same issue. Now got resolved. – Sam Phillemon Jul 14 '21 at 22:15
  • Except when this element needs to be inside of MapContainer in order to be able to access the context, then this becomes useless – BCT May 22 '22 at 16:26
  • @BCT there are other ways of accessing the map context outside of the child of a map. This question did not specify that that was required. Sounds like you have a separate question to ask. – Seth Lutske May 23 '22 at 15:36
  • I actually did have a question, but I managed to solve it by myself. – BCT May 23 '22 at 18:23