Added parentitem title to geotiff, shape and temporal selected-item components.
Some checks failed
FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit

This commit is contained in:
Mark van der Wal 2020-07-15 23:15:31 +02:00
parent 0f5a5251db
commit c0f689331e
10 changed files with 117 additions and 90 deletions

View File

@ -105,7 +105,7 @@ export class SelectItem implements Action {
export class SelectItemSuccess implements Action { export class SelectItemSuccess implements Action {
readonly type = SELECTITEMSUCCESS; readonly type = SELECTITEMSUCCESS;
constructor(public item: IItem) { } constructor(public item: IItem, public parentItem: IItem) { }
} }
export class SelectTemporalItemsSuccess implements Action { export class SelectTemporalItemsSuccess implements Action {

View File

@ -12,6 +12,7 @@
panelCollapsed:panelCollapsed$|async, panelCollapsed:panelCollapsed$|async,
searchMinified:searchMinified$|async, searchMinified:searchMinified$|async,
selectedItem:selectedItem$|async, selectedItem:selectedItem$|async,
parentItem:parentItem$|async,
queryState:queryState$|async, queryState:queryState$|async,
searchCollapsed:searchCollapsed$|async, searchCollapsed:searchCollapsed$|async,
clearEnabled:clearEnabled$|async, clearEnabled:clearEnabled$|async,
@ -20,9 +21,9 @@
styles:styles$|async, styles:styles$|async,
selectedFeature:selectedFeature$|async selectedFeature:selectedFeature$|async
} as state"> } as state">
<aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':state.panelVisible}" class="map"> <aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':state.panelVisible}" class="map">
<div> <div>
</div> </div>
<aol-view [zoom]="state.mapState.zoom" [rotation]="state.mapState.rotation"> <aol-view [zoom]="state.mapState.zoom" [rotation]="state.mapState.rotation">
<aol-coordinate [x]="state.mapState.xCenter" [y]="state.mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate> <aol-coordinate [x]="state.mapState.xCenter" [y]="state.mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
@ -51,13 +52,13 @@
<div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)"> <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
</div> </div>
<div class="panel-bottom"> <div class="panel-bottom">
<div *ngIf="!(state.selectedItem)"> <div *ngIf="!(state.selectedItem)">
<fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container> <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container>
</div> </div>
<div *ngIf="state.selectedItem;let item"> <div *ngIf="state.selectedItem;let item">
<fm-map-selected-item-container [item]="item" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container> <fm-map-selected-item-container [item]="item" [parentItem]="state.parentItem" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
</div> </div>
<div *ngIf="state.features.length == 0" class="no-results m-2"> <div *ngIf="state.features.length == 0" class="no-results m-2">
<div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div> <div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>

View File

