results-map.component.html

<nb-card
  [nbSpinner]="geojsonLoading"
  nbSpinnerSize="giant"
  nbSpinnerStatus="basic"
>
  <nb-card-body>
    <div
      leaflet
      id="map"
      #map
      [leafletOptions]="options"
      (leafletMapReady)="onMapReady($event)"
    >
      <div id="loadGeojsonButtonsContainer">
        <button
          nbButton
          size="medium"
          (click)="onLoadClick(l.buttonValue)"
          nbTooltip="Select a simulation in order to use this button. GET http://localhost:8083/dss/geojson/{id}/selectedKpi"
          [disabled]="selectedSimulation == undefined"
          [nbSpinner]="geojsonLoading"
          [status]="selectedGeojson == l.buttonValue ? 'control' : 'primary'"
          *ngFor="let l of loadGeojsons"
        >
          {{ l.buttonLabel }}
        </button>
        <span class="flex-grow-1"></span>
        <button
          nbButton
          size="medium"
          (click)="openOverviewOfIndicators(dialog)"
          nbTooltip="click for overview of indicators"
          [disabled]="selectedSimulation == undefined"
        >
          <nb-icon icon="info-outline"></nb-icon>
        </button>
      </div>
      <ng-template #dialog let-data let-ref="dialogRef">
        <nb-card>
          <nb-card-header
            >Overview of Indicators for {{ data | titlecase }}
          </nb-card-header>
          <nb-card-body>
            <img
              src="{{
                'assets/images/overviewOfIndicators' +
                  data[0].toUpperCase() +
                  data.slice(1) +
                  '.png'
              }}"
              alt=""
            />
          </nb-card-body>
          <nb-card-footer>
            <button nbButton (click)="ref.close()">Close</button>
          </nb-card-footer>
        </nb-card>
      </ng-template>
    </div>
    <div id="grayscaleInput">
      <input
        type="range"
        [(ngModel)]="grayscale"
        (change)="grayscaleChange()"
      />
    </div>
  </nb-card-body>
</nb-card>