React-Leaflet Map Not Correctly Displayed

react-leaflet map not correctly displayed

Looks like you haven't loaded in the Leaflet stylesheet.

From the react-leaflet GitHub guide:

If you are not familiar with Leaflet, make sure you read its quick start guide before using this library.
You will notably need to add its CSS to your page to render the map properly, and set the height of the container.

http://leafletjs.com/examples/quick-start/

Here is what you'll need:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

Update

Note @ThomasThiebaud indicates you may also have to set up the height of .leaflet-container

--

Ange Loron also gave a correct, optional, JS module import (vs cdn or style link)

import 'leaflet/dist/leaflet.css';

---

For what its worth, the documentation page is poorly designed... and the maintainer continuously deals with this issue in GitHub, but for some reason, the issue is the *fault of the users who continuously don't do the required setup. /s

Next.js React Leaflet Map not Showing Properly

I just solved the problem.

I discovered that if I resize the window the map shows properly, so what I had to do is to call invalidateSize() function every 100 miliseconds for having the size of the screen updated all the time, this will work at the first render too.

import React, { useState, useEffect } from "react";
import { MapContainer, Circle, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

function Map({ coordinates }) {
   const position = coordinates;
   const fillBlueOptions = { fillColor: "#0484D6" };
   const [map, setMap] = useState(null);

   useEffect(() => {
      if (map) {
         setInterval(function () {
            map.invalidateSize();
         }, 100);
      }
   }, [map]);

   return (
      <MapContainer center={position} zoom={20} scrollWheelZoom={false} style={{ height: "400px", width: "100%" }} whenCreated={setMap}>
         <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
         <Circle center={position} pathOptions={fillBlueOptions} radius={50} />
      </MapContainer>
   );
}

export default Map;

Take into consider that you have to add the propert whenCreated={setMap} to the MapContainer component.

react-leaflet: even the simplest code doesn't show up anything

Indeed you initially were just missing a defined height on your <MapContainer> component.

https://react-leaflet.js.org/docs/start-setup/

If the map is not displayed properly, it is most likely because you haven't followed all the prerequisites.

[...] Make sure your map container has a defined height

Now you are just missing a Tile Layer:

<MapContainer>
  <TileLayer
    attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  // More Layers...
</MapContainer>

React leaflet map not correctly displayed even with leaflet.css import

I had the same problem with Ionic 5 and React Leaflet 3 and I solved like this:

In the page where you use the leaflet-react component (in your case Home), import the useIonViewDidEnter lifecycle method (see full docs) to know when the IonPage has finished animating, then trigger a window-resize event.

import { IonPage, useIonViewDidEnter, ... } from '@ionic/react';
function Home() {

     /* 
      * trigger a 'window-resize' event when Page has finished, 
      * rendering and animating, so leaflet map can read a 
      * consistent height value
      */
     useIonViewDidEnter(() => {
        window.dispatchEvent(new Event('resize'));
     });

     return (
        <IonPage>
           ... your Leaflet component...
        </IonPage>
     );
}

Is working well for me.
Let me know if it helps.

---

Related Topics