fixing map bug, adding mapbox support

2024-12-25 02:04:15 +02:00 · 2018-12-08 11:28:56 +01:00 · 2018-12-08 11:28:56 +01:00 · 452ead4fa7
commit 452ead4fa7
parent b27365bbad
23 changed files with 138 additions and 29 deletions
--- a/angular.json
+++ b/angular.json
@ -17,15 +17,9 @@
            "tsConfig": "frontend/tsconfig.app.json",
            "polyfills": "frontend/polyfills.ts",
            "assets": [
-              {
-                "glob": "**/*",
-                "input": "./node_modules/leaflet/dist/images",
-                "output": "/"
-              },
              "frontend/assets"
            ],
            "styles": [
-              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/ngx-toastr/toastr.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/open-iconic/font/css/open-iconic-bootstrap.css",
@ -83,6 +77,7 @@
              "node_modules/ngx-toastr/toastr.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/open-iconic/font/css/open-iconic-bootstrap.css",
+              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "frontend/styles.css"
            ],
            "assets": [
--- a/backend/model/diagnostics/ConfigDiagnostics.ts
+++ b/backend/model/diagnostics/ConfigDiagnostics.ts
@ -154,8 +154,15 @@ export class ConfigDiagnostics {
  }


-  static async testMapConfig(map: ClientConfig.MapConfig) {
-    if (map.enabled === true && map.mapProvider === ClientConfig.MapProviders.Custom &&
+  static async testMapConfig(map: ClientConfig.MapConfig): Promise<void> {
+    if (map.enabled === false) {
+      return;
+    }
+    if (map.mapProvider === ClientConfig.MapProviders.Mapbox &&
+      (!map.mapboxAccessToken || map.mapboxAccessToken.length === 0)) {
+      throw new Error('Mapbox needs a valid api key.');
+    }
+    if (map.mapProvider === ClientConfig.MapProviders.Custom &&
      (!map.tileUrl || map.tileUrl.length === 0)) {
      throw new Error('Custom maps need a valid tile url');
    }
--- a/backend/routes/PublicRouter.ts
+++ b/backend/routes/PublicRouter.ts
@ -90,7 +90,7 @@ export class PublicRouter {
      );
    });

-    app.get('/assets/:file',
+    app.get('/assets/:file(*)',
      setLocale,
      (req: Request, res: Response) => {
        const file = path.resolve(ProjectPath.FrontendFolder, req['localePath'], 'assets', req.params.file);
--- a/common/config/public/ConfigClass.ts
+++ b/common/config/public/ConfigClass.ts
@ -4,7 +4,7 @@ import {UserRoles} from '../../entities/UserDTO';
 export module ClientConfig {

  export enum MapProviders {
-    OpenStreetMap, Custom
+    OpenStreetMap, Mapbox, Custom
  }

  export interface SearchConfig {
@ -29,6 +29,7 @@ export module ClientConfig {
  export interface MapConfig {
    enabled: boolean;
    mapProvider: MapProviders;
+    mapboxAccessToken: string;
    tileUrl: string;
  }

@ -107,6 +108,7 @@ export class PublicConfigClass {
    Map: {
      enabled: true,
      mapProvider: ClientConfig.MapProviders.OpenStreetMap,
+      mapboxAccessToken: '',
      tileUrl: ''
    },
    RandomPhoto: {
--- a/docs/assets/lightbox_info.jpg
+++ b/docs/assets/lightbox_info.jpg
--- a/docs/assets/main_page.jpg
+++ b/docs/assets/main_page.jpg
--- a/docs/assets/map.jpg
+++ b/docs/assets/map.jpg
--- a/docs/assets/random_link.jpg
+++ b/docs/assets/random_link.jpg
--- a/docs/assets/search.jpg
+++ b/docs/assets/search.jpg
--- a/docs/assets/sharing.jpg
+++ b/docs/assets/sharing.jpg
--- a/docs/index.html
+++ b/docs/index.html
@ -16,7 +16,7 @@

 <body class="text-center">
 <a href="https://github.com/bpatrik/pigallery2"><img style="position: absolute; top: 0; left: 0; border: 0;"
-                                                     src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png"
+                                                     src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"
                                                     alt="Fork me on GitHub"></a>
 <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column ">
  <header class="masthead">
@ -66,8 +66,10 @@
      </div>
      <div class="col">
        <h3>Map</h3>
-        PiGallery2 reads the location data of the photos and puts them on google maps.
+        PiGallery2 reads the location data of the photos and puts them on a nice map.
        The gallery also supports *.gps file to show your tracked path on the map too.
+        It by default supports <a href="https://www.openstreetmap.org">OpenStreetMap</a> and <a
+        href="https://www.mapbox.com">Mapbox</a>, but you can also add you own favourite map provider.
      </div>
    </div>

--- a/frontend/app/app.module.ts
+++ b/frontend/app/app.module.ts
@ -74,6 +74,7 @@ import {FixOrientationPipe} from './gallery/FixOrientationPipe';
 import {VideoSettingsComponent} from './settings/video/video.settings.component';
 import {DurationPipe} from './pipes/DurationPipe';
 import {MapService} from './gallery/map/map.service';
+import {Icon} from 'leaflet';
 import {MetaFileSettingsComponent} from './settings/metafiles/metafile.settings.component';


@ -83,7 +84,16 @@ export class MyHammerConfig extends HammerGestureConfig {
    'swipe': {direction: 31} // enable swipe up
  };
 }
-
+/*
+console.log(Icon);
+console.log(Icon.Default);
+console.log(Icon.Default.prototype);
+console.log(Icon.Default.prototype.options);
+Icon.Default.prototype.options.iconRetinaUrl = 'assets/leaflet/marker-icon-2x.png';
+Icon.Default.imagePath = 'assets/leaflet/marker-icon.png';
+Icon.Default.prototype.options.iconUrl = 'assets/leaflet/marker-icon.png';
+Icon.Default.prototype.options.shadowUrl = 'assets/leaflet/marker-shadow.png';
+*/
 export class CustomUrlSerializer implements UrlSerializer {
  private _defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

--- a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
@ -105,6 +105,10 @@
        [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>
  </div>
--- a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
+++ b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
@ -46,8 +46,9 @@
        </yaga-popup>
      </yaga-marker>
      <yaga-attribution-control
-        [attributions]="mapService.Attributions"
-      ></yaga-attribution-control>
+        prefix=""
+        [attributions]="mapService.Attributions">
+      </yaga-attribution-control>
      <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
    </yaga-map>
  </div>
--- a/frontend/app/gallery/map/map.gallery.component.html
+++ b/frontend/app/gallery/map/map.gallery.component.html
@ -12,10 +12,17 @@
        *ngFor="let photo of mapPhotos"
        [lat]="photo.lat"
        [lng]="photo.lng">
+     <!--   <yaga-icon
+          [iconSize]="[25,41]"
+          [iconAnchor]="[13,41]"
+          iconUrl="assets/leaflet/marker-icon.png"
+          shadowUrl="assets/leaflet/marker-shadow.png"
+        ></yaga-icon>-->
      </yaga-marker>
      <yaga-attribution-control
-        [attributions]="mapService.Attributions"
-      ></yaga-attribution-control>
+        prefix=""
+        [attributions]="mapService.ShortAttributions">
+      </yaga-attribution-control>
      <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
    </yaga-map>
    <div class="overlay" (click)="click()"
--- a/frontend/app/gallery/map/map.gallery.component.ts
+++ b/frontend/app/gallery/map/map.gallery.component.ts
@ -38,8 +38,8 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
    });

    if (this.yagaMap) {
-      this.yagaMap.setView(this.mapPhotos[0], 0);
-      this.yagaMap.fitBounds(<any>this.mapPhotos);
+      this.yagaMap.setView(this.mapPhotos[0], 99);
+      this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
      this.yagaMap.zoom = 0;
    }

@ -48,8 +48,8 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
  ngAfterViewInit() {
    setTimeout(() => {
      this.height = this.mapElement.nativeElement.clientHeight;
-      this.yagaMap.setView(this.mapPhotos[0], 0);
-      this.yagaMap.fitBounds(<any>this.mapPhotos);
+      this.yagaMap.setView(this.mapPhotos[0], 99);
+      this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
      this.yagaMap.zoom = 0;
    }, 0);
  }
--- a/frontend/app/gallery/map/map.service.ts
+++ b/frontend/app/gallery/map/map.service.ts
@ -2,7 +2,6 @@ import {Injectable} from '@angular/core';
 import {NetworkService} from '../../model/network/network.service';
 import {FileDTO} from '../../../../common/entities/FileDTO';
 import {Utils} from '../../../../common/Utils';
-import {OSM_TILE_LAYER_URL} from '@yaga/leaflet-ng2';
 import {Config} from '../../../../common/config/public/Config';
 import {ClientConfig} from '../../../../common/config/public/ConfigClass';

@ -29,15 +28,48 @@ export class MapService {
  }


+  public get ShortAttributions(): string[] {
+    const yaga = '<a href="https://yagajs.org" title="YAGA">YAGA</a>';
+    const lf = '<a href="https://leaflet-ng2.yagajs.org" title="Leaflet in Angular2">leaflet-ng2</a>';
+    const OSM = '<a href="https://www.openstreetmap.org/copyright">OSM</a>';
+    const MB = '<a href="https://www.mapbox.com/">Mapbox</a>';
+
+
+    if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.OpenStreetMap) {
+      return [yaga + ' | &copy; ' + OSM];
+    }
+
+    if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Mapbox) {
+      return [yaga + ' | ' + OSM + ' | ' + MB];
+    }
+    return [yaga + ' | ' + lf];
+  }
+
  public get Attributions(): string[] {
-    return ['&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'];
+    const yagalf = '<a href="https://yagajs.org" title="YAGA">YAGA</a> | ' +
+      '<a href="https://leaflet-ng2.yagajs.org" title="Leaflet in Angular2">leaflet-ng2</a>';
+    const OSM = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
+    const MB = '&copy; <a href="https://www.mapbox.com/">Mapbox</a>';
+
+    if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.OpenStreetMap) {
+      return [yagalf + ' | ' + OSM];
+    }
+
+    if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Mapbox) {
+      return [yagalf + ' | ' + OSM + ' | ' + MB];
+    }
+    return [yagalf];
  }

  public get MapLayer(): string {
    if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Custom) {
      return Config.Client.Map.tileUrl;
    }
-    return OSM_TILE_LAYER_URL;
+    if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Mapbox) {
+      return 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token='
+        + Config.Client.Map.mapboxAccessToken;
+    }
+    return 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  }

 }
--- a/frontend/app/settings/map/map.settings.component.html
+++ b/frontend/app/settings/map/map.settings.component.html
@ -45,6 +45,19 @@
        </div>
      </div>

+      <div class="form-group row" *ngIf="settings.mapProvider === MapProviders.Mapbox">
+        <label class="col-md-2 control-label" for="mapboxAccessToken" i18n>Mapbox access token</label>
+        <div class="col-md-10">
+          <input type="text" class="form-control" placeholder="Mapbox access token"
+                 [(ngModel)]="settings.mapboxAccessToken"
+                 name="mapboxAccessToken" id="mapboxAccessToken" required>
+          <small class="form-text text-muted">
+            <ng-container i18n>MapBox needs an access token to work, create one at </ng-container><a href="https://www.mapbox.com">https://www.mapbox.com</a>.
+          </small>
+        </div>
+      </div>
+
+
      <button class="btn btn-success float-right"
              [disabled]="!settingsForm.form.valid || !changed || inProgress"
              (click)="save()" i18n>Save
--- a/frontend/app/settings/settings.service.ts
+++ b/frontend/app/settings/settings.service.ts
@ -34,6 +34,7 @@ export class SettingsService {
        Map: {
          enabled: true,
          mapProvider: ClientConfig.MapProviders.OpenStreetMap,
+          mapboxAccessToken: '',
          tileUrl: ''
        },
        RandomPhoto: {
--- a/frontend/index.html
+++ b/frontend/index.html
@ -9,6 +9,9 @@

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
+        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+        crossorigin=""/>

  <script>
    var ServerInject = {user:  <%- JSON.stringify(user); %>, ConfigInject: <%- JSON.stringify(clientConfig); %>}
--- a/frontend/translate/messages.en.xlf
+++ b/frontend/translate/messages.en.xlf
@ -604,12 +604,28 @@
        </context-group>
        <target>The map module will use this url to fetch the map tiles.</target>
      </trans-unit>
+      <trans-unit id="d43c7ef9da77ac203afc6f0b748adfc03a10e569" datatype="html">
+        <source>Mapbox access token</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
+          <context context-type="linenumber">49</context>
+        </context-group>
+        <target>Mapbox access token</target>
+      </trans-unit>
+      <trans-unit id="0afcc21341fab96f7e87fa4ef028e4a58b20190b" datatype="html">
+        <source>MapBox needs an access token to work, create one at </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
+          <context context-type="linenumber">55</context>
+        </context-group>
+        <target>MapBox needs an access token to work, create one at</target>
+      </trans-unit>
      <trans-unit id="d682be8fc94c1861394919e021e9dcf8def8f554" datatype="html">
        <source>Save
      </source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
-          <context context-type="linenumber">50</context>
+          <context context-type="linenumber">63</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
@ -650,7 +666,7 @@
      </source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">66</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
--- a/frontend/translate/messages.hu.xlf
+++ b/frontend/translate/messages.hu.xlf
@ -604,12 +604,28 @@
        </context-group>
        <target>A térkép modul ezt az URL-t fogja használni a térkép letöltéséhez.</target>
      </trans-unit>
+      <trans-unit id="d43c7ef9da77ac203afc6f0b748adfc03a10e569" datatype="html">
+        <source>Mapbox access token</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
+          <context context-type="linenumber">49</context>
+        </context-group>
+        <target>Mapbox access token</target>
+      </trans-unit>
+      <trans-unit id="0afcc21341fab96f7e87fa4ef028e4a58b20190b" datatype="html">
+        <source>MapBox needs an access token to work, create one at </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
+          <context context-type="linenumber">55</context>
+        </context-group>
+        <target>A MapBox-hoz access token szükséges, amit itt lehet létrehozni:</target>
+      </trans-unit>
      <trans-unit id="d682be8fc94c1861394919e021e9dcf8def8f554" datatype="html">
        <source>Save
      </source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
-          <context context-type="linenumber">50</context>
+          <context context-type="linenumber">63</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
@ -650,7 +666,7 @@
      </source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">66</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
--- a/package.json
+++ b/package.json
@ -95,7 +95,7 @@
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.0",
    "karma-remap-istanbul": "0.6.0",
-    "karma-systemjs": "0.16.0", 
+    "karma-systemjs": "0.16.0",
    "merge2": "1.2.3",
    "mocha": "5.2.0",
    "ng2-cookies": "1.0.12",