Post
Ask Question

Indian COVID-19 Date-wise Tracker In Angular 10 And Material Design

Introduction


I have already published two articles about Covid-19 tracking applications on C# Corner. One application is used for tracking entire country-wise patient details and another application is used for tracking Indian state-wise and district-wise patient details. In this application, we will track the state-wise patient details for a particular date. We will display the Indian map, and user can click on any of the states and get the patient details of that particular state. We will also provide a dropdown list with all state names. User can choose any state and get the data of that state easily. We are using the free public API from https://api.covid19india.org/ in this application. This is a volunteer driven and crowd sourced database for Covid-19 patients in India.
 

Create Angular 10 Application using Angular CLI


We can create a new Angular application using Angular CLI using below command.
 
ng new covid19indiantracker
 
After created the new application and node modules, we can add material design to the application using below command. (Please change the current directory to new project. cd covid19indiantracker)
 
ng add @angular/material
 
 
 
We can choose the default theme and other default options for material design.
 
We need bootstrap package for styling our application along with angular material. Use below command to install bootstrap latest package.
 
npm install bootstrap
 
After completing the package installation, we can open the application in Visual Studio Code.
 
We must import the bootstrap library in style.css file. So that, bootstrap content will be accessible from entire application.
 
style.css
  1. @import "~bootstrap/dist/css/bootstrap.css";  
  2.   
  3. html, body {  
  4.     height: 100%;  
  5. }  
  6.   
  7. body {  
  8.     margin: 0;  
  9.     font-family: Roboto, "Helvetica Neue", sans-serif;  
  10.     overflow: hidden;  
  11. }  
We will be using a modal popup for showing the patient data. We can create a new component and service for modal popup using below command.
 
ng generate component Modal
 
ng generate service Modal\Modal
 
We must modify the name of the style class of modal component to modal.component.less instead of modal.component.css.
 
Modify the Modal service code with below code.
 
modal.service.ts
  1. import { Injectable } from '@angular/core';  
  2.   
  3. @Injectable({ providedIn: 'root' })  
  4. export class ModalService {  
  5.     private modals: any[] = [];  
  6.   
  7.     add(modal: any) {  
  8.         // add modal to array of active modals  
  9.         this.modals.push(modal);  
  10.     }  
  11.   
  12.     remove(id: string) {  
  13.         // remove modal from array of active modals  
  14.         this.modals = this.modals.filter(x => x.id !== id);  
  15.     }  
  16.   
  17.     open(id: string) {  
  18.         // open modal specified by id  
  19.         const modal = this.modals.find(x => x.id === id);  
  20.         modal.open();  
  21.     }  
  22.   
  23.     close(id: string) {  
  24.         // close modal specified by id  
  25.         const modal = this.modals.find(x => x.id === id);  
  26.         modal.close();  
  27.     }  
  28. }  
Modify the Modal component class file with below code.
 
modal.component.ts
  1. import { Component, ViewEncapsulation, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';  
  2.   
  3. import { ModalService } from './modal.service';  
  4.   
  5. @Component({   
  6.     selector: 'sw-modal',   
  7.     templateUrl: 'modal.component.html',   
  8.     styleUrls: ['modal.component.less'],  
  9.     encapsulation: ViewEncapsulation.None  
  10. })  
  11. export class ModalComponent implements OnInit, OnDestroy {  
  12.     @Input() id: string;  
  13.     private element: any;  
  14.   
  15.     constructor(private modalService: ModalService, private el: ElementRef) {  
  16.         this.element = el.nativeElement;  
  17.     }  
  18.   
  19.     ngOnInit(): void {  
  20.         // ensure id attribute exists  
  21.         if (!this.id) {  
  22.             console.error('modal must have an id');  
  23.             return;  
  24.         }  
  25.   
  26.         // move element to bottom of page (just before </body>) so it can be displayed above everything else  
  27.         document.body.appendChild(this.element);  
  28.   
  29.         // close modal on background click  
  30.         this.element.addEventListener('click', el => {  
  31.             if (el.target.className === 'sw-modal') {  
  32.                 this.close();  
  33.             }  
  34.         });  
  35.   
  36.         // add self (this modal instance) to the modal service so it's accessible from controllers  
  37.         this.modalService.add(this);  
  38.     }  
  39.   
  40.     // remove self from modal service when component is destroyed  
  41.     ngOnDestroy(): void {  
  42.         this.modalService.remove(this.id);  
  43.         this.element.remove();  
  44.     }  
  45.   
  46.     // open modal  
  47.     open(): void {  
  48.         this.element.style.display = 'block';  
  49.         document.body.classList.add('sw-modal-open');  
  50.     }  
  51.   
  52.     // close modal  
  53.     close(): void {  
  54.         this.element.style.display = 'none';  
  55.         document.body.classList.remove('sw-modal-open');  
  56.     }  
  57. }  
Modify the Modal component template file with below code.
 
modal.component.html
  1. <div class="sw-modal">  
  2.     <div class="sw-modal-body">  
  3.         <ng-content></ng-content>  
  4.     </div>  
  5. </div>  
  6. <div class="sw-modal-background"></div>  
Modify the Modal component style class file with below code.
 
modal.component.less
  1. /* MODAL STYLES 
  2. -------------------------------*/  
  3. sw-modal {  
  4.     /* modals are hidden by default */  
  5.     display: none;  
  6.   
  7.     .sw-modal {  
  8.         /* modal container fixed across whole screen */  
  9.         position: fixed;  
  10.         top: 20%;  
  11.         right: 0;  
  12.         bottom: 0;  
  13.         left: 0;  
  14.   
  15.         /* z-index must be higher than .sw-modal-background */  
  16.         z-index: 1000;  
  17.           
  18.         /* enables scrolling for tall modals */  
  19.         overflow: auto;  
  20.   
  21.         .sw-modal-body {  
  22.             padding: 20px;  
  23.             background: #fff;  
  24.   
  25.             /* margin exposes part of the modal background */  
  26.             margin: 40px;  
  27.             width: 350px;  
  28.             height: 300px;  
  29.         }  
  30.     }  
  31.   
  32.     .sw-modal-background {  
  33.         /* modal background fixed across whole screen */  
  34.         position: fixed;  
  35.         top: 0;  
  36.         right: 0;  
  37.         bottom: 0;  
  38.         left: 0;  
  39.   
  40.         /* semi-transparent black  */  
  41.         background-color: #000;  
  42.         opacity: 0.75;  
  43.           
  44.         /* z-index must be below .sw-modal and above everything else  */  
  45.         z-index: 900;  
  46.     }  
  47. }  
  48.   
  49. body.sw-modal-open {  
  50.     /* body overflow is hidden to hide main scrollbar when modal window is open */  
  51.     overflow: hidden;  
  52. }  
We must import some modules to App module for Angular material and Date pipe (we are using this pipe for date validation)
 
app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppComponent } from './app.component';  
  5. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  6.   
  7. import { HttpClientModule } from '@angular/common/http'  
  8. import { FormsModule } from '@angular/forms';  
  9. import { MatDatepickerModule } from '@angular/material/datepicker';  
  10. import { MatFormFieldModule } from '@angular/material/form-field';  
  11. import { MatNativeDateModule } from '@angular/material/core';  
  12. import { MatCheckboxModule } from '@angular/material/checkbox';  
  13. import { MatSelectModule } from '@angular/material/select';    
  14.   
  15. import { DatePipe } from '@angular/common';  
  16.   
  17. import { ModalComponent } from './modal/modal.component';  
  18.   
  19. @NgModule({  
  20.   declarations: [  
  21.     AppComponent,  
  22.     ModalComponent  
  23.   ],  
  24.   imports: [  
  25.     BrowserModule,  
  26.     BrowserAnimationsModule,  
  27.     FormsModule,  
  28.     HttpClientModule,  
  29.     MatFormFieldModule,  
  30.     MatDatepickerModule,  
  31.     MatNativeDateModule,  
  32.     MatCheckboxModule,  
  33.     MatSelectModule  
  34.   ],  
  35.   providers: [DatePipe],  
  36.   bootstrap: [AppComponent]  
  37. })  
  38. export class AppModule { }  
We can create a new service for fetching the data from public API.
 
ng generate service Data
 
Modify the service with below code.
 
