Open popup with props state from redux

Question

I'm creating a website with a big main map. I have some markers with popups working when I click on makers. But now, I want to open the popup with an external event. I use redux to maintain the markers state and I would like to open or not the popup depending on the maker state.

There is no open or isOpen attribute on the popup Component in react-leaflet like this :

   <Marker position={[this.props.lat, this.props.lon]}>
        <Popup open={this.state.isOpen} >
            The popup content
        </Popup>
    </Marker>

and the Leaflet API provide nothing better...

I already succeed to add an event listener onMouseOver with ref like below but no more.

class Poi extends Component{
    render(){
        return (
            <Marker position={[this.props.lat, this.props.lon]}
                    ref={marker=> { this.marker = marker }} 
                    onMouseOver={() => {s.marker.leafletElement.bindPopup('Popup content').openPopup();}}>
            </Marker>
    )
}

Thank you for your help! PS: I'm really new to react so please be indulgent :-)

Answer 1

Hmm do you want to associate markers with popups at all? Like should clicking on a marker open a popup? If the answer is no then the easiest way to "automatically" open your popups would be to stop associating them with markers.

instead of:

<Marker position={[this.props.lat, this.props.lon]}>
    <Popup>
        The popup content
    </Popup>
</Marker>

do:

<Marker position={[this.props.lat, this.props.lon]}/>
<Popup position={[this.props.lat, this.props.lon]}>
    The popup content
</Popup>

If you still want to trigger popups to open when you click on a marker then I think your best bet might be to extend react-leaflet's Popup class. If you post a fiddle with a minimal working example of your current problem I can help you with that.

Answer 2

I finally find a quick and maybe dirty hack :

class Poi extends Component{
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(this.props.isOpen === true){
            this.marker.leafletElement.bindPopup('popup content').openPopup()
        }
    }

    render(){
        return (
            <Marker position={[this.props.lat, this.props.lon]} ref={marker => { this.marker = marker }}>
            </Marker>
        )
    }
}

But it's only open ONE popup even if many elements are marked as open and I lost the ability to click on the marker... :/