Today in this article, we will see about how to create a Coronavirus dashboard using React with Gatsby and Leaflet.
Before get into the topic, let’s see what are the steps we are going to follow:
- Getting started with Leaflet.
- Fetching API data.
- Transform the data into geographic data format.
- Adding the data to the map.
Let’s get into the topic.
Getting Started with Leaflet
We are going to create application that uses an API containing Coronavirus statistics that the country is facing in real-time.
This map will show a marker for each country with the number of confirmed cases. And then we will include a little popup tooltip that shows the detail information.We are using the OpenStreetMap public tileserver. To get started follow the commands:
- node or yarn
- Gatsby’s CLI - yarn global add gatsby-cli
First we have to setup a foundation for our map. We can do this by using Leaflet Gatsby starter with React.
gatsby new my-coronavirus-map https://github.com/colbyfayock/gatsby-starter-leaflet
To create Gatsby map
And then navigate to your new project and start the development server.
#web-development #programming #react #javascript #nodejs