<div class="d-flex justify-content-end">
  <div class="mb-4">
    <button
      class="btn btn-primary mapOptionsBtn"
      [attr.aria-pressed]="isMapOptionsVisible"
      appTooltip="{{ 'Tour.Tooltip.DataResource.MapSettings.text' | translate }}"
      (click)="toggleMapOptions()">
      {{ 'Map.Options' | translate }}
    </button>
  </div>
  <app-map-options
    [hidden]="!isMapOptionsVisible"
    (displayPointsInRange)="displayUserPreferences($event)"
    (allowCustomLocalization)="toggleClickEventOnMap($event)"
    (saveUserSettings)="saveUserSettings($event)"
    (selectLabel)="highlightObjectOnMap($event)"
    (clearForm)="clearForm()"
    [labels]="labels"
    [userSettings]="userSettings"></app-map-options>
</div>

<div class="d-flex flex-nowrap">
  <div class="resource-map">
    <div
      #mapRef
      class="resource-map"
      id="resourceMap"
      role="application"
      [attr.aria-label]="'Resources.MapDescription' | translate"></div>
  </div>
</div>
