Why I am getting 'Map' is not exported from 'react-leaflet'?

Question

Why I am getting:

./src/components/mapComponent/MapView.jsx
Attempted import error: 'Map' is not exported from 'react-leaflet'.

I am importing this in the component:

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

This is confusing me where to look as all looks to be correct in code....

Maybe renaming `Map` to `MapContainer` could work. There is no named export with `Map` - could be an API change. — AWolf, Nov 14 '20 at 22:25
This worked to solve this issue, but there is a next one... Ahh.... — YoungDad, Nov 15 '20 at 08:15
I've been researching this problem cause I too am having the same error on several react-leaflet features. There are several issues on react-leaflet's github and other related packages that are highlighting how the updated version 3.0 broke a few things. https://github.com/PaulLeCam/react-leaflet/issues/818 https://github.com/alex3165/react-leaflet-draw/issues/87 https://github.com/LiveBy/react-leaflet-control/issues/44 — penguin2941, Jan 15 '21 at 01:46

score 22 · Accepted Answer · edited Feb 06 '21 at 23:03

22

Try with MapContainer component.

The MapContainer component is responsible for creating the Leaflet Map instance and providing it to its child components, using a React Context.

When creating a MapContainer element, its props are used as options to create the Map instance.

Now you have to import MapContainer.

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

<MapContainer
  className="markercluster-map"
  center={[51.0, 19.0]}
  zoom={4}
  maxZoom={18}
>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
</MapContainer>

edited Feb 06 '21 at 23:03

eyllanesc

235,170
19
170
241

answered Nov 19 '20 at 12:49

Liora

236
2
3

I've tried but, I get the same error: Attempted import error: 'MapControl' is not exported from 'react-leaflet'. – Giox Dec 18 '20 at 18:02
@Giox: Make sure you have the latest version of react-leaflet. MapContainer has been added as of v3; see https://github.com/PaulLeCam/react-leaflet/releases/tag/v3.0.0. – Vacilando Jan 27 '21 at 13:30
Since above usually happens after an upgrade of dependencies, what MAY help is to nuke node_modules directory and do npm install. Helped me to fix remaining compiler complaints about component attributes. – Dmitriy Feb 12 '21 at 20:29
I had the same problem, removing @types/react-leflt solved it. – Eskil Mjelva Saatvedt Mar 30 '21 at 08:01

score 5 · Answer 2 · edited Feb 06 '21 at 23:02

5

Change Map to MapContainer.

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

edited Feb 06 '21 at 23:02

eyllanesc

235,170
19
170
241

answered Feb 04 '21 at 14:27

Suraj

802
9
7

Please explain your answer – phoenixstudio Feb 04 '21 at 16:15
This worked for me, I am assuming this is because of an upgrade??? – Eddsters Dec 27 '22 at 22:18
yes it has been upgraded – Sweety SK May 30 '23 at 09:29

manoj garu · Answer 3 · 2021-12-09T11:43:16.410

This problem is occurring in the older version try using "react-leaflet": "^3.2.1", "leaflet": "^1.7.1", and it would resolve, if you are using react 17 and upper .

https://codesandbox.io/s/cluster-mapping-leaflet-9bkes

import { TileLayer, Tooltip, Marker, MapContainer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import MarkerClusterGroup from "react-leaflet-markercluster";
import { customMarker } from "./constants";
import L from "leaflet";

const Cluster = () => {
  let data = {
    minLat: -6.1751,
    maxLat: 55.7558,
    minLong: 37.6173,
    maxLong: 139.6917
  };

  const centerLat = (data.minLat + data.maxLat) / 2;
  var distanceLat = data.maxLat - data.minLat;
  var bufferLat = distanceLat * 0.05;
  const centerLong = (data.minLong + data.maxLong) / 2;
  var distanceLong = data.maxLong - data.minLong;
  var bufferLong = distanceLong * 0.05;
  const zoom = 4;
  const cities = [
    { position: [22.583261, 88.412796], text: "A" },
    { position: [22.58289, 88.41366], text: "B" }
  ];
  return (
    <MapContainer
      style={{ height: "480px", width: "100%" }}
      zoom={zoom}
      center={[centerLat, centerLong]}
      bounds={[
        [data.minLat - bufferLat, data.minLong - bufferLong],
        [data.maxLat + bufferLat, data.maxLong + bufferLong]
      ]}
      scrollWheelZoom={true}
    >
      <TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <MarkerClusterGroup>
        {cities?.map((mark, i) => (
          <Marker
            style={{ color: "red" }}
            key={i}
            position={mark?.position}
            icon={customMarker}
          >
            <Tooltip direction="top" offset={[10, 0]}>
              <span style={{ fontSize: 14, fontWeight: "bold" }}>
                {mark?.text}
              </span>
            </Tooltip>
          </Marker>
        ))}
      </MarkerClusterGroup>
    </MapContainer>
  );
};

export default Cluster;

export const customMarker = new L.Icon({
  iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40]
});

score 0 · Answer 4 · edited Apr 27 '21 at 03:41

0

You should use import {MapContainer} from "react-leaflet" instead of Map and before doing that install both react-leaflet and leaflet by

$ npm i leaflet react-leaflet

Hope this solve your problem

edited Apr 27 '21 at 03:41

Kevin Hernández

704
10
25

answered Apr 26 '21 at 16:15

Nand

611
6
12

score 0 · Answer 5 · answered Jun 22 '21 at 11:57

0

This problem is occurring in the newer version try using "react-leaflet": "^2.8.0","leaflet": "^1.7.1"and it would resolve

answered Jun 22 '21 at 11:57

Kshitiz Vaya

1

Why I am getting 'Map' is not exported from 'react-leaflet'?

5 Answers5

Linked