Can now search for location on maps and dobbeltclick will move marker.

package.json

@@ -1,96 +1,101 @@
 {
-  "name": "os2iot-frontend",
-  "version": "1.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve --watch",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^14.2.3",
-    "@angular/cdk": "^14.2.2",
-    "@angular/common": "^14.2.3",
-    "@angular/compiler": "^14.2.3",
-    "@angular/core": "^14.2.3",
-    "@angular/forms": "^14.2.3",
-    "@angular/localize": "^14.2.3",
-    "@angular/material": "^14.2.2",
-    "@angular/material-moment-adapter": "^14.2.2",
-    "@angular/platform-browser": "^14.2.3",
-    "@angular/platform-browser-dynamic": "^14.2.3",
-    "@angular/router": "^14.2.3",
-    "@auth0/angular-jwt": "^5.0.1",
-    "@fortawesome/angular-fontawesome": "^0.11.1",
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
-    "@popperjs/core": "^2.11.6",
-    "all": "0.0.0",
-    "animate.css": "^4.1.1",
-    "bootstrap": "5.0.0-alpha2",
-    "chart.js": "^3.7.1",
-    "file-saver": "^2.0.2",
-    "guid-typescript": "^1.0.9",
-    "jwt-decode": "^3.1.2",
-    "leaflet": "^1.9.4",
-    "leaflet.fullscreen": "^3.0.1",
-    "moment": "^2.29.4",
-    "monaco-editor": "^0.33.0",
-    "ng": "0.0.0",
-    "ng-inline-svg": "^11.0.0",
-    "ngx-cookie-service": "^14.0.1",
-    "ngx-monaco-editor-v2": "^14.0.4",
-    "ngx-papaparse": "^5.0.0",
-    "popper.js": "^1.16.1",
-    "rxjs": "~6.6.7",
-    "tslib": "^2.0.0",
-    "tslint": "~6.1.0",
-    "ua-parser-js": "^1.0.33",
-    "zone.js": "~0.11.4"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.3",
-    "@angular/cli": "^14.2.9",
-    "@angular/compiler-cli": "^14.2.3",
-    "@ngrx/store-devtools": "^14.3.3",
-    "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/jwt-decode": "^3.1.0",
-    "@types/leaflet": "^1.9.8",
-    "@types/leaflet.fullscreen": "^3.0.2",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.2",
-    "eslint": "^7.3.1",
-    "jasmine-core": "^3.8.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "ngrx-store-freeze": "^0.2.4",
-    "prettier": "^2.0.5",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint-angular": "^3.0.3",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "~4.6.4"
-  },
-  "overrides": {
-    "@angular/common": "^14.2.3",
-    "@angular/core": "^14.2.3",
-    "postcss": "^8.4.31",
-    "tough-cookie": "^4.1.3",
-    "xml2js": "^0.6.2",
-    "babel-plugin-polyfill-corejs3": "0.8.6",
-    "babel-plugin-polyfill-corejs2": "0.4.6",
-    "babel-plugin-polyfill-regenerator": "0.5.3"
-  }
+    "name": "os2iot-frontend",
+    "version": "1.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve --watch",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^14.2.3",
+        "@angular/cdk": "^14.2.2",
+        "@angular/common": "^14.2.3",
+        "@angular/compiler": "^14.2.3",
+        "@angular/core": "^14.2.3",
+        "@angular/forms": "^14.2.3",
+        "@angular/localize": "^14.2.3",
+        "@angular/material": "^14.2.2",
+        "@angular/material-moment-adapter": "^14.2.2",
+        "@angular/platform-browser": "^14.2.3",
+        "@angular/platform-browser-dynamic": "^14.2.3",
+        "@angular/router": "^14.2.3",
+        "@auth0/angular-jwt": "^5.0.1",
+        "@fortawesome/angular-fontawesome": "^0.11.1",
+        "@fortawesome/fontawesome-free": "^5.15.4",
+        "@fortawesome/fontawesome-svg-core": "^1.2.28",
+        "@fortawesome/free-solid-svg-icons": "^5.13.0",
+        "@ng-bootstrap/ng-bootstrap": "^13.0.0",
+        "@ngx-translate/core": "^13.0.0",
+        "@ngx-translate/http-loader": "^6.0.0",
+        "@popperjs/core": "^2.11.6",
+        "@types/leaflet.markercluster": "1.5.3",
+        "all": "0.0.0",
+        "animate.css": "^4.1.1",
+        "bootstrap": "5.0.0-alpha2",
+        "chart.js": "^3.7.1",
+        "file-saver": "^2.0.2",
+        "guid-typescript": "^1.0.9",
+        "jwt-decode": "^3.1.2",
+        "leaflet": "^1.9.4",
+        "leaflet-geosearch": "3.6.1",
+        "leaflet.fullscreen": "^3.0.1",
+
+        "moment": "^2.29.4",
+        "monaco-editor": "^0.33.0",
+        "ng": "0.0.0",
+        "ng-inline-svg": "^11.0.0",
+        "ngx-cookie-service": "^14.0.1",
+        "ngx-monaco-editor-v2": "^14.0.4",
+        "ngx-papaparse": "^5.0.0",
+        "popper.js": "^1.16.1",
+        "rxjs": "~6.6.7",
+        "tslib": "^2.0.0",
+        "tslint": "~6.1.0",
+        "ua-parser-js": "^1.0.33",
+        "zone.js": "~0.11.4"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^14.2.3",
+        "@angular/cli": "^14.2.9",
+        "@angular/compiler-cli": "^14.2.3",
+        "@ngrx/store-devtools": "^14.3.3",
+        "@types/jasmine": "~3.6.0",
+        "@types/jasminewd2": "~2.0.3",
+        "@types/jwt-decode": "^3.1.0",
+        "@types/leaflet": "^1.9.8",
+        "@types/leaflet.fullscreen": "^3.0.2",
+        "leaflet.markercluster": "1.5.3",
+        "@types/node": "^12.11.1",
+        "codelyzer": "^6.0.2",
+        "eslint": "^7.3.1",
+        "jasmine-core": "^3.8.0",
+        "jasmine-spec-reporter": "~5.0.0",
+        "karma": "~6.4.1",
+        "karma-chrome-launcher": "~3.1.0",
+        "karma-coverage-istanbul-reporter": "~3.0.2",
+        "karma-jasmine": "~4.0.0",
+        "karma-jasmine-html-reporter": "^1.5.0",
+        "ngrx-store-freeze": "^0.2.4",
+        "prettier": "^2.0.5",
+        "protractor": "~7.0.0",
+        "ts-node": "~8.3.0",
+        "tslint-angular": "^3.0.3",
+        "tslint-config-prettier": "^1.18.0",
+        "typescript": "~4.6.4"
+    },
+    "overrides": {
+        "@angular/common": "^14.2.3",
+        "@angular/core": "^14.2.3",
+        "postcss": "^8.4.31",
+        "tough-cookie": "^4.1.3",
+        "xml2js": "^0.6.2",
+        "babel-plugin-polyfill-corejs3": "0.8.6",
+        "babel-plugin-polyfill-corejs2": "0.4.6",
+        "babel-plugin-polyfill-regenerator": "0.5.3",
+        "webpack-dev-middleware": "5.3.4"
+    }
 }

