From 54083540d11b02aad74663f98ca8856ccb07fa9f Mon Sep 17 00:00:00 2001
From: Marco Zeisler <pfingstfrosch@gmail.com>
Date: Mon, 11 Jan 2021 20:20:52 +0100
Subject: [PATCH] added google map view with markers of the avialable images;

---
 frontend/package-lock.json                    | 21 +++++++++++++++++++
 frontend/package.json                         |  2 ++
 frontend/src/app/app.module.ts                |  9 ++++++++
 .../src/app/component/map/map.component.css   |  1 +
 .../src/app/component/map/map.component.html  | 20 +++++++++++++++++-
 .../src/app/component/map/map.component.ts    | 12 ++++++++++-
 frontend/tsconfig.json                        |  2 +-
 7 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 679bfa0..e8ed7d7 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/package.json b/frontend/package.json
index 54721d5..a3bca3c 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 8ccec84..1d253a5 100644
--- a/frontend/src/app/app.module.ts
+++ b/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
diff --git a/frontend/src/app/component/map/map.component.css b/frontend/src/app/component/map/map.component.css
index e69de29..55199f0 100644
--- a/frontend/src/app/component/map/map.component.css
+++ b/frontend/src/app/component/map/map.component.css
@@ -0,0 +1 @@
+agm-map { height: 50vh; /* height is required */ }
diff --git a/frontend/src/app/component/map/map.component.html b/frontend/src/app/component/map/map.component.html
index 73515aa..cf00c2e 100644
--- a/frontend/src/app/component/map/map.component.html
+++ b/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>
diff --git a/frontend/src/app/component/map/map.component.ts b/frontend/src/app/component/map/map.component.ts
index 0e669a4..1444d62 100644
--- a/frontend/src/app/component/map/map.component.ts
+++ b/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);
+  }
 }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 66462f2..22734b3 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -9,7 +9,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],