typescript - react-leaflet: även den enklaste koden visar inget alls

Jag försöker lista ut hur man renderar en leaflet-karta med react-leaflet, eftersom jag inte får någon output som du kan se här:

Detta är koden:

import * as React from 'react';

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

// https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941

// https://github.com/Leaflet/Leaflet/issues/4849

import "leaflet/dist/leaflet.css"
//import "./leaflet.css"
import "leaflet/dist/images/marker-shadow.png"

//leaflet.Icon.Default.mergeOptions({
    //iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    //iconUrl: require('leaflet/dist/images/marker-icon.png'),
    //shadowUrl: require('leaflet/dist/images/marker-shadow.png')
//});


import Box from '@mui/material/Box'

export default function Mapping(props) {

  // https://stackoverflow.com/questions/70722036/react-leaflet-even-the-simplest-code-doesnt-show-up-anything

  // https://stackoverflow.com/questions/70618361/react-leaflet-cant-input-marker-position-from-fetching-api

  // https://stackoverflow.com/questions/40365440/react-leaflet-map-not-correctly-displayed?rq=1


  const [mapState, setMapState] = React.useState(
    {
      lat: 41.257017,
      lng: 29.077524,
      zoom: 13,
    }
  )

  return (
    <div>
      <h3>Map</h3>

      <Box sx={{ minWidth: 120 }}>

        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          style={{ height: '100vh', width: '100wh' }}
        >
          <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>


      </Box>


    </div>
  )
}

Som föreslagits här lade jag till följande rules i webpack.config.js :

    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[path]/[name].[ext]",
          },
        },
      ],
    },
  ]
},

Och, faktiskt, inga felmeddelanden om css-filer.

Lägger till

<style>
  .leaflet-container {
    height: 400px;
    width: 800px;
   }
 </style>

till index.html får jag detta resultat:

vilket är något närmare den utdata jag borde förvänta mig https://react-leaflet.js.org/docs/start-setup/ :

Genom att sätta <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> längst ner i body-delen av index.html, får jag detta:

LÖST :

Efter att ha tagit bort proxy configuration, tagit bort a-länken i index.html och uppdaterat map.tsx enligt följande:

import * as React from 'react';

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

// https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941

// https://github.com/Leaflet/Leaflet/issues/4849

import "leaflet/dist/leaflet.css"
import "leaflet/dist/images/marker-shadow.png"

//Leaflet.Icon.Default.mergeOptions({
    //iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    //iconUrl: require('leaflet/dist/images/marker-icon.png'),
    //shadowUrl: require('leaflet/dist/images/marker-shadow.png')
//});


import Box from '@mui/material/Box'

export default function Mapping(props) {

  // https://stackoverflow.com/questions/70722036/react-leaflet-even-the-simplest-code-doesnt-show-up-anything

  // https://stackoverflow.com/questions/70618361/react-leaflet-cant-input-marker-position-from-fetching-api

  // https://stackoverflow.com/questions/40365440/react-leaflet-map-not-correctly-displayed?rq=1


  const [mapState, setMapState] = React.useState(
    {
      lat: 41.257017,
      lng: 29.077524,
      zoom: 13,
    }
  )

  return (
    <div>
      <h3>Map</h3>

      <div id="map">

        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          style={{ height: '100vh', width: '100wh' }}
        >

        <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>


      </div>


    </div>
  )
}

leaflet-kartan visas slutligen:

"@types/leaflet": "^1.7.8"
"leaflet": "^1.7.1"
"webpack": "^5.23.0"
"react": "^17.0.2"
"react-leaflet": "^3.2.5"
node: v16.13.0
O.S.: Ubuntu 20.04 Desktop

Vad gör jag fel eller vad saknas? Hur får man react-leaflet att fungera?

Svar #1

Faktiskt saknade du initialt bara en definierad höjd på din <MapContainer>-komponent.

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

Om kartan inte visas korrekt beror det troligtvis på att du inte har följt alla förutsättningar.

[...] Se till att din kartbehållare har en definierad höjd

Nu saknar du bara ett Tilläggsskikt:

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