0
255
ViewsLeafletMap is showing error even after importing the leaflet package in react js
I was working on a covid application which shows covid mortality rate during all the three waves, particularly for my country India, but here the issue is while I'm trying to use leaflet package, its showing an error
import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";
import { showDataOnMap } from "./util";
function Map({ countries, casesType, center, zoom }) {
return (
<div className="map">
<LeafletMap center={center} zoom={zoom}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{showDataOnMap(countries, casesType)}
</LeafletMap>
</div>
);
}
export default Map;this package name: Map.js
even I had run the cmd in the terminal which imports the leaflet: npm i react-leaflet, but it is still showing error, please help anyone
This is localhost error which it is showing
2 answers
Answer question0
You can use below code snippet to import Map. It will surely work:
import { MapContainer as LeafletMap, TileLayer } from "react-leaflet"
We need to import the content as it is from the dependencies. So, when the dependencies are updated this problem can occur, so you need to check what you have imported.
0
Problem is that you're trying to export function Map which has the same name as Map you assigned to LeafletMap, try to change your function name, for instance
import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";
import { showDataOnMap } from "./util";
function NewMap({ countries, casesType, center, zoom }) {
return (
<div className="map">
<LeafletMap center={center} zoom={zoom}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{showDataOnMap(countries, casesType)}
</LeafletMap>
</div>
);
}
export default NewMap;