CODEWITHSUNDEEP
reactjsleafletreact-leaflet
Ruben Perez
Ruben Perez

Reputation: 670

How to avoid autoClose in Popup component?

Is there anyway to avoid autoClose property on Popup component? I would like something like this, but autoClose prop does not exist in react-leaflet.

<Marker position={coords}>
  <Popup autoClose={false}>
    Some text
  </Popup>
</Marker>

Upvotes: 0

Views: 1387

Answers (2)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

Indeed, a few Leaflet Popup options are not exposed via Popup component props in react-leaflet library.

The following solution could be considered to assign those properties:

Introduce a callback function to access Leaflet Popup via popup.leafletElement:

<Popup ref={popupEl => this.assignPopupProperties(popupEl)}>
        Melbourne
</Popup>

and then update directly Leaflet Popup options: 

assignPopupProperties(popup) {
   popup.leafletElement.options.autoClose = false;
   popup.leafletElement.options.closeOnClick = false;
}

Here is a demo and a source code

Upvotes: 4

Ruben Perez
Ruben Perez

Reputation: 670

I found the way to do it. You hove to set both properties autoClose and closePopupOnClick:

<Map center={position} zoom="12" closePopupOnClick={false}>
  <Marker position={coords}>
    <Popup autoClose={false}>
      I'm a popup
    </Popup>
  </Marker>
</Map>

Upvotes: 2

Related Questions