cssreactjsreact-leafletreact-leaflet-v3

change or move the position of the popup react-leaflet

My popup from the marker is overlapping, making it partially visible. I need to move the popup above.

enter image description here

enter image description here

Code:

<Marker
  draggable={draggable}
  eventHandlers={eventHandlers}
  position={position}
  ref={markerRef}
>
  <Popup>
    <span onClick={toggleDraggable}>
      {draggable && <Button>Click Here</Button>}
    </span>
  </Popup>
</Marker>

I also tried access the popup component, but that breaks the popup.

.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    margin-bottom: 30px;
}

enter image description here

Solution

  • A hack to get around it:

    .leaflet-popup {
    padding-bottom: 30px; /* adjust as you see fit */
}