data.service.ts
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient } from '@angular/common/http'  
  3. import { Observable } from 'rxjs';  
  4. import { map } from 'rxjs/operators';  
  5. @Injectable({  
  6.   providedIn: 'root'  
  7. })  
  8. export class DataService {  
  9.   
  10.   constructor(private http: HttpClient) { }  
  11.   
  12.   private states: any = [  
  13.     {  
  14.       "key": "AN",  
  15.       "name": "Andaman and Nicobar Islands"  
  16.     },  
  17.     {  
  18.       "key": "AP",  
  19.       "name": "Andhra Pradesh"  
  20.     },  
  21.     {  
  22.       "key": "AR",  
  23.       "name": "Arunachal Pradesh"  
  24.     },  
  25.     {  
  26.       "key": "AS",  
  27.       "name": "Assam"  
  28.     },  
  29.     {  
  30.       "key": "BR",  
  31.       "name": "Bihar"  
  32.     },  
  33.     {  
  34.       "key": "CH",  
  35.       "name": "Chandigarh"  
  36.     },  
  37.     {  
  38.       "key": "CH",  
  39.       "name": "Chhattisgarh"  
  40.     },  
  41.     {  
  42.       "key": "DN",  
  43.       "name": "Dadra and Nagar Haveli"  
  44.     },  
  45.     {  
  46.       "key": "DL",  
  47.       "name": "Delhi"  
  48.     },  
  49.     {  
  50.       "key": "GA",  
  51.       "name": "Goa"  
  52.     },  
  53.     {  
  54.       "key": "GJ",  
  55.       "name": "Gujarat"  
  56.     },  
  57.     {  
  58.       "key": "HR",  
  59.       "name": "Haryana"  
  60.     },  
  61.     {  
  62.       "key": "HP",  
  63.       "name": "Himachal Pradesh"  
  64.     },  
  65.     {  
  66.       "key": "JK",  
  67.       "name": "Jammu and Kashmir"  
  68.     },  
  69.     {  
  70.       "key": "JH",  
  71.       "name": "Jharkhand"  
  72.     },  
  73.     {  
  74.       "key": "KA",  
  75.       "name": "Karnataka"  
  76.     },  
  77.     {  
  78.       "key": "KL",  
  79.       "name": "Kerala"  
  80.     },  
  81.     {  
  82.       "key": "LA",  
  83.       "name": "Ladakh"  
  84.     },  
  85.     {  
  86.       "key": "LD",  
  87.       "name": "Lakshadweep"  
  88.     },  
  89.     {  
  90.       "key": "MP",  
  91.       "name": "Madhya Pradesh"  
  92.     },  
  93.     {  
  94.       "key": "MH",  
  95.       "name": "Maharashtra"  
  96.     },  
  97.     {  
  98.       "key": "MN",  
  99.       "name": "Manipur"  
  100.     },  
  101.     {  
  102.       "key": "ML",  
  103.       "name": "Meghalaya"  
  104.     },  
  105.     {  
  106.       "key": "MZ",  
  107.       "name": "Mizoram"  
  108.     },  
  109.     {  
  110.       "key": "NL",  
  111.       "name": "Nagaland"  
  112.     },  
  113.     {  
  114.       "key": "OR",  
  115.       "name": "Odisha"  
  116.     },  
  117.     {  
  118.       "key": "PY",  
  119.       "name": "Puducherry"  
  120.     },  
  121.     {  
  122.       "key": "PB",  
  123.       "name": "Punjab"  
  124.     },  
  125.     {  
  126.       "key": "RJ",  
  127.       "name": "Rajasthan"  
  128.     },  
  129.     {  
  130.       "key": "SK",  
  131.       "name": "Sikkim"  
  132.     },  
  133.     {  
  134.       "key": "TN",  
  135.       "name": "Tamil Nadu"  
  136.     },  
  137.     {  
  138.       "key": "TG",  
  139.       "name": "Telangana"  
  140.     },  
  141.     {  
  142.       "key": "TR",  
  143.       "name": "Tripura"  
  144.     },  
  145.     {  
  146.       "key": "UP",  
  147.       "name": "Uttar Pradesh"  
  148.     },  
  149.     {  
  150.       "key": "UT",  
  151.       "name": "Uttarakhand"  
  152.     },  
  153.     {  
  154.       "key": "WB",  
  155.       "name": "West Bengal"  
  156.     }  
  157.   ]  
  158.   
  159.   getStateData(date: string): Observable<any> {  
  160.     let url = `https://api.covid19india.org/v4/min/data${date}.min.json`  
  161.     return this.http.get(url).pipe(  
  162.       map(response => {  
  163.         return response;  
  164.       })  
  165.     );  
  166.   }  
  167.   
  168.   getStates(): any {  
  169.     return this.states;  
  170.   }  
  171. }  
We have also created a dictionary for state name with state code in above service. We will be using this dictionary data to search state data.
 
We can add logic to populate the state-wise data in App component file.
 
app.component.ts
  1. import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';  
  2. import { DatePipe } from '@angular/common';  
  3. import { DataService } from './data.service'  
  4. import { ModalService } from './modal/modal.service';  
  5.   
  6. @Component({  
  7.   selector: 'app-root',  
  8.   templateUrl: './app.component.html',  
  9.   styleUrls: ['./app.component.css']  
  10. })  
  11. export class AppComponent implements OnInit {  
  12.   
  13.   constructor(  
  14.     private service: DataService,  
  15.     private datepipe: DatePipe,  
  16.     private modalService: ModalService) { }  
  17.   
  18.   title = 'covid19indiantracker';  
  19.   isMobileVersion: boolean;  
  20.   date: Date;  
  21.   stateWiseData: any;  
  22.   stateName: string;  
  23.   selectedState: any;  
  24.   states: any;  
  25.   population: number;  
  26.   totalTested: number;  
  27.   deltaTested: number;  
  28.   totalConfirmed: number;  
  29.   deltaConfirmed: number;  
  30.   totalRecovered: number;  
  31.   deltaRecovered: number;  
  32.   totalDeceased: number;  
  33.   deltaDeceased: number;  
  34.   totalMigrated: number;  
  35.   
  36.   @ViewChild('btnShowModal', { static: false }) btnShowModal: ElementRef<HTMLElement>;  
  37.   
  38.   ngOnInit() {  
  39.     this.selectedState = null;  
  40.     this.date = new Date();  
  41.     this.getStateData('');  
  42.     this.getStates();  
  43.   }  
  44.   
  45.   openModal(id: string) {  
  46.     this.modalService.open(id);  
  47.   }  
  48.   
  49.   closeModal(id: string) {  
  50.     this.modalService.close(id);  
  51.   }  
  52.   
  53.   getStates() {  
  54.     this.states = this.service.getStates()  
  55.   }  
  56.   
  57.   getStateData(date: string) {  
  58.     let value = (date == '') ? '' : '-' + date;  
  59.     this.service.getStateData(value).subscribe(  
  60.       response => {  
  61.         this.stateWiseData = response;  
  62.       }, error => {  
  63.         this.date = new Date();  
  64.         this.getStateData('');  
  65.       }  
  66.     );  
  67.   }  
  68.   
  69.   dateChanged() {  
  70.     this.selectedState = null;  
  71.     if (this.date > new Date()) {  
  72.       this.getStateData('');  
  73.     }  
  74.     else if (this.datepipe.transform(this.date, 'yyyy-MM-dd') == this.datepipe.transform(new Date(), 'yyyy-MM-dd')) {  
  75.       this.getStateData('');  
  76.     }  
  77.     else {  
  78.       this.getStateData(this.datepipe.transform(this.date, 'yyyy-MM-dd'));  
  79.     }  
  80.   }  
  81.   
  82.   postDateFilter = (dt: Date): boolean => {  
  83.     return dt <= new Date() && dt > new Date('2020-03-01');  
  84.   }  
  85.   
  86.   onStateSelected() {  
  87.     this.stateName = this.states.find(x => x.key == this.selectedState.key).name;  
  88.     var data = this.stateWiseData[this.selectedState.key];  
  89.     this.population = (data?.meta?.population == undefined) ? 0 : data?.meta?.population;  
  90.     this.totalTested = (data?.total?.tested == undefined) ? 0 : data?.total?.tested;  
  91.     this.deltaTested = data?.delta?.tested;  
  92.     this.totalConfirmed = (data?.total?.confirmed == undefined) ? 0 : data?.total?.confirmed;  
  93.     this.deltaConfirmed = data?.delta?.confirmed;  
  94.     this.totalRecovered = (data?.total?.recovered == undefined) ? 0 : data?.total?.recovered;  
  95.     this.deltaRecovered = data?.delta?.recovered;  
  96.     this.totalDeceased = (data?.total?.deceased == undefined) ? 0 : data?.total?.deceased;  
  97.     this.deltaDeceased = data?.delta?.deceased;  
  98.     this.totalMigrated = (data?.total?.migrated == undefined) ? 0 : data?.total?.migrated;  
  99.   }  
  100.   
  101.   report(stateCode: string, stateName: string) {  
  102.     this.selectedState = null;  
  103.     this.stateName = stateName;  
  104.     var data = this.stateWiseData[stateCode];  
  105.     this.population = (data?.meta?.population == undefined) ? 0 : data?.meta?.population;  
  106.     this.totalTested = (data?.total?.tested == undefined) ? 0 : data?.total?.tested;  
  107.     this.deltaTested = data?.delta?.tested;  
  108.     this.totalConfirmed = (data?.total?.confirmed == undefined) ? 0 : data?.total?.confirmed;  
  109.     this.deltaConfirmed = data?.delta?.confirmed;  
  110.     this.totalRecovered = (data?.total?.recovered == undefined) ? 0 : data?.total?.recovered;  
  111.     this.deltaRecovered = data?.delta?.recovered;  
  112.     this.totalDeceased = (data?.total?.deceased == undefined) ? 0 : data?.total?.deceased;  
  113.     this.deltaDeceased = data?.delta?.deceased;  
  114.     this.totalMigrated = (data?.total?.migrated == undefined) ? 0 : data?.total?.migrated;  
  115.     let el: HTMLElement = this.btnShowModal.nativeElement;  
  116.     el.click();  
  117.   }  
  118. }  
