CODEWITHSUNDEEP
reactjsleafletreact-leaflet
Erick Morris
Erick Morris

Reputation: 41

React-leaflet doesn't display the map with leaflet.css loaded nor resizing

I'm working on a react project using leaflet, but it doesn't display de map, here is the Map component:

import React from "react";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import "./map.css";
    
function Map({center, zoom }) {
    return (
        <MapContainer
            className="map"
            center={center}
            zoom={zoom}
            scrollWheelZoom={false}
            style={{height:'450px'}}
        >
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
        </MapContainer>
    );
}
    
export default Map;

The index.html

<meta
  name="description"
  content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;500;700;900&display=swap" rel="stylesheet">

the css:

.map {
    background-color: #424242;
    padding: 1rem;
    border-radius: 20px;
    margin-top: 16px;
    box-shadow: 0 0 8px -4px rgba(0, 0, 0, 0.5);
}

Here is how it displays with no stylesheet in index.html:

With no style

And here is how it displays with the stlyesheet, which is like nothing:

With stylesheet

also here is the dependency:

"dependencies": {
    "@material-ui/core": "^4.11.4",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "chart.js": "^3.2.0",
    "leaflet": "^1.7.1",
    "numeral": "^2.0.6",
    "react": "^17.0.2",
    "react-chartjs-2": "^3.0.3",
    "react-dom": "^17.0.2",
    "react-leaflet": "3.0.5",
    "react-scripts": "4.0.3",
    "sass": "^1.32.11",
    "web-vitals": "^1.1.1"
},

Thanks

Upvotes: 4

Views: 3260

Answers (3)

Nirajan khadka
Nirajan khadka

Reputation: 19

If you have done everything correctly but the map tiles are still not showing then remove overflow:hidden if you have added. Having overflow:hidden was the problem on my end.

Upvotes: 0

Milan Korangi
Milan Korangi

Reputation: 33

include css in head index.html <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>

Upvotes: 1

rodrigo
rodrigo

Reputation: 41

you should import the css form leaflet dist

import "leaflet/dist/leaflet.css";

heres is a boilerplate i made

/* eslint-disable */
import React, { useRef, useState } from "react";
import { Map, TileLayer, LayersControl } from "react-leaflet";
import "leaflet/dist/leaflet.css";


const App = () => {
  const mapRef = useRef();
  const [bounds, setbounds] = useState([
    [-90, -180],
    [90, 180],
  ]);

  return (
    <>
      <Map
        ref={mapRef}
        center={[0, 0]}
        zoom={3}
        maxZoom={19}
        minZoom={2}
        bounceAtZoomLimits={true}
        maxBoundsViscosity={0.95}
        maxBounds={bounds}
      >
        <LayersControl position="topright">
          <LayersControl.BaseLayer name="OpenStreet">
            <TileLayer
              noWrap={false}
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer name="Satellite">
            <TileLayer
              noWrap={false}
              url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer checked name="Dark">
            <TileLayer
              noWrap={false}
              url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
            />
          </LayersControl.BaseLayer>
        </LayersControl>
      </Map>
    </>
  );
};

export default App;

aswell dont fortget to create a css with this class

.leaflet-container {
  width: 100%;
  height: 100vh;
}

also keep in mind im using

"react-leaflet": "^2.7.0",
"leaflet": "^1.7.1"

verisons

Upvotes: 3

Related Questions