-3

How do I create a map using leaflet as I was doing it is showing the following.

./src/Map.js
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').

Here Is My Code:

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


function Map() {
    return (
        <div className="map">
           <LeafletMap>
             <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 Map
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Maaz Parkar
  • 11
  • 1
  • 1
  • The error message is clear to me: `'Map' is not exported from 'react-leaflet'.` you are trying to import something that is not present in the imported module. Read the documentation, probably it is imported from somewhere else. – PA. Jul 18 '21 at 08:19

1 Answers1

2

react-leaflet exports a MapContainer component. So, change your import and slightly your code.

import { MapContainer, TileLayer } from 'react-leaflet';

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

Also, read the setup documentation at https://react-leaflet.js.org/docs/start-setup/ where you'll find some useful troubleshooting tips.

PA.
  • 28,486
  • 9
  • 71
  • 95
  • 1
    I tried then it shows me another error now – Maaz Parkar Jul 18 '21 at 08:46
  • [“Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”](https://stackoverflow.com/questions/67552020/how-to-fix-error-failed-to-compile-node-modules-react-leaflet-core-esm-pat) – Seth Lutske Jul 18 '21 at 20:00
  • this new error is unrelated to the posted question; accept this answer and and post a new question. – PA. Jul 22 '21 at 15:36