@ -64,6 +64,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
public selectedFeature$: Observable<Feature> = this.store.select(mapReducers.selectGetSelectedFeature); public selectedFeature$: Observable<Feature> = this.store.select(mapReducers.selectGetSelectedFeature);
public clickedFeature: Subject<Feature> = new Subject<Feature>(); public clickedFeature: Subject<Feature> = new Subject<Feature>();
public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem); public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
public parentItem$: Observable<IItem> =this.store.select(mapReducers.selectGetParentItem);
public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState); public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
public state$:Observable<{mapState:IMapState,queryState:IQueryState,setStateCount:number}> = this.store.select(mapReducers.selectGetState); public state$:Observable<{mapState:IMapState,queryState:IQueryState,setStateCount:number}> = this.store.select(mapReducers.selectGetState);
public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod); public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod);
@ -82,14 +83,14 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
private lastUrl = ""; private lastUrl = "";
@ViewChild('map') map; @ViewChild('map') map;
constructor(private store: Store<mapReducers.State | commonReducers.State>, constructor(private store: Store<mapReducers.State | commonReducers.State>,
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
private uploadService: ResumableFileUploadService, private uploadService: ResumableFileUploadService,
private serializeService: StateSerializerService, private serializeService: StateSerializerService,
public itemTypeService: ItemTypeService, public itemTypeService: ItemTypeService,
private location: Location, private location: Location,
private geolocationService: GeolocationService, private geolocationService: GeolocationService,
private zone: NgZone, private zone: NgZone,
private deviceorientationService:DeviceOrientationService) { private deviceorientationService:DeviceOrientationService) {
@ -98,29 +99,29 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
let newQueryState = tassign(mapReducers.initialQueryState); let newQueryState = tassign(mapReducers.initialQueryState);
console.debug(`Do Query ${setStateCount}`); console.debug(`Do Query ${setStateCount}`);
let urlparts=[]; let urlparts=[];
if (queryState.itemCode && queryState.itemCode != "") { if (queryState.itemCode && queryState.itemCode != "") {
if(queryState.itemType && queryState.itemType!= "") { if(queryState.itemType && queryState.itemType!= "") {
let itemType = this.itemTypeService.itemTypes[queryState.itemType]; let itemType = this.itemTypeService.itemTypes[queryState.itemType];
if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) { if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) {
urlparts.push('/editor'); urlparts.push('/editor');
urlparts.push(itemType.editor); urlparts.push(itemType.editor);
urlparts.push('item'); urlparts.push('item');
urlparts.push(queryState.itemCode); urlparts.push(queryState.itemCode);
} }
} }
} else { } else {
newQueryState= queryState; newQueryState= queryState;
} }
if(urlparts.length==0 ) { if(urlparts.length==0 ) {
newQueryState.itemCode = queryState.itemCode; newQueryState.itemCode = queryState.itemCode;
this.zone.run(() => { this.zone.run(() => {
this.store.dispatch(new mapActions.SetQueryState(newQueryState,false)); this.store.dispatch(new mapActions.SetQueryState(newQueryState,false));
}) })
} else { } else {
this.router.navigate(urlparts); this.router.navigate(urlparts);
} }
} }
}); });
} }
@HostListener('document:keyup', ['$event']) @HostListener('document:keyup', ['$event'])
@ -159,7 +160,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
console.debug("Init"); console.debug("Init");
this.store.dispatch(new mapActions.Clear()); this.store.dispatch(new mapActions.Clear());
this.selectedFeatures$.next({x:0,y:0,features:[]}); this.selectedFeatures$.next({x:0,y:0,features:[]});
this.selectedFeatures$.next(null); this.selectedFeatures$.next(null);
} }
initCustomStyles() { initCustomStyles() {
@ -203,8 +204,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
normalizeMapState(mapState:IMapState):IMapState { normalizeMapState(mapState:IMapState):IMapState {
if(!mapState) return null; if(!mapState) return null;
return {zoom: this.round(mapState.zoom,0), return {zoom: this.round(mapState.zoom,0),
rotation: this.round(mapState.rotation,2), rotation: this.round(mapState.rotation,2),
xCenter: this.round(mapState.xCenter,5), xCenter: this.round(mapState.xCenter,5),
yCenter: this.round(mapState.yCenter,5), yCenter: this.round(mapState.yCenter,5),
baseLayerCode: mapState.baseLayerCode }; baseLayerCode: mapState.baseLayerCode };
@ -219,7 +220,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
let queryState = params.get("queryState"); let queryState = params.get("queryState");
var newQueryState = tassign(mapReducers.initialQueryState); var newQueryState = tassign(mapReducers.initialQueryState);
if (queryState != "") { if (queryState != "") {
newQueryState = this.serializeService.deserialize(queryState); newQueryState = this.serializeService.deserialize(queryState);
} }
return newQueryState; return newQueryState;
} else { } else {
@ -227,16 +228,16 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
} }
} }
ngAfterViewInit() { ngAfterViewInit() {
console.debug("View init"); console.debug("View init");
this.initCustomStyles(); this.initCustomStyles();
// url to state // url to state
this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.state$),switchMap(([params,state]) => { this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.state$),switchMap(([params,state]) => {
var newMapState: IMapState = state.mapState; var newMapState: IMapState = state.mapState;
var newQueryState: IQueryState = state.queryState; var newQueryState: IQueryState = state.queryState;
var queryStateChanged = false; var queryStateChanged = false;
var mapStateChanged = false; var mapStateChanged = false;
let urlMapState = this.getMapStateFromUrl(params); let urlMapState = this.getMapStateFromUrl(params);
@ -250,7 +251,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
newQueryState = urlQueryState; newQueryState = urlQueryState;
queryStateChanged = this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState); queryStateChanged = this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState);
} }
if(queryStateChanged && mapStateChanged && state.setStateCount ==0) { if(queryStateChanged && mapStateChanged && state.setStateCount ==0) {
return of(new mapActions.SetState(newMapState,newQueryState)); return of(new mapActions.SetState(newMapState,newQueryState));
window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(newMapState)); window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(newMapState));
@ -258,16 +259,16 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
return of(new mapActions.SetQueryState(newQueryState)); return of(new mapActions.SetQueryState(newQueryState));
} return of(new mapActions.SetReplaceUrl(true)); } return of(new mapActions.SetReplaceUrl(true));
})).subscribe((action) => { })).subscribe((action) => {
if(action) { if(action) {
this.zone.run(() => { this.zone.run(() => {
console.debug("Url to state"); console.debug("Url to state");
this.store.dispatch(action); this.store.dispatch(action);
}); });
} }
}); });
// state to url // state to url
this.stateSub = this.state$.pipe(switchMap((state) => { this.stateSub = this.state$.pipe(switchMap((state) => {
let newUrl = this.serializeMapState(state.mapState) + "_" + this.serializeService.serialize(state.queryState); let newUrl = this.serializeMapState(state.mapState) + "_" + this.serializeService.serialize(state.queryState);
if(this.lastUrl!=newUrl && state.setStateCount>0) { if(this.lastUrl!=newUrl && state.setStateCount>0) {
@ -276,13 +277,13 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
} }
else { else {
return of(null); return of(null);
} }
})).subscribe((newUrlState) =>{ })).subscribe((newUrlState) =>{
if(newUrlState) { if(newUrlState) {
console.debug(`State to url ${newUrlState.setStateCount}`); console.debug(`State to url ${newUrlState.setStateCount}`);
this.replaceUrl(newUrlState.mapState,newUrlState.queryState,newUrlState.replaceUrl); this.replaceUrl(newUrlState.mapState,newUrlState.queryState,newUrlState.replaceUrl);
} }
}); });
setTimeout(() => { setTimeout(() => {
this.map.instance.updateSize(); this.map.instance.updateSize();
@ -315,7 +316,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
event.preventDefault(); event.preventDefault();
var queryState = tassign(mapReducers.initialQueryState, query); var queryState = tassign(mapReducers.initialQueryState, query);
this.store.dispatch(new mapActions.DoQuery(queryState)); this.store.dispatch(new mapActions.DoQuery(queryState));
} }
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) { replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
let parts =["."]; let parts =["."];
@ -328,7 +329,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
parts.push( this.serializeService.serialize(queryState)); parts.push( this.serializeService.serialize(queryState));
console.debug("Replace url",parts); console.debug("Replace url",parts);
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent }); this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
} }
} }
handleOnMoveEnd(event) { handleOnMoveEnd(event) {
@ -350,7 +351,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.store.dispatch(new mapActions.SetViewExtent(state.extent)); this.store.dispatch(new mapActions.SetViewExtent(state.extent));
} }
}); });
}); });
} }
handleOnMouseDown(event: MouseEvent) { handleOnMouseDown(event: MouseEvent) {
@ -366,7 +367,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
handleClearSearch(event) { handleClearSearch(event) {
this.store.dispatch(new commonActions.Escape(true, false)); this.store.dispatch(new commonActions.Escape(true, false));
} }
handleOnDelete(itemLayer: IItemLayer) { handleOnDelete(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.RemoveLayer(itemLayer)); this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
@ -385,7 +386,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
extend(extent, itemLayer.layer.getExtent()); extend(extent, itemLayer.layer.getExtent());
if (extent) { if (extent) {
this.store.dispatch(new mapActions.SetExtent(extent)); this.store.dispatch(new mapActions.SetExtent(extent));
} }
} }
handleSelectBaseLayer(itemLayer: IItemLayer) { handleSelectBaseLayer(itemLayer: IItemLayer) {
@ -400,7 +401,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
if (this.paramSub) this.paramSub.unsubscribe(); if (this.paramSub) this.paramSub.unsubscribe();
if (this.itemTypeSub) this.itemTypeSub.unsubscribe(); if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
if (this.stateSub) this.stateSub.unsubscribe(); if (this.stateSub) this.stateSub.unsubscribe();
if (this.queryStateSub) this.queryStateSub.unsubscribe(); if (this.queryStateSub) this.queryStateSub.unsubscribe();
if (this.querySub) this.querySub.unsubscribe(); if (this.querySub) this.querySub.unsubscribe();
} }
} }

