Add layerswitcher

projects/common-map/src/fm-map/actions/map.actions.ts

@@ -35,6 +35,7 @@ export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
 export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
 export const DOQUERY = '[Map] DoQuery';
 export const SETSTYLE = '[Map] SetStyle';
+export const SHOWLAYERSWITCHER = '[Map] ShowLayerSwitcher';
 
 export class SetState implements Action {
   readonly type = SETSTATE;
@@ -210,6 +211,11 @@ export class SetStyle implements Action {
   constructor(public itemType:string,public style: Style | (Feature)) { }
 }
 
+export class ShowLayerSwitcher implements Action {
+  readonly type = SHOWLAYERSWITCHER;
+  constructor(public show:boolean) {}
+}
+
 export type Actions = SetMapState
   | Init
   | SetParent
@@ -238,5 +244,6 @@ export type Actions = SetMapState
   | SetState
   | SetViewExtent
   | DoQuery
-  | SetStyle;
+  | SetStyle
+  | ShowLayerSwitcher;
 

projects/common-map/src/fm-map/common-map.module.ts

@@ -66,6 +66,7 @@ import { ForChild} from './components/for-item/for-child.decorator';
 import {ForItemType } from './components/for-item/for-itemtype.decorator';
 import { ForSourceTask} from './components/for-item/for-sourcetask.decorator';
 import { PanToLocation} from './components/aol/pan-to-location/pan-to-location.component';
+import {LayerSwitcher} from './components/layer-switcher/layer-switcher.component';
 
 export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
   const r = function(state, action) {
@@ -125,6 +126,7 @@ export {
   WidgetStatusComponent,
   GpsLocation,
   PanToLocation,
+  LayerSwitcher,
   AbstractFeatureListComponent,
   AbstractFeatureListFeatureComponent,
   AbstractSelectedItemComponent,
@@ -191,7 +193,8 @@ export {
     ItemWidgetListComponent,
     WidgetStatusComponent,
     GpsLocation,
-    PanToLocation
+    PanToLocation,
+    LayerSwitcher
   ],
   entryComponents: [
     FeatureListComponent,
@@ -215,6 +218,7 @@ export {
        MapComponent,
        GpsLocation,
        PanToLocation,
+       LayerSwitcher,
        FeatureListFeatureComponent,
        FeatureListFeatureCropfieldComponent,
        FeatureListFeatureCroppingschemeComponent,

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));
+  }
+}

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

@@ -26,6 +26,9 @@
           <label class="form-check-label" for="filtercheck2">Restrict to visible area</label>
         </div>    
       </div>
+      <div class="shortcuts">
+        <router-outlet name="map-search"></router-outlet>
+      </div>
     </form>
     <ng-content></ng-content>
   </div>  

projects/common-map/src/fm-map/components/map-search/map-search.component.scss

@@ -4,8 +4,7 @@ div.map-search {
   left: 0.5rem;
   transition: opacity 0.5s ease-out, left 0.3s,max-height 0.3s ease-out,max-width 0.3s ease-out;
   max-height: 10rem;
-  width: 21rem;
-  max-width: 21rem;
+  min-width: calc(100vw - 1rem);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   z-index:3;
 }
@@ -40,6 +39,7 @@ div.map-search button {
 div.map-search.collapsed {
   max-height:3.5rem;
   max-width:10rem;
+  min-width: 0;
 }
 
 div.map-search.searchcollapsed {
@@ -55,11 +55,24 @@ div.map-search div.options {
   max-height:4.5rem;
 }
 
+div.map-search div.shortcuts {
+  padding-top: 0.5rem;
+  line-height: 1.5rem;
+  overflow: hidden;
+  max-height: 50vh;
+  transition: max-height 0.3s ease-in-out;
+}
+
 div.map-search.collapsed div.options, div.map-search.searchcollapsed div.options {
   max-height: 0;
   padding:0;
 }
 
+div.map-search.collapsed div.shortcuts, div.map-search.searchcollapsed div.shortcuts {
+  max-height: 0;
+  padding:0;
+}
+
 div.map-search button {
   overflow: hidden;
 }
@@ -89,6 +102,13 @@ div.map-search.searchcollapsed button[type="submit"] {
   white-space:nowrap;
 }
 
+@media screen and (min-width:44rem) {
+  div.map-search {
+    width: 21rem;
+    max-width: 21rem;
+    min-width:0;
+  }
+}
 
 
 

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

@@ -39,6 +39,7 @@
     <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>

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -53,7 +53,8 @@ export interface State {
   projection: string,
   selectedBaseLayer: IItemLayer,
   selectedOverlayLayer: IItemLayer,
-  styles:IStyles
+  styles:IStyles,
+  showLayerSwitcher:boolean
 }
 
 export const initialState: State = {
@@ -87,7 +88,8 @@ export const initialState: State = {
   selectedBaseLayer: null,
   selectedOverlayLayer: null,
   selectedItemLayer: null,
-  styles: {}
+  styles: {},
+  showLayerSwitcher: false
 }
 
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {    
@@ -307,7 +309,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
           searchCollapsed: true,
           searchMinified: false,
           features: [],
-          query:initialState.query
+          query:initialState.query,
+          showLayerSwitcher: false
         });
       } else {
         return tassign(state, {});
@@ -319,6 +322,10 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       styles[a.itemType] = a.style;
       return tassign(state,{styles:styles});
     }
+    case mapActions.SHOWLAYERSWITCHER:{
+      let a = action as mapActions.ShowLayerSwitcher;
+      return tassign(state,{showLayerSwitcher:a.show});
+    }
     default: {
       return state;
     }
@@ -346,6 +353,7 @@ export const getQuery = (state: State) => state.query;
 export const getSelectedItemLayer = (state: State) => state.selectedItemLayer;
 export const getPeriod = (state:State) => state.period;
 export const getStyles = (state:State) => state.styles;
+export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher;
 
 export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
 export const selectGetMapState= createSelector(selectMapState, getMapState);
@@ -369,5 +377,6 @@ export const selectGetQuery = createSelector(selectMapState, getQuery);
 export const selectGetSelectedItemLayer = createSelector(selectMapState, getSelectedItemLayer);
 export const selectGetPeriod = createSelector(selectMapState, getPeriod);
 export const selectGetStyles = createSelector(selectMapState, getStyles);
+export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher);