0

I wanted to render map in react js for my project. SO for it i installed react-leaflet using code npm i react-leaflet and also did npm i leaflet in terminal and entered some code for react leaflet. The code is given Below: This is My Map.JS file:

    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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />
          </LeafletMap>
        </div>
      );
    }

export default Map;

This is My App.js file:

import {
  Card,
  CardContent,
  FormControl,
  MenuItem,
  Select,
} from '@material-ui/core';
import { useEffect, useState } from 'react';
import InfoBox from './InfoBox';
import './App.css';
import Table from './Table';
import { sortData } from './utl';
import LineGraph from './LineGraph';
import MapContainer from './Map';
import "leaflet/dist/leaflet.css";

function App() {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState('worldwide');
  const [countryInfo, setCountryInfo] = useState({});
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    fetch('https://disease.sh/v3/covid-19/all')
      .then((response) => response.json())
      .then((data) => {
        setCountryInfo(data);
      });
  }, []);

  useEffect(() => {
    const getCountriesData = async () => {
      await fetch('https://disease.sh/v3/covid-19/countries')
        .then((response) => response.json())
        .then((data) => {
          const countries = data.map((country) => ({
            name: country.country,
            value: country.countryInfo.iso2,
          }));
          const sortedData = sortData(data);
          setTableData(sortedData);
          setCountries(countries);
        });
    };
    getCountriesData();
  }, []);

  const onCountryChange = async (event) => {
    const countryCode = event.target.value;
    setCountry(countryCode);
    const url =
      countryCode === 'worldwide'
        ? 'https://disease.sh/v3/covid-19/all'
        : `https://disease.sh/v3/covid-19/countries/${countryCode}`;
    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setCountry(countryCode);
        // All of the Data... from the country response
        setCountryInfo(data);
      });
  };

  console.log('fnfun', countryInfo);

  return (
    <div className='app'>
      <div className='spp_left'>
        <div className='app_header'>
          <h1>COVID-19 TRACKER</h1>
          <FormControl className='app_dropdown'>
            <Select
              variant='outlined'
              value={country}
              onChange={onCountryChange}
            >
              <MenuItem value='worldwide'>Worldwide</MenuItem>
              {countries.map((country) => (
                <MenuItem value={country.value}>{country.name}</MenuItem>
              ))}
            </Select>
          </FormControl>
        </div>
        <div className='app_stats'>
          <InfoBox
            title='Coronavirus Cases'
            cases={countryInfo.todayCases}
            total={countryInfo.cases}
          />
          <InfoBox
            title='Recovered'
            cases={countryInfo.todayRecovered}
            total={countryInfo.recovered}
          />
          <InfoBox
            title='Deaths'
            cases={countryInfo.todayDeaths}
            total={countryInfo.deaths}
          />
        </div>
        <MapContainer />
      </div>
      <Card className='app_right'>
        <CardContent>
          <h3>Live Cases by Country</h3>
          <Table countries={tableData} />
          <h3>Worldwide New Cases</h3>
          <LineGraph />
        </CardContent>
      </Card>
    </div>
  );
}

export default App;

but the problem is it shows error:

Failed to compile ./src/Map.js Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').

This error occurred during the build time and cannot be dismissed.

P. M. Arun
  • 3
  • 4
  • If you use react-leaflet version 3 you should `import { MapContainer as LeafletMap, TileLayer } from "react-leaflet";` Api has changed – kboul Feb 08 '21 at 12:05
  • Here "MapContainer" is the alias name, i.e. the component name that we will be using in the App.js right? And now, I am getting this error: "./src/Map.js Module not found: Can't resolve './util' in 'E:\Programs\Big Projects\Covid_Tracker\covid_tracker\src'" Can I share my GitHub Repo so that u can sort out my error? – P. M. Arun Feb 08 '21 at 13:18
  • Yes, please share – kboul Feb 08 '21 at 13:24
  • https://github.com/ArunMurugavel24/Covid19_Tracker This is My GitHub Repo – P. M. Arun Feb 08 '21 at 13:46
  • Just delete this line `import { showDataOnMap } from './util';` There is no such a file anywhere – kboul Feb 08 '21 at 14:52
  • yes, there is no such file. What to do now? – P. M. Arun Feb 08 '21 at 15:18
  • Delete it. It should work now – kboul Feb 08 '21 at 15:19
  • Would you mind accepting the answer if I post the steps as an answer? In stack overflow you say thank you if an answer worked for you by accepting it as correct. [Here](https://stackoverflow.com/help/someone-answers) and [here](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) you can find more info – kboul Feb 08 '21 at 15:29

1 Answers1

0

Here are the steps to follow to solve your issue:

  1. change your import to import { MapContainer as LeafletMap, TileLayer } from "react-leaflet"; due t oreact-leaflet api change fro mversion 2.x to 3.x.

  2. Delete this line import { showDataOnMap } from './util'; on the map component

kboul
  • 13,836
  • 5
  • 42
  • 53