The public API provides the historical data from March 2nd onwards only. Hence, I have restricted the date picker from March 2nd to current date using below logic.
 
postDateFilter
  1. postDateFilter = (dt: Date): boolean => {  
  2.     return dt <= new Date() && dt > new Date('2020-03-01');  
  3.   }  
Usually, it will take some time to update the yesterday date details in API. It will throw an error from the API. I have used below logic to catch the error. If an error occurs from the API, application will change the date to today date and show the current data.
 
getStateData
  1. getStateData(date: string) {  
  2.   let value = (date == '') ? '' : '-' + date;  
  3.   this.service.getStateData(value).subscribe(  
  4.     response => {  
  5.       this.stateWiseData = response;  
  6.     }, error => {  
  7.       this.date = new Date();  
  8.       this.getStateData('');  
  9.     }  
  10.   );  
  11. }  
All other logic in the App component are very straight forward and easily understandable.
 
We can modify the template file with below code.
 
app.component.html
  1. <div class="row margin-class" style="margin: 5px;">  
  2. </div>  
  3. <div class="row margin-class">  
  4.   <div class="col-3">  
  5.     <label>  
  6.       <h5><span class="badge badge-secondary">Choose a Date</span></h5>  
  7.     </label>  
  8.     <label>  </label>  
  9.     <input matInput [matDatepicker]="datevalue" name="datevalue" [(ngModel)]="date" placeholder="Choose a date"  
  10.       (dateChange)="dateChanged()" [matDatepickerFilter]="postDateFilter">  
  11.     <mat-datepicker-toggle [for]="datevalue"></mat-datepicker-toggle>  
  12.     <mat-datepicker #datevalue></mat-datepicker>  
  13.   </div>  
  14.   <div class="col-2">  
  15.     <mat-checkbox class="example-margin" [(ngModel)]="isMobileVersion">Mobile View  </mat-checkbox>  
  16.     <img src="../assets/2659980.png" class="img">  
  17.     <h5><span class="badge badge-primary">Covid-19 Tracker By Sarathlal</span></h5>  
  18.   </div>  
  19. </div>  
  20. <div class="row margin-class">  
  21.   <div class="col-6">  
  22.     <div>  
  23.       <img src="../assets/india-map-img.png" alt="Covid-19 Tracker by Sarathlal" usemap="#Map" />  
  24.       <map id="Map" name="Map" style="cursor: pointer;">  
  25.         <area id="jammuKashmir" shape="poly" data-toggle="tooltip"  
  26.           coords="169,77,166,73,162,69,160,65,155,62,150,57,147,53,146,47,143,43,139,45,133,43,129,41,125,39,119,41,117,45,112,46,113,51,115,56,115,61,115,66,115,72,117,75,122,77,127,80,131,82,132,86,137,87,141,90,146,91,150,87,150,83,155,81,159,77,163,76"  
  27.           (click)="report('JK','Jammu & Kashmir');" title="Jammu & Kashmir" alt="Jammu & Kashmir">  
  28.         <area id="ladakh" shape="poly"  
  29.           coords="125,36,121,33,120,31,121,28,117,28,113,25,111,22,104,21,102,16,105,12,111,9,114,5,120,5,124,5,128,3,135,2,142,2,148,3,150,7,155,7,155,12,159,16,165,18,169,19,169,24,174,27,179,29,179,34,185,32,190,32,196,30,200,27,205,28,209,28,213,24,215,29,221,29,225,32,226,37,226,44,223,49,219,51,215,54,215,59,212,62,205,62,206,67,204,71,204,76,211,77,210,81,211,85,214,89,208,91,203,95,199,88,198,89,195,91,196,95,192,93,190,92,193,88,189,87,187,88,185,86,185,84,182,83,178,83,173,82,171,81,168,77,167,74,165,72,162,68,159,65,156,63,152,59,149,55,147,50,145,45,140,45,137,46,132,44,127,41,126,38"  
  30.           title="Ladakh" (click)="report('LA','Ladakh')" alt="Ladakh">  
  31.         <area id="himachalPradesh" shape="poly"  
  32.           coords="145,95,150,105,154,111,159,113,160,118,164,120,170,126,169,127,169,129,175,132,178,131,179,127,182,119,187,117,195,117,199,118,201,115,199,111,199,108,197,100,195,95,193,92,191,88,186,88,185,87,184,83,178,83,173,83,168,80,164,77,156,79,152,81,150,87,146,90,145,94,145,97"  
  33.           title="Himachal Pradesh" (click)="report('HP','Himachal Pradesh')" alt="Himachal Pradesh">  
  34.         <area id="punjab" title="Punjab" shape="poly" alt="Punjab" (click)="report('PB','Punjab')"  
  35.           coords="123,119,116,126,115,131,117,136,121,137,125,138,127,138,132,139,134,141,134,143,135,147,137,146,138,144,140,143,147,142,150,143,151,143,153,140,153,137,157,135,162,132,164,130,165,127,159,125,163,121,160,116,158,112,153,111,152,107,149,105,149,100,147,97,145,92,141,93,140,96,134,96,131,98,127,101,127,108,125,111,127,112,128,113,127,116,123,117">  
  36.         <area id="uttarakhand" title="Uttarakhand" shape="poly" alt="Uttarakhand" (click)="report('UT','Uttarakhand')"  
  37.           coords="178,141,179,147,181,148,183,149,185,148,188,146,190,146,193,150,196,152,198,153,196,157,198,159,201,159,204,162,208,163,213,165,216,165,218,167,219,166,219,163,223,158,224,154,226,147,233,139,233,134,225,130,222,130,221,127,221,125,218,123,215,121,213,122,210,121,208,118,207,116,205,113,203,112,201,116,201,119,199,119,197,118,192,117,186,117,182,119,180,124,178,129,177,133,178,135,180,136,178,139">  
  38.         <area id="haryana" title="Haryana" shape="poly" alt="Haryana" (click)="report('HR','Haryana')"  
  39.           coords="123,142,124,146,124,149,125,150,128,150,131,151,132,152,137,152,139,158,139,164,142,169,145,170,147,174,147,180,149,182,152,177,153,175,156,178,160,176,164,176,162,182,162,184,169,183,173,178,172,175,169,170,165,168,163,167,162,164,164,162,166,161,166,155,166,150,167,144,168,141,172,137,175,135,176,133,174,131,170,131,169,127,167,124,173,131,165,126,163,124,165,127,165,129,163,131,160,133,159,135,155,135,152,137,152,141,151,143,148,142,144,142,139,143,137,145,134,145,133,141,130,138,125,137,122,139,122,141">  
  40.         <area id="National" title="National Capital Territory of Delhi" shape="poly"  
  41.           alt="National Capital Territory of Delhi" (click)="report('DL','Delhi')"  
  42.           coords="164,164,163,167,165,169,167,170,169,169,169,167,169,165,168,164,166,161,163,162">  
  43.         <area id="uttarPradesh" title="Uttar Pradesh" shape="poly" alt="Uttar Pradesh"  
  44.           (click)="report('UP','Uttar Pradesh')"  
  45.           coords="168,143,167,152,166,162,169,165,169,167,169,170,171,174,173,177,173,181,171,183,170,187,171,191,173,193,175,194,173,199,170,203,174,200,176,198,178,200,182,200,185,202,191,202,196,204,198,209,199,211,197,217,185,229,185,236,182,245,192,253,196,250,193,241,188,231,193,231,200,234,208,236,213,235,215,233,220,231,221,234,220,237,222,238,226,237,229,237,230,239,231,240,234,239,238,238,240,236,243,236,246,239,249,242,254,245,256,246,259,246,263,246,264,250,264,255,263,257,265,261,268,262,271,260,273,257,274,253,275,249,277,247,275,244,273,240,274,236,277,234,281,231,284,230,285,228,290,227,294,227,296,226,294,224,290,222,287,220,285,217,288,215,285,212,284,210,287,209,291,208,291,208,289,205,287,203,284,200,282,194,280,192,275,192,274,194,272,193,268,191,264,190,262,187,257,186,251,184,245,182,241,179,238,176,237,173,231,170,227,167,222,167,217,168,211,165,206,164,199,160,196,157,196,155,195,152,191,148,188,146,184,147,182,149,178,146,177,142,179,139,179,137,177,134,175,135,174,138,171,139">  
  46.         <area id="rajasthan" title="Rajasthan" shape="poly" alt="Rajasthan" (click)="report('RJ','Rajasthan')"  
  47.           coords="79,167,76,173,69,173,63,174,58,176,55,174,54,171,54,168,47,171,40,178,38,180,36,182,33,186,33,190,36,194,40,195,44,196,44,201,41,206,43,211,44,212,47,212,49,212,51,217,51,219,56,229,57,231,60,234,65,236,71,237,73,237,77,238,83,241,87,243,92,243,95,243,93,247,92,248,95,251,97,251,98,254,97,255,96,256,99,258,99,261,102,264,106,266,108,268,110,270,114,271,117,269,117,268,116,267,116,265,119,263,121,262,122,258,123,254,122,249,121,246,121,242,123,239,125,237,129,234,131,233,131,236,129,239,130,240,135,240,138,241,139,241,141,243,141,246,138,247,139,250,140,253,137,254,133,255,134,258,137,258,141,255,144,253,146,251,149,250,154,251,156,252,159,253,159,251,158,248,158,246,162,246,162,245,162,243,160,240,160,236,164,236,167,236,169,233,168,229,161,230,158,230,157,230,155,228,154,224,153,221,157,219,160,217,161,215,165,213,169,211,172,209,176,208,180,206,181,205,183,204,183,202,181,201,177,200,173,202,171,204,169,203,170,200,172,199,172,197,173,195,172,192,170,190,170,187,170,184,166,186,163,186,161,186,161,184,162,182,162,179,162,176,160,177,158,179,157,180,155,178,154,177,152,179,151,181,150,183,150,184,148,183,146,181,146,179,146,177,145,173,144,171,142,169,140,168,139,165,138,162,138,158,137,155,136,154,133,153,130,152,127,151,123,151,124,148,123,145,122,142,121,139,118,138,117,136,115,134,112,135,109,136,106,135,104,139,103,145,100,150,98,153,93,156,88,157,85,159,83,162,81,165">  
  48.         <area id="gujarat" title="Gujarat" shape="poly" alt="Gujarat" (click)="report('GJ','Gujarat')"  
  49.           coords="7,254,10,258,12,261,15,263,16,265,19,266,21,267,25,268,29,268,31,268,35,268,37,266,40,264,42,263,44,264,43,266,41,269,41,270,40,272,38,274,36,274,33,274,31,275,29,277,27,278,23,278,21,278,19,278,18,276,15,275,13,275,13,278,17,283,18,285,23,291,25,292,26,294,28,297,30,299,31,300,32,301,37,306,39,308,40,309,42,310,46,306,53,308,51,310,53,310,55,310,57,309,59,308,62,306,64,306,68,304,70,303,72,301,73,299,73,297,74,294,74,291,74,288,75,285,77,284,78,283,80,283,80,288,79,293,79,296,81,297,83,297,80,301,79,304,87,312,83,312,82,315,80,319,83,320,84,320,85,321,86,319,86,319,86,320,87,320,89,321,90,321,90,318,90,315,93,317,95,318,96,318,99,317,100,315,100,312,99,310,97,308,98,307,100,306,102,304,105,303,107,302,106,301,102,301,101,301,100,299,100,297,103,294,105,294,105,292,105,290,105,287,105,285,107,284,108,283,107,283,107,281,110,280,111,279,113,278,113,277,113,276,111,273,110,270,107,268,107,266,103,265,101,264,98,260,98,258,96,256,97,254,98,252,95,251,92,250,92,248,94,246,94,243,90,242,88,244,85,243,82,240,77,238,74,237,68,237,64,236,59,235,57,235,57,237,58,239,58,240,56,240,54,242,52,243,51,243,49,242,49,241,49,239,47,238,43,238,42,239,40,240,38,241,35,241,32,241,32,241,30,239,26,239,23,238,20,238,18,238,17,237,14,237,14,239,13,242,13,243,10,243,7,243,5,242,3,243,1,245,0,247,0,248,0,250,2,250,4,250,5,250,7,251,7,252">  
  50.         <area id="madhyaPradesh" title="Madhya Pradesh" shape="poly" alt="Madhya Pradesh"  
  51.           (click)="report('MP','Madhya Pradesh')"  
  52.           coords="159,218,154,222,155,228,156,229,162,230,164,230,167,229,168,230,169,233,169,235,166,236,161,236,160,236,159,239,160,241,161,242,162,243,162,245,162,247,160,247,158,247,157,251,158,253,156,254,154,252,151,251,148,251,145,252,143,254,140,257,137,258,134,258,133,255,133,254,136,254,138,254,139,254,139,251,139,249,140,246,141,244,141,242,138,241,134,241,131,240,129,239,130,236,131,234,128,233,126,237,124,239,121,241,120,243,120,246,121,250,122,253,122,256,122,259,122,261,120,263,118,264,118,268,117,269,115,270,115,271,112,271,111,273,112,275,113,276,113,278,111,280,107,282,106,282,108,284,107,286,105,288,106,290,106,293,106,294,107,294,108,294,110,293,111,293,113,294,114,297,114,299,114,300,117,300,119,300,121,300,124,303,125,304,128,305,130,305,133,305,135,305,138,305,139,306,141,307,141,309,143,311,145,311,147,311,149,310,151,307,152,305,153,303,155,302,157,301,160,301,162,301,164,300,167,302,166,304,165,305,165,307,168,307,171,307,173,307,176,306,179,305,182,303,185,304,187,306,189,306,191,307,192,306,195,305,197,304,199,304,201,305,204,306,207,306,210,306,212,306,215,306,218,307,221,310,222,311,223,311,224,310,225,306,225,303,226,299,228,297,230,295,232,293,232,291,233,289,235,288,238,288,240,287,242,286,245,283,247,281,248,278,250,277,251,276,251,274,250,272,248,270,246,269,242,268,242,267,243,265,243,264,243,262,246,261,250,262,253,262,256,264,258,264,260,262,260,261,262,261,263,261,263,260,263,256,263,253,263,250,263,248,261,246,258,246,256,246,253,246,250,243,248,241,244,238,241,237,238,237,236,239,233,240,229,239,228,238,225,238,222,239,220,239,220,237,220,236,221,234,219,233,218,233,215,234,212,236,209,236,204,236,201,236,198,235,194,233,191,232,191,233,191,236,192,239,193,241,193,243,194,245,195,246,196,248,197,250,196,252,194,253,192,253,191,252,189,251,187,249,186,251,185,251,183,249,182,246,181,242,182,240,183,239,184,237,184,234,185,231,185,228,188,225,190,225,191,223,193,222,195,220,196,218,198,213,198,211,198,209,197,207,195,205,192,204,189,204,187,204,184,204,181,206,179,207,174,208,170,210,167,211,161,215,161,216">  
  53.         <area id="bihar" title="Bihar" shape="poly" alt="Bihar" (click)="report('BR','Bihar')"  
  54.           coords="280,232,274,237,273,238,273,241,275,243,276,245,276,247,277,250,279,251,281,252,283,251,285,250,286,250,287,252,289,252,291,251,292,253,292,255,294,256,296,255,299,253,301,252,303,254,305,254,309,252,313,251,314,249,317,247,320,246,323,248,324,251,325,253,327,254,329,254,330,251,333,250,336,250,338,248,339,245,340,241,342,238,346,236,348,235,351,236,352,236,351,232,354,230,357,228,354,225,351,222,353,218,356,216,357,215,358,213,358,208,353,212,351,212,345,212,342,213,340,210,336,210,331,211,323,208,319,208,317,208,314,208,315,205,314,204,310,205,308,205,305,203,302,202,300,202,298,200,297,196,296,194,295,194,291,192,288,191,284,191,282,193,282,195,283,199,284,201,286,203,289,205,290,206,291,208,290,209,286,210,285,211,287,213,287,215,286,217,288,220,290,222,293,224,294,224,295,226,294,228,290,227,287,228,285,230,282,230">  
  55.         <area id="sikkim" title="Sikkim" shape="poly" alt="Sikkim" (click)="report('SK','Sikkim')"  
  56.           coords="357,186,355,194,355,196,356,198,358,199,360,198,361,198,363,197,366,196,367,196,369,196,370,194,369,192,368,189,369,187,370,184,369,179,368,178,366,177,362,179,359,180,357,181,357,184,356,187,356,190,355,191">  
  57.         <area id="westBengal" title="West Bengal" shape="poly" alt="West Bengal" (click)="report('WB','West Bengal')"  
  58.           coords="357,200,359,205,357,207,358,209,359,212,358,214,356,216,354,217,352,219,351,221,354,225,355,225,356,228,355,230,352,231,352,233,352,235,353,238,353,247,352,252,351,256,343,261,342,262,337,263,335,264,333,266,331,267,328,269,326,270,324,269,321,270,319,271,319,274,321,275,322,277,326,277,327,279,329,280,330,281,331,284,333,286,335,288,336,289,336,290,336,293,336,294,339,297,340,299,340,300,342,300,344,299,345,300,347,303,349,304,351,304,353,302,355,301,356,299,357,298,358,296,359,294,360,293,361,298,362,299,364,300,366,298,367,296,368,295,370,293,372,292,375,291,375,290,375,286,374,282,373,276,373,273,370,270,369,268,366,266,367,261,370,257,370,255,370,253,369,252,368,251,366,251,360,249,359,249,358,247,356,243,359,240,361,240,363,240,364,237,364,234,371,234,372,232,369,228,365,228,363,227,363,225,358,222,358,219,361,217,362,213,364,210,367,211,367,213,368,214,369,214,371,212,373,211,376,215,377,217,380,218,382,218,383,216,384,214,386,213,387,209,387,206,386,205,382,204,377,203,373,201,371,199,369,197,366,197,363,198,358,199">  
  59.         <area id="assam" title="Assam" shape="poly" alt="Assam" (click)="report('AS','Assam')"  
  60.           coords="388,206,388,213,388,216,388,219,388,221,388,224,388,227,389,226,390,223,392,221,393,221,394,221,398,219,402,220,405,220,407,220,409,222,411,223,414,224,415,222,417,221,418,219,420,219,422,219,425,218,429,218,431,218,429,221,429,223,433,224,436,224,438,226,439,228,440,231,437,232,436,235,436,237,436,238,435,239,433,242,432,245,430,247,430,249,431,250,433,251,435,252,437,251,438,248,439,246,440,246,441,246,443,245,445,243,446,239,446,237,449,233,450,231,450,229,450,227,449,225,451,221,454,219,455,218,457,219,458,219,459,216,459,213,460,210,462,208,466,204,468,203,472,201,474,199,476,197,479,194,481,192,483,192,485,190,488,189,491,187,491,183,490,180,489,179,489,177,487,177,481,177,476,179,472,181,469,183,465,185,463,186,461,188,459,191,458,194,456,196,453,198,447,199,444,200,439,200,438,200,436,199,433,200,430,201,426,202,422,202,416,203,409,204,405,204,402,204,401,203,399,202,398,201,396,201,394,202,392,203,389,204,388,204,387,205">  
  61.         <area id="meghalaya" title="Meghalaya" shape="poly" alt="Meghalaya" (click)="report('ML','Meghalaya')"  
  62.           coords="388,226,388,231,391,231,394,232,396,233,400,233,403,233,407,233,412,234,417,234,421,234,425,233,428,233,431,233,434,235,436,235,437,233,437,231,439,230,438,229,436,228,436,225,432,224,428,224,429,221,429,218,424,219,419,221,416,223,413,224,411,223,408,222,407,221,404,221,399,221,395,221,392,222,389,224">  
  63.         <area id="tripura" title="Tripura" shape="poly" alt="Tripura" (click)="report('TR','Tripura')"  
  64.           coords="416,256,414,260,414,262,416,265,416,267,416,271,416,273,418,271,418,269,420,270,420,272,420,274,421,275,423,275,424,274,425,272,424,269,425,267,426,265,426,263,426,261,428,260,429,262,431,261,432,260,432,258,432,255,431,252,428,248,425,250,425,252,423,252,421,253,420,254,418,254,418,254">  
  65.         <area id="mizoram" title="Mizoram" shape="poly" alt="Mizoram" (click)="report('MZ','Mizoram')"  
  66.           coords="433,252,433,259,434,263,435,268,435,271,435,274,436,276,437,278,438,280,439,283,440,286,440,289,440,291,442,291,443,290,445,291,446,293,448,293,448,289,450,288,451,287,451,286,451,283,450,279,449,275,448,273,451,272,453,273,453,271,454,268,454,265,454,262,453,260,452,257,452,254,450,252,447,252,445,251,444,249,444,247,442,246,440,246,437,249,436,250">  
  67.         <area id="arunachalPradesh" title="Arunachal Pradesh" shape="poly" alt="Arunachal Pradesh"  
  68.           (click)="report('AR','Arunachal Pradesh')"  
  69.           coords="418,184,419,189,420,189,422,190,425,189,426,190,426,192,426,194,426,196,427,197,428,199,428,200,432,200,436,199,438,198,440,198,443,199,448,198,451,198,455,196,457,195,458,192,461,189,462,186,465,185,468,183,472,182,476,180,478,179,480,178,484,177,486,176,488,175,490,175,491,177,490,180,490,181,490,182,491,184,492,186,493,187,494,188,495,188,499,187,502,186,503,185,504,184,507,185,509,186,510,187,512,188,513,188,514,188,513,185,511,182,509,181,508,179,509,177,510,175,512,174,513,173,516,172,516,171,516,169,515,166,513,164,511,164,509,165,507,165,504,163,502,163,500,164,498,166,496,165,497,161,499,160,501,158,501,156,499,154,496,152,495,154,494,156,492,152,494,150,496,149,494,147,491,147,489,146,487,147,482,149,481,153,481,154,479,154,475,153,471,153,469,152,466,151,463,152,460,154,459,156,455,160,454,161,452,163,451,163,447,164,445,164,444,167,442,169,440,172,438,174,437,175,437,177,436,179,435,180,429,182,424,183,420,184,418,183">  
  70.         <area id="nagaland" title="Nagaland" shape="poly" alt="Nagaland" (click)="report('NL','Nagaland')"  
  71.           coords="464,206,461,211,460,213,460,215,459,218,459,219,456,219,455,219,453,219,452,220,450,223,450,225,450,228,451,229,453,230,454,230,456,229,457,226,458,224,459,224,462,224,464,224,466,224,468,222,469,221,470,223,471,225,473,223,475,221,477,220,478,218,479,215,480,212,480,210,480,207,479,205,479,202,481,201,483,200,486,197,489,194,491,192,494,190,495,188,491,188,486,190,483,191,479,193,477,195,473,198,471,200,468,202,466,203,465,206">  
  72.         <area id="manipur" title="Manipur" shape="poly" alt="Manipur" (click)="report('MN','Manipur')"  
  73.           coords="448,236,445,242,445,243,445,245,444,246,443,247,444,249,445,251,447,252,449,252,451,251,452,250,453,251,455,251,456,251,458,250,460,251,462,251,463,251,464,253,465,253,466,253,467,251,468,249,468,246,469,243,470,241,471,239,472,237,473,235,474,233,474,231,474,230,473,229,472,227,472,224,469,223,468,223,465,224,462,224,458,224,457,225,456,227,456,229,455,230,453,230,452,229,451,229,450,231,449,232,449,233">  
  74.         <area id="jharkhand" title="Jharkhand" shape="poly" alt="Jharkhand" (click)="report('JH','Jharkhand')"  
  75.           coords="274,257,277,260,278,263,281,266,282,268,284,268,285,268,285,270,285,271,284,274,286,277,288,278,289,280,290,280,290,282,288,285,287,287,288,289,290,291,291,291,293,291,296,290,299,290,301,290,303,289,304,288,305,290,306,293,305,294,304,295,305,297,307,297,309,296,310,295,311,295,313,294,317,296,319,298,320,298,321,296,322,294,322,291,322,288,322,287,326,288,327,290,329,291,330,292,331,291,332,291,334,292,335,292,336,290,334,288,331,285,330,283,330,280,328,279,325,278,322,277,320,274,319,272,321,270,323,269,328,270,329,268,333,265,335,264,337,263,339,262,341,262,342,261,344,259,345,258,347,257,349,255,350,254,351,251,352,247,353,245,353,242,353,239,353,238,351,237,347,236,345,236,342,238,340,243,339,247,337,249,331,251,329,252,328,254,327,254,324,251,323,249,322,247,319,247,314,250,312,251,309,253,307,253,305,254,303,254,301,252,300,252,298,253,295,256,293,256,292,254,291,252,286,252,281,251,275,251,275,250,274,253,273,254,274,255">  
  76.         <area id="chhattisgarh" title="Chhattisgarh" shape="poly" alt="Chhattisgarh"  
  77.           (click)="report('CT','Chhattisgarh')"  
  78.           coords="231,295,225,302,225,305,225,309,224,311,223,314,219,315,221,319,222,323,221,324,223,328,222,329,219,331,218,333,220,334,221,335,220,338,220,340,222,340,223,341,224,343,226,345,227,347,226,349,225,350,222,349,221,348,218,350,216,352,216,354,217,358,215,359,215,361,215,362,217,362,220,363,221,363,223,367,224,370,225,371,226,372,227,373,228,378,229,379,231,379,233,378,234,378,235,375,236,372,237,370,238,369,240,368,242,367,244,365,245,364,246,362,248,359,249,357,250,355,250,352,250,350,249,347,247,345,248,344,248,342,246,339,244,337,244,335,246,334,249,335,250,336,251,338,252,337,253,338,254,339,257,339,259,339,259,340,260,337,259,335,256,335,254,334,255,331,256,329,254,325,254,322,254,320,254,318,255,318,257,318,258,317,259,315,259,313,261,313,264,313,266,313,267,313,269,313,270,312,271,310,273,307,275,303,277,302,277,299,277,298,277,297,276,295,279,293,282,292,284,291,285,289,286,287,287,286,288,285,289,283,289,280,288,278,287,277,286,276,285,275,285,273,285,270,285,268,284,268,282,267,280,266,279,264,278,262,276,260,276,259,275,258,272,259,271,260,270,262,269,262,267,262,266,261,265,261,264,261,262,261,261,262,260,263,258,264,257,264,254,263,253,263,251,262,248,262,245,262,243,263,242,265,242,266,242,267,244,267,247,269,248,270,250,271,251,273,251,274,251,276,250,278,248,280,244,283,242,286,240,288,238,288,234,288,233,289,232,290,230,293">  
  79.         <area id="Odisha" title="Odisha" shape="poly" alt="Odisha" (click)="report('OR','Odisha')"  
  80.           coords="269,313,264,313,261,313,260,313,259,314,259,316,258,318,255,319,254,322,253,325,254,327,255,329,255,332,254,334,255,335,258,335,260,336,260,338,260,340,258,340,256,339,253,338,251,337,249,336,248,335,245,335,244,336,245,338,247,340,247,341,248,342,248,345,250,350,250,351,250,354,250,356,250,357,249,359,248,362,247,363,242,367,241,369,238,370,237,371,235,374,235,376,234,378,234,379,237,379,240,378,242,378,244,377,245,376,247,375,250,375,251,376,252,375,253,372,253,371,254,368,255,366,257,367,257,369,258,371,259,370,261,368,262,368,263,369,265,369,267,367,267,366,265,363,267,361,271,360,273,358,276,355,281,357,281,359,282,360,283,360,285,361,287,362,289,361,291,360,292,359,293,357,295,356,296,355,297,355,300,352,302,351,303,349,306,340,313,337,313,337,315,340,320,340,323,339,325,339,327,338,328,337,329,335,330,333,331,332,332,331,332,331,335,331,332,330,333,330,333,325,334,320,338,320,340,322,340,321,340,319,339,317,338,315,337,313,337,311,339,309,340,309,343,308,346,307,347,307,348,306,349,305,349,303,346,302,344,300,343,300,341,300,340,299,338,296,336,295,335,293,335,293,335,293,331,292,330,292,327,290,326,289,324,287,322,294,321,298,320,299,319,299,318,297,315,295,313,295,312,294,309,295,308,296,307,297,305,298,303,296,304,295,304,293,305,292,305,290,304,288,303,288,299,290,296,290,293,291,289,291,288,290,286,288,286,288,285,290,284,291,281,292,279,293,277,294,276,296,276,299,275,302,274,305,273,308,272,310,273,311,271,312">  
  81.         <area id="maharashtra" title="Maharashtra" shape="poly" alt="Maharashtra" (click)="report('MH','Maharashtra')"  
  82.           coords="77,335,77,344,79,367,82,390,83,402,85,407,85,409,86,410,87,410,90,409,91,411,92,413,93,413,94,413,96,412,99,410,101,409,101,407,101,404,101,403,99,400,98,397,100,395,102,394,104,395,108,394,111,392,112,390,114,389,115,390,117,391,120,389,123,389,124,389,126,388,126,386,126,382,126,379,128,379,130,380,132,381,135,382,137,383,141,383,141,381,142,377,144,375,147,375,148,376,149,373,149,371,152,371,153,371,154,369,154,368,160,365,162,363,164,361,166,360,167,358,169,356,170,355,170,354,170,353,169,351,169,349,171,348,171,345,174,345,175,346,177,345,179,343,180,342,180,338,181,335,183,337,185,337,187,337,189,337,190,339,191,341,192,343,193,344,195,344,196,343,197,342,199,343,201,344,203,344,205,343,206,343,207,344,209,345,209,347,210,349,210,352,209,354,209,355,210,359,211,360,213,361,215,360,216,358,216,357,216,355,215,353,216,352,217,350,218,349,220,349,222,349,224,349,225,350,226,349,227,347,226,346,225,344,223,343,220,341,219,340,220,337,220,335,219,333,218,331,219,330,221,329,222,328,222,326,222,323,222,321,221,318,220,317,219,315,219,314,221,313,222,313,221,310,220,309,218,308,216,306,211,306,208,306,204,305,202,305,200,304,197,304,194,305,192,306,189,306,185,305,183,304,180,305,176,308,173,308,168,308,165,307,165,306,166,304,166,302,164,301,160,301,157,301,153,304,152,306,151,308,148,311,147,312,143,312,142,311,141,309,140,307,139,306,131,305,129,305,126,304,124,303,122,302,121,300,119,300,117,300,114,300,113,299,112,294,111,293,109,294,107,294,103,295,102,295,100,296,100,298,100,300,101,301,104,301,106,301,107,302,105,303,103,304,101,305,97,308,100,312,100,313,100,314,100,317,99,319,97,319,95,319,92,318,92,317,91,317,90,320,89,324,89,325,89,327,87,329,84,330,83,331,82,329,81,328,81,326,80,323,80,322,78,323,77,326,77,329,77,332,76,335">  
  83.         <area id="goa" title="Goa" shape="poly" alt="Goa" (click)="report('GA','Goa')"  
  84.           coords="87,412,91,419,92,424,93,427,93,428,93,429,95,427,96,426,97,425,97,423,97,421,97,420,97,417,97,415,97,413,96,413,94,413,92,413,91,412,90,411,88,410,87,410">  
  85.         <area id="karnataka" title="Karnataka" shape="poly" alt="Karnataka" (click)="report('KA','Karnataka')"  
  86.           coords="95,428,99,436,102,445,103,450,104,456,104,459,105,462,105,465,106,467,107,468,109,470,112,472,113,474,115,476,117,478,118,480,122,483,126,486,128,487,130,487,132,488,134,491,137,492,140,494,141,494,143,493,144,491,146,490,149,490,151,491,152,491,154,491,155,490,156,489,158,488,160,487,161,486,161,483,159,483,156,482,157,480,160,478,160,475,161,474,162,473,163,471,166,470,168,471,171,471,173,470,175,468,176,467,177,464,178,462,178,461,175,461,174,459,174,456,171,456,169,455,168,451,164,449,161,451,157,453,156,450,152,450,150,451,149,452,148,452,148,450,149,447,149,446,147,444,147,443,147,440,148,438,146,436,145,434,145,431,146,430,146,428,147,427,151,427,153,427,153,425,153,423,151,420,151,418,151,416,152,414,151,410,153,410,154,410,159,411,160,410,160,409,160,408,160,406,161,405,162,404,159,402,156,402,156,401,158,399,160,398,160,395,160,393,161,392,161,388,160,387,159,385,161,384,163,382,165,381,163,379,161,379,161,378,163,376,166,372,166,370,165,367,164,366,164,363,164,362,158,364,156,365,154,367,152,369,150,370,147,372,144,374,142,375,141,378,141,382,139,383,133,381,128,378,127,383,127,385,125,388,122,388,117,389,114,388,113,388,111,390,110,392,108,393,103,393,101,393,100,394,99,396,99,399,100,400,101,402,102,404,100,408,98,409,96,411,97,414,98,416,98,420,96,426">  
  87.         <area id="kerala" title="Kerala" shape="poly" alt="Kerala" (click)="report('KL','Kerala')"  
  88.           coords="118,490,125,497,124,506,128,520,129,523,132,528,134,530,135,535,135,537,134,538,133,539,133,541,134,545,140,555,142,557,145,560,146,562,147,562,147,560,148,558,148,557,148,555,148,553,148,551,149,549,148,546,149,542,150,541,152,538,152,537,149,537,148,535,149,531,150,528,151,524,150,522,146,523,144,524,142,520,143,517,143,513,143,511,140,510,138,508,139,507,140,506,139,505,135,504,135,503,136,501,135,500,132,496,134,495,135,493,127,490,125,489,122,487,119,484,117,481,114,477,111,474,107,471,109,477,109,478,110,481,111,483">  
  89.         <area id="tamilnadu" title="Tamilnadu" shape="poly" alt="Tamilnadu" (click)="report('TN','Tamilnadu')"  
  90.           coords="134,494,133,498,135,499,136,500,136,502,135,502,137,503,139,503,140,504,140,506,139,508,141,509,143,510,144,513,143,517,142,520,143,522,146,523,149,521,151,522,151,526,150,529,149,534,151,535,152,536,152,539,150,543,148,550,149,555,148,557,148,558,148,560,148,561,149,563,150,563,152,564,155,564,158,564,160,562,161,561,163,560,165,559,166,558,167,556,167,553,168,551,169,549,170,546,171,545,176,544,179,544,181,542,183,541,184,541,186,541,186,541,185,539,183,538,183,536,184,534,186,532,188,530,189,529,190,527,190,524,190,522,192,521,194,521,196,521,199,521,200,521,201,521,202,521,202,519,202,519,202,515,202,514,201,514,200,514,199,513,199,512,198,511,198,510,198,509,198,509,200,508,201,508,202,508,202,507,202,505,202,502,202,499,202,496,197,494,197,493,196,492,196,491,196,490,197,488,198,487,199,487,201,488,201,489,202,489,202,489,203,487,203,486,207,481,208,479,209,477,210,475,211,472,212,470,212,468,213,466,213,464,213,463,212,462,212,460,210,460,208,460,206,460,204,462,203,464,203,465,201,466,199,465,198,464,195,464,193,465,191,468,191,469,188,469,186,468,184,468,181,468,179,468,178,471,178,473,177,476,174,477,171,476,170,475,170,473,166,472,163,472,161,473,160,475,159,478,159,480,157,481,158,483,160,483,162,484,161,487,159,489,157,491,156,492,152,493,150,492,147,492,144,494,143,495,141,496,137,495,135,493">  
  91.         <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
  92.           (click)="report('PY','Puducherry')"  
  93.           coords="119,492,123,496,124,498,124,500,124,502,124,503,123,503,123,503,121,501,121,501,120,499,120,498,119,496,118,495,117,493,118,492">  
  94.         <area shape="poly" alt="Puducherry (Pondicherry)" alt="Puducherry (Pondicherry)"  
  95.           (click)="report('PY','Puducherry')"  
  96.           coords="201,509,198,512,199,514,200,515,202,515,203,514,203,513,203,511,203,509">  
  97.         <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
  98.           (click)="report('PY','Puducherry')"  
  99.           coords="198,488,196,491,196,492,197,493,198,495,199,496,200,497,201,497,202,496,203,494,203,492,202,490,201,488,200,488">  
  100.         <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
  101.           (click)="report('PY','Puducherry')"  
  102.           coords="249,395,248,398,248,401,248,404,250,403,252,402,253,400,254,398,254,396,254,394,254,392">  
  103.         <area title="Daman and Diu" shape="poly" alt="Daman and Diu" (click)="report('DD','Daman and Diu')"  
  104.           coords="80,305,83,308,84,311,82,313,82,315,81,313,81,310,80,307,80,304">  
  105.         <area title="Dadra and Nagar Haveli" shape="poly" alt="Dadra and Nagar Haveli"  
  106.           (click)="report('DN','Dadra and Nagar Haveli')"  
  107.           coords="79,322,81,326,81,328,82,329,82,330,84,330,85,330,86,329,87,328,88,327,89,326,89,324,89,322,89,321,88,320,87,320,85,320,82,320,81,320,79,320">  
  108.         <area title="Diu" shape="poly" alt="Diu" (click)="report('DD','Daman and Diu')"  
  109.           coords="46,307,43,310,43,311,44,311,46,311,48,311,50,311,51,311,52,310,52,309,49,308,48,307">  
  110.         <area title="Chandigarh" shape="poly" alt="Chandigarh" (click)="report('CH','Chandigarh')"  
  111.           coords="162,119,160,125,163,126,165,127,167,127,169,126,166,124,163,120">  
  112.         <area title="Lakshadweep" shape="poly" alt="Lakshadweep" (click)="report('LD','Lakshadweep')"  
  113.           coords="42,475,40,482,38,487,39,494,44,495,49,502,47,508,45,511,46,518,48,522,54,523,62,557,67,556,68,535,67,523,82,525,85,520,84,516,80,514,69,511,66,505,68,501,73,497,75,491,73,486,67,481,57,479,54,475,53,468,47,468,42,472">  
  114.         <area id="andamanNicobar" title="Andaman and Nicobar Islands" shape="poly" alt="Andaman and Nicobar Islands"  
  115.           (click)="report('AN','Andaman and Nicobar Islands')"  
  116.           coords="452,451,448,461,447,473,446,482,435,485,434,492,439,505,446,516,446,525,449,534,447,545,450,553,454,559,459,572,468,577,472,580,474,585,479,589,483,589,484,585,482,579,480,573,476,568,477,561,476,556,471,552,464,550,461,544,459,536,457,524,457,512,459,497,462,493,469,493,476,491,479,485,478,479,472,474,467,467,466,458,469,453,472,446,473,437,473,428,467,428,458,431,451,442,452,451">  
  117.         <area id="andhraPradesh" title="Andhra Pradesh" shape="poly" alt="Andhra Pradesh"  
  118.           (click)="report('AP','Andhra Pradesh')"  
  119.           coords="213,461,213,456,213,451,212,448,211,443,213,441,213,435,212,430,212,425,214,420,217,415,221,413,226,413,228,415,230,413,233,408,235,405,239,405,243,406,249,404,248,399,249,394,251,391,256,391,262,387,269,385,271,381,275,376,283,371,288,368,291,364,295,358,299,354,289,360,286,361,281,358,277,356,273,360,268,361,267,365,267,367,266,370,263,368,258,371,258,366,256,368,253,374,251,377,247,376,243,378,238,379,236,379,234,384,227,387,224,391,221,392,217,391,214,394,210,393,206,393,206,398,202,399,196,399,193,403,190,407,185,407,184,410,179,410,174,411,173,413,170,414,166,412,161,412,152,413,152,417,152,420,153,424,154,426,153,429,148,429,148,432,146,435,147,439,149,441,148,443,150,445,153,443,157,442,158,443,159,446,157,449,157,453,157,455,161,453,165,451,168,453,170,457,174,457,175,461,178,463,179,466,176,470,172,473,171,475,174,478,178,477,179,474,179,471,182,469,186,470,191,471,194,467,196,464,201,467,205,463,207,461">  
  120.         <area id="telangana" title="Telangana" shape="poly" alt="Telangana" (click)="report('TG','Telangana')"  
  121.           coords="181,336,185,337,188,339,192,343,195,345,197,343,200,344,203,345,206,343,210,346,210,352,209,357,211,361,216,363,220,363,222,367,225,372,227,373,228,378,233,379,236,379,235,383,231,385,226,388,221,393,218,391,214,393,210,392,206,394,203,398,197,400,193,400,190,406,186,408,182,408,178,411,173,412,171,414,167,413,162,412,159,412,161,406,163,405,157,404,160,400,160,397,162,391,161,389,159,388,165,382,161,380,163,376,166,375,167,371,165,368,163,365,163,362,168,357,170,354,170,353,169,347,172,345,176,347,178,344,181,340"></map>  
  122.     </div>  
  123.   </div>  
  124.   <div class="col-3" *ngIf="!isMobileVersion">  
  125.     <h5><span class="badge badge-secondary">Could not find your state in Map?</span></h5>  
  126.     <mat-form-field appearance="fill" style="width: 300px;">  
  127.       <mat-label>Choose your state from here</mat-label>  
  128.       <mat-select [(value)]="selectedState" (selectionChange)="onStateSelected()">  
  129.         <mat-option *ngFor="let state of states" [value]="state">{{state.name}}  
  130.         </mat-option>  
  131.       </mat-select>  
  132.     </mat-form-field>  
  133.     <div class="row margin-class" style="margin: 5px;">  
  134.     </div>  
  135.     <div *ngIf="selectedState!=null">  
  136.       <div class="row margin-class">  
  137.         <div>  
  138.           <h6>State :  </h6>  
  139.         </div>  
  140.         <div>  
  141.           <h5><span class="badge badge-secondary"> {{stateName}}</span></h5>  
  142.         </div>  
  143.       </div>  
  144.   
  145.       <div class="row margin-class">  
  146.         <div>  
  147.           <h6>As on Date :  </h6>  
  148.         </div>  
  149.         <div>  
  150.           <h6><span class="badge badge-secondary">{{date |date}}</span></h6>  
  151.         </div>  
  152.       </div>  
  153.   
  154.       <h6>Population : {{population | number}}</h6>  
  155.   
  156.       <div class="row margin-class">  
  157.         <div>  
  158.           <h6>Tested : {{totalTested | number}} </h6>  
  159.         </div>  
  160.         <div *ngIf="deltaTested != undefined && deltaTested > 0">  
  161.           <h6><span class="badge badge-info"> + {{deltaTested}}</span></h6>  
  162.         </div>  
  163.       </div>  
  164.   
  165.       <div class="row margin-class">  
  166.         <div>  
  167.           <h6>Confirmed : {{totalConfirmed | number}} </h6>  
  168.         </div>  
  169.         <div *ngIf="deltaConfirmed != undefined && deltaTested > 0">  
  170.           <h6><span class="badge badge-warning"> + {{deltaConfirmed | number}}</span></h6>  
  171.         </div>  
  172.       </div>  
  173.   
  174.       <div class="row margin-class">  
  175.         <div>  
  176.           <h6>Recovered : {{totalRecovered | number}} </h6>  
  177.         </div>  
  178.         <div *ngIf="deltaRecovered != undefined && deltaRecovered > 0">  
  179.           <h6><span class="badge badge-success"> + {{deltaRecovered | number}}</span></h6>  
  180.         </div>  
  181.       </div>  
  182.   
  183.       <div class="row margin-class">  
  184.         <div>  
  185.           <h6>Deceased : {{totalDeceased | number}} </h6>  
  186.         </div>  
  187.         <div *ngIf="deltaDeceased != undefined && deltaDeceased > 0">  
  188.           <h6><span class="badge badge-danger"> + {{deltaDeceased | number}}</span></h6>  
  189.         </div>  
  190.       </div>  
  191.   
  192.       <h6>Migrated : {{totalMigrated | number}} </h6>  
  193.     </div>  
  194.   </div>  
  195. </div>  
  196.   
  197.   
  198. <sw-modal id="custom-modal">  
  199.   <div class="row margin-class">  
  200.     <div>  
  201.       <h6>State :  </h6>  
  202.     </div>  
  203.     <div>  
  204.       <h5><span class="badge badge-secondary"> {{stateName}}</span></h5>  
  205.     </div>  
  206.   </div>  
  207.   
  208.   <div class="row margin-class">  
  209.     <div>  
  210.       <h6>As on Date :  </h6>  
  211.     </div>  
  212.     <div>  
  213.       <h6><span class="badge badge-secondary">{{date |date}}</span></h6>  
  214.     </div>  
  215.   </div>  
  216.   
  217.   <h6>Population : {{population | number}}</h6>  
  218.   
  219.   <div class="row margin-class">  
  220.     <div>  
  221.       <h6>Tested : {{totalTested | number}} </h6>  
  222.     </div>  
  223.     <div *ngIf="deltaTested != undefined && deltaTested > 0">  
  224.       <h6><span class="badge badge-info"> + {{deltaTested}}</span></h6>  
  225.     </div>  
  226.   </div>  
  227.   
  228.   <div class="row margin-class">  
  229.     <div>  
  230.       <h6>Confirmed : {{totalConfirmed | number}} </h6>  
  231.     </div>  
  232.     <div *ngIf="deltaConfirmed != undefined && deltaTested > 0">  
  233.       <h6><span class="badge badge-warning"> + {{deltaConfirmed | number}}</span></h6>  
  234.     </div>  
  235.   </div>  
  236.   
  237.   <div class="row margin-class">  
  238.     <div>  
  239.       <h6>Recovered : {{totalRecovered | number}} </h6>  
  240.     </div>  
  241.     <div *ngIf="deltaRecovered != undefined && deltaRecovered > 0">  
  242.       <h6><span class="badge badge-success"> + {{deltaRecovered | number}}</span></h6>  
  243.     </div>  
  244.   </div>  
  245.   
  246.   <div class="row margin-class">  
  247.     <div>  
  248.       <h6>Deceased : {{totalDeceased | number}} </h6>  
  249.     </div>  
  250.     <div *ngIf="deltaDeceased != undefined && deltaDeceased > 0">  
  251.       <h6><span class="badge badge-danger"> + {{deltaDeceased | number}}</span></h6>  
  252.     </div>  
  253.   </div>  
  254.   
  255.   <h6>Migrated : {{totalMigrated | number}} </h6>  
  256.   <button class="btn btn-secondary" (click)="closeModal('custom-modal');">Close</button>  
  257. </sw-modal>  
  258.   
  259. <button class="btn btn-lg btn-outline-primary" hidden #btnShowModal  
  260.   (click)="openModal('custom-modal')">AlertModal</button>  
