pigallery2/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html

<div [hidden]="!visible" #root>

  <div class="lightbox"
       [style.width.px]="lightboxDimension.width"
       [style.height.px]="lightboxDimension.height"
       [style.top.px]="lightboxDimension.top"
       [style.left.px]="lightboxDimension.left"
       [style.opacity]="opacity">
    <agm-map
      #map
      [style.width.px]="mapDimension.width"
      [style.height.px]="mapDimension.height"
      [fitBounds]="true">
      <ng-container *ngIf="map.zoom > 11">
        <agm-polyline *ngFor="let path of paths"
                      strokeColor="#007bff"
                      strokeOpacity="0.8"
                      strokeWeight="6">
            <agm-polyline-point
              *ngFor="let point of path"
              [latitude]="point.latitude" [longitude]="point.longitude">
            </agm-polyline-point>
        </agm-polyline>
      </ng-container>
      <ng-container *ngIf="map.zoom <= 11">
        <agm-polyline *ngFor="let path of pathOutlines"
                      strokeColor="#007bff"
                      strokeOpacity="0.8"
                      strokeWeight="6">
            <agm-polyline-point
              *ngFor="let point of path"
              [latitude]="point.latitude" [longitude]="point.longitude">
            </agm-polyline-point>
        </agm-polyline>
      </ng-container>
      <agm-marker
        *ngFor="let path of paths"
        [latitude]="path[0].latitude"
        [longitude]="path[0].longitude"
        iconUrl="https://cdn.mapmarker.io/api/v1/fa?size=32&icon=fa-map-marker-alt&color=%23006fe6"
        [agmFitBounds]="true">
      </agm-marker>
      <agm-marker
        *ngFor="let photo of mapPhotos"
        [latitude]="photo.latitude"
        [longitude]="photo.longitude"
        [iconUrl]="photo.iconUrl | fixOrientation:photo.orientation | async"
        (markerClick)="loadPreview(photo)"
        [agmFitBounds]="true">
        <agm-info-window>
          <img *ngIf="photo.preview.thumbnail.Src"
               [style.width.px]="photo.preview.width"
               [style.height.px]="photo.preview.height"
               [src]="photo.preview.thumbnail.Src | fixOrientation:photo.orientation | async">
          <div class="preview-loading"
               [style.width.px]="photo.preview.width"
               [style.height.px]="photo.preview.height"
               *ngIf="!photo.preview.thumbnail.Src">
              <span class="oi"
                    [ngClass]="photo.preview.thumbnail.Error ? 'oi-warning' :  'oi-picture'"
                    aria-hidden="true">
              </span>
          </div>
        </agm-info-window>
      </agm-marker>
    </agm-map>
  </div>


  <div id="controllers-container" *ngIf="controllersVisible">
    <div id="controls">
            <span>
                <span class="oi  oi-fullscreen-exit highlight"
                      *ngIf="fullScreenService.isFullScreenEnabled()"
                      (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
                </span>
      <span>
             <span class="oi oi-fullscreen-enter highlight"
                   *ngIf="!fullScreenService.isFullScreenEnabled()"
                   (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
                </span>
      <span>
             <span class="oi oi-x highlight" (click)="hide()" title="close"></span>
             </span>
    </div>

  </div>
</div>