react leaflet basic tutorial map do not display map correctly

I follow react leaflet installation and got the setup page . They provide me a code snippet to use to see a basic example. However here is what I got. Not sure which steps did I mess up.
enter image description here

import { GlobalStyle } from '../Theme';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import styled from 'styled-components';
import Header from '../components/Header';

const StyledLocationsPageContainer = styled.div`
    width: 100%;
    .leaflet-map-container {
        height: 25rem;

function Locations() {
    return (
            <GlobalStyle />
                <Header />
                <div className="leaflet-map-container">
                        center={[51.505, -0.09]}
                            attribution='&copy; <a href="">OpenStreetMap</a> contributors'
                        <Marker position={[51.505, -0.09]}>
                                A pretty CSS3 popup. <br /> Easily customizable.

export default Locations;

Here is my package .json file:

    "dependencies": {
        "@testing-library/jest-dom": "^5.11.9",
        "@testing-library/react": "^11.2.3",
        "@testing-library/user-event": "^12.6.0",
        "leaflet": "^1.7.1",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-leaflet": "^3.0.5",
        "react-scripts": "4.0.1",
        "styled-components": "^5.2.1",
        "web-vitals": "^0.2.4"

After I insert the following link in the index.html, it just becomes empty white space with the width and height I assign to the wrapper div,


57 thoughts on “react leaflet basic tutorial map do not display map correctly”

Leave a Comment