Add layerswitcher

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

@@ -0,0 +1,25 @@
+<div class="rounded-circle layer-switcher" (click)="handleClick($event)">
+  <i class="fa fa-map"></i>  
+  <div class="layers hidden" [ngClass]="{'hidden':!(showLayerSwitcher|async)}" (click)="$event.stopPropagation();">
+    <div class="card layers-card m-1">
+      <div class="card-header" i18n>
+        Layers
+        <i class="float-right fa fa-close" (click)="close($event)"></i>
+      </div>
+      <ul class="navbar-nav">
+        <li class="nav-item py-0">
+          <span i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps</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 i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays</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>
+      </ul>
+  </div>
+  </div>
+</div>

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

@@ -0,0 +1,65 @@
+@import "../../_theme.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+
+
+.layer-switcher {  
+  display:block; 
+  width:2.5em;
+  height:2.5em;
+  background-color: white;
+  background-size: contain;
+  margin-top:0.5em;
+  text-align: center;
+  line-height: 2.5em;
+  z-index: 4;
+ 
+}
+
+.layers {
+  position: absolute;
+  overflow: hidden;
+  bottom: -1em;
+  right: -1em;
+  text-align: left;
+  min-width: 100vw;
+ // transition: max-height 0.3s ease-out,max-width 0.3s ease-out,min-height 0.3s ease-out,min-width 0.3s ease-out;
+}
+
+.hidden {
+  max-width:0;
+  max-height: 0;
+  min-height: 0;
+  min-width: 0;
+}
+
+.navbar-nav {
+  padding-left: 7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+  overflow-x: hidden;
+  overflow-y: auto; 
+  bottom:-3rem;
+  height:  50vh;
+}
+
+@media screen and (min-width:44rem) {
+  .layer-switcher {
+    position: relative;
+  }
+
+  .layers {
+    max-width: 100%;
+    min-width: 22em;
+    bottom: 2.5em;
+    right: 2.5em;
+    min-height: 0;
+    max-height: calc(100vh - 9rem);
+  }
+
+  .hidden {
+    max-width:0;
+    max-height: 0;
+    min-height: 0;
+    min-width: 0;
+  }   
+}

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

@@ -0,0 +1,75 @@
+import { Component, OnInit,  OnChanges, SimpleChanges } from '@angular/core';
+import {IItemLayer} from '../../models/item.layer';
+import { Store } from '@ngrx/store';
+import * as mapReducers from '../../reducers/map.reducer';
+import * as mapActions from '../../actions/map.actions';
+import {createEmpty,extend } from 'ol/extent';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'fm-map-layer-switcher',
+  templateUrl: './layer-switcher.component.html',
+  styleUrls: ['./layer-switcher.component.scss']
+})
+export class LayerSwitcher  implements OnInit,OnChanges{
+
+  public showLayerSwitcher:Observable<boolean>;
+  public overlayLayers: Observable<Array<IItemLayer>>;
+  public selectedOverlayLayer: Observable<IItemLayer>;
+  public baseLayers: Observable<Array<IItemLayer>>;
+  public selectedBaseLayer: Observable<IItemLayer>;
+
+  constructor( private store: Store<mapReducers.State>) {
+  }
+
+  ngOnInit() { 
+    this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
+    this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
+    this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
+    this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
+    this.showLayerSwitcher = this.store.select(mapReducers.selectGetShowLayerSwitcher);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+  }
+
+
+
+  handleClick(event:Event) {
+    this.store.dispatch(new mapActions.ShowLayerSwitcher(true));
+  }
+
+  close(event:Event) {
+    this.store.dispatch(new mapActions.ShowLayerSwitcher(false));
+  }
+
+
+
+  handleOnToggleVisibility(itemLayer: IItemLayer) {
+    this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
+  }
+
+  handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
+    this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
+  }
+
+  handleOnDelete(itemLayer: IItemLayer) {
+    this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
+  }
+
+  handleZoomToExtent(itemLayer: IItemLayer) {
+    var extent =  createEmpty();
+    extend(extent, itemLayer.layer.getExtent());
+    if (extent) {
+      this.store.dispatch(new mapActions.SetExtent(extent));
+    }    
+  }
+
+  handleSelectOverlayLayer(itemLayer: IItemLayer) {
+    this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
+  }
+
+  handleSelectBaseLayer(itemLayer: IItemLayer) {
+    this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
+  }
+}