React leaflet shows empty map

Question

I have a problem with the map display in React Leaflet - I installed everything, but it still doesn't work...

What do I have to change? I added css, added height but do not know what is missing

import React from "react";
import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const ProjectAnalysis = () => {
  return (
    <div>
      <p>bok</p>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={true}
        style={{ width: "100%", height: "calc(100vh - 4rem)" }}
      >
        <TileLayer
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>{" "}
      <p>bok</p>
    </div>
  );
};

export default ProjectAnalysis;

Answer 1

It seems the "Getting Started" instructions for React-Leaflet are insufficient. Following the "Installation" and "Setup" instructions, running the app I get errors.

In particular the "Installation" instruction does not have you import Popup or Marker, so errors end up in the JS Console.

It isn't perfect, but I was able to get some amount of the app running (some of the map show) with this as the code in my App.jsx:

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

function App() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

export default App;