making map icon thumbnails switchable

common/config/public/ConfigClass.ts

@@ -38,6 +38,7 @@ export module ClientConfig {
 
   export interface MapConfig {
     enabled: boolean;
+    useImageMarkers: boolean;
     mapProvider: MapProviders;
     mapboxAccessToken: string;
     customLayers: MapLayers[];
@@ -128,6 +129,7 @@ export class PublicConfigClass {
     },
     Map: {
       enabled: true,
+      useImageMarkers: true,
       mapProvider: ClientConfig.MapProviders.OpenStreetMap,
       mapboxAccessToken: '',
       customLayers: [{name: 'street', url: ''}]

frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, HostListener, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, HostListener, Input, OnChanges, ViewChild} from '@angular/core';
 import {PhotoDTO} from '../../../../../../common/entities/PhotoDTO';
 import {Dimension} from '../../../../model/IRenderable';
 import {FullScreenService} from '../../fullscreen.service';
@@ -163,6 +163,7 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
         }
 
       };
+      if (Config.Client.Map.useImageMarkers === true) {
         if (iconTh.Available === true) {
           FixOrientationPipe.transform(iconTh.Src, p.metadata.orientation).then((icon) => {
             obj.iconUrl = icon;
@@ -174,6 +175,7 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
             });
           };
         }
