migrating maps to ngx-leaflet #256

bpatrik · Apr 25, 2021 · 4f2b02b · 4f2b02b
1 parent f0f47f9
commit 4f2b02b
Show file tree

Hide file tree

Showing 16 changed files with 312 additions and 284 deletions.
diff --git a/angular.json b/angular.json
@@ -59,25 +59,28 @@
             "tsConfig": "src/frontend/tsconfig.app.json",
             "polyfills": "src/frontend/polyfills.ts",
             "assets": [
-              "src/frontend/assets"
+              "src/frontend/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/leaflet/dist/images/",
+                "output": "./"
+              }
             ],
             "styles": [
               "bootstrap/dist/css/bootstrap.min.css",
               "ngx-bootstrap/datepicker/bs-datepicker.css",
               "open-iconic/font/css/open-iconic-bootstrap.css",
               "ngx-toastr/toastr.css",
+              "leaflet/dist/leaflet.css",
               "src/frontend/styles.css"
             ],
             "scripts": [],
             "i18nMissingTranslation": "warning"
           },
           "configurations": {
             "dev": {
-              "localize": [
-                "en",
-                "hu"
-              ],
-              "outputPath": "dist",
+              "outputPath": "dist/en",
+              "localize": false,
               "watch": true
             },
             "production": {
@@ -140,10 +143,16 @@
               "bootstrap/dist/css/bootstrap.css",
               "open-iconic/font/css/open-iconic-bootstrap.css",
               "ngx-bootstrap/datepicker/bs-datepicker.css",
+              "leaflet/dist/leaflet.css",
               "src/frontend/styles.css"
             ],
             "assets": [
-              "src/frontend/assets"
+              "src/frontend/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/leaflet/dist/images/",
+                "output": "./"
+              }
             ]
           }
         },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "@angular/platform-browser": "11.2.9",
     "@angular/platform-browser-dynamic": "11.2.9",
     "@angular/router": "11.2.9",
+    "@asymmetrik/ngx-leaflet": "^8.1.0",
     "@ngx-loading-bar/core": "5.1.1",
     "@types/bcrypt": "3.0.1",
     "@types/bcryptjs": "2.4.2",
@@ -90,12 +91,12 @@
     "@types/image-size": "0.8.0",
     "@types/jasmine": "3.6.9",
     "@types/jsonwebtoken": "8.5.1",
+    "@types/leaflet": "^1.7.0",
     "@types/node": "14.14.37",
     "@types/node-geocoder": "3.24.1",
     "@types/sharp": "0.23.1",
     "@types/winston": "2.4.4",
     "@types/xml2js": "0.4.8",
-    "@yaga/leaflet-ng2": "1.0.0",
     "bootstrap": "4.6.0",
     "chai": "4.3.4",
     "chai-http": "4.3.0",
@@ -121,6 +122,7 @@
     "karma-jasmine-html-reporter": "1.5.4",
     "karma-remap-istanbul": "0.6.0",
     "karma-systemjs": "0.16.0",
+    "leaflet": "^1.7.1",
     "mocha": "8.3.2",
     "natural-orderby": "2.0.3",
     "ngx-bootstrap": "6.2.0",

diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
@@ -10,7 +10,7 @@ import {FullScreenService} from './ui/gallery/fullscreen.service';
 import {AuthenticationService} from './model/network/authentication.service';
 import {UserMangerSettingsComponent} from './ui/settings/usermanager/usermanager.settings.component';
 import {FrameComponent} from './ui/frame/frame.component';
-import {YagaModule} from '@yaga/leaflet-ng2';
+import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import {LoadingBarModule} from '@ngx-loading-bar/core';
 import {GalleryLightboxMediaComponent} from './ui/gallery/lightbox/media/media.lightbox.gallery.component';
 import {GalleryPhotoLoadingComponent} from './ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component';
@@ -144,9 +144,9 @@ export class CustomUrlSerializer implements UrlSerializer {
     PopoverModule.forRoot(),
     BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
-    YagaModule,
     TimepickerModule.forRoot(),
-    LoadingBarModule
+    LoadingBarModule,
+    LeafletModule
   ],
   declarations: [AppComponent,
     LoginComponent,

diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css
@@ -66,6 +66,6 @@
   text-decoration: underline;
 }
 