View File

@ -8,7 +8,7 @@ import { IItemLayer } from '../../models/item.layer';
@Component({ @Component({
selector: 'fm-map-selected-item-container', selector: 'fm-map-selected-item-container',
templateUrl: './selected-item-container.component.html', templateUrl: './selected-item-container.component.html',
styleUrls: ['./selected-item-container.component.scss'] styleUrls: ['./selected-item-container.component.scss']
}) })
export class SelectedItemContainerComponent { export class SelectedItemContainerComponent {
@ -16,10 +16,11 @@ export class SelectedItemContainerComponent {
} }
@Input() item: IItem; @Input() item: IItem;
@Input() parentItem: IItem;
@Input() itemLayer:IItemLayer; @Input() itemLayer:IItemLayer;
@Input() overlayLayers:Array<IItemLayer>; @Input() overlayLayers:Array<IItemLayer>;
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
loadComponent() { loadComponent() {
let componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default let componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
@ -42,14 +43,14 @@ export class SelectedItemContainerComponent {
matches++; matches++;
} }
} }
if(criteria==matches && matches > maxMatches) { if(criteria==matches && matches > maxMatches) {
selected=i; selected=i;
maxMatches = matches; maxMatches = matches;
} }
} }
if (selected >= 0) { if (selected >= 0) {
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[selected]['constructor'] as any); componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[selected]['constructor'] as any);
} }
const viewContainerRef = this.widgetHost.viewContainerRef; const viewContainerRef = this.widgetHost.viewContainerRef;
@ -57,6 +58,7 @@ export class SelectedItemContainerComponent {
const componentRef = viewContainerRef.createComponent(componentFactory); const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractSelectedItemComponent>componentRef.instance).item = this.item; (<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
(<AbstractSelectedItemComponent>componentRef.instance).parentItem = this.parentItem;
(<AbstractSelectedItemComponent>componentRef.instance).itemLayer = this.itemLayer; (<AbstractSelectedItemComponent>componentRef.instance).itemLayer = this.itemLayer;
(<AbstractSelectedItemComponent>componentRef.instance).overlayLayers = this.overlayLayers; (<AbstractSelectedItemComponent>componentRef.instance).overlayLayers = this.overlayLayers;
} }