+      }
       return obj;
     });
     if (this.gpxFiles) {

frontend/app/ui/settings/map/map.settings.component.html

@@ -19,6 +19,28 @@
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
+      <ng-container *ngIf="settings.enabled">
+
+        <div class="form-group row" [hidden]="simplifiedMode">
+          <label class="col-md-2 control-label" for="enableOnScrollRendering" i18n>Use image markers</label>
+          <div class="col-md-10">
+            <bSwitch
+              id="enableOnScrollRendering"
+              class="switch"
+              name="enableOnScrollRendering"
+              [switch-on-color]="'primary'"
+              [switch-inverse]="true"
+              [switch-off-text]="text.Disabled"
+              [switch-on-text]="text.Enabled"
+              [switch-handle-width]="100"
+              [switch-label-width]="20"
+              [(ngModel)]="settings.useImageMarkers">
+            </bSwitch>
+            <small class="form-text text-muted" i18n>Map will use thumbnail images as markers instead of the default
+              pin.
+            </small>
+          </div>
+        </div>
 
 
         <div class="form-group row">
@@ -86,7 +108,7 @@
           </div>
         </div>
 
-
+      </ng-container>
       <button class="btn btn-success float-right"
               [disabled]="!settingsForm.form.valid || !changed || inProgress"
               (click)="save()" i18n>Save

frontend/app/ui/settings/metafiles/metafile.settings.component.html

@@ -7,12 +7,12 @@
           class="switch"
           name="enabled"
           [switch-on-color]="'success'"
-          [switch-inverse]="'inverse'"
+          [switch-inverse]="true"
           [switch-off-text]="text.Disabled"
           [switch-on-text]="text.Enabled"
           [switch-disabled]="inProgress"
-          [switch-handle-width]="'100'"
+          [switch-handle-width]="100"
-          [switch-label-width]="'20'"
+          [switch-label-width]="20"
           [(ngModel)]="settings.enabled">
         </bSwitch>
       </div>

frontend/app/ui/settings/other/other.settings.component.html

@@ -16,11 +16,11 @@
             class="switch"
             name="enable"
             [switch-on-color]="'primary'"
-            [switch-inverse]="'inverse'"
+            [switch-inverse]="true"
             [switch-off-text]="text.Disabled"
             [switch-on-text]="text.Enabled"
-            [switch-handle-width]="'100'"
+            [switch-handle-width]="100"
-            [switch-label-width]="'20'"
+            [switch-label-width]="20"
             [(ngModel)]="settings.Server.enable">
           </bSwitch>
           <small class="form-text text-muted" i18n>Runs directory scanning and thumbnail generation (only for Jimp) in a
@@ -52,11 +52,11 @@
             class="switch"
             name="enableOnScrollThumbnailPrioritising"
             [switch-on-color]="'primary'"
-            [switch-inverse]="'inverse'"
+            [switch-inverse]="true"
             [switch-off-text]="text.Disabled"
             [switch-on-text]="text.Enabled"
-            [switch-handle-width]="'100'"
+            [switch-handle-width]="100"
-            [switch-label-width]="'20'"
+            [switch-label-width]="20"
             [(ngModel)]="settings.Client.enableOnScrollThumbnailPrioritising">
           </bSwitch>
           <small class="form-text text-muted" i18n>Those thumbnails get higher priority that are visible on the screen
@@ -72,11 +72,11 @@
             class="switch"
             name="enableOnScrollRendering"
             [switch-on-color]="'primary'"
-            [switch-inverse]="'inverse'"
+            [switch-inverse]="true"
             [switch-off-text]="text.Disabled"
             [switch-on-text]="text.Enabled"
-            [switch-handle-width]="'100'"
+            [switch-handle-width]="100"
-            [switch-label-width]="'20'"
+            [switch-label-width]="20"
             [(ngModel)]="settings.Client.enableOnScrollRendering">
           </bSwitch>
           <small class="form-text text-muted" i18n>Shows only the required amount of photos at once. Renders more if
@@ -94,11 +94,11 @@
             class="switch"
             name="enableCache"
             [switch-on-color]="'primary'"
-            [switch-inverse]="'inverse'"
+            [switch-inverse]="true"
             [switch-off-text]="text.Disabled"
             [switch-on-text]="text.Enabled"
-            [switch-handle-width]="'100'"
+            [switch-handle-width]="100"
-            [switch-label-width]="'20'"
+            [switch-label-width]="20"
             [(ngModel)]="settings.Client.enableCache">
           </bSwitch>
           <small class="form-text text-muted" i18n>Caches directory contents and search results for better performance
@@ -115,11 +115,11 @@
             class="switch"
             name="captionFirstNaming"
             [switch-on-color]="'primary'"
-            [switch-inverse]="'inverse'"
+            [switch-inverse]="true"
             [switch-off-text]="text.Disabled"
             [switch-on-text]="text.Enabled"
-            [switch-handle-width]="'100'"
+            [switch-handle-width]="100"
-            [switch-label-width]="'20'"
+            [switch-label-width]="20"
             [(ngModel)]="settings.Client.captionFirstNaming">
           </bSwitch>
           <small class="form-text text-muted" i18n>Show the caption (IPTC 120) tags from the EXIF data instead of the filenames.
@@ -137,11 +137,11 @@
             class="switch"
             name="showItemCount"
             [switch-on-color]="'primary'"
-            [switch-inverse]="'inverse'"
+            [switch-inverse]="true"
             [switch-off-text]="text.Disabled"
             [switch-on-text]="text.Enabled"
-            [switch-handle-width]="'100'"
+            [switch-handle-width]="100"
-            [switch-label-width]="'20'"
+            [switch-label-width]="20"
             [(ngModel)]="settings.Client.NavBar.showItemCount">
           </bSwitch>
           <small class="form-text text-muted" i18n>Show the number of items (photos) in the folder

frontend/app/ui/settings/random-photo/random-photo.settings.component.html

@@ -8,12 +8,12 @@
           class="switch"
           name="enabled"
           [switch-on-color]="'success'"
-          [switch-inverse]="'inverse'"
+          [switch-inverse]="true"
           [switch-off-text]="text.Disabled"
           [switch-on-text]="text.Enabled"
           [switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())"
-          [switch-handle-width]="'100'"
+          [switch-handle-width]="100"
-          [switch-label-width]="'20'"
+          [switch-label-width]="20"
           [(ngModel)]="settings.enabled">
         </bSwitch>
       </div>

frontend/app/ui/settings/search/search.settings.component.html

@@ -8,12 +8,12 @@
           class="switch"
           name="enabled"
           [switch-on-color]="'success'"
-          [switch-inverse]="'inverse'"
+          [switch-inverse]="true"
           [switch-off-text]="text.Disabled"
           [switch-on-text]="text.Enabled"
           [switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())"
-          [switch-handle-width]="'100'"
+          [switch-handle-width]="100"
-          [switch-label-width]="'20'"
+          [switch-label-width]="20"
           [(ngModel)]="settings.enabled">
         </bSwitch>
       </div>
@@ -32,11 +32,11 @@
               name="autocompleteEnabled"
               [switch-on-color]="'primary'"
               [switch-disabled]="!settings.enabled"
-              [switch-inverse]="'inverse'"
+              [switch-inverse]="true"
               [switch-off-text]="text.Disabled"
               [switch-on-text]="text.Enabled"
-              [switch-handle-width]="'100'"
+              [switch-handle-width]="100"
-              [switch-label-width]="'20'"
+              [switch-label-width]="20"
               [(ngModel)]="settings.AutoComplete.enabled">
             </bSwitch>
             <small class="form-text text-muted" i18n>Show hints while typing search query</small>
@@ -53,11 +53,11 @@
               name="instantSearchEnabled"
               [switch-on-color]="'primary'"
               [switch-disabled]="!settings.enabled"
-              [switch-inverse]="'inverse'"
+              [switch-inverse]="true"
               [switch-off-text]="text.Disabled"
               [switch-on-text]="text.Enabled"
-              [switch-handle-width]="'100'"
+              [switch-handle-width]="100"
-              [switch-label-width]="'20'"
+              [switch-label-width]="20"
               [(ngModel)]="settings.instantSearchEnabled">
             </bSwitch>
             <small class="form-text text-muted" i18n>Enables showing search results, while typing search query</small>

frontend/app/ui/settings/settings.service.ts

@@ -44,6 +44,7 @@ export class SettingsService {
         },
         Map: {
           enabled: true,
+          useImageMarkers: true,
           mapProvider: ClientConfig.MapProviders.OpenStreetMap,
           mapboxAccessToken: '',
           customLayers: [{name: 'street', url: ''}]

frontend/app/ui/settings/share/share.settings.component.html

@@ -8,12 +8,12 @@
           class="switch"
           name="enabled"
           [switch-on-color]="'success'"
-          [switch-inverse]="'inverse'"
+          [switch-inverse]="true"
           [switch-off-text]="text.Disabled"
           [switch-on-text]="text.Enabled"
           [switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())"
-          [switch-handle-width]="'100'"
+          [switch-handle-width]="100"
-          [switch-label-width]="'20'"
+          [switch-label-width]="20"
           [(ngModel)]="settings.enabled">
         </bSwitch>
       </div>
@@ -31,11 +31,11 @@
               name="passwordProtected"
               [switch-on-color]="'primary'"
               [switch-disabled]="!settings.enabled"
-              [switch-inverse]="'inverse'"
+              [switch-inverse]="true"
               [switch-off-text]="text.Disabled"
               [switch-on-text]="text.Enabled"
-              [switch-handle-width]="'100'"
+              [switch-handle-width]="100"
-              [switch-label-width]="'20'"
+              [switch-label-width]="20"
               [(ngModel)]="settings.passwordProtected">
             </bSwitch>
             <small class="form-text text-muted" i18n>Enables password protected sharing links</small>

frontend/app/ui/settings/thumbnail/thumbanil.settings.component.html

@@ -54,11 +54,11 @@
               class="switch"
               name="enabled"
               [switch-on-color]="'primary'"
-              [switch-inverse]="'inverse'"
+              [switch-inverse]="true"
               [switch-off-text]="text.Low"
               [switch-on-text]="text.High"
-              [switch-handle-width]="'100'"
+              [switch-handle-width]="100"
-              [switch-label-width]="'20'"
+              [switch-label-width]="20"
               [(ngModel)]="settings.server.qualityPriority">
             </bSwitch>
             <small class="form-text text-muted" i18n>High quality may be slow. Especially with Jimp.</small>

frontend/app/ui/settings/video/video.settings.component.html

@@ -7,12 +7,12 @@
           class="switch"
           name="enabled"
           [switch-on-color]="'success'"
-          [switch-inverse]="'inverse'"
+          [switch-inverse]="true"
           [switch-off-text]="text.Disabled"
           [switch-on-text]="text.Enabled"
           [switch-disabled]="inProgress"
-          [switch-handle-width]="'100'"
+          [switch-handle-width]="100"
-          [switch-label-width]="'20'"
+          [switch-label-width]="20"
           [(ngModel)]="settings.enabled">
         </bSwitch>
       </div>