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/leaflet@1.7.1/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

Does this answer your question? [Map is not visible at initialization using react-leaflet](https://stackoverflow.com/questions/59856361/map-is-not-visible-at-initialization-using-react-leaflet) — Falke Design, Dec 14 '20 at 08:52
I couldn't find a way to add map.invalidateSize() to my component — Zagano, Dec 14 '20 at 09:27
have you tried `componentDidMount() { const map = this.mapRef.current.leafletElement; setTimeout(() => { map.invalidateSize(); }, 250); }` ? — Falke Design, Dec 14 '20 at 09:33
yes, i tried. But i think i couldn't set mapRef properly. I use useRef hook. `const ref = useRef();` and add ref to `
` then. `useEffect(() => { const map = ref.current.leafletElement; setTimeout(() => {map.invalidateSize(); }, 250); }, []);` but it gives an error and say invalidateSize is not a function — Zagano, Dec 14 '20 at 09:40
Okey then I can't help you, because I'm not a react programmer, sorry — Falke Design, Dec 14 '20 at 10:20
Most probably the `ref` must be set on the `` element, not on its wrapper div. — ghybs, Dec 14 '20 at 17:18

score 2 · Accepted Answer · answered Dec 14 '20 at 21:04

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>

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

1 Answers1