Map is not exported and and impot as leaflet

mtauqeer248 commented 3 years ago

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

Gabricia commented 3 years ago

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 commented 3 years ago

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

mtauqeer248 commented 3 years ago

Thanks ☺️

On Tue, Nov 10, 2020, 8:12 PM Gabricia notifications@github.com 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 https://github.com/CleverProgrammers/react-covid-tracker/issues/16#issuecomment-724765639, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO6W2474K2BNTXJXWVIIFPTSPFJ7RANCNFSM4TQVIZFA .

niicode commented 3 years ago

replace your Map import with MapContainer

gracebir commented 3 years ago

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

mtauqeer248 commented 3 years ago

Can you please send me pic for ur import

On Sun, Jan 3, 2021, 6:24 PM Grace Birindwa notifications@github.com 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 https://github.com/CleverProgrammers/react-covid-tracker/issues/16#issuecomment-753616706, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO6W247MY7TVOLGY2UO5WNTSYBVY3ANCNFSM4TQVIZFA .

b-l-u-e commented 3 years ago

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

niicode commented 3 years ago

this is snap shot for my working Map.js Map_file

pratyush1312 commented 3 years ago

What's the difference between Map Import and Map Container

rauniyarbsal commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

tushar-14 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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

CleverProgrammers / react-covid-tracker

Map is not exported and and impot as leaflet #16