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

<div class="btn btn-outline-primary layer-switcher" (click)="handleClick($event)">
  <i class="fal fa-layer-group"></i>  
  <div class="layers hidden" [ngClass]="{'hidden':!(showLayerSwitcher|async)}" (click)="$event.stopPropagation();">
    <div class="card layers-card m-1">
      <div class="card-header">
        <span i18n>Layers</span>
        <i class="float-right fas fa-times" (click)="close($event)"></i>
      </div>
      <ul class="navbar-nav">
        <li class="nav-item py-0">
          <span><i class="fal fa-layer-group" aria-hidden="true"></i>&nbsp;<span i18n>Base maps</span></span>
          <div  class="mb-4">
            <fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
          </div>
        </li>
        <li class="nav-item py-0">
          <span><i class="fal fa-layer-group" aria-hidden="true"></i>&nbsp;<span i18n>Overlays</span></span>
          <div class="mb-4">
            <fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
          </div>
        </li>
        <li class="nav-item py-0" *ngIf="selectedItemLayer$ | async as selectedItemLayer">
          <span><i class="fal fa-layer-group" aria-hidden="true"></i>&nbsp;<span i18n>Data</span><span class="slideButton"><a href="#" title="Compare" class="btn btn-light btn-sm" (click)="handleToggleShowDatalayerSlide($event)"><i class="fal fa-sliders-h-square"></i></a></span></span>
          <div class="mb-4">
            <fm-map-layer-list [dataLayers]="true" [itemLayers]="[selectedItemLayer]" [selectedLayer]="selectedItemLayer" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
          </div>
        </li>

      </ul>
  </div>
  </div>
</div>