Refreshing size with React

1

I’ve found the issue on Stackoverflow in HTML/CSS/JS but struggling to get it to work in react. I have a Leaflet map that is not properly rendering because it is perceiving the display as “none” when the toggle is not clicked, but doesn’t reassess the size of the map/resize when clicked. Here are the stackoverflow posts: https://stackoverflow.com/questions/42400662/loading-map-in-leaflet-is-very-slow
https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map

Here is what I have been attempting unsuccessfully in React:
componentDidUpdate() {
const leafletMap = this.leafletMap.leafletElement;
leafletMap.invalidateSize()
}

<div ref={this.mapRef} style={{display:"none"}}>
      <div style={{height: "600px", width: "600px"}}>
              <Map
                  ref={m => { this.leafletMap = m; }}
                  center={mapCenter}
                  zoom={zoomLevel}
                  style={{height:"100vh"}}
              >
                <TileLayer
                    attribution={stamenTonerAttr}
                    url={stamenTonerTiles}
                  />
                <Marker position={coordinates} onClick={this.handleClick}></Marker>
             </Map>
      </div>
</div>
2

This is an interesting problem. Do you have a fuller example I can take a look at? If not, screenshots of the before and desired outcome?

Thanks,
Kirupa :monkey_face:

3

Current rendering (not a load time issue):

01%20AM
Screen Shot 2019-09-05 at 9.40.01 AM.png779×574 7.32 KB

Desired rendering (achieved when resizing the browser window):
09%20AM
Screen Shot 2019-09-05 at 9.40.09 AM.png690×581 374 KB

This is the only additional relevant code beyond the above:
toggleBox(e) {
var x = this.mapRef.current;
x.style.display = (e) ? “block” : “none”;
};

4

Do you know for sure if this code is what causes the resize and redrawing?

const leafletMap = this.leafletMap.leafletElement;
leafletMap.invalidateSize()

With the React page open, I would run this code in the browser Console and see if it causes a redraw. If it does, then we can figure out if there is a different place in the React code this needs to be called from. If it doesn’t work via the Console, then there is another API that we should look at.

Cheers,
Kirupa :slight_smile:

5

Is this what you mean by running it in the console? I don’t think the same call works from the browser console?

14%20AM
Screen Shot 2019-09-05 at 11.30.14 AM.jpg1512×1704 738 KB

6

Yes. I would try declaring the variable with another name to avoid the naming collision. You could also try this.leafletMap.leafletElement.invalidateSize() and see what happens :slight_smile:

7

Both result in this error: Uncaught TypeError: Cannot read property ‘leafletElement’ of undefined

8

This means that the map element isn’t being detected by your current code. I would double check your logic for accessing leafletMap and see if the reference is ever being set. A test you can do on the console might be to bypass React temporarily and just use document.querySelector(" selector path to element ").leafletElement.invalidateSize() or something similar.

9

Yea I think I am doing something incorrectly… though I got a work around with this.forceUpdate(); in the toggleBox function