Create COVID-19 tracker using Mapbox and Angular 9

In the current state, the world is completely affected by Novel Corona Virus(COVID-19) and most of us are in a lockdown state. There are many organizations and open source communities that are publishing day to day's data on COVID-19 and those are categorized as Total Active Cases, Total Number of cases, Recovery, and many. I have found some of the data sources which are letting me know about all the cognitive parameters to visualize the current statistics. I am utilizing those parameters and given a visual effect on Mapbox based on the density of each parameter. In my experiment, I am not validating the data, rather I am more concentrating on some technical facts to build a basic Mapbox layer along with data configuration and data representation. 

Mapbox is one such platform to build beautiful user interactive maps and developer-friendly. Mapbox has a large developer community to solve your challenges. It has SDKs for mobile (iOS, Android) web (javascript), using that life will be easy to catch up business goals using the application.

Consuming COVID-19 data & geoJSON based world data as a REST API using Angular 9 and represents the density layer on Map based on different parameters like Active Cases, Total Cases, Recovery etc.

COVID-19 data on Mapbox map based on different parameter's Density

---

Get started:

Step 1:

You will need a Mapbox account and create a Mapbox token, which will be used in an angular application.

• Create Mapbox Account
• Create a token

---

Step 2:

Create an angular application, and installing Mapbox related libraries and CSS.

• Create an Angular application
  • ng new codiv-map-demo
• Install the map dependencies. 
  • npm i mapbox-gl ngx-mapbox-gl @types/mapbox-gl --save
• Open angular.json file and add the css files under styles block.

  • "./node_modules/mapbox-gl/dist/mapbox-gl.css",

    "./node_modules/@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css",

• Open style.scss file and import the mapbox css as well.

  • @import '../node_modules/mapbox-gl/dist/mapbox-gl.css';

• Create a new angular module, import map module, add the map token as well.

• Open your component file and corrosponding html file to add the following lines. 

 

• Run the application, you might get a build error due to a global error. (Uncaught ReferenceError: global is not defined)

• Please follow either solution 1 or solution 2.

  Solution 1: (In polyfill.ts file)

  (window as any).global = window

  Solution 2: (in terminal)

  npm i buffer && npx browserify -r buffer/ | npx babel-minify -c -m > buffer.min.js

• Run againg and you should see the map loaded into browser.

---

Step 3:

Configure your COVID-19 data and geoJSON. If you want to create geoJSON please check here.

Datasource to be used - 

 

So, after calling the REST API, you need to add the COVID data into country geoJson, property section. (Do not modify any other section instead property object).

Check forkJoin has been used to get subsequent API call and response data into one single subscription callback.

 

Create a method to set the data and draw a layer on map based on geoData - 

Draw geo data into map as a layer using interpolate exponential. Check mapbox style specification from here.

Now you are almost done,and last but not the least update your html with geoJSOn data source and layer identifire - 

 

Demo Time:

 

Hope you like it, queries and suggestions are always welcome in the comment section below.

Happy Coding!

- Lazy Panda Tech