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:
- React.js
- Leaflet.js (https://leafletjs.com/) and React-Leaflet.js (https://react-leaflet.js.org/)
- 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:
- 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"
- 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.
Top comments (4)
Nice post, Magda! Documenting your journey in this project and also giving solutions to problems you faced will certainly help people doing similar projects :)
Thank you.
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
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...