Disabling Map preview on IOS #155.

leaflet (yaga-map) uses z-index that confuses safari on IOS and prevents click propagation for photo preview (lightbox)

src/frontend/app/ui/gallery/map/map.gallery.component.css

@@ -1,9 +1,17 @@
 .yaga-map{
-  z-index: 0;
+  /*z-index: 0;*/
   width: 100%;
   height: 100%;
 }
 
+.clickable{
+  cursor: pointer;
+}
+
+.oi{
+  font-size: 59pt;
+}
+
 #map {
   width: 100%;
   height: 100%;

src/frontend/app/ui/gallery/map/map.gallery.component.html

@@ -1,13 +1,15 @@
 <ng-template [ngIf]="mapPhotos.length>0">
   <app-gallery-map-lightbox [photos]="photos" [gpxFiles]="gpxFiles"></app-gallery-map-lightbox>
-  <div id="map" #map>
-
-    <yaga-map #yagaMap
-              [draggingEnabled]="false"
-              [keyboardEnabled]="false"
-              [tapEnabled]="false"
-              [boxZoomEnabled]="false"
-              [doubleClickZoomEnabled]="false">
+  <div class="clickable" id="map" #map (click)="click()">
+  <span *ngIf="!EnableMapPreview" class="oi-map oi"></span>
+    <yaga-map
+      *ngIf="EnableMapPreview"
+      #yagaMap
+      [draggingEnabled]="false"
+      [keyboardEnabled]="false"
+      [tapEnabled]="false"
+      [boxZoomEnabled]="false"
+      [doubleClickZoomEnabled]="false">
       <yaga-marker
         *ngFor="let photo of mapPhotos"
         [lat]="photo.lat"
@@ -19,9 +21,6 @@
       </yaga-attribution-control>
       <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
     </yaga-map>
-    <div class="overlay" (click)="click()"
-         [style.margin-top.px]="-height"
-         [style.height.px]="height">
-    </div>
+
   </div>
 </ng-template>

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

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnChanges, ViewChild, AfterViewInit} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild} from '@angular/core';
 import {PhotoDTO} from '../../../../../common/entities/PhotoDTO';
 import {Dimension, IRenderable} from '../../../model/IRenderable';
 import {GalleryMapLightboxComponent} from './lightbox/lightbox.map.gallery.component';
@@ -20,12 +20,33 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
   mapPhotos: Array<{ lat: number, lng: number }> = [];
   @ViewChild('map', {static: false}) mapElement: ElementRef;
   @ViewChild('yagaMap', {static: false}) yagaMap: MapComponent;
-  height: number = null;
+
+//  height: number = null;
 
 
   constructor(public mapService: MapService) {
   }
 
+  get EnableMapPreview(): boolean {
+    /**
+     * Disabling map preview on IOS as safari has issues handling z-index of leaflet (yaga-maps)
+     * Details https://github.com/bpatrik/pigallery2/issues/155
+     * TODO: re enable it once yaga-maps is fixed
+     */
+    const isIOS = [
+        'iPad Simulator',
+        'iPhone Simulator',
+        'iPod Simulator',
+        'iPad',
+        'iPhone',
+        'iPod'
+      ].includes(navigator.platform)
+      // iPad on iOS 13 detection
+      || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+
+    return !isIOS;
+  }
+
   ngOnChanges() {
     this.mapPhotos = this.photos.filter(p => {
       return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData &&
@@ -47,7 +68,7 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.height = this.mapElement.nativeElement.clientHeight;
+      //    this.height = this.mapElement.nativeElement.clientHeight;
       this.yagaMap.setView(this.mapPhotos[0], 99);
       this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
       this.yagaMap.zoom = 0;