CODEWITHSUNDEEP
javascriptreactjsleafletreact-leaflet
Harshit Singh
Harshit Singh

Reputation: 79

Getting error while trying to loading a react-leaflet map

I'm trying to load the leaflet map but it is giving me an error:
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
I tried to install react-leaflet again and also tried to import leaflet/dist/leaflet.css in my App.js file but it is still showing me the error. Here is the code
Map.js

import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";

function Maps({ center, zoom }) {
  return (
    <div className="map">
      <LeafletMap center={center} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </LeafletMap>
    </div>
  );
}

export default Maps;

App.js

import './App.css'
import Maps from './Maps'
import 'leaflet/dist/leaflet.css'

function App() {
  const [mapCenter, setMapCenter] = useState({ lat: 34.80746, lng: -40.4796})
  const [mapZoom, setMapZoom] = useState(3)

return (
    <div className="app">
        <Maps
            center= {mapCenter}
            zoom= {mapZoom}
         />
    </div>
  )
}

export default App;

Upvotes: 1

Views: 1365

Answers (3)

Cyril Wallis-Davy
Cyril Wallis-Davy

Reputation: 337

You imported your components incorrectly. If you are using react-leaflet 2.x.x you need to import Map as in this example below. If you use react-leaflet 3.0.5 there are several changes. I made an example with the last react-leaflet in this CodeSandBox.

Map.js

import { Map, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./Map.css";

function Maps({ center, zoom }) {
  return (
    <div className="map">
      <Map center={center} zoom={zoom}
      {/* Give your map a size */}
      style={{ height: "100%", width: "100%" }}
        >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </Map>
    </div>
  );
}

export default Maps;

App.js

import './App.css'
import Maps from './Maps'

function App() {
  const [mapCenter, setMapCenter] = useState({ lat: 34.80746, lng: -40.4796})
  const [mapZoom, setMapZoom] = useState(3)

return (
    <div className="app">
        <Maps
            center= {mapCenter}
            zoom= {mapZoom}
         />
    </div>
  )
}

export default App;

Upvotes: 0

Cyril Wallis-Davy
Cyril Wallis-Davy

Reputation: 337

you don't have a size to your Map, maybe the problem comes from there

   <Map
       style={{ height: "100%", width: "100%" }}
       center={position}
       zoom={zoom}
   >

Upvotes: 0

Viet
Viet

Reputation: 12777

Maybe you are not using the correct version of react-leaflet (yours do not export Map). See my working sample: https://codesandbox.io/s/react-leaflet-forked-mg8x4?file=/src/index.js. I used 1.3.4

Upvotes: 1

Related Questions