React Leaflet - TileLayer does not render when it is first loaded

Question

This is my first time using React-Leaflet. I am doing the same as shown in the documentation, but the map is grayed out when the page is first loaded. However if i were to resize the browser, the map renders properly and shows map.

index.js

<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""
/>

package.json

"react-leaflet": "^3.0.2",
"leaflet": "^1.7.1",

css file

.leaflet-container {
    height: 310px;
    width: 440px;
    margin: 0 auto;
}

myComponent

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const Location = () => {
   return (
     <div className="location-container">
       <MapContainer
        style={{ height: "310px" }}
        center={[51.505, -0.09]}
        zoom={15}
        scrollWheelZoom={false}
       >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
     </MapContainer>
   </div>
  );
};
export default Location;

i added leaflet-css to my index.js, i added width and height to my leaflet DOM. I noticed that when it is first loaded, the pictures are not coming from the api, but when I resize browser, the pictures come. Here are some pictures.

first loaded

after resize the browser

Answer 1

I figured it out myself. I write if anyone faced the same problem.

I looked through the documentation of the react-leaflet and found this in the section on react-hooks. I added useMap to access map functions in React-leaflet.

import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";

Then, I created a new component on the same page.

const ResizeMap = () => {
  const map = useMap();
  map._onResize();
  return null;
};

Here I called the _onResize method. Thus, when the page is first loaded, it resizes the location of the map and the images are loaded properly. On the other projects they solved this with map.invalidateSize();

I used the resize component here. It has to be inside the MapContainer.

     <MapContainer
        style={{ height: "310px" }}
        center={[51.505, -0.09]}
        zoom={15}
        scrollWheelZoom={false}
      >
        <ResizeMap />
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>