implement layer compare slider

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

@@ -54,6 +54,8 @@ export const SETLAYERVALUESLOCATION = '[Map] SetLayerValuesLocation'
 export const TOGGLELAYERVALUESENABLED = '[Map] ToggleLayerValuesEnabled'
 export const GETLAYERVALUE = '[Map] GetLayerValue'
 export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess'
+export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide'
+
 
 export class Clear implements Action {
   readonly type = CLEAR;
@@ -316,6 +318,11 @@ export class GetLayerValueSuccess implements Action {
   constructor(public layervalue:ILayervalue) { }
 }
 
+export class ToggleShowDataLayerSlide implements Action {
+  readonly type = TOGGLESHOWDATALAYERSLIDE;
+  constructor() {}
+}
+
 export type Actions = SetMapState
   | Init
   | Clear
@@ -359,5 +366,6 @@ export type Actions = SetMapState
   | ToggleLayerValuesEnabled
   | GetLayerValueSuccess
   | GetLayerValue
-  | SetPeriod;
+  | SetPeriod
+  | ToggleShowDataLayerSlide;
 

projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts

@@ -17,7 +17,7 @@ import VectorTileSource from 'ol/source/VectorTile';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import {GeoJSON,MVT} from 'ol/format';
 import { Geometry } from 'ol/geom';
-import TileSource from 'ol/source/Tile';
+import BaseLayer from 'ol/layer/Base';
 
 @Component({
   selector: 'fm-map-item-layers',
@@ -32,9 +32,11 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
   @Input() itemLayer: IItemLayer;
   @Output() onFeatureSelected: EventEmitter<any> = new EventEmitter<any>();
   @Output() onFeatureHover: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onPrerender: EventEmitter<any> = new EventEmitter<any>();
   private _apiEndPoint: string;
   private initialized:boolean = false;
   private mapEventHandlerInstalled = false;
+  private topLayerPrerenderEventhandlerInstalled = false;
   private selectedFeatures = {};
   private selectionLayer:Layer<Source> = null;
   
@@ -362,6 +364,36 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     }
   }
 
+  installTopLayerPrerenderEventhandler() {
+    if(!this.topLayerPrerenderEventhandlerInstalled  && this.onPrerender.observers.length > 0 ) {
+      if(this.instance.getVisible()) {
+        var olLayers = this.instance.getLayers().getArray().filter(l=> l.getVisible());
+        if(olLayers.length >0) {
+          var topLayer = olLayers[0] as any;
+          topLayer.on('prerender',this.topLayerPrerenderEventhandler);
+          topLayer.on('postrender',this.topLayerPostrenderEventhandler);
+          this.topLayerPrerenderEventhandlerInstalled = true;
+        }  
+      }
+    }
+  }
+
+  unInstallTopLayerPrerenderEventhandler() {
+    if(this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 )
+    {
+      if(this.instance.getVisible()) {
+        var olLayers = this.instance.getLayers().getArray().filter(l=> l.getVisible());
+        if(olLayers.length >0) {
+          var topLayer = olLayers[0] as any;
+          topLayer.un('prerender',this.topLayerPrerenderEventhandler);
+          topLayer.un('postrender',this.topLayerPostrenderEventhandler);
+          this.topLayerPrerenderEventhandlerInstalled = false;
+        }  
+      }
+    }
+  }
+
+
   addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer<Source> {
     if(!itemLayer) return null;
     var olLayers = this.instance.getLayers();
@@ -387,6 +419,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
   }
 
   updateLayers(itemLayers: IItemLayer[]) {
+    this.unInstallTopLayerPrerenderEventhandler();
     let newLayers: Layer<Source>[] = [];
     if (itemLayers) {
       itemLayers.forEach((itemLayer, index) => {
@@ -414,8 +447,19 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
         if(this.selectionLayer) olLayers.push(this.selectionLayer)
       }
     }
+    this.installTopLayerPrerenderEventhandler();
   }
 
+  topLayerPrerenderEventhandler = (event) => {
+     this.onPrerender.emit(event);
+  }
+
+  topLayerPostrenderEventhandler = (event) => {
+    const ctx = event.context;
+    ctx.restore();
+  }
+
+
   mapEventHandler = (event) => {
     // select only when having observers
     if(event.type === 'click' && !this.onFeatureSelected.observers.length) return;

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

@@ -20,7 +20,7 @@
           </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>
+          <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>

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

@@ -19,6 +19,10 @@
   font-weight: bold;
 }
 
+.slideButton {
+  margin-left: 1em;
+}
+
 .layers {
   color:$secondary;
   position: absolute;

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

@@ -76,4 +76,10 @@ export class LayerSwitcher  implements OnInit,OnChanges{
   handleSelectBaseLayer(itemLayer: IItemLayer) {
     this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
   }
+
+  handleToggleShowDatalayerSlide(event:Event) {
+    this.store.dispatch(new mapActions.ShowLayerSwitcher(false));    
+    this.store.dispatch(new mapActions.ToggleShowDataLayerSlide());
+    event.preventDefault();
+  }
 }

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

@@ -20,7 +20,8 @@
   compassHeading:compassHeading$|async,
   styles:styles$|async,
   selectedFeature:selectedFeature$|async,
-  fullscreen:fullscreen$|async
+  fullscreen:fullscreen$|async,
+  showDataLayerSlide:showDataLayerSlide$|async
 } as state">
   <aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen }" class="map">
     <div>
@@ -34,26 +35,34 @@
     <aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
     <fm-map-item-layers [itemLayers]="state.baseLayers"></fm-map-item-layers>
     <fm-map-item-layers *ngIf="!overrideOverlayLayers" [itemLayers]="state.overlayLayers"></fm-map-item-layers>
-    <fm-map-item-layers *ngIf="!overrideSelectedItemLayer" [itemLayer]="state.selectedItemLayer"></fm-map-item-layers>
+    <fm-map-item-layers *ngIf="!overrideSelectedItemLayer" [itemLayer]="state.selectedItemLayer" (onPrerender)="handlePrerender($event)"></fm-map-item-layers>
     <aol-layer-vector>
       <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeatureSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
     </aol-layer-vector>
     <router-outlet name="map-layers"></router-outlet>
     <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="devicesService.IsMobile()" [showTolerance]="devicesService.IsMobile()" [heading]="state.compassHeading"></fm-map-gps-location>
     <fm-map-layer-values></fm-map-layer-values>
+    <div class="viewport-container" [ngStyle]="{'bottom': bottom(state.panelVisible)}">
       <div class="control-container">
         <router-outlet name="map-controls"></router-outlet>
         <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>  
+      <div class="slide-container"  [ngClass]="{'showDataLayerSlide':state.showDataLayerSlide}">
+        <form>
+          <input class="dataLayerSlide" (input)="handleSlideChange($event)" type="range" style="width: 100%" value="{{dataLayerSlideValue}}"/>
+        </form>
+      </div>
+    </div>
     <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
 
     <div *ngIf="noContent">
       <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
     </div>
     <div class="side-panel-container">
-      <fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
+      
+      <fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
         <div class="panel-wrapper" *ngIf="noContent">
           <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
           </div>

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

@@ -1,6 +1,6 @@
 @import "~bootstrap/scss/bootstrap.scss";
 
-aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
+aol-map { position:absolute;width:100%;height:calc( 100vh );}
 
 .arrow {
   top: 3rem;
@@ -45,29 +45,39 @@ aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
   text-overflow:ellipsis;
 }
 
-
-.control-container {
+.viewport-container {
   position: absolute;
-  right: 1em;
-  bottom: 8.1em;
+  left:0;
+  right:0;
+  bottom:0;
+  margin-bottom:4em;
+  pointer-events: none;
 }
 
-.fullscreen .control-container {
-  bottom: 5em;
+
+.control-container {
+  float:right;
+  margin-right: 1em;
+  pointer-events: all;
+}
+
+.fullscreen .viewport-container {
+  margin-bottom: 1em;
 }
 
 .side-panel-container {
   position: absolute;
   top:0em;
-  bottom: 7.1em;
+  bottom: 3em;
   width: 100%;
   pointer-events: none;
 }
 
 .fullscreen .side-panel-container {
-  bottom: 4em;
+  bottom:0;
 }
 
+
 switch2d3d {
   position: absolute;
   right: 1em;
@@ -115,6 +125,21 @@ div.header button {
   max-height: 2.5em;
 }
 
+.slide-container {
+  display: none;
+  pointer-events: all;
+  width: 100%;
+  overflow: hidden;
+}
+
+.dataLayerSlide {
+  width:100%
+}
+
+.slide-container.showDataLayerSlide {
+  display: block;
+}
+
 timespan {
   position: absolute;
   transition: left 0.5s;

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

@@ -5,7 +5,7 @@ import { withLatestFrom, switchMap,skip  } from 'rxjs/operators';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { DeviceService } from '@farmmaps/common';
-//import { proj,Map } from 'openlayers';
+import {getRenderPixel} from 'ol/render';
 
 // Map
 import * as mapReducers from '../../reducers/map.reducer';
@@ -76,6 +76,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public clearEnabled$: Observable<boolean> = this.store.select(mapReducers.selectGetClearEnabled);
   public searchCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchCollapsed);
   public searchMinified$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchMinified);
+  public showDataLayerSlide$: Observable<boolean> = this.store.select(mapReducers.selectGetShowdataLayerSlide);
   public menuVisible$: Observable<boolean>;
   public query$: Observable<IQuery> =  this.store.select(mapReducers.selectGetQuery);
   public position$: Observable<GeolocationPosition> = this.geolocationService.getCurrentPosition();
@@ -90,6 +91,9 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public noContent: boolean = false;
   public overrideSelectedItemLayer: boolean = false;
   public overrideOverlayLayers: boolean = false;
+  public dataLayerSlideValue:number = 50;
+  public dataLayerSlideEnabled = false;
+  private visibleAreaBottom = 0;
   
   @ViewChild('map') map;
   @ViewChild('contentDiv') contentDiv: ElementRef;
@@ -155,6 +159,25 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     }
   }
 
+  handlePanelResize(resizeTop:number) {
+    if(resizeTop==100 || !this.devicesService.IsMobile() ) {
+      this.visibleAreaBottom=0;
+    } else {
+      this.visibleAreaBottom=100-resizeTop;
+      if(this.visibleAreaBottom>60) {
+        this.visibleAreaBottom=60;
+      }
+    }      
+  }
+
+  bottom(panelVisible:boolean) {
+    if(panelVisible) {
+      return this.visibleAreaBottom + '%';     
+    } else {
+      return "0%";
+    }
+  }
+
   handleOpenModal(modalName: string) {
     this.store.dispatch(new  commonActions.OpenModal(modalName));
   }
@@ -191,6 +214,31 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     }
   }
 
