Add layerswitcher
This commit is contained in:
Willem Dantuma
parent
fd28af2f6c
commit
a8b079b72b
@ -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;
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user