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

@@ -35,7 +35,6 @@ 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;
@@ -211,11 +210,6 @@ 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
@@ -244,6 +238,5 @@ export type Actions = SetMapState
   | SetState
   | SetViewExtent
   | DoQuery
-  | SetStyle
+  | SetStyle;
-  | ShowLayerSwitcher;
 

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

@@ -66,7 +66,6 @@ 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) {
@@ -126,7 +125,6 @@ export {
   WidgetStatusComponent,
   GpsLocation,
   PanToLocation,
-  LayerSwitcher,
   AbstractFeatureListComponent,
   AbstractFeatureListFeatureComponent,
   AbstractSelectedItemComponent,
@@ -193,8 +191,7 @@ export {
     ItemWidgetListComponent,
     WidgetStatusComponent,
     GpsLocation,
-    PanToLocation,
+    PanToLocation
-    LayerSwitcher
   ],
   entryComponents: [
     FeatureListComponent,
@@ -218,7 +215,6 @@ export {
        MapComponent,
        GpsLocation,
        PanToLocation,
-       LayerSwitcher,
        FeatureListFeatureComponent,
        FeatureListFeatureCropfieldComponent,
        FeatureListFeatureCroppingschemeComponent,

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

@@ -1,25 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-@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

@@ -1,75 +0,0 @@
-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,9 +26,6 @@
           <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,7 +4,8 @@ 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;
-  min-width: calc(100vw - 1rem);
+  width: 21rem;
+  max-width: 21rem;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   z-index:3;
 }
@@ -39,7 +40,6 @@ div.map-search button {
 div.map-search.collapsed {
   max-height:3.5rem;
   max-width:10rem;
-  min-width: 0;
 }
 
 div.map-search.searchcollapsed {
@@ -55,24 +55,11 @@ 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;
 }
@@ -102,13 +89,6 @@ 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,7 +39,6 @@
     <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,8 +53,7 @@ export interface State {
   projection: string,
   selectedBaseLayer: IItemLayer,
   selectedOverlayLayer: IItemLayer,
-  styles:IStyles,
+  styles:IStyles
-  showLayerSwitcher:boolean
 }
 
 export const initialState: State = {
@@ -88,8 +87,7 @@ 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 {    
@@ -309,8 +307,7 @@ 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, {});
@@ -322,10 +319,6 @@ 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;
     }
@@ -353,7 +346,6 @@ 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);
@@ -377,6 +369,5 @@ 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);