+  handlePrerender(event:any) {
+    if(!this.dataLayerSlideEnabled) return;
+    const ctx = event.context;
+    const mapSize = this.map.instance.getSize();
+    const width = mapSize[0] * (this.dataLayerSlideValue / 100);
+    const tl = getRenderPixel(event, [width, 0]);
+    const tr = getRenderPixel(event, [mapSize[0], 0]);
+    const bl = getRenderPixel(event, [width, mapSize[1]]);
+    const br = getRenderPixel(event, mapSize);
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(tl[0], tl[1]);
+    ctx.lineTo(bl[0], bl[1]);
+    ctx.lineTo(br[0], br[1]);
+    ctx.lineTo(tr[0], tr[1]);
+    ctx.closePath();
+    ctx.clip();
+  }
+
+  handleSlideChange(event:any) {
+     this.dataLayerSlideValue = event.target.value;
+     this.map.instance.render();
+  }
+
   ngOnInit() {    
     this.initialized = false;
     console.debug("Init");
@@ -323,6 +371,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
         }
       });
     this.initialized = true;   
+    this.showDataLayerSlide$.subscribe((v) => {
+      this.dataLayerSlideEnabled=v;
+      this.map.instance.render();
+    });
   }
 
   handleSearchCollapse(event) {

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

@@ -69,8 +69,9 @@ export interface State {
   replaceUrl:boolean,
   layerValuesX:number,
   layerValuesY:number,
-  layerValuesEnabled:boolean;
-  layerValues: Array<ILayervalue>;
+  layerValuesEnabled:boolean,
+  layerValues: Array<ILayervalue>
+  showDataLayerSlide:boolean,
 }
 
 export const initialState: State = {
@@ -113,7 +114,8 @@ export const initialState: State = {
   layerValuesX:0,
   layerValuesY:0,
   layerValuesEnabled:false,
-  layerValues:[]
+  layerValues:[],
+  showDataLayerSlide:false
 }
 
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
@@ -172,6 +174,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       return tassign(state, {
         selectedItem: null,
         selectedItemLayer: null,
+        showDataLayerSlide: false,
         features:[],
         inSearch:inSearch
       });
@@ -501,7 +504,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         features: [],
         query:initialState.query,
         showLayerSwitcher: false,
-        extent: null
+        extent: null,
+        showDataLayerSlide: false
       });
     }
     case mapActions.SETSTYLE:{
@@ -514,6 +518,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       let a = action as mapActions.ShowLayerSwitcher;
       return tassign(state,{showLayerSwitcher:a.show});
     }
