map 1.0 ready with api data

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "node server.js",
+    "dev": " ng serve --proxy-config proxy.config.json",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -24,12 +25,14 @@
     "@angular/platform-server": "^9.0.0",
     "@angular/router": "^9.0.0",
     "core-js": "^3.6.4",
+    "express": "^4.17.1",
     "firebase": "^7.12.0",
+    "http": "0.0.0",
+    "path": "^0.12.7",
+    "request": "^2.88.2",
     "rxjs": "^6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "^0.10.3",
-    "express": "^4.17.1",
-    "path": "^0.12.7"
+    "zone.js": "^0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.900.1",

proxy.config.json

@@ -0,0 +1,6 @@
+{  
+    "/regions": {
+        "target": "http://localhost:8080/",
+        "secure": false
+    }
+}

server.js

@@ -0,0 +1,34 @@
+const express = require('express');
+const path    = require('path');
+const request = require('request');
+
+const app = express();
+let regionsINFO = null;
+
+getRegionsData();
+initAPI()
+initAngularApp();
+
+
+
+
+function initAPI() {
+    app.get('/regions', (req,res) => res.status(200)
+    .json({ regions: regionsINFO }));
+}
+
+function initAngularApp() {
+    app.use(express.static('./dist'));
+
+    app.get('/*', function(req,res) {
+        res.sendFile(path.join(__dirname,'/dist/index.html'));
+    });
+
+    app.listen(process.env.PORT || 8080);
+}
+
+function getRegionsData(res) { 
+    request('https://cdn.pravda.com/cdn/covid-19/ukraine.json', { json: true }, (err, res, body) => {
+        regionsINFO = body;
+    });
+}

src/app/app.component.html

@@ -13,7 +13,7 @@ <h2>Поширення COVID-19 в Україні</h2>
             <agm-marker (markerClick)="onMarkerClick($event, window)" [iconUrl]="marker.icon" [latitude]="marker.lat" [longitude]="marker.lng">
                 <agm-info-window #window>
                     <div class="info-wraper">
-                        <div class="region-name">{{marker.name}}</div>
+                        <div class="region-name">{{marker.title}}</div>
                         <div class="cases-counter">захворювань: {{marker.cases}}</div>
                         <div *ngIf="marker.deaths" class="death-counter">смертей: {{marker.deaths}}</div>
                     </div>

src/app/app.component.ts

@@ -22,19 +22,32 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.markers = markers.map((marker: any) => {
-      return {...marker, icon: this.getIcon(marker.cases, marker.deaths) };
-    });
-    this.markers.forEach(marker => {
-      if (Number(marker.cases)) { this.casesAll += marker.cases; }
-      if (Number(marker.deaths)) { this.deathsAll += marker.deaths; }
-    });
-
-    this.http.getData();
+    this.http.getCasesData()
+      .subscribe((res: any) => {
+        console.log(res)
+        const regionCases = res;
+
+        this.markers = markers.map(marker => {
+          const casesData = regionCases.find(region => region.name === marker.id);
+          return {
+            ...marker,
+            cases: casesData.confirmed,
+            deaths: casesData.deaths,
+            icon: this.getIcon(casesData.confirmed, casesData.deaths)
+          }
+        });
+
+        this.markers.forEach(marker => {
+          if (Number(marker.cases)) { this.casesAll += marker.cases; }
+          if (Number(marker.deaths)) { this.deathsAll += marker.deaths; }
+        });
+      })
   }
 
-  private getIcon(cases, death) {
-    return 'assets/icons/circle-orange.png'
+  private getIcon(cases, deaths) {
+    const shape = deaths ? 'diamond' : 'circle';
+    const color = cases < 20 ? 'orange' : cases < 100 ? 'red' : 'purple';
+    return `assets/icons/${shape}-${color}.png`;
   }
 
   public onMarkerClick(e, infowindow) {

src/app/app.constants.ts

@@ -1,33 +1,56 @@
 export const markers = [
     {
-        id: 0,
-        name: 'Київська область',
+        id: 'kiev',
+        title: 'Київська область',
         lat: 50.27,
         lng: 30.45,
-        cases: 2
     },
     {
-        id: 2,
-        name: 'Житомирська область',
+        id: 'zhytomyr',
+        title: 'Житомирська область',
         lat: 50.05,
         lng: 28.63,
-        cases: 1,
-        deaths: 1
     },
     {
-        id: 3,
-        name: 'Чернівецька область',
+        id: 'chernivtsi',
+        title: 'Чернівецька область',
         lat: 48.12,
         lng: 26.05,
-        cases: 10,
-        deaths: 1
     },
     {
-        id: 4,
-        name: 'Донецька область',
+        id: 'donetsk',
+        title: 'Донецька область',
         lat: 47.85,
         lng: 37.73,
-        cases: 1,
-        deaths: 0
+    },
+    {
+        id: 'dnipropetrovsk',
+        title: 'Дніпропетровська область',
+        lat: 48.30,
+        lng: 35.05,
+    },
+    {
+        id: 'ivanofrankivsk',
+        title: 'Івано-Франковська область',
+        lat: 48.76,
+        lng: 24.55,
+    },
+    {
+        id: 'lviv',
+        title: 'Львівська область',
+        lat: 49.71,
+        lng: 24.02,
+    },
+    {
+        id: 'ternopil',
+        title: 'Тернопільска область',
+        lat: 49.34,
+        lng: 25.60,
+    },
+    {
+        id: 'cherkasy',
+        title: 'Черкаська область',
+        lat: 49.27,
+        lng: 32.00,
     }
 ];

src/app/services/http.service.ts

@@ -1,32 +1,26 @@
 import { Injectable } from '@angular/core';
 import { AngularFirestore } from '@angular/fire/firestore';
 import { HttpClient } from '@angular/common/http'
+import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class HttpService {
 
   constructor(private firestore: AngularFirestore, private http: HttpClient) {
-
   }
 
-  addRegion(data) {
-    return new Promise<any>((resolve, reject) =>{
-        this.firestore
-            .collection('regions')
-            .add(data)
-            .then(res => {
-              console.log(res)
-            }, err => console.log(err));
-    });
-  }
+  getCasesData() {
+    return this.http.get('/regions')
+    .pipe(map((res: any) => {
+      const regions = res.regions.regions;
+      const kyivRegion = regions[regions.findIndex(region => region.name === 'kiev')];
+      const kyivCity   = regions[regions.findIndex(region => region.name === 'kievcity')];
+      kyivRegion.confirmed += kyivCity.confirmed;
 
-  getData() {
-    this.http.get('https://cdn.pravda.com/cdn/covid-19/ukraine.json')
-      .subscribe(res => {
-        console.log(res)
-      });
+      return regions;
+    }))
   }
 
 }