FarmMapsLib/projects/common-map/src/fm-map/components/map/map.component.html

<ng-container *ngIf="{
  mapState:mapState$|async,
  extent:extent$|async,
  baseLayers:baseLayers$|async,
  overlayLayers:overlayLayers$|async,
  selectedItemLayer:selectedItemLayer$|async,
  features:features$|async,
  position:position$|async,
  parentCode:parentCode$|async,
  panelVisible:panelVisible$|async,
  openedModalName:openedModalName$|async,
  panelCollapsed:panelCollapsed$|async,
  searchMinified:searchMinified$|async,
  selectedItem:selectedItem$|async,
  queryState:queryState$|async,
  searchCollapsed:searchCollapsed$|async,
  clearEnabled:clearEnabled$|async,
  period:period$|async,
  compassHeading:compassHeading$|async,
  styles:styles$|async,
  selectedFeature:selectedFeature$|async
} as state">
  <aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':state.panelVisible}" class="map">  
    <div>
  
    </div>
    <aol-view [zoom]="state.mapState.zoom" [rotation]="state.mapState.rotation">
       <aol-coordinate [x]="state.mapState.xCenter" [y]="state.mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
       <fm-map-zoom-to-extent [extent]="state.extent" [animate]="true"></fm-map-zoom-to-extent>
    </aol-view>
    <aol-interaction-default></aol-interaction-default>
    <aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
    <fm-map-item-layers [itemLayers]="state.baseLayers"></fm-map-item-layers>
    <fm-map-item-layers [itemLayers]="state.overlayLayers"></fm-map-item-layers>
    <fm-map-item-layers [itemLayer]="state.selectedItemLayer"></fm-map-item-layers>
    <aol-layer-vector>
      <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
    </aol-layer-vector>
    <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location>
    <div class="control-container">
  <!--    <switch2d3d></switch2d3d>-->
      <fm-map-layer-switcher></fm-map-layer-switcher>
      <fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>
      <fm-map-rotation-reset></fm-map-rotation-reset>
    </div>
    <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
  </aol-map>
  <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period"></fm-map-map-search>
  <fm-side-panel [resizeable]="true" [visible]="state.panelVisible" [collapsed]="state.panelCollapsed" [collapsable]="false">
    <div class="panel-wrapper">
      <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
      </div>
      <div class="panel-bottom">
  
        <div *ngIf="!(state.selectedItem)">
          <fm-map-feature-list-container [features]="state.features" [queryState]="state.queryState"></fm-map-feature-list-container>
        </div>
  
        <div *ngIf="state.selectedItem;let item">
          <fm-map-selected-item-container [item]="item" [itemLayer]="state.selectedItemLayer"></fm-map-selected-item-container>
        </div>
        <div *ngIf="state.features.length == 0" class="no-results  m-2">
          <div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>
          <div *ngIf="state.queryState?.tags">Cannot find tag <span>{{state.queryState?.tags}}</span></div>
        </div>
      </div>
    </div>
  </fm-side-panel>
</ng-container>