Map is not exported and and impot as leaflet

[mtauqeer248]

I

I am having this error and don't know why please help

[Gabricia]

import React from "react";
import { MapContainer as LeafletMap, TileLayer, useMap } from "react-leaflet";
import "./Map.css";
import { drawCirclesOnMap } from "../util";

const ChangeMap = ({ center, zoom }) => {
const map = useMap();
map.setView(center, zoom);
return null;
};

const Map = ({ center, zoom, countries, casesType }) => {
return (

{drawCirclesOnMap(countries, casesType)}

);
};

export default Map;

[Gabricia]

Try this instead and read the doc: https://react-leaflet.js.org/
They updated react-leaflet

[mtauqeer248]

Thanks ☺️

…

On Tue, Nov 10, 2020, 8:12 PM Gabricia ***@***.***> wrote: Try this instead and read the doc: https://react-leaflet.js.org/ They updated react-leaflet — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO6W2474K2BNTXJXWVIIFPTSPFJ7RANCNFSM4TQVIZFA> .

[niicode]

replace your Map import with MapContainer

[gracebir]

when replacing Map with MapContainer, I don't get the result that I'm expecting

[mtauqeer248]

Can you please send me pic for ur import

…

On Sun, Jan 3, 2021, 6:24 PM Grace Birindwa ***@***.***> wrote: when replacing Map with MapContainer, I don't get the result that I'm expecting — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO6W247MY7TVOLGY2UO5WNTSYBVY3ANCNFSM4TQVIZFA> .

[b-l-u-e]

facing the same problem the above solutions tried them not solved the problem yet...

[niicode]

this is snap shot for my working Map.js

[pratyush1312]

What's the difference between Map Import and Map Container

[rauniyarbsal]

this is snap shot for my working Map.js

Hey @niicode , did u solve the problem? Coz i'm getting the same error!!

[popeye-khurana]

this is snap shot for my working Map.js

Hey @niicode , did u solve the problem? Coz i'm getting the same error!!

So am I getting the same error!!!

[JatinBhargava]

I too have the same issue. Anyone able to solve it. if Yes plz send,

[tushar-14]

add some className to "MapContainer" then add height (ex:500px} to that class , that worked for me.
JS:-

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

CSS:-

.map_box {
  height: 500px;
  background-color: white;
  padding: 1rem;
  border-radius: 20px;
  margin-top: 16px;
  box-shadow: 0 0 8px -4px rgba(0, 0, 0, 0.5);
}
.map {
  height: 500px;
}

[MikeAriyo]

Dropping this here in case someone still needs help with it. I solved this problem by downgrading my version of react-leaflet.
npm install react-leaflet@2.7.0

[ManojGaru]

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