React-leaflet: Map size not invalidated on height / width change

Created on 14 Jun 2017 · 5Comments · Source: PaulLeCam/react-leaflet

Please make sure to check the following boxes before submitting an issue. Thanks!

[x] All peer dependencies are installed: React, ReactDOM and Leaflet.
[x] Using a supported version of React and ReactDOM (v15.x).
[x] Using the supported version of Leaflet (v1.x) and its corresponding CSS file is loaded.
[x] Using the latest version of React-Leaflet.
[x] The issue has not already been reported.
[x] Make sure you have followed the quick start guide for Leaflet.
[x] Make sure you have fully read the documentation and that you understand the technical considerations.

Expected behavior

Modifying the height and width props on the element correctly updates the size of the map and the appropriate tiles get loaded in. For example, when programmatically setting the map to be larger, new tiles should be fetched to fill in the newly visible area.

Actual behavior

Modifying the height and width props on the element correctly updates the size of the map, but new tiles are not being loaded until the browser window is physically resized. The missing tiles are simply grey. After searching around, it looks like map.invalidateSize() must be called anytime the height and width are modified. I searched the react-leaflet code and it looks like invalidateSize() is never being called.

Source

billscheidel

Most helpful comment

@PaulLeCam I feel that since react-leaflet is trying to wrap leaflet in a react way, it should update (and do what needs to be done internally) on props change, including dimensions. We should probably not have to touch the leaflet internals for this.

borisrorsvort on 20 Oct 2017

👍13

All 5 comments

This is out of the scope of this library, it's up to your application to handle this.

PaulLeCam on 14 Jun 2017

👎16

borisrorsvort on 20 Oct 2017

👍13

This is out of the scope of this library, it's up to your application to handle this.
:-1: 1

I need to express my discontent with this. I second @borisrorsvort opinion that this is indeed a responsibility of this library. Maybe not the whole React community shares these design principles, but I'm 100% sure I'm not alone in thinking that using refs is an anti-pattern. React components should try as much as possible to maintain the declarative philosophy of React.

arnauorriols on 12 Dec 2017

after dragging for while height and width of map automatically changing.why so?

saurabh-solkar16 on 10 Apr 2019

I just found this and implemented a solution here: https://github.com/PaulLeCam/react-leaflet/pull/147#issuecomment-527939233

The important bit beeing the usage of ref and 'react-resize-detector':

import { withResizeDetector } from 'react-resize-detector'

...
const MyMap = (...) => {
  // NOTE: this is using the internal leaflet element to update the size
  const mapRef = useRef()
  useEffect(() => {
    mapRef.current.leafletElement.invalidateSize()
  }, [width, height])

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

export default withResizeDetector(MyMap)