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

<aol-map #map (onMoveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':(panelVisible|async)}" class="map">  
  <div>

  </div>
  <aol-view [zoom]="(mapState|async).zoom" [rotation]="(mapState|async).rotation">
     <aol-coordinate [x]="(mapState|async).xCenter" [y]="(mapState|async).yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
     <fm-map-zoom-to-extent [extent]="extent|async" [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]="baseLayers|async"></fm-map-item-layers>
  <fm-map-item-layers [itemLayers]="overlayLayers|async"></fm-map-item-layers>
  <fm-map-item-layers [itemLayer]="selectedItemLayer|async"></fm-map-item-layers>
  <aol-layer-vector>
    <fm-map-item-source-vector [features]="features|async" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="selectedFeature|async" [selectedItem]="selectedItem|async"></fm-map-item-source-vector>
  </aol-layer-vector>
  <fm-map-gps-location [position]="position|async" [headingTolerance]="20" [showHeading]="true"></fm-map-gps-location>
  <div class="control-container">
<!--    <switch2d3d></switch2d3d>-->
    <fm-map-rotation-reset></fm-map-rotation-reset>
  </div>
  <fm-map-file-drop-target [parentCode]="(parentCode | async)" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
</aol-map>
<fm-map-map-search #mapSearch [openedModalName]="openedModalName|async" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':(menuVisible|async)}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="searchCollapsed|async" [searchMinified]="(searchMinified | async)" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="queryState|async" [clearEnabled]="clearEnabled|async" [period]="period|async"></fm-map-map-search>
<fm-side-panel [resizeable]="true" [visible]="(panelVisible|async)" [collapsed]="(panelCollapsed|async)" [collapsable]="false">
  <div class="panel-wrapper">
    <div class="panel-top bg-secondary" *ngIf="!(searchMinified | async)">
    </div>
    <div class="panel-bottom">

      <div *ngIf="!(selectedItem|async)">
        <fm-map-feature-list-container [features]="(features | async)" [queryState]="(queryState|async)"></fm-map-feature-list-container>
      </div>

      <div *ngIf="(selectedItem | async);let item">
        <fm-map-selected-item-container [item]="item"></fm-map-selected-item-container>
      </div>
      <div *ngIf="(features|async).length == 0" class="no-results  m-2">
        <div *ngIf="(queryState|async)?.query">Cannot find <span>{{(queryState|async)?.query}}</span></div>
        <div *ngIf="(queryState|async)?.tags">Cannot find tag <span>{{(queryState|async)?.tags}}</span></div>
      </div>
    </div>
  </div>
</fm-side-panel>
<fm-side-panel [visible]="(menuVisible|async)" class="menu">
  <div class="container-fluid">
    <div class="body">
      <div class="d-flex flex-row">
        <div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
        <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
      </div>
      <div class="d-flex flex-column cards"> 
          <router-outlet name="side-panel-menu"></router-outlet>          
      </div>      
  </div>
  </div>
</fm-side-panel>