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 :-)

score 0 · Answer 1 · answered Jan 07 '19 at 14:49

0

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.

answered Jan 07 '19 at 14:49

jbccollins

982
1
6
19

I already tried to extend the popup class based on [this question](https://stackoverflow.com/questions/38730152/popup-always-open-in-the-marker) but I get an error saying `TypeError: Super expression must either be null or a function` And to clarify my question: I still want to open the popup when clicking on the marker but I also want to open the popup when selecting the right name from the result of research like in this screenshot: https://ibb.co/zP4PhDQ – Hugo Delannoy Jan 07 '19 at 18:22
Ah. Yeah I raised an issue about that on the `react-leaflet` repo a while ago https://github.com/PaulLeCam/react-leaflet/issues/506 Read through that if you want to know why you're getting the error. After reading that you may have enough info to figure out where to go on your own. If you do chose to use my fork `react-leaflet-extendable` that might end up being your easiest way forward. But tbh I don't use it myself so maintenance PRs don't happen super often :/ – jbccollins Jan 07 '19 at 19:51
OK! I understand now... I currently trying your fork but I get this error `TypeError: this.props.leaflet is undefined. MapLayer.js:77` with this code: https://jsfiddle.net/j9wub34k/ – Hugo Delannoy Jan 08 '19 at 12:16
That fiddle is close! Just missing the `withLeaflet` wrapper. Here's a working fiddle: https://jsfiddle.net/jbccollins/hxfjtok3/1/ – jbccollins Jan 08 '19 at 14:23

score 0 · Answer 2 · answered Jan 07 '19 at 18:26

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... :/

Open popup with props state from redux

2 Answers2