When routing away from route where map is rendered, error "TypeError: Cannot read property 'bottomright' of undefined"

[dragGH102]

HOW TO REPRODUCE

(example code below)

• Put the Map with Google Layer in some route (I'm using React-router v3 here with react-redux-router).
• Put one Marker with a Popup inside with a link which dispatches a routing action
• Click on the link > check console

MAP

<Map {...props}>
<GoogleLayer
      googlekey={key}
      maptype={mapType}
      styles={styles}
 />
</Map>

Marker

<Marker>
     <Popup>
         <a onClick={goTo} />
    </Popup>
</Marker>

goTo() {
    dispatch(push(<anything>);)
}

ERROR:

reactBoilerplateDeps.dll.js:205346 Uncaught (in promise) TypeError: Cannot read property 'bottomright' of undefined
    at NewClass.onRemove (reactBoilerplateDeps.dll.js:205346)
    at NewClass.removeLayer (reactBoilerplateDeps.dll.js:95784)
    at NewClass.removeFrom (reactBoilerplateDeps.dll.js:95669)
    at NewClass.remove (reactBoilerplateDeps.dll.js:95662)
    at NewClass.remove (reactBoilerplateDeps.dll.js:92953)
    at Map.componentWillUnmount (reactBoilerplateDeps.dll.js:210619)
    at reactBoilerplateDeps.dll.js:185672
    at measureLifeCyclePerf (reactBoilerplateDeps.dll.js:185338)
    at ReactCompositeComponentWrapper.unmountComponent (reactBoilerplateDeps.dll.js:185671)
    at Object.unmountComponent (reactBoilerplateDeps.dll.js:192107)

[s-chand]

I just had the same issue! Sigh

[sjchmiela]

Me too!

[sjchmiela]

Solved it by downgrading leaflet and react-leaflet to:

supported versions

• "react-leaflet": "^1.0.1"
• "leaflet": "^1.0.2"

[s-chand]

@sjchmiela fixed it for me as well +1

[Eschon]

I ran into the same problem and looked into it a bit.

The problem seems to be that when removing the map leaflet removes the _controlCorners property of the map before it removes the layers. So when onRemove gets called it can't access map._controlCorners.bottomright.

This should be an easy fix. Since in this case the whole map gets removed anyways it doesn't really matter if the position for the bottom right control corner gets reset so we can just add a check if it is there or not.

I'll make a PR for that.

[bchelkow]

There is a similar problem in line: https://github.com/Charmatzis/react-leaflet-google/blob/00bc05fe34c5bca5253aee0f00ade356363a8361/src/leaflet.google.js#L91

The same fix should be applied: https://github.com/Charmatzis/react-leaflet-google/blob/00bc05fe34c5bca5253aee0f00ade356363a8361/src/leaflet.google.js#L109