diff --git a/projects/common-map/src/fm-map/actions/map.actions.ts b/projects/common-map/src/fm-map/actions/map.actions.ts index 69547c1..480c9cc 100644 --- a/projects/common-map/src/fm-map/actions/map.actions.ts +++ b/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; diff --git a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts index da4d683..ee09d8e 100644 --- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts +++ b/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 = new EventEmitter(); @Output() onFeatureHover: EventEmitter = new EventEmitter(); + @Output() onPrerender: EventEmitter = new EventEmitter(); private _apiEndPoint: string; private initialized:boolean = false; private mapEventHandlerInstalled = false; + private topLayerPrerenderEventhandlerInstalled = false; private selectedFeatures = {}; private selectionLayer:Layer = 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 { 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[] = []; if (itemLayers) { itemLayers.forEach((itemLayer, index) => { @@ -414,12 +447,23 @@ 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; - if(event.type === 'pointermove' && !this.onFeatureHover.observers.length) return; + if(event.type === 'pointermove' && !this.onFeatureHover.observers.length) return; let itemLayer= this.getItemlayer(this.itemLayer); if(itemLayer && itemLayer.layer) { this.selectedFeatures = {}; diff --git a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html index 6b27e9d..d518983 100644 --- a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html +++ b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html @@ -20,7 +20,7 @@
  • -  Data +  Data
    diff --git a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss index 47a85e4..ebe5405 100644 --- a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss +++ b/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; diff --git a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.ts b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.ts index 8394d03..7c87df3 100644 --- a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.ts +++ b/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(); + } } diff --git a/projects/common-map/src/fm-map/components/map/map.component.html b/projects/common-map/src/fm-map/components/map/map.component.html index 5bbde45..32abcb5 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.html +++ b/projects/common-map/src/fm-map/components/map/map.component.html @@ -20,9 +20,10 @@ compassHeading:compassHeading$|async, styles:styles$|async, selectedFeature:selectedFeature$|async, - fullscreen:fullscreen$|async + fullscreen:fullscreen$|async, + showDataLayerSlide:showDataLayerSlide$|async } as state"> - +
    @@ -34,18 +35,25 @@ - + -
    - - - - +
    +
    + + + + +
    +
    +
    + +
    +
    @@ -53,7 +61,8 @@
    - + +
    diff --git a/projects/common-map/src/fm-map/components/map/map.component.scss b/projects/common-map/src/fm-map/components/map/map.component.scss index 6d4579d..ff6893a 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.scss +++ b/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; diff --git a/projects/common-map/src/fm-map/components/map/map.component.ts b/projects/common-map/src/fm-map/components/map/map.component.ts index 4d2d66a..c6f209b 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.ts +++ b/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 = this.store.select(mapReducers.selectGetClearEnabled); public searchCollapsed$: Observable = this.store.select(mapReducers.selectGetSearchCollapsed); public searchMinified$: Observable = this.store.select(mapReducers.selectGetSearchMinified); + public showDataLayerSlide$: Observable = this.store.select(mapReducers.selectGetShowdataLayerSlide); public menuVisible$: Observable; public query$: Observable = this.store.select(mapReducers.selectGetQuery); public position$: Observable = 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) { diff --git a/projects/common-map/src/fm-map/reducers/map.reducer.ts b/projects/common-map/src/fm-map/reducers/map.reducer.ts index 06c14b4..bd76438 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/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; + layerValuesEnabled:boolean, + layerValues: Array + 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); diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.ts b/projects/common/src/fm/components/side-panel/side-panel.component.ts index 3ba19e3..6927f50 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.ts +++ b/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', @@ -12,7 +12,8 @@ export class SidePanelComponent implements OnChanges { @Input() public collapsed: boolean; @Input() public collapsable: boolean; @Input() public resizeable: boolean = false; - @Input() public left: boolean = false; + @Input() public left: boolean = false; + @Output() onResize: EventEmitter = new EventEmitter(); @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(); } } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index ba9620d..1f8355e 100644 --- a/src/app/app-routing.module.ts +++ b/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',