added google map view with markers of the avialable images;

frontend/package-lock.json

@@ -10,6 +10,21 @@
       "integrity": "sha512-5Hmejfgemk1qJw24M5I+NabADKmD5Io7LU2fxHw/E6Bo0ji9EdmHP16KrFnt6Sz0/w7VIzc1ZAasyLULaPLGJQ==",
       "dev": true
     },
+    "@agm/core": {
+      "version": "3.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@agm/core/-/core-3.0.0-beta.0.tgz",
+      "integrity": "sha512-KNmKbe89Nen7s7+mX63RgX88jBfajUZCFqkHIQ8Fd+Lf/ko/IY6yw4kPh0iYGxgPVPjpsHJ06GZ5m3ZxpEVX9A==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "@angular-devkit/architect": {
       "version": "0.901.12",
       "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.12.tgz",
@@ -2935,6 +2950,12 @@
         "@types/node": "*"
       }
     },
+    "@types/googlemaps": {
+      "version": "3.39.12",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.12.tgz",
+      "integrity": "sha512-z1RMvlQfmsLbg5kc0dGjSHK7DL64mOCbbtqp/Le2M3ov7xPB1d+stia38hqmOXw5dPO1dL/5fscn73d0uomkbw==",
+      "dev": true
+    },
     "@types/jasmine": {
       "version": "3.4.6",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.4.6.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^3.0.0-beta.0",
     "@angular-devkit/schematics": "~9.1.7",
     "@angular/animations": "~9.1.9",
     "@angular/cdk": "9.2.4",
@@ -39,6 +40,7 @@
     "@angular/compiler-cli": "~9.1.9",
     "@angular/language-service": "~9.1.9",
     "@compodoc/compodoc": "~1.1.11",
+    "@types/googlemaps": "3.39.12",
     "@types/jasmine": "~3.4.6",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^12.12.42",

frontend/src/app/app.module.ts

@@ -20,6 +20,7 @@ import {MatTableModule} from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/tabs';
 import { ImagesComponent } from './component/images/images.component';
 import { MapComponent } from './component/map/map.component';
+import {AgmCoreModule} from '@agm/core';
 
 @NgModule({
   declarations: [LandingComponent, ImagesComponent, MapComponent],
@@ -40,6 +41,14 @@ import { MapComponent } from './component/map/map.component';
         MatPaginatorModule,
         MatTableModule,
         MatTabsModule,
+        // GoogleMapsModule,
+        AgmCoreModule.forRoot({
+          apiKey: 'AIzaSyBDgLJ1sL48IQg7e5jrwmUyXkqeEfVnf78'
+          /* apiKey is required, unless you are a
+          premium customer, in which case you can
+          use clientId
+          */
+        })
 
     ],
   // enables injecting

frontend/src/app/component/map/map.component.css

@@ -0,0 +1 @@
+agm-map { height: 50vh; /* height is required */ }

frontend/src/app/component/map/map.component.html

@@ -1 +1,19 @@
-<h2>Image Locations</h2>
+<h2>Map</h2>
+
+<agm-map *ngIf="images"
+  [latitude]="latitude"
+  [longitude]="longitude"
+  [zoom]="2">
+  <agm-marker
+    *ngFor="let image of images"
+    [latitude]="image.latitude"
+    [longitude]="image.longitude"
+    [opacity]="1"
+    [markerDraggable]="true"
+    (markerClick)="selectMarker($event)"
+  ></agm-marker>
+</agm-map>
+
+<p *ngIf="selectedImage">
+  Latitude: {{ selectedImage.latitude }} Longitude: {{ selectedImage.longitude }} Name: {{selectedImage.name}}
+</p>

frontend/src/app/component/map/map.component.ts

@@ -1,6 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {ImageMetadata} from '../../interfaces/interface';
 
+// @ts-ignore
 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
@@ -11,10 +12,19 @@ export class MapComponent implements OnInit {
   @Input()
   images: ImageMetadata[];
 
+  selectedImage: ImageMetadata;
+  latitude = 43.879078;
+  longitude = -103.4615581;
+
   constructor() {
+
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
+
   }
 
+  selectMarker(event) {
+    this.selectedImage = this.images.find(image => image.latitude === event.latitude && image.longitude === event.longitude);
+  }
 }

frontend/tsconfig.json

@@ -9,7 +9,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],