DEV Community

loading...
Cover image for Covid map - React project day 1.

Covid map - React project day 1.

Magda Rosłaniec
I want to create great Django apps. I like Python and CSSArt
Originally published at makneta.herokuapp.com Updated on ・2 min read

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")
    });
Enter fullscreen mode Exit fullscreen mode

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>
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.

Discussion (4)

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

Collapse
makneta profile image
Magda Rosłaniec Author

Thank you.

Collapse
thehalfbloodprince profile image
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

Collapse
makneta profile image
Magda Rosłaniec Author

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...