Fix several issues, attemt to fix zooming issue

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts

@@ -64,7 +64,7 @@ export class GpsLocation  implements OnInit,OnChanges{
       this.recalcLocationTolerance();
     }
     if(changes.heading && this.instance) {
-      this.rotate = "rotate(" + Math.round(changes.heading.currentValue) + " 500 500)";
+      this.rotate = "rotate(" +   Math.round(changes.heading.currentValue) + " 500 500)";
     }
   }
 }

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -91,7 +91,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     private geolocationService: GeolocationService,
     private zone: NgZone,
     private deviceorientationService:DeviceOrientationService) {
-      this.initCustomStyles();
   }
 
   @HostListener('document:keyup', ['$event'])
@@ -126,12 +125,12 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   ngOnInit() {
-    this.store.dispatch(new mapActions.Init());
+    this.store.dispatch(new mapActions.Init());   
     this.selectedFeatures$.next({x:0,y:0,features:[]});
     this.selectedFeatures$.next(null);
     this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe((state) => {
       if(state[1]>0) this.replaceUrl(state[0][1], state[0][0],false);      
-    });
+    });   
   }
 
   initCustomStyles() {
@@ -153,7 +152,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     })));
   }
 
-  ngAfterViewInit() {   
+  ngAfterViewInit() {    
+    this.initCustomStyles();   
     this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.setStateCount$),withLatestFrom(this.queryState$),withLatestFrom(this.mapState$)).subscribe( (state) => {
       let params: ParamMap = state[0][0][0];  
       let setStateCount:number = state[0][0][1];
@@ -170,7 +170,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
         let rotation = parseFloat(params.get("rotation"));
         let baseLayer = params.get("baseLayer")?params.get("baseLayer"):"";
         newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
-        mapStateChanged = JSON.stringify(lastMapState) != JSON.stringify(newMapState);
+        mapStateChanged = (JSON.stringify(lastMapState) != JSON.stringify(newMapState)) && setStateCount == 0 ;
         window.localStorage.setItem("FarmMapsCommonMap_mapState",JSON.stringify(newMapState));
       }
       if (params.has("queryState")) {
@@ -181,21 +181,26 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
           queryState = this.serializeService.serialize(newQueryState);
         }
         queryStateChanged = this.serializeService.serialize(lastQueryState) !=  queryState;
-      }
+      }     
-      this.zone.run(()=> {
+      setTimeout(() => {
-        if ( queryStateChanged) {
+        this.zone.run(()=> {
-          console.debug("Query state");
+          if ( queryStateChanged && mapStateChanged) {
-          this.store.dispatch(new mapActions.SetQueryState(newQueryState));
+            console.debug("Both states");
-        } else if (mapStateChanged) {
+            this.store.dispatch(new mapActions.SetState(newMapState,newQueryState));
-          console.debug("Map state");
+          } else if(queryStateChanged) {
-          this.store.dispatch(new mapActions.SetMapState(newMapState));
+            console.debug("Query state");
-        }
+            this.store.dispatch(new mapActions.SetQueryState(newQueryState));
-      })
+          } else if (mapStateChanged) {
-     
+            console.debug("Map state");
+            this.store.dispatch(new mapActions.SetMapState(newMapState));
+          }
+        })
+      },0);                
     });
     setTimeout(() => {
       this.map.instance.updateSize();
     }, 500);
+    console.debug("Afterviewinit");
   }
 
   handleSearchCollapse(event) {

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -128,7 +128,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.STARTSEARCHSUCCESS: {
       let a = action as mapActions.StartSearchSuccess;
       let extent = state.extent;
-      if (action.query.bboxFilter) {
+      if (!action.query.bboxFilter) {
+        console.debug("Set extent");
         extent = createEmpty();
         if (extent) {
           for (let f of action.features) {
@@ -222,6 +223,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
     }
     case mapActions.SETEXTENT: {
+      console.debug("Set extent 2");
       let a = action as mapActions.SetExtent;    
       return tassign(state, { extent: a.extent });
     }   

projects/common-map/src/fm-map/services/device-orientation.service.ts

@@ -40,7 +40,10 @@ export class DeviceOrientationService {
   getCurrentCompassHeading(): Observable<number> {
     return Observable.create((observer: Observer<number>) => {  
         window.addEventListener("deviceorientation", (event:DeviceOrientationEvent)=>{
-          observer.next(this.compassHeading(event.alpha,event.beta,event.gamma));
+          let heading = this.compassHeading(event.alpha,event.beta,event.gamma);
+          if(!Number.isNaN(heading)) {
+            observer.next(heading);
+          }
         } );
     });
   }

projects/common-map/src/fm-map/services/geolocation.service.ts

@@ -1,39 +1,39 @@
-import { Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
-import { Observer, Observable } from 'rxjs';
+import { Observer, Observable } from 'rxjs';
-
+
-/**
+/**
- * GeolocationService class.
+ * GeolocationService class.
- * https://developers.google.com/maps/documentation/javascript/
+ * https://developers.google.com/maps/documentation/javascript/
- * https://dev.w3.org/geo/api/spec-source.html
+ * https://dev.w3.org/geo/api/spec-source.html
- */
+ */
-@Injectable()
+@Injectable()
-export class GeolocationService {
+export class GeolocationService {
-
+
-  /**
+  /**
-   * Tries HTML5 geolocation.
+   * Tries HTML5 geolocation.
-   *
+   *
-   * Wraps the Geolocation API into an observable.
+   * Wraps the Geolocation API into an observable.
-   *
+   *
-   * @return An observable of Position
+   * @return An observable of Position
-   */
+   */
-  getCurrentPosition(): Observable<Position> {
+  getCurrentPosition(): Observable<Position> {
-    return Observable.create((observer: Observer<Position>) => {
+    return Observable.create((observer: Observer<Position>) => {
-      // Invokes getCurrentPosition method of Geolocation API.
+      // Invokes getCurrentPosition method of Geolocation API.
-      navigator.geolocation.watchPosition(
+      navigator.geolocation.watchPosition(
-        (position: Position) => {
+        (position: Position) => {
-          observer.next(position);
+          observer.next(position);
-        },
+        },
-        (error: PositionError) => {
+        (error: PositionError) => {
-          console.debug('Geolocation service: ' + error.message);
+          console.debug('Geolocation service: ' + error.message);
-          observer.error(error);
+          //observer.error(error);
-        },
+        },
-        {
+        {
-          enableHighAccuracy: true,
+          enableHighAccuracy: true,
-          timeout: 5000,
+          timeout: 5000,
-          maximumAge: 0
+          maximumAge: 0
-        }
+        }
-      );
+      );
-    });
+    });
-  }
+  }
-
+
-}
+}