-.keywords .oi-person{
+.keywords .oi-person {
   margin-right: 2px;
 }
diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
@@ -1,4 +1,4 @@
-<div class="content">
+<div class="content d-flex flex-column">
   <div class="modal-header">
     <h2 class="modal-title" i18n>Info</h2>
     <button type="button" class="close" (click)="close()" aria-label="Close">
@@ -90,19 +90,19 @@ <h2 class="modal-title" i18n>Info</h2>
       <span class="details-icon oi oi-tags"></span>
     </div>
     <div class="col-10 keywords">
-        <ng-template ngFor let-keyword [ngForOf]="keywords" let-last="last">
-          <a *ngIf="searchEnabled"
-             [routerLink]="['/search', getTextSearchQuery(keyword.value,keyword.type)]" [ngSwitch]="keyword.type">
-            <ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
+      <ng-template ngFor let-keyword [ngForOf]="keywords" let-last="last">
+        <a *ngIf="searchEnabled"
+           [routerLink]="['/search', getTextSearchQuery(keyword.value,keyword.type)]" [ngSwitch]="keyword.type">
+          <ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
        -->
-            <ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
+          <ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
        -->{{keyword.value}}</a>
-          <span *ngIf="!searchEnabled" [ngSwitch]="keyword.type">
+        <span *ngIf="!searchEnabled" [ngSwitch]="keyword.type">
           <ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
        --><ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
        -->{{keyword.value}}</span>
-          <ng-template [ngIf]="!last">,&#32;</ng-template>
-        </ng-template>
+        <ng-template [ngIf]="!last">,&#32;</ng-template>
+      </ng-template>
     </div>
   </div>
 
@@ -123,20 +123,19 @@ <h2 class="modal-title" i18n>Info</h2>
       </div>
     </div>
   </div>
+  <div class="mt-auto" style="height: 400px">
+    <div
+      *ngIf="hasGPS() && mapEnabled"
 
-  <div id="map" *ngIf="hasGPS() && mapEnabled">
-    <yaga-map [zoom]="10"
-              [lat]="PositionData.GPSData.latitude"
-              [lng]="PositionData.GPSData.longitude">
-      <yaga-marker
-        [lat]="PositionData.GPSData.latitude"
-        [lng]="PositionData.GPSData.longitude">
-      </yaga-marker>
-      <yaga-attribution-control
-        prefix=""
-        [attributions]="mapService.Attributions">
-      </yaga-attribution-control>
-      <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
-    </yaga-map>
+      id="map"
+      leaflet
+      [leafletOptions]="{zoom:10,
+          center:{lat:PositionData.GPSData.latitude,
+          lng:PositionData.GPSData.longitude},
+          layers:[baseLayer],
+          zoomControl: false}"
+      [leafletLayers]="markerLayer">
+    </div>
   </div>
+
 </div>
diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
 import {CameraMetadata, PhotoDTO, PhotoMetadata, PositionMetaData} from '../../../../../../common/entities/PhotoDTO';
 import {Config} from '../../../../../../common/config/public/Config';
 import {MediaDTO, MediaDTOUtils} from '../../../../../../common/entities/MediaDTO';
@@ -8,26 +8,31 @@ import {QueryService} from '../../../../model/query.service';
 import {MapService} from '../../map/map.service';
 import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes} from '../../../../../../common/entities/SearchQueryDTO';
 import {AuthenticationService} from '../../../../model/network/authentication.service';
+import {LatLngLiteral, marker, Marker, TileLayer, tileLayer} from 'leaflet';
 
 @Component({
   selector: 'app-info-panel',
   styleUrls: ['./info-panel.lightbox.gallery.component.css'],
   templateUrl: './info-panel.lightbox.gallery.component.html',
 })
-export class InfoPanelLightboxComponent implements OnInit {
+export class InfoPanelLightboxComponent implements OnInit, OnChanges {
   @Input() media: MediaDTO;
   @Output() closed = new EventEmitter();
 
   public readonly mapEnabled: boolean;
   public readonly searchEnabled: boolean;
-  keywords: { value: string, type: SearchQueryTypes }[] = null;
-  readonly SearchQueryTypes: typeof SearchQueryTypes = SearchQueryTypes;
+  public keywords: { value: string, type: SearchQueryTypes }[] = null;
+  public readonly SearchQueryTypes: typeof SearchQueryTypes = SearchQueryTypes;
+
+  public baseLayer: TileLayer;
+  public markerLayer: Marker[] = [];
 
   constructor(public queryService: QueryService,
               public mapService: MapService,
               private authService: AuthenticationService) {
     this.mapEnabled = Config.Client.Map.enabled;
     this.searchEnabled = Config.Client.Search.enabled && this.authService.canSearch();
+    this.baseLayer = tileLayer(mapService.MapLayer, {attribution: mapService.ShortAttributions});
   }
 
   get FullPath(): string {
@@ -53,6 +58,15 @@ export class InfoPanelLightboxComponent implements OnInit {
     return (this.media as PhotoDTO).metadata.cameraData;
   }
 
+  ngOnChanges(): void {
+    if (this.hasGPS()) {
+      this.markerLayer = [marker({
+        lat: this.PositionData.GPSData.latitude,
+        lng: this.PositionData.GPSData.longitude
+      } as LatLngLiteral)];
+    }
+  }
+
   ngOnInit(): void {
     const metadata = this.media.metadata as PhotoMetadata;
     if ((metadata.keywords && metadata.keywords.length > 0) ||
@@ -101,9 +115,9 @@ export class InfoPanelLightboxComponent implements OnInit {
         (this.media as PhotoDTO).metadata.positionData.country);
   }
 
-  hasGPS(): number {
-    return (this.media as PhotoDTO).metadata.positionData && (this.media as PhotoDTO).metadata.positionData.GPSData &&
-      (this.media as PhotoDTO).metadata.positionData.GPSData.latitude && (this.media as PhotoDTO).metadata.positionData.GPSData.longitude;
+  hasGPS(): boolean {
+    return !!((this.media as PhotoDTO).metadata.positionData && (this.media as PhotoDTO).metadata.positionData.GPSData &&
+      (this.media as PhotoDTO).metadata.positionData.GPSData.latitude && (this.media as PhotoDTO).metadata.positionData.GPSData.longitude);
   }
 
   getPositionText(): string {

diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
@@ -73,13 +73,13 @@
   opacity: 1.0;
 }
 
-.preview-loading {
+::ng-deep .lightbox-map-gallery-component-preview-loading {
   background-color: #bbbbbb;
   color: #7f7f7f;
   font-size: 50px;
 }
 
-.preview-loading span {
+::ng-deep .lightbox-map-gallery-component-preview-loading span {
   top: calc(50% - 25px);
   left: calc(50% - 25px);
 }