src/app/applications/application-detail/application-detail.component.html

@@ -1,47 +1,63 @@
 <div *ngIf="application">
-  <app-top-bar [data]="application" [backButton]="backButton" [subPage]="true"
-               [addDetailDowndown]="true" [dropDownButton]="dropdownButton"
-               (deleteSelectedInDropdown)="onDeleteApplication()"
-               [canEdit]="canEdit">
-  </app-top-bar>
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-12">
-        <div class="jumbotron">
-          <div *ngIf="errorMessage" class="error-messages p-3 my-3">
-            {{errorMessage | translate}}
-          </div>
-          <h3>{{ 'APPLICATION.DETAILS' | translate }}</h3>
-          <app-general-details [data]="application"></app-general-details>
-          <p *ngIf="application.description">
-            <strong>{{ 'APPLICATION.DESCRIPTION' | translate }}</strong></p>
-          <pre><p>{{application.description}}</p></pre>
-          <app-metadata-details
-            [permissions]="application.permissions"
-            [status]="application.status"
-            [startDate]="application.startDate"
-            [endDate]="application.endDate"
-            [category]="application.category"
-            [owner]="application.owner"
-            [contactPerson]="application.contactPerson"
-            [contactEmail]="application.contactEmail"
-            [contactPhone]="application.contactPhone"
-            [personalData]="application.personalData"
-            [hardware]="application.hardware"
-            [controlledProperties]="application.controlledProperties"
-            [deviceTypes]="application.deviceTypes"
-          ></app-metadata-details>
+    <app-top-bar
+        [data]="application"
+        [backButton]="backButton"
+        [subPage]="true"
+        [addDetailDowndown]="true"
+        [dropDownButton]="dropdownButton"
+        (deleteSelectedInDropdown)="onDeleteApplication()"
+        [canEdit]="canEdit"
+    >
+    </app-top-bar>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-8 d-flex align-items-stretch">
+                <div class="jumbotron jumbotron--m-left jumbotron--full-width">
+                    <div *ngIf="errorMessage" class="error-messages p-3 my-3">
+                        {{ errorMessage | translate }}
+                    </div>
+                    <h3>{{ "APPLICATION.DETAILS" | translate }}</h3>
+                    <app-general-details [data]="application"></app-general-details>
+                    <p *ngIf="application.description">
+                        <strong>{{ "APPLICATION.DESCRIPTION" | translate }}</strong>
+                    </p>
+                    <pre><p>{{application.description}}</p></pre>
+                    <app-metadata-details
+                        [permissions]="application.permissions"
+                        [status]="application.status"
+                        [startDate]="application.startDate"
+                        [endDate]="application.endDate"
+                        [category]="application.category"
+                        [owner]="application.owner"
+                        [contactPerson]="application.contactPerson"
+                        [contactEmail]="application.contactEmail"
+                        [contactPhone]="application.contactPhone"
+                        [personalData]="application.personalData"
+                        [hardware]="application.hardware"
+                        [controlledProperties]="application.controlledProperties"
+                        [deviceTypes]="application.deviceTypes"
+                    ></app-metadata-details>
+                </div>
+            </div>
+            <div class="col-md-4 d-flex align-items-stretch">
+                <div class="jumbotron jumbotron--m-left jumbotron--full-width">
+                    <div class="thirty-height" *ngIf="devices && gateways">
+                        <app-map [coordinateList]="coordinateList" [isFromApplication]="true"></app-map>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
+        <nav mat-tab-nav-bar>
+            <a
+                mat-tab-link
+                *ngFor="let link of navTabs"
+                [routerLink]="link.link"
+                routerLinkActive
+                #rla="routerLinkActive"
+                [active]="rla.isActive"
+                >{{ link.label | translate }}</a
+            >
+        </nav>
+        <router-outlet></router-outlet>
     </div>
-    <nav mat-tab-nav-bar>
-      <a mat-tab-link
-         *ngFor="let link of navTabs"
-         [routerLink]="link.link"
-         routerLinkActive #rla="routerLinkActive"
-         [active]="rla.isActive"
-      >{{ link.label | translate }}</a>
-    </nav>
-    <router-outlet></router-outlet>
-  </div>
 </div>