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 (https://leafletjs.com/) and React-Leaflet.js (https://react-leaflet.js.org/)
3. Open Disease Data https://disease.sh/

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;
 L.Icon.Default.mergeOptions({
      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")
    });

But I couldn't make it work.

My solution

Instead, I used an icon from a small repo: https://github.com/pointhi/leaflet-color-markers

import * as L from 'leaflet'


const redIcon = new L.Icon({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

<Marker icon={redIcon}><Marker>

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

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.

Comments

[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 :)

[Magda Rosłaniec]

Thank you.

[Manish]

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

[Magda Rosłaniec]

Thanks. In fact, I have 2 more posts already written:
Part 2: dev.to/makneta/covid-map-react-pro...
and part 3: dev.to/makneta/how-to-fetch-data-f...