React-leaflet: Issue in map loading, its getting loaded in disarranged tiles out of which some tiles are blank.

[neeraj022]

Node version: 6.10.2
react-leaflet version: 1.1.6
leaflet version: 1.0.3

[PaulLeCam]

Please follow the issue template.

[stunningpixels]

Getting this too

[stunningpixels]

@neeraj022 make sure you include the leaflet CSS file and give the map height, <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css"> fixed it for me

[neeraj022]

Thanks...working for me now.. Didn't include leaflet.css in the css file.

[Roconda]

How did you fix this @neeraj022 ?

[ggwc82]

@Roconda you need to add that link rel to your index.html, and also make sure you have this in your index.css:

.leaflet-container {
    height: 400px;
    width: 100%;
}

I spent the better half of a day trying to figure out what my issue was, @PaulLeCam the instructions need to be clearer to make sure you include the leaflet.css file.

[hqzh]

import 'leaflet/dist/leaflet.css';