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 b8ce055..afd8cab 100644 --- a/projects/common-map/src/fm-map/actions/map.actions.ts +++ b/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; diff --git a/projects/common-map/src/fm-map/common-map.module.ts b/projects/common-map/src/fm-map/common-map.module.ts index 78d0635..0178b67 100644 --- a/projects/common-map/src/fm-map/common-map.module.ts +++ b/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): ActionReducer { 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, 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 new file mode 100644 index 0000000..d238ae7 --- /dev/null +++ b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html @@ -0,0 +1,25 @@ +
+ + +
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 new file mode 100644 index 0000000..fae4ae7 --- /dev/null +++ b/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; + } +} 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 new file mode 100644 index 0000000..484fc80 --- /dev/null +++ b/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; + public overlayLayers: Observable>; + public selectedOverlayLayer: Observable; + public baseLayers: Observable>; + public selectedBaseLayer: Observable; + + constructor( private store: Store) { + } + + 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)); + } +} diff --git a/projects/common-map/src/fm-map/components/map-search/map-search.component.html b/projects/common-map/src/fm-map/components/map-search/map-search.component.html index 22090bb..67fb6b3 100644 --- a/projects/common-map/src/fm-map/components/map-search/map-search.component.html +++ b/projects/common-map/src/fm-map/components/map-search/map-search.component.html @@ -1,33 +1,36 @@ - - - - - - - + + + + + + + diff --git a/projects/common-map/src/fm-map/components/map-search/map-search.component.scss b/projects/common-map/src/fm-map/components/map-search/map-search.component.scss index 019d434..0bff0dd 100644 --- a/projects/common-map/src/fm-map/components/map-search/map-search.component.scss +++ b/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; + } +} + + + 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 fb977d7..f6ed7ac 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 @@ -39,6 +39,7 @@
+
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 f982ef0..0a7d7e7 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/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(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);