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

covid-19 data on mapbox


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 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",

mapbox css added in angular file

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

NgxMapboxGLModule.withConfig({

accessToken: 'pk.eyJ1IjoibGF6eXBhbmRhdGVjaCIsImEiOiJja2Eycmhi2h6M2Z0Ym8ycGtlcXF2In0.w4lk2UZdjfrcJvS-JfuxJw',

(do not use this token, you need to use your own token)

geocoderAccessToken: ''

})

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

# Component.ts file 


bxMap: Map;

center = [-2.74, 35.38];

zoomLevel = [1.4];

styleUrl = 'mapbox://styles/mapbox/light-v9';


onLoad($event): void {

this.bxMap = $event;

this.bxMap.on('zoomend', (event) => {

const newZoom = this.bxMap.getZoom();

});

}


# HTML file


<mgl-map height='100%' width='100%' [style]="styleUrl" [zoom]="zoomLevel" [center]="center" [trackProximity]="true" (load)="onLoad($event)">

</mgl-map>

 

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

export class CovidDataService {

countryData = this.http.get<any>('./assets/countries.geo.json');


constructor(private http: HttpClient) { }


loadAllCountryData(): Observable<any> {

return forkJoin([this.countryData, this.getUpdatedCovidData()]);

}


getUpdatedCovidData(): Observable<any> {

return this.http.get<any>('https://api.thevirustracker.com/free-api?countryTotals=ALL').pipe(

pluck('countryitems'),

map(resp => {

return resp[0];

}));

}

}

 

 

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

data manipulation

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

create layer in map in mapbox

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

<mgl-map height='100%' width='100%' [style]="styleUrl" [zoom]="zoomLevel" [center]="center"

[trackProximity]="true" (load)="onLoad($event)">

<mgl-geojson-source id="highlighted" [data]='countriesData'></mgl-geojson-source>

<mgl-layer id="states-layer" type="fill" source="highlighted" [paint]="covidDataLayerPaint"

(click)="selectedStateFromMap($event)"></mgl-layer>

</mgl-map>

 

 

 

Demo Time:

 

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

Happy Coding!

- Lazy Panda Tech