I have used the map element to show the Indian map. I have marked all the states in India with corresponding state code.
We need a common style for App component.
  1. .margin-class{  
  2.     margin: 0px;  
  3. }  
  4. .img {    
  5.     width: 40px;  
  6.   }    
We need two images for logo and Indian map. We can add these files to asset folder.
 
We have completed the coding part. We can run the application now.
 
 
We can click on any of the state and get the patient details.
 
 
If you want to see the patient details of a previous date, choose the date from date picker.
 
 
 
Here, I have chosen July 1st and get the patient details of that date. We can see the newly added information for that date in different color.
 
 
 
If you find any difficulty in choosing the state from Map, I have given another option to choose the state name from a dropdown list.
 
 
If you are browsing the application from a mobile, you can even opt the Mobile view. In that case, you will not able to choose the state name from the dropdown list.
 
Indian Covid-19 date-wise tracker by Sarathlal 
 
I have deployed the application in Google firebase and you can check the LIVE application.  

Conclusion


In this post, we have seen how to create a Covid-19 patient tracker using Angular 10 and material design template. We have provided the Indian Map and user can click on any of the Indian state and get the patient information of that particular state. We have provided a date picker and user can choose a particular date and see the historical data for that date. We have also provided a dropdown list for choosing a state name and get the details of that state. We are using a free public API from https://api.covid19india.org/ to track the patient information. This API is providing the data from March 2nd onwards. I have invested some efforts to provide the Indian map and to design this application. I am expecting your valuable feedback to improve this application in future.
 


Similar Articles