View File

@ -4,7 +4,8 @@
<div class="card-body"> <div class="card-body">
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div> <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
<div class="card menu-card"> <div class="card menu-card">
<h1>{{item.name}}</h1> <h2 *ngIf="parentItem">{{parentItem.name}}</h2>
<h2>{{item.name}}</h2>
</div> </div>
<div class="legend-container" *ngIf="item?.data.layers;let layers"> <div class="legend-container" *ngIf="item?.data.layers;let layers">
<div class="card menu-card"> <div class="card menu-card">
@ -13,14 +14,15 @@
<option *ngFor="let l of layers;" [value]="l.index" [selected]="itemLayer.layerIndex == l.index">{{l.name}}</option> <option *ngFor="let l of layers;" [value]="l.index" [selected]="itemLayer.layerIndex == l.index">{{l.name}}</option>
</select> </select>
</div> </div>
<fm-map-layer-legend [layer]="layer(layers,itemLayer.layerIndex)" [histogramenabled]="true"></fm-map-layer-legend> <fm-map-layer-legend [showTitle]="layers.length == 1"
[layer]="layer(layers,itemLayer.layerIndex)" [histogramenabled]="true"></fm-map-layer-legend>
</div> </div>
</div> </div>
<div class="card menu-card"> <div class="card menu-card">
<ul class="p-0 mt-2"> <ul class="p-0 mt-2">
<li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fa fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li> <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fa fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
<ng-container *ngIf="itemTypeService.isLayer(item)"> <ng-container *ngIf="itemTypeService.isLayer(item)">
<li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fa fa-eye" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li> <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fa fa-eye" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
<li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fa fa-eye" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li> <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fa fa-eye" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
</ng-container> </ng-container>
</ul> </ul>

View File

@ -4,6 +4,7 @@
<div class="card-body"> <div class="card-body">
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div> <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
<div class="card menu-card"> <div class="card menu-card">
<h2 *ngIf="parentItem">{{parentItem.name}}</h2>
<h1>{{item.name}}</h1> <h1>{{item.name}}</h1>
</div> </div>
<div class="legend-container" *ngIf="item?.data.layers;let layers"> <div class="legend-container" *ngIf="item?.data.layers;let layers">
@ -20,7 +21,7 @@
<ul class="p-0 mt-2"> <ul class="p-0 mt-2">
<li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" ><i class="fa fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li> <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" ><i class="fa fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
<ng-container *ngIf="itemTypeService.isLayer(item)"> <ng-container *ngIf="itemTypeService.isLayer(item)">
<li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" ><i class="fa fa-eye" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li> <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" ><i class="fa fa-eye" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
<li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)" ><i class="fa fa-eye" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li> <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)" ><i class="fa fa-eye" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
</ng-container> </ng-container>
</ul> </ul>

View File

@ -4,6 +4,7 @@
<div class="card-body"> <div class="card-body">
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div> <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
<div class="card menu-card"> <div class="card menu-card">
<h2 *ngIf="parentItem">{{parentItem.name}}</h2>
<h1>{{item.name}}</h1> <h1>{{item.name}}</h1>
</div> </div>
<div class="legend-container" *ngIf="item?.data.layers;let layers"> <div class="legend-container" *ngIf="item?.data.layers;let layers">

View File

@ -11,7 +11,8 @@ import { IItemLayer } from '../../models/item.layer';
@Injectable() @Injectable()
@Directive() @Directive()
export abstract class AbstractSelectedItemComponent { export abstract class AbstractSelectedItemComponent {
@Input() item: IItem @Input() item: IItem;
@Input() parentItem: IItem;
@Input() itemLayer: IItemLayer; @Input() itemLayer: IItemLayer;
@Input() overlayLayers: Array<IItemLayer>; @Input() overlayLayers: Array<IItemLayer>;
constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, public router: Router) { constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, public router: Router) {
@ -60,7 +61,7 @@ export abstract class AbstractSelectedItemComponent {
event.preventDefault(); event.preventDefault();
this.location.back(); this.location.back();
} }
} }
@Injectable() @Injectable()

View File

