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....

Lamarre

Maybe renaming Map to MapContainer could work. There is no named export with Map - could be an API change. – Alberthaalberti

This worked to solve this issue, but there is a next one... Ahh.... – Lamarre

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. github.com/PaulLeCam/react-leaflet/issues/818 github.com/alex3165/react-leaflet-draw/issues/87 github.com/LiveBy/react-leaflet-control/issues/44 – Picro

Answer 1

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>

Galimatias

I've tried but, I get the same error: Attempted import error: 'MapControl' is not exported from 'react-leaflet'. – Discard

@Giox: Make sure you have the latest version of react-leaflet. MapContainer has been added as of v3; see github.com/PaulLeCam/react-leaflet/releases/tag/v3.0.0. – Argybargy

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. – Ginder

I had the same problem, removing @types/react-leflt solved it. – Craig

Answer 2

Change Map to MapContainer.

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

Acie

Please explain your answer – Faunia

This worked for me, I am assuming this is because of an upgrade??? – Apogeotropism

yes it has been upgraded – Herren

Answer 3

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/[email protected]/dist/images/marker-icon.png",
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40]
});

Lati

Answer 4

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

Reisinger

Answer 5

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

Bungalow