Merge branch 'develop' of https://git.akkerweb.nl/FarmMaps/FarmMapsLib into develop

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

@@ -1,33 +1,36 @@
-<ng-template #rt let-r="result" let-t="term">
-  <i class="fa fa-search" aria-hidden="true" style="width:2rem"></i>
-  <ngb-highlight [result]="formatter(r)" [term]="t"></ngb-highlight> 
-</ng-template>
-
-<div class="map-search collapsed" [ngClass]="{'collapsed':collapsedLocal,searchcollapsed:searchMinifiedLocal}" (click)="$event.stopPropagation()">
-  <div class="card p-2">
-    <form class="form" (ngSubmit)="handleSearch($event)">
-      <div class="input-group">
-        <div class="input-group-prepend">
-          <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
-        </div>
-        <input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
-        <div class="input-group-append">
-          <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fa fa-search"></i></button>
-          <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fa fa-remove"></i></button>
-        </div>
-      </div>
-      <div class="options">
-        <div class="form-check">
-          <input class="form-check-input" (ngModelChange)="handleChangeEnableDateFilter($event)" [ngModel]="dateFilter" name="datefilterEnabled" type="checkbox" value="" id="filtercheck1">
-          <label class="form-check-label" for="filtercheck1">from <a (click)="handleOpenSelectPeriodModal($event)" href="#">{{startEndCaption}}</a></label>
-        </div>
-        <div class="form-check">
-          <input class="form-check-input" (ngModelChange)="handleChangeEnableBBOXFilter($event)" [ngModel]="filterOptionsLocal.bboxFilter" name="bboxfilterEnabled" type="checkbox" value="" id="filtercheck2">
-          <label class="form-check-label" for="filtercheck2">Restrict to visible area</label>
-        </div>    
-      </div>
-    </form>
-    <ng-content></ng-content>
-  </div>
-</div>
-<fm-map-select-period-modal [modalState]="openedModalName" (onCloseModal)="handleCloseModal()" (onSelect)="handleSelectPeriod($event)" [startDate]="startDate" [endDate]="endDate"></fm-map-select-period-modal>
+<ng-template #rt let-r="result" let-t="term">
+  <i class="fa fa-search" aria-hidden="true" style="width:2rem"></i>
+  <ngb-highlight [result]="formatter(r)" [term]="t"></ngb-highlight> 
+</ng-template>
+
+<div class="map-search collapsed" [ngClass]="{'collapsed':collapsedLocal,searchcollapsed:searchMinifiedLocal}" (click)="$event.stopPropagation()">
+  <div class="card p-2">
+    <form class="form" (ngSubmit)="handleSearch($event)">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
+        </div>
+        <input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
+        <div class="input-group-append">
+          <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fa fa-search"></i></button>
+          <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fa fa-remove"></i></button>
+        </div>
+      </div>
+      <div class="options">
+        <div class="form-check">
+          <input class="form-check-input" (ngModelChange)="handleChangeEnableDateFilter($event)" [ngModel]="dateFilter" name="datefilterEnabled" type="checkbox" value="" id="filtercheck1">
+          <label class="form-check-label" for="filtercheck1">from <a (click)="handleOpenSelectPeriodModal($event)" href="#">{{startEndCaption}}</a></label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" (ngModelChange)="handleChangeEnableBBOXFilter($event)" [ngModel]="filterOptionsLocal.bboxFilter" name="bboxfilterEnabled" type="checkbox" value="" id="filtercheck2">
+          <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>  
+</div>
+<fm-map-select-period-modal [modalState]="openedModalName" (onCloseModal)="handleCloseModal()" (onSelect)="handleSelectPeriod($event)" [startDate]="startDate" [endDate]="endDate"></fm-map-select-period-modal>

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

@@ -1,94 +1,114 @@
-div.map-search {
-  position: absolute;
-  top: 0.5rem;
-  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;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  z-index:3;
-}
-
-.input-group {
-  flex-wrap:nowrap;
-}
-
-.disabled {
-  color:lighten(#000000,80%);
-}
-
-:host ::ng-deep ngb-typeahead-window.dropdown-menu {
-  width: 20rem;
-  left:-2.5rem !important;
-}
-
-:host ::ng-deep button.dropdown-item {
-  overflow:hidden;
-  text-overflow:ellipsis;
-  padding: 0.375rem 0.75rem;
-}
-
-div.map-search input[type=text] {
-  transition: width 0.3s ease-out;
-}
-
-div.map-search button {
-  transition: width 0.3s ease-out;
-}
-
-div.map-search.collapsed {
-  max-height:3.5rem;
-  max-width:10rem;
-}
-
-div.map-search.searchcollapsed {
-  max-height: 3.5rem;
-  max-width: 6rem;
-}
-
-div.map-search div.options {
-  padding-top: 0.5rem;
-  line-height: 1.5rem;
-  overflow: hidden;
-  transition: max-height 0.3s ease-in-out;
-  max-height:4.5rem;
-}
-
-div.map-search.collapsed div.options, div.map-search.searchcollapsed div.options {
-  max-height: 0;
-  padding:0;
-}
-
-div.map-search button {
-  overflow: hidden;
-}
-
-div.map-search.collapsed input[type=text] {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-}
-
-div.map-search.searchcollapsed input[type=text] {
-  display: none;
-}
-
-div.map-search.collapsed button.clear, div.map-search.collapsed button[type="submit"] {
-  width: 0;
-  padding: 0;
-  border-color:transparent;
-}
-
-div.map-search.searchcollapsed button[type="submit"] {
-  width: 0;
-  padding: 0;
-  border-color: transparent;
-}
-
-.options label {
-  white-space:nowrap;
-}
-
-
-
-
+div.map-search {
+  position: absolute;
+  top: 0.5rem;
+  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);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  z-index:3;
+}
+
+.input-group {
+  flex-wrap:nowrap;
+}
+
+.disabled {
+  color:lighten(#000000,80%);
+}
+
+:host ::ng-deep ngb-typeahead-window.dropdown-menu {
+  width: 20rem;
+  left:-2.5rem !important;
+}
+
+:host ::ng-deep button.dropdown-item {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  padding: 0.375rem 0.75rem;
+}
+
+div.map-search input[type=text] {
+  transition: width 0.3s ease-out;
+}
+
+div.map-search button {
+  transition: width 0.3s ease-out;
+}
+
+div.map-search.collapsed {
+  max-height:3.5rem;
+  max-width:10rem;
+  min-width: 0;
+}
+
+div.map-search.searchcollapsed {
+  max-height: 3.5rem;
+  max-width: 6rem;
+}
+
+div.map-search div.options {
+  padding-top: 0.5rem;
+  line-height: 1.5rem;
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  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;
+}
+
+div.map-search.collapsed input[type=text] {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+div.map-search.searchcollapsed input[type=text] {
+  display: none;
+}
+
+div.map-search.collapsed button.clear, div.map-search.collapsed button[type="submit"] {
+  width: 0;
+  padding: 0;
+  border-color:transparent;
+}
+
+div.map-search.searchcollapsed button[type="submit"] {
+  width: 0;
+  padding: 0;
+  border-color: transparent;
+}
+
+.options label {
+  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);