@ -60,7 +60,7 @@ export class MapEffects {
anchor: [0.5, 1], anchor: [0.5, 1],
scale: 0.05, scale: 0.05,
src: this.featureIconService$.getIconImageDataUrl("fa fa-file-o") src: this.featureIconService$.getIconImageDataUrl("fa fa-file-o")
}), }),
stroke: new style.Stroke({ stroke: new style.Stroke({
color: 'red', color: 'red',
width: 1 width: 1
@ -82,7 +82,7 @@ export class MapEffects {
fill: new style.Fill({ fill: new style.Fill({
color: 'rgba(0, 0, 255, 0.1)' color: 'rgba(0, 0, 255, 0.1)'
}) })
}))); })));
return actions; return actions;
} }
@ -116,7 +116,7 @@ export class MapEffects {
switchMap(([action,setStateCount]) => { switchMap(([action,setStateCount]) => {
let a = action as mapActions.StartSearch; let a = action as mapActions.StartSearch;
var startDate = a.queryState.startDate; var startDate = a.queryState.startDate;
var endDate = a.queryState.endDate; var endDate = a.queryState.endDate;
var newAction:Observable<Action>; var newAction:Observable<Action>;
if (a.queryState.itemCode || a.queryState.parentCode || a.queryState.itemType || a.queryState.query || a.queryState.tags) { if (a.queryState.itemCode || a.queryState.parentCode || a.queryState.itemType || a.queryState.query || a.queryState.tags) {
newAction= this.itemService$.getFeatures(a.queryState.bbox, "EPSG:3857", a.queryState.query, a.queryState.tags, startDate, endDate, a.queryState.itemType, a.queryState.parentCode).pipe( newAction= this.itemService$.getFeatures(a.queryState.bbox, "EPSG:3857", a.queryState.query, a.queryState.tags, startDate, endDate, a.queryState.itemType, a.queryState.parentCode).pipe(
@ -132,7 +132,7 @@ export class MapEffects {
catchError(error => of(new commonActions.Fail(error)))); catchError(error => of(new commonActions.Fail(error))));
} else { } else {
return []; return [];
} }
return newAction; return newAction;
})); }));
@ -145,12 +145,12 @@ export class MapEffects {
let actions =[]; let actions =[];
actions.push(new commonActions.SetMenuVisible(false)); actions.push(new commonActions.SetMenuVisible(false));
let extent = createEmpty(); let extent = createEmpty();
if (!action.query.bboxFilter) { if (!action.query.bboxFilter) {
if (extent) { if (extent) {
for (let f of action.features) { for (let f of action.features) {
extend(extent, (f as Feature).getGeometry().getExtent()); extend(extent, (f as Feature).getGeometry().getExtent());
} }
} }
actions.push(new mapActions.SetExtent(extent)); actions.push(new mapActions.SetExtent(extent));
} }
return actions; return actions;
@ -173,7 +173,14 @@ export class MapEffects {
let itemCode = selectedItem ? selectedItem.code : ""; let itemCode = selectedItem ? selectedItem.code : "";
if (a.itemCode != itemCode || setStateCount == 1) { if (a.itemCode != itemCode || setStateCount == 1) {
return this.itemService$.getItem(a.itemCode).pipe( return this.itemService$.getItem(a.itemCode).pipe(
map((item: IItem) => new mapActions.SelectItemSuccess(item)), switchMap(child => {
return this.itemService$.getItem(child.parentCode)
.pipe(map(parent => {
return {child, parent};
})
);
}),
map(data => new mapActions.SelectItemSuccess(data.child, data.parent)),
catchError(error => of(new commonActions.Fail(error)))) catchError(error => of(new commonActions.Fail(error))))
} else { } else {
return []; return [];
@ -202,14 +209,14 @@ export class MapEffects {
if(action.item.itemType == "vnd.farmmaps.itemtype.temporal") { if(action.item.itemType == "vnd.farmmaps.itemtype.temporal") {
return this.itemService$.getChildItemList(action.item.code,null).pipe( return this.itemService$.getChildItemList(action.item.code,null).pipe(
map(items => new mapActions.SelectTemporalItemsSuccess( map(items => new mapActions.SelectTemporalItemsSuccess(
items.sort((a, b) => items.sort((a, b) =>
-(Date.parse(b.dataDate) - Date.parse(a.dataDate)) -(Date.parse(b.dataDate) - Date.parse(a.dataDate))
) )
)), )),
catchError(error => of(new commonActions.Fail(error)))); catchError(error => of(new commonActions.Fail(error))));
} else { } else {
return []; return [];
} }
} }
)); ));
@ -231,9 +238,9 @@ export class MapEffects {
feature = f; feature = f;
break; break;
} }
} }
if (feature) { if (feature) {
return of(new mapActions.UpdateFeatureSuccess(this.toPointFeature(deviceUpdateEventAction))); return of(new mapActions.UpdateFeatureSuccess(this.toPointFeature(deviceUpdateEventAction)));
} else { } else {
return []; return [];
} }
@ -244,10 +251,17 @@ export class MapEffects {
ofType(commonActions.ITEMCHANGEDEVENT), ofType(commonActions.ITEMCHANGEDEVENT),
withLatestFrom(this.store$.select(mapReducers.selectGetSelectedItem)), withLatestFrom(this.store$.select(mapReducers.selectGetSelectedItem)),
mergeMap(([action, selectedItem]) => { mergeMap(([action, selectedItem]) => {
let itemChangedAction = action as commonActions.ItemChangedEvent; let itemChangedAction = action as commonActions.ItemChangedEvent;
if (selectedItem && selectedItem.code == itemChangedAction.itemCode) { if (selectedItem && selectedItem.code == itemChangedAction.itemCode) {
return this.itemService$.getItem(itemChangedAction.itemCode).pipe( return this.itemService$.getItem(itemChangedAction.itemCode).pipe(
map((item: IItem) => new mapActions.SelectItemSuccess(item)), switchMap(child => {
return this.itemService$.getItem(child.parentCode)
.pipe(map(parent => {
return {child, parent};
})
);
}),
map(data => new mapActions.SelectItemSuccess(data.child, data.parent)),
catchError(error => of(new commonActions.Fail(error)))); catchError(error => of(new commonActions.Fail(error))));
} else { } else {
return []; return [];
@ -256,17 +270,17 @@ export class MapEffects {
getActionFromQueryState(queryState:IQueryState, inSearch:boolean):Observable<Action>|[] { getActionFromQueryState(queryState:IQueryState, inSearch:boolean):Observable<Action>|[] {
if(!inSearch && (queryState.itemType || queryState.parentCode || queryState.itemCode || queryState.query || queryState.tags)) { if(!inSearch && (queryState.itemType || queryState.parentCode || queryState.itemCode || queryState.query || queryState.tags)) {
var newAction:Action; var newAction:Action;
if (queryState.itemCode && queryState.itemCode != "") { if (queryState.itemCode && queryState.itemCode != "") {
newAction= new mapActions.SelectItem(queryState.itemCode); newAction= new mapActions.SelectItem(queryState.itemCode);
} else { } else {
newAction= new mapActions.StartSearch(queryState); newAction= new mapActions.StartSearch(queryState);
} }
return of(newAction); return of(newAction);
} else { } else {
return of(new commonActions.Escape(true,false)); return of(new commonActions.Escape(true,false));
} }
} }
@Effect() @Effect()
setQueryState$: Observable<Action> = this.actions$.pipe( setQueryState$: Observable<Action> = this.actions$.pipe(

View File

@ -44,9 +44,10 @@ export interface State {
panelCollapsed: boolean, panelCollapsed: boolean,
selectedFeature: Feature, selectedFeature: Feature,
selectedItem:IItem, selectedItem:IItem,
parentItem:IItem,
clearEnabled: boolean, clearEnabled: boolean,
searchCollapsed: boolean, searchCollapsed: boolean,
searchMinified: boolean, searchMinified: boolean,
extent: number[], extent: number[],
baseLayers: Array<IItemLayer> baseLayers: Array<IItemLayer>
overlayLayers: Array<IItemLayer>, overlayLayers: Array<IItemLayer>,
@ -81,7 +82,7 @@ export const initialState: State = {
panelVisible: false, panelVisible: false,
panelCollapsed: false, panelCollapsed: false,
selectedFeature: null, selectedFeature: null,
selectedItem: null, selectedItem: null,
clearEnabled: false, clearEnabled: false,
searchCollapsed: true, searchCollapsed: true,
searchMinified:false, searchMinified:false,
@ -99,7 +100,7 @@ export const initialState: State = {
replaceUrl:true replaceUrl:true
} }
export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State { export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
switch (action.type) { switch (action.type) {
case ROUTER_NAVIGATION: { case ROUTER_NAVIGATION: {
let a = action as RouterNavigationAction; let a = action as RouterNavigationAction;
@ -125,13 +126,13 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
} }
case mapActions.SETPARENT: { case mapActions.SETPARENT: {
let a = action as mapActions.SetParent; let a = action as mapActions.SetParent;
return tassign(state, { return tassign(state, {
parentCode : a.parentCode parentCode : a.parentCode
}); });
} }
case mapActions.STARTSEARCHSUCCESS: { case mapActions.STARTSEARCHSUCCESS: {
let a = action as mapActions.StartSearchSuccess; let a = action as mapActions.StartSearchSuccess;
return tassign(state, { return tassign(state, {
features: a.features, features: a.features,
inSearch:false inSearch:false
}); });
@ -141,8 +142,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
return tassign(state, { return tassign(state, {
selectedFeature: state.selectedItem?state.selectedFeature: a.feature selectedFeature: state.selectedItem?state.selectedFeature: a.feature
}); });
} }
case mapActions.SELECTITEM: { case mapActions.SELECTITEM: {
let a = action as mapActions.SelectItem; let a = action as mapActions.SelectItem;
let itemCode = state.selectedItem ? state.selectedItem.code : ""; let itemCode = state.selectedItem ? state.selectedItem.code : "";
let inSearch = (a.itemCode != itemCode || state.setStateCount == 1) let inSearch = (a.itemCode != itemCode || state.setStateCount == 1)
@ -160,11 +161,12 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
itemLayer = new ItemLayer(a.item); itemLayer = new ItemLayer(a.item);
itemLayer.layerIndex = a.item.data.layers?a.item.data.layers[0].index:-1; itemLayer.layerIndex = a.item.data.layers?a.item.data.layers[0].index:-1;
} else if (a.item && a.item.itemType == "vnd.farmmaps.itemtype.temporal") { } else if (a.item && a.item.itemType == "vnd.farmmaps.itemtype.temporal") {
itemLayer = new TemporalItemLayer(a.item); itemLayer = new TemporalItemLayer(a.item);
} }
return tassign(state, { return tassign(state, {
inSearch:false, inSearch:false,
selectedItem: a.item, selectedItem: a.item,
parentItem: a.parentItem,
selectedItemLayer: itemLayer, selectedItemLayer: itemLayer,
panelVisible: a.item != null, panelVisible: a.item != null,
clearEnabled: a.item != null, clearEnabled: a.item != null,
@ -181,7 +183,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
if(a.temporalItems.length>0) { if(a.temporalItems.length>0) {
let item = a.temporalItems[a.temporalItems.length-1]; let item = a.temporalItems[a.temporalItems.length-1];
layerIndex = item.data.layers[0].index; layerIndex = item.data.layers[0].index;
selectedItemLayer.selectedItemLayer = new ItemLayer(item,1,true,layerIndex); selectedItemLayer.selectedItemLayer = new ItemLayer(item,1,true,layerIndex);
} else { } else {
selectedItemLayer.selectedItemLayer = null; selectedItemLayer.selectedItemLayer = null;
} }
@ -189,9 +191,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
selectedItemLayer.nextItemLayer = null; selectedItemLayer.nextItemLayer = null;
if(selectedItemLayer.selectedItemLayer) { if(selectedItemLayer.selectedItemLayer) {
let layerIndex = selectedItemLayer.selectedItemLayer.item.data.layers[0].index; let layerIndex = selectedItemLayer.selectedItemLayer.item.data.layers[0].index;
selectedItemLayer.layerIndex = layerIndex; selectedItemLayer.layerIndex = layerIndex;
} }
return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,selectedItemLayer as ItemLayer)}); return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,selectedItemLayer as ItemLayer)});
} }
case mapActions.NEXTTEMPORAL: { case mapActions.NEXTTEMPORAL: {
@ -234,11 +236,11 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
temporalLayer.nextItemLayer.opacity=0; temporalLayer.nextItemLayer.opacity=0;
temporalLayer.nextItemLayer.layerIndex = temporalLayer.layerIndex; temporalLayer.nextItemLayer.layerIndex = temporalLayer.layerIndex;
} }
temporalLayer.selectedItemLayer = temporalLayer.previousItemLayer; temporalLayer.selectedItemLayer = temporalLayer.previousItemLayer;
if( temporalLayer.selectedItemLayer) { if( temporalLayer.selectedItemLayer) {
temporalLayer.selectedItemLayer.opacity=1; temporalLayer.selectedItemLayer.opacity=1;
temporalLayer.selectedItemLayer.layerIndex = temporalLayer.layerIndex; temporalLayer.selectedItemLayer.layerIndex = temporalLayer.layerIndex;
} }
temporalLayer.previousItemLayer = index-2 >=0? new ItemLayer(temporalLayer.temporalItems[index-2],0,true,temporalLayer.layerIndex):null; temporalLayer.previousItemLayer = index-2 >=0? new ItemLayer(temporalLayer.temporalItems[index-2],0,true,temporalLayer.layerIndex):null;
if( temporalLayer.previousItemLayer) { if( temporalLayer.previousItemLayer) {
temporalLayer.previousItemLayer.opacity=0; temporalLayer.previousItemLayer.opacity=0;
@ -289,7 +291,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
}); });
} }
case mapActions.UPDATEFEATURESUCCESS: { case mapActions.UPDATEFEATURESUCCESS: {
let a = action as mapActions.UpdateFeatureSuccess; let a = action as mapActions.UpdateFeatureSuccess;
let features: any[] = []; let features: any[] = [];
var index = -1; var index = -1;
for (var i = 0; i < state.features.length; i++) { for (var i = 0; i < state.features.length; i++) {
@ -311,9 +313,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
return tassign(state, { searchCollapsed: state.panelVisible ? false: true,showLayerSwitcher:false}); return tassign(state, { searchCollapsed: state.panelVisible ? false: true,showLayerSwitcher:false});
} }
case mapActions.SETEXTENT: { case mapActions.SETEXTENT: {
let a = action as mapActions.SetExtent; let a = action as mapActions.SetExtent;
return tassign(state, { extent: a.extent }); return tassign(state, { extent: a.extent });
} }
case mapActions.ADDLAYER: { case mapActions.ADDLAYER: {
let a = action as mapActions.AddLayer; let a = action as mapActions.AddLayer;
let itemLayers = state.overlayLayers.slice(0); let itemLayers = state.overlayLayers.slice(0);
@ -326,7 +328,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
} else { } else {
return state; return state;
} }
} }
case mapActions.REMOVELAYER: { case mapActions.REMOVELAYER: {
let a = action as mapActions.RemoveLayer; let a = action as mapActions.RemoveLayer;
@ -356,7 +358,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
} }
case mapActions.SETLAYERINDEX: { case mapActions.SETLAYERINDEX: {
let a = action as mapActions.SetLayerIndex; let a = action as mapActions.SetLayerIndex;
if (a.itemLayer == null) { if (a.itemLayer == null) {
if(state.selectedItemLayer.item.itemType == "vnd.farmmaps.itemtype.temporal") { if(state.selectedItemLayer.item.itemType == "vnd.farmmaps.itemtype.temporal") {
var newItemlayer = tassign(state.selectedItemLayer,{layerIndex:a.layerIndex}); var newItemlayer = tassign(state.selectedItemLayer,{layerIndex:a.layerIndex});
let tl = newItemlayer as ITemporalItemLayer; let tl = newItemlayer as ITemporalItemLayer;
@ -384,7 +386,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
} else { } else {
var newItemlayer = new ItemLayer(state.selectedItemLayer.item); var newItemlayer = new ItemLayer(state.selectedItemLayer.item);
newItemlayer.layerIndex = a.layerIndex; newItemlayer.layerIndex = a.layerIndex;
} }
return tassign(state, { selectedItemLayer: newItemlayer}) return tassign(state, { selectedItemLayer: newItemlayer})
} else { } else {
@ -404,7 +406,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
} }
var selectedBaseLayer: IItemLayer = null; var selectedBaseLayer: IItemLayer = null;
var mapState = tassign(state.mapState); var mapState = tassign(state.mapState);
let sb = baseLayers.filter(layer => layer.item.code === mapState.baseLayerCode)[0]; let sb = baseLayers.filter(layer => layer.item.code === mapState.baseLayerCode)[0];
if (baseLayers.length > 0 && mapState.baseLayerCode != "" && sb) { if (baseLayers.length > 0 && mapState.baseLayerCode != "" && sb) {
selectedBaseLayer = sb; selectedBaseLayer = sb;
selectedBaseLayer.visible = true; selectedBaseLayer.visible = true;
@ -460,7 +462,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
case mapActions.SHOWLAYERSWITCHER:{ case mapActions.SHOWLAYERSWITCHER:{
let a = action as mapActions.ShowLayerSwitcher; let a = action as mapActions.ShowLayerSwitcher;
return tassign(state,{showLayerSwitcher:a.show}); return tassign(state,{showLayerSwitcher:a.show});
} }
case mapActions.SETREPLACEURL: { case mapActions.SETREPLACEURL: {
let a= action as mapActions.SetReplaceUrl; let a= action as mapActions.SetReplaceUrl;
return tassign(state,{replaceUrl:a.replaceUrl}); return tassign(state,{replaceUrl:a.replaceUrl});
@ -481,6 +483,7 @@ export const getPanelVisible = (state: State) => state.panelVisible;
export const getPanelCollapsed = (state: State) => state.panelCollapsed; export const getPanelCollapsed = (state: State) => state.panelCollapsed;
export const getSelectedFeature = (state: State) => state.selectedFeature; export const getSelectedFeature = (state: State) => state.selectedFeature;
export const getSelectedItem = (state: State) => state.selectedItem; export const getSelectedItem = (state: State) => state.selectedItem;
export const getParentItem = (state: State) => state.parentItem;
export const getQueryState = (state: State) => state.queryState; export const getQueryState = (state: State) => state.queryState;
export const getClearEnabled = (state: State) => state.clearEnabled; export const getClearEnabled = (state: State) => state.clearEnabled;
export const getSearchCollapsed = (state: State) => state.searchCollapsed; export const getSearchCollapsed = (state: State) => state.searchCollapsed;
@ -508,6 +511,7 @@ export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisi
export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed); export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed);
export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature); export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature);
export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem); export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem);
export const selectGetParentItem = createSelector(selectMapState, getParentItem);
export const selectGetQueryState = createSelector(selectMapState, getQueryState); export const selectGetQueryState = createSelector(selectMapState, getQueryState);
export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled); export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed); export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
@ -518,7 +522,7 @@ export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers)
export const selectGetProjection = createSelector(selectMapState, getProjection); export const selectGetProjection = createSelector(selectMapState, getProjection);
export const selectGetSelectedBaseLayer = createSelector(selectMapState, getSelectedBaseLayer); export const selectGetSelectedBaseLayer = createSelector(selectMapState, getSelectedBaseLayer);
export const selectGetSelectedOverlayLayer = createSelector(selectMapState, getSelectedOverlayLayer); export const selectGetSelectedOverlayLayer = createSelector(selectMapState, getSelectedOverlayLayer);
export const selectGetQuery = createSelector(selectMapState, getQuery); export const selectGetQuery = createSelector(selectMapState, getQuery);
export const selectGetSelectedItemLayer = createSelector(selectMapState, getSelectedItemLayer); export const selectGetSelectedItemLayer = createSelector(selectMapState, getSelectedItemLayer);
export const selectGetPeriod = createSelector(selectMapState, getPeriod); export const selectGetPeriod = createSelector(selectMapState, getPeriod);
export const selectGetStyles = createSelector(selectMapState, getStyles); export const selectGetStyles = createSelector(selectMapState, getStyles);