DEV Community

Cover image for Covid map - React project day 1.
Magda Rosłaniec
Magda Rosłaniec

Posted on • Updated on • Originally published at

Covid map - React project day 1.

I've been learning React for a while and I like doing it through writing projects. Yes, I use tutorials and courses although I don't follow them 1 to 1 in my projects.

Here I want to take notes for my new project: Covid map and post them in public. In this project, I want to show the number of Covid-19 cases for each country and maybe vaccine coverage.

Libraries and APIs I'm going to use:

  1. React.js
  2. Leaflet.js ( and React-Leaflet.js (
  3. Open Disease Data

Things I've done so far:

  • Created project with npx create-react-app covid-map
  • Installed leaflet and react-leaflet with yarn add leaflet react-leaflet
  • Added MapContainer and Marker with Popup to Map component

Problems I've encountered so far:

  1. After installing leaflet and react-leaflet, even though I copied the example code from react-leaflet website, the map looked weird. It turned out that I needed to import CSS from node_modules like that: import "leaflet/dist/leaflet.css"
  2. I had a problem with displaying the Marker icon. Instead of the icon, I could only see a broken image. I found a piece of code that supposed to help:
import * as L from 'leaflet'
delete L.Icon.Default.prototype_getIconUrl;
      iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
      iconUrl: require("leaflet/dist/images/marker-icon.png"),
      shadowUrl: require("leaflet/dist/images/marker-shadow.png")
Enter fullscreen mode Exit fullscreen mode

But I couldn't make it work.

My solution

Instead, I used an icon from a small repo:

import * as L from 'leaflet'

const redIcon = new L.Icon({
  iconUrl: '',
  shadowUrl: '',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]

<Marker icon={redIcon}><Marker>
Enter fullscreen mode Exit fullscreen mode

I'm not sure yet if I use that icon in the project to the end.

Alt Text

Next step(s):

  • Fetch data from the API.
  • Add markers to all countries included in the Open Disease Data API for covid.
  • Add information about the number of Covid-19 cases and deaths to popup.

Top comments (4)

carlosrafael22 profile image
Rafael Leitão

Nice post, Magda! Documenting your journey in this project and also giving solutions to problems you faced will certainly help people doing similar projects :)

makneta profile image
Magda Rosłaniec

Thank you.

thehalfbloodprince profile image

This is awesome! I was also planning to make something such related to covid... I really like your idea though about statistics popping up on the map... Really looking forward for your next post

makneta profile image
Magda Rosłaniec

Thanks. In fact, I have 2 more posts already written:
Part 2:
and part 3: