react-leaflet Map Shows Up Grey

17.02.2022 22:06
#REACT #REACT-LEAFLET

react-leaflet Map Shows Up Grey

I wanted to use the react-leaflet library in a project I developed with React and I installed it. After installing it, I observed that the map was not partially loaded and remained gray. Although some areas were loaded when the map was scrolled, most parts remained gray. When the page size was changed, the map was completely completed.

After doing some research to solve this error, I found that the solution is quite simple. We are using the whenReady function which is triggered when the MapContainer is ready. We call the invalidateSize function using the map reference that comes as a parameter in the function and then the problem is solved.

The code blocks before and after solving the problem are as follows.


Before

After

<MapContainer
whenReady={ref => {
map.current = ref;
}}



...
<MapContainer
whenReady={ref => {
map.current = ref;
setTimeout(() => {
map.current.target.invalidateSize();
}, 1);
}}
...