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.
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.
You will need a Mapbox account and create a Mapbox token, which will be used in an angular application.
Create an angular application, and installing Mapbox related libraries and CSS.
Create a new angular module, import map module, add the map token as well.
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
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 -
Hope you like it, queries and suggestions are always welcome in the comment section below.
- Lazy Panda Tech