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

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

  </div>
  <ng-container *ngIf="(mapState$|async) as mapState">
          <aol-view [zoom]="mapState.zoom" [rotation]="mapState.rotation">
              <aol-coordinate [x]="mapState.xCenter" [y]="mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
              <zoom-to-extent [extent]="extent$|async" [animate]="true"></zoom-to-extent>
            </aol-view>
  </ng-container>    
  <aol-interaction-default></aol-interaction-default>
  <aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
  <item-layers [itemLayers]="baseLayers|async"></item-layers>
  <item-layers [itemLayers]="overlayLayers|async"></item-layers>
  <item-layers [itemLayer]="selectedItemLayer|async"></item-layers>
  <aol-layer-vector>
    <item-source-vector [features]="features|async" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="selectedFeature|async" [selectedItem]="selectedItem|async"></item-source-vector>
  </aol-layer-vector>
  <gps-location [position]="position|async" [headingTolerance]="20" [showHeading]="true"></gps-location>
  <div class="control-container">
<!--    <switch2d3d></switch2d3d>-->
    <rotation-reset></rotation-reset>
  </div>
  <file-drop-target [parentCode]="(parentCode | async)" (onFileDropped)="handleFileDropped($event)"></file-drop-target>
</aol-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"></map-search>
<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)">
        <feature-list-container [features]="(features | async)" [queryState]="(queryState|async)"></feature-list-container>
      </div>

      <div *ngIf="(selectedItem | async);let item">
        <selected-item-container [item]="item"></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>
</side-panel>
<side-panel [visible]="(menuVisible|async)" class="menu">
  <div class="container-fluid">
    <div class="body">
      <div class="logo">
        <span><img src="/images/farmmapslogo.png" /></span>
        <span><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></span>
      </div>
      <div class="card menu-card">
        <div class="d-flex flex-row flex-wrap">
          <div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
            <div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
            <div class="caption" i18n>Farms</div>
          </div>
          <div class="shortcut-icon" (click)="handleTrijntjeClick($event,{itemType:'vnd.farmmaps.itemtype.trijntje'})">
            <div class="icon rounded-circle trijntje-icon"><i class="fa fa-tint" aria-hidden="true"></i></div>
            <div class="caption" i18n>Trijntje</div>
          </div>
        </div>
      </div>
      <div class="card menu-card">
        <ul class="navbar-nav">
          <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/my_drive']" class="nav-link"><span i18n><i class="fa fa-folder" aria-hidden="true"></i> My Drive</span></a></li>
          <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/map_uploads']" class="nav-link"><span i18n><i class="fa fa-cloud-upload" aria-hidden="true"></i> Map uploads</span></a></li>
        </ul>
      </div>
      <div class="card menu-card">
        <ul class="navbar-nav">
          <li class="nav-item py-0">
            <a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
            <div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
              <layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></layer-list>
            </div>
          </li>
          <li class="nav-item py-0">
            <a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
            <div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
              <layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></layer-list>
            </div>
          </li>
        </ul>
      </div>
      <!--<div class="card menu-card">
        <ul class="navbar-nav">
          <li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})"><span i18n>Farms</span></a></li>
          <li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})"><span i18n>Layers</span></a></li>
        </ul>
      </div>-->
    </div>
  </div>
</side-panel>