Coding Journal

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.