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">

    <yaga-map #yagaMap
              [style.width.px]="mapDimension.width"
              [style.height.px]="mapDimension.height">
      <yaga-polyline *ngFor="let path of paths"
                     [latLngs]="path">
      </yaga-polyline>
      <yaga-marker
        *ngFor="let path of paths"
        [lat]="path[0].lat"
        [lng]="path[1].lng">
      </yaga-marker>
      <yaga-marker
        *ngFor="let photo of mapPhotos"
        [lat]="photo.lat"
        [lng]="photo.lng">
        <yaga-icon
          *ngIf="photo.iconUrl"
          [iconUrl]="photo.iconUrl"
          [iconSize]="yagaMap.zoom < 15 ? smallIconSize : iconSize"
        ></yaga-icon>
        <yaga-popup
          (open)="loadPreview(photo)"
          [minWidth]="photo.preview.width">
          <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"
               *ngIf="!photo.preview.thumbnail.Src"
               [style.width.px]="photo.preview.width"
               [style.height.px]="photo.preview.height">
              <span class="oi"
                    [ngClass]="photo.preview.thumbnail.Error ? 'oi-warning' :  'oi-picture'"
                    aria-hidden="true">
              </span>
          </div>
        </yaga-popup>
      </yaga-marker>
      <yaga-attribution-control
        prefix=""
        [attributions]="mapService.Attributions">
      </yaga-attribution-control>
      <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
    </yaga-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, key: f" i18n-title></span>
                </span>
      <span>
             <span class="oi oi-fullscreen-enter highlight"
                   *ngIf="!fullScreenService.isFullScreenEnabled()"
                   (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title></span>
                </span>
      <span>
             <span class="oi oi-x highlight" (click)="hide()" title="close, key: Escape" i18n-title></span>
             </span>
    </div>

  </div>
</div>