React-leaflet: Cannot bind to onLoad event

[dmitry]

Cannot bind to the onLoad event to invoke invalidateSize(). Looks like it loads before events are set: https://github.com/PaulLeCam/react-leaflet/blob/master/src/Map.js#L34 (events are setting in super.componentDidMount();).

How to make it work: https://github.com/Leaflet/Leaflet/issues/3560

Lets discuss about the solutions, before I will try to push a PR.

[PaulLeCam]

Out of curiosity, why do you want to call invalidateSize() once the map is loaded? As far as I know, Leaflet sets its size when it's loaded anyways.

[dmitry]

Looks like my styles on development machine are loaded right after the map initialized (I haven't checked on production though...), and the container div is sized afterwards again once CSS styles are loaded.

[PaulLeCam]

OK so in your case I think it's a much better solution to load your styles before, just like Leaflet styles should be loaded before creating any map anyways.

[PaulLeCam]

Closing for now as it doesn't seem to be an immediate issue.

[evenfrost]

@PaulLeCam Is there any way to get onLoad event working? I have exactly same issue, and it seems to be webpack's style-loader is causing it. Currently there is no 'better solution to load your styles before', and ExtractTextPlugin is not an option (no hot styles reloading).

[PaulLeCam]

The onLoad handler is not called because it is fired by Leaflet before the events are attached, but you can use the componentDidMount in your container component to achieve the same purpose.

[evenfrost]

Seems this is dead end for stateless functional components users as we don't have componentDidMount handler. Would appreciate to see a workaround if somebody had one.

[evenfrost]

Managed to implement workaround with the help of #105. I'm binding to onLoad event in <Map> children, i.e.

<TileLayer url={tiles} onLoad={handleLeafletLoad} />

Then I get map element in handleLeafletLoad handler via event.target._map reference.

[jisaacks]

It would probable be good to add a caveat to the following events section in the docs:

Leaflet exposes its own events, different from React. You can listen to them using React-Leaflet by adding a callback to a property prefixed by on. Ex: onMoveend.
Check Leaflet documentation for the events associated to each component.

Stating that load/onLoad is not supported.

---

I wanted to use this to get the mapBounds after rendering, because I only know the center and zoom before rendering.

It looks like you can do it like so:

<Map ref={comp => {
  console.log( comp && comp.leafletElement.getBounds() )
}} />

[kommander]

If anybody is still wondering how to get the map ref only once, like componentDidUpdate but in a functional component with hooks:

function MyComponent() {
  const mapRef = createRef<Map>()
  useEffect(() => {
    // mapRef is now available and useEffect is only called once on component update
    const bounds = mapRef.current.leafletElement.getBounds();
  }, [])

  return (
    <Map ref={mapRef}>...</Map>
  )
}

Disclaimer: Snippet is pseudo code and untested, but in essence that's it

[aldipower]

Please state in the documentation what's going on with the load/onLoad.

[podsevalovAlex]

It's possible to use method whenReady():
.......
return ( <Map ref={mapRef} whenReady={someActions}>...</Map> )
.......
see https://leafletjs.com/reference-1.6.0.html#map-whenready