react leaflet basic tutorial map do not display map correctly

Question

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.

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 (
        <StyledLocationsPageContainer>
            <GlobalStyle />
            <main>
                <Header />
                <div className="leaflet-map-container">
                    <MapContainer
                        center={[51.505, -0.09]}
                        zoom={13}
                        scrollWheelZoom={false}>
                        <TileLayer
                            attribution='&copy; <a href="http://osm.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>
            </main>
        </StyledLocationsPageContainer>
    );
}

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,

    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

kboul · Accepted Answer · 2021-01-29 21:34:36Z

3

You need to assign height to your MapContainer explicitly

 <MapContainer
       center={[51.505, -0.09]}
       zoom={13}
       scrollWheelZoom={false}
       style={{height: '100vh'}}> //here assign the height
>
...

and not to the wrapper of the MapContainer to be displayed as expected

answered Jan 29, 2021 at 21:34

kboul

14.7k5 gold badges50 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jasmeet Singh Over a year ago

This should be added to the official documentation here react-leaflet.js.org/docs/start-setup

r4k3sh · Accepted Answer · 2021-12-28 08:18:48Z

0

I had to import the leaflet css file explicitly for it to work for me, even after adding the height and width to map container.

import "leaflet/dist/leaflet.css";

edited Dec 28, 2021 at 8:18

answered Dec 28, 2021 at 8:12

r4k3sh

1312 silver badges4 bronze badges

Collectives™ on Stack Overflow

react leaflet basic tutorial map do not display map correctly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related