<h2>Map</h2>

<agm-map *ngIf="images"
         [latitude]="latitude"
         [longitude]="longitude"
         [zoom]="2">
  <agm-marker
    *ngFor="let image of getImagesForMap()"
    [latitude]="image.latitude"
    [longitude]="image.longitude"
    [opacity]="1"
    [markerDraggable]="false"
    (markerClick)="loadImage(selectMarker($event))"
  ></agm-marker>
</agm-map>

<div *ngIf="selectedImage">
  Latitude: {{ selectedImage.latitude }} Longitude: {{ selectedImage.longitude }} Name: {{selectedImage.name}}

  <mat-divider style="margin-bottom: 1em;"></mat-divider>

  <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em; display: flex">
    <img *ngIf="selectedImage.image_b64, let b64; else loadingImage"
         [src]="b64"
         style="width: 100%; margin: auto" [alt]="selectedImage.filename"/>
    <ng-template #loadingImage>
      <mat-spinner style="margin: auto;"></mat-spinner>
    </ng-template>
  </div>

  <p *ngIf="selectedImage.filename">filename: {{selectedImage.filename}}</p>
<!--  <p *ngIf="selectedImage.latitude">latitude: {{selectedImage.latitude}}</p>-->
<!--  <p *ngIf="selectedImage.longitude">longitude: {{selectedImage.longitude}}</p>-->
  <p *ngIf="selectedImage.version">version: {{selectedImage.version}}</p>
  <p *ngIf="selectedImage.tag">tag: {{selectedImage.tag}}</p>
<!--  <p *ngIf="selectedImage.name">name: {{selectedImage.name}}</p>-->
</div>
