React-leaflet: Rendering on load

Created on 21 Mar 2016 · 5Comments · Source: PaulLeCam/react-leaflet

screengrab

Hi, really like the react-leaflet library. Great work!

I'm having a little issue with rendering on load, because react is so quick it seems that the DOM isn't fully loaded before its inserting the leaflet component and causing the attached rendering issue. Do you know any way to work around this?

Source

ballwood

👍4

Most helpful comment

I also ran into a similar problem. Try and inline the height of the map real quick and see if it helps:

<Map style={{height: "600px"}}> // plus whatever other props
    // stuff
</Map>

bigsassy on 21 Mar 2016

👍2

All 5 comments

I also ran into a similar problem. Try and inline the height of the map real quick and see if it helps:

<Map style={{height: "600px"}}> // plus whatever other props
    // stuff
</Map>

bigsassy on 21 Mar 2016

👍2

cheers @bigsassy that fixed it

ballwood on 21 Mar 2016

🎉1

Hi, just a tip for anyone who like me don't want to set a fixed height for the map.

componentDidMount() {
    this.mapApi = this.refs.map.leafletElement;
    setTimeout(() => {
      this.mapApi.invalidateSize();
    }, 100);
}

HeyHugo on 17 Dec 2016

👎1 👍1

I have the same issue, I can't have the height fixed, and I don't want to use the setTimeout, it's kind of hackish. Any suggestions?

canda on 22 Dec 2017

@canda In a similar situation, I've used react-measure to get the dimensions I have to work with , and set the "fixed" dimensions from that. I haven't tried it with react-leaflet, though.