FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implement pan to, fix zooming on map change
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma
2020-01-02 18:11:02 +01:00
parent ac5efdb40f
commit 64c02614ba
8 changed files with 325 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
projects/common-map/src/fm-map/components/map/map.component.ts
View File

@@ -40,39 +40,39 @@ import { tassign } from 'tassign';
export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
title: string = 'Map';
public openedModalName: Observable<string>;
public itemTypes: Observable<{ [id: string]: IItemType }>;
public mapState: Observable<IMapState>;
public features: Observable<Array<Feature>>;
public overlayLayers: Observable<Array<IItemLayer>>;
public selectedOverlayLayer: Observable<IItemLayer>;
public selectedItemLayer: Observable<IItemLayer>;
public baseLayers: Observable<Array<IItemLayer>>;
public selectedBaseLayer: Observable<IItemLayer>;
public projection: Observable<string>;
public selectedFeatures: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
public droppedFile: Subject<IDroppedFile> = new Subject<IDroppedFile>();
public openedModalName$: Observable<string>;
public itemTypes$: Observable<{ [id: string]: IItemType }>;
public mapState$: Observable<IMapState>;
public features$: Observable<Array<Feature>>;
public overlayLayers$: Observable<Array<IItemLayer>>;
public selectedOverlayLayer$: Observable<IItemLayer>;
public selectedItemLayer$: Observable<IItemLayer>;
public baseLayers$: Observable<Array<IItemLayer>>;
public selectedBaseLayer$: Observable<IItemLayer>;
public projection$: Observable<string>;
public selectedFeatures$: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
public droppedFile$: Subject<IDroppedFile> = new Subject<IDroppedFile>();
private paramSub: Subscription;
private itemTypeSub: Subscription;
private mapStateSub: Subscription;
private queryStateSub: Subscription;
public parentCode: Observable<string>;
public panelVisible: Observable<boolean>;
public panelCollapsed: Observable<boolean>;
public selectedFeature: Observable<Feature>;
public selectedItem: Observable<IItem>;
public queryState: Observable<IQueryState>;
public period: Observable<IPeriodState>;
public clearEnabled: Observable<boolean>;
public searchCollapsed: Observable<boolean>;
public searchMinified: Observable<boolean>;
public menuVisible: Observable<boolean>;
public query: Observable<IQueryState>;
public position: Observable<Position>;
public parentCode$: Observable<string>;
public panelVisible$: Observable<boolean>;
public panelCollapsed$: Observable<boolean>;
public selectedFeature$: Observable<Feature>;
public selectedItem$: Observable<IItem>;
public queryState$: Observable<IQueryState>;
public period$: Observable<IPeriodState>;
public clearEnabled$: Observable<boolean>;
public searchCollapsed$: Observable<boolean>;
public searchMinified$: Observable<boolean>;
public menuVisible$: Observable<boolean>;
public query$: Observable<IQueryState>;
public position$: Observable<Position>;
public baseLayersCollapsed:boolean = true;
public overlayLayersCollapsed: boolean = true;
public extent: Observable<Extent>;
@ViewChild('map', { static: true }) map;
public extent$: Observable<Extent>;
@ViewChild('map', { static: false }) map;
constructor(private store: Store<mapReducers.State | commonReducers.State>,
private route: ActivatedRoute,
@@ -81,8 +81,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
private serializeService: StateSerializerService,
public itemTypeService: ItemTypeService,
private location: Location,
private geolocationService: GeolocationService,
private _ref: ChangeDetectorRef ) {
private geolocationService: GeolocationService) {
}
@HostListener('document:keyup', ['$event'])
@@ -118,36 +117,36 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
ngOnInit() {
this.store.dispatch(new mapActions.Init());
this.selectedFeatures.next({x:0,y:0,features:[]});
this.mapState = this.store.select(mapReducers.selectGetMapState);
this.parentCode = this.store.select(mapReducers.selectGetParentCode);
this.features = this.store.select(mapReducers.selectGetFeatures);
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
this.projection = this.store.select(mapReducers.selectGetProjection);
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
this.queryState = this.store.select(mapReducers.selectGetQueryState);
this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
this.query = this.store.select(mapReducers.selectGetQuery);
this.extent = this.store.select(mapReducers.selectGetExtent);
this.selectedFeatures.next(null);
this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
this.period = this.store.select(mapReducers.selectGetPeriod);
this.position = this.geolocationService.getCurrentPosition();
this.selectedFeatures$.next({x:0,y:0,features:[]});
this.mapState$ = this.store.select(mapReducers.selectGetMapState);
this.parentCode$ = this.store.select(mapReducers.selectGetParentCode);
this.features$ = this.store.select(mapReducers.selectGetFeatures);
this.overlayLayers$ = this.store.select(mapReducers.selectGetOverlayLayers);
this.selectedOverlayLayer$ = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
this.baseLayers$ = this.store.select(mapReducers.selectGetBaseLayers);
this.projection$ = this.store.select(mapReducers.selectGetProjection);
this.selectedBaseLayer$ = this.store.select(mapReducers.selectGetSelectedBaseLayer);
this.panelVisible$ = this.store.select(mapReducers.selectGetPanelVisible);
this.panelCollapsed$ = this.store.select(mapReducers.selectGetPanelCollapsed);
this.selectedFeature$ = this.store.select(mapReducers.selectGetSelectedFeature);
this.selectedItem$ = this.store.select(mapReducers.selectGetSelectedItem);
this.queryState$ = this.store.select(mapReducers.selectGetQueryState);
this.clearEnabled$ = this.store.select(mapReducers.selectGetClearEnabled);
this.searchCollapsed$ = this.store.select(mapReducers.selectGetSearchCollapsed);
this.searchMinified$ = this.store.select(mapReducers.selectGetSearchMinified);
this.menuVisible$ = this.store.select(mapReducers.selectGetMenuVisible);
this.openedModalName$ = this.store.select(commonReducers.selectOpenedModalName);
this.query$ = this.store.select(mapReducers.selectGetQuery);
this.extent$ = this.store.select(mapReducers.selectGetExtent);
this.selectedFeatures$.next(null);
this.selectedItemLayer$ = this.store.select(mapReducers.selectGetSelectedItemLayer);
this.period$ = this.store.select(mapReducers.selectGetPeriod);
this.position$ = this.geolocationService.getCurrentPosition();
this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
this.mapState$.pipe(withLatestFrom(this.queryState$)).subscribe((state) => {
this.replaceUrl(state[0], state[1], true);
});
this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
this.query$.pipe(withLatestFrom(this.mapState$)).subscribe((state) => {
this.replaceUrl(state[1], state[0],false);
});
}
@@ -194,9 +193,9 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
this.stateSetCount += 1;
});
setTimeout(() => {
this.map.instance.updateSize();
}, 500);
// setTimeout(() => {
// this.map.instance.updateSize();
// }, 500);
}
handleSearchCollapse(event) {
@@ -245,7 +244,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
parts.push(mapState.baseLayerCode);
parts.push( this.serializeService.serialize(queryState));
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
this._ref.markForCheck();
}
}
@@ -259,7 +257,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
let state = { mapState: mapState, extent: extent };
let source = from([state]);
source.pipe(withLatestFrom(this.selectedBaseLayer), withLatestFrom(this.queryState)).subscribe(([[state, baselayer], queryState]) => {
source.pipe(withLatestFrom(this.selectedBaseLayer$), withLatestFrom(this.queryState$)).subscribe(([[state, baselayer], queryState]) => {
if (mapState && baselayer && queryState) {
let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
this.replaceUrl(newMapState, tassign(queryState, { bbox: queryState.bboxFilter ? state.extent : queryState.bbox }));