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

user_14543924 0
Viewed 18296

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

react-leaflet reactjs
5 Answers

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

Change Map to MapContainer.

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

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]
});
user_92192370

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

user_110075310

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

user_162894630
Related