+    case mapActions.TOGGLESHOWDATALAYERSLIDE:{
+      return tassign(state,{showDataLayerSlide:!state.showDataLayerSlide});
+    }
     case mapActions.SETREPLACEURL: {
       let a= action as mapActions.SetReplaceUrl;
       return tassign(state,{replaceUrl:a.replaceUrl});
@@ -537,6 +544,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
          return tassign(state,{  
           selectedItem: null,
           selectedItemLayer: null,
+          showDataLayerSlide: false,
           features:[]
          });
       }
@@ -584,6 +592,7 @@ 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 getShowDataLayerSlide = (state:State) => state.showDataLayerSlide;
 export const getInSearch = (state:State) => state.inSearch;
 export const getState = (state:State) => {return {mapState:state.mapState,queryState:state.queryState,replaceUrl:state.replaceUrl};}
 export const getLayerValuesEnabled = (state:State) => state.layerValuesEnabled;
@@ -616,6 +625,7 @@ export const selectGetSelectedItemLayer = createSelector(selectMapState, getSele
 export const selectGetPeriod = createSelector(selectMapState, getPeriod);
 export const selectGetStyles = createSelector(selectMapState, getStyles);
 export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher);
+export const selectGetShowdataLayerSlide = createSelector(selectMapState,getShowDataLayerSlide);
 export const selectGetInSearch = createSelector(selectMapState,getInSearch);
 export const selectGetState = createSelector(selectMapState,getState);
 export const selectGetLayerValuesEnabled = createSelector(selectMapState,getLayerValuesEnabled);

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef  } from '@angular/core';
+import { Component, Input,Output,ViewChild,EventEmitter, ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef  } from '@angular/core';
 
 @Component({
   selector: 'fm-side-panel',
@@ -13,6 +13,7 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsable: boolean;
   @Input() public resizeable: boolean = false;
   @Input() public left: boolean = false;  
+  @Output() onResize: EventEmitter<number> = new EventEmitter<number>();
   @ViewChild("resizeGrip") elementView: ElementRef;
   public mobile:boolean = true;
   private parentHeight:number = 0;
@@ -35,6 +36,7 @@ export class SidePanelComponent  implements OnChanges {
   setTop() {
     this.mobile = this.left?false: this.checkMobile();
     this.resizeTop = this.mobile?50:0;
+    this.onResize.emit(this.resizeTop);
     this.top =  (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
   }
 
@@ -71,6 +73,7 @@ export class SidePanelComponent  implements OnChanges {
       clientY=(event as DragEvent).clientY;
     }
     this.resizeTop =  Math.min(98, Math.max(0, clientY / (this.parentHeight  / 100)));
+    this.onResize.emit(this.resizeTop);
     this.top =  (this.visible? this.resizeTop:(this.mobile? 100:0)) + "%";
   }
 
@@ -81,7 +84,7 @@ export class SidePanelComponent  implements OnChanges {
   }
 
   @HostListener('window:resize', ['$event'])
-  onResize(event) {
+  handleResize(event) {
     this.setTop();
   }
 }

src/app/app-routing.module.ts

@@ -63,7 +63,7 @@ const routes = [
     canActivate: [NavBarGuard],
     component: NotImplementedComponent
   },
-  { path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
+  { path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard],canActivate: [NavBarGuard], },
   { path: 'map3d', loadChildren: () => import('./map3d/map3d.module').then(m => m.Map3DModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
   {
     path: 'registerdevice/:deviceToken',