More refactoring, add thematic maps button

projects/common-map/src/fm-map/actions/map.actions.ts

@@ -42,6 +42,7 @@ export const DOQUERY = '[Map] DoQuery';
 export const SETSTYLE = '[Map] SetStyle';
 export const SHOWLAYERSWITCHER = '[Map] ShowLayerSwitcher';
 export const CLEAR = '[Map] Clear';
+export const SETREPLACEURL = '[Map] SetReplaceUrl';
 
 export class Clear implements Action {
   readonly type = CLEAR;
@@ -165,7 +166,7 @@ export class SetExtent implements Action {
 export class SetQueryState implements Action {
   readonly type = SETQUERYSTATE;
 
-  constructor(public queryState: IQueryState) { }
+  constructor(public queryState: IQueryState,public replaceUrl:boolean = true) { }
 }
 
 export class SetTimeSpan implements Action {
@@ -251,6 +252,11 @@ export class ShowLayerSwitcher implements Action {
   constructor(public show:boolean) {}
 }
 
+export class SetReplaceUrl implements Action {
+  readonly type = SETREPLACEURL;
+  constructor(public replaceUrl:boolean) {}
+}
+
 export type Actions = SetMapState
   | Init
   | Clear
@@ -285,5 +291,6 @@ export type Actions = SetMapState
   | SetViewExtent
   | DoQuery
   | SetStyle
-  | ShowLayerSwitcher;
+  | ShowLayerSwitcher
+  | SetReplaceUrl;
 

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

@@ -113,9 +113,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
             } else {
               newQueryState= queryState;
             }
-            if(urlparts.length==0 ) {
+            if(urlparts.length==0 ) {              
               newQueryState.itemCode = queryState.itemCode;
-              this.replaceUrl(mapState,newQueryState,false);
+              this.store.dispatch(new mapActions.SetQueryState(newQueryState,false));
+              //this.replaceUrl(mapState,newQueryState,false);
             } else {
               this.router.navigate(urlparts);
             }
@@ -257,17 +258,17 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
         window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(newMapState));
       } else if(queryStateChanged) {
         return of(new mapActions.SetQueryState(newQueryState));
-      } return of(null)
+      } return of(new mapActions.SetReplaceUrl(true));
     })).subscribe((action) => {
-       if(action) {         
-         console.debug("Url to state");
-         this.store.dispatch(action);
-       }
+      if(action) {         
+        console.debug("Url to state");
+        this.store.dispatch(action);
+      }
     });
 
     // state to url
     
-    this.stateSub = this.state$.pipe(withLatestFrom(this.route.paramMap),switchMap(([state,params]) => {
+    this.stateSub = this.state$.pipe(switchMap((state) => {
       let newUrl = this.serializeMapState(state.mapState) + "_" + this.serializeService.serialize(state.queryState);
       if(this.lastUrl!=newUrl && state.setStateCount>0) {
         this.lastUrl=newUrl;
@@ -279,7 +280,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
       })).subscribe((newUrlState) =>{
         if(newUrlState) {
           console.debug(`State to url ${newUrlState.setStateCount}`);
-          this.replaceUrl(newUrlState.mapState,newUrlState.queryState,true);
+          this.replaceUrl(newUrlState.mapState,newUrlState.queryState,newUrlState.replaceUrl);
         }
       });  
 

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

@@ -57,7 +57,8 @@ export interface State {
   styles:IStyles,
   showLayerSwitcher:boolean,
   setStateCount:number,
-  inSearch:boolean
+  inSearch:boolean,
+  replaceUrl:boolean
 }
 
 export const initialState: State = {
@@ -94,7 +95,8 @@ export const initialState: State = {
   styles: {},
   showLayerSwitcher: false,
   setStateCount: 0,
-  inSearch:false
+  inSearch:false,
+  replaceUrl:true
 }
 
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {    
@@ -111,7 +113,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     }
     case mapActions.SETQUERYSTATE: {
       let a = action as mapActions.SetQueryState;
-      return tassign(state, { queryState: tassign(a.queryState ),setStateCount: state.setStateCount+1});
+      return tassign(state, { queryState: tassign(a.queryState ),setStateCount: state.setStateCount+1,replaceUrl:a.replaceUrl});
     }
     case mapActions.SETSTATE: {
       let a = action as mapActions.SetState;
@@ -457,6 +459,10 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       let a = action as mapActions.ShowLayerSwitcher;
       return tassign(state,{showLayerSwitcher:a.show});
     }  
+    case mapActions.SETREPLACEURL: {
+      let a= action as mapActions.SetReplaceUrl;
+      return tassign(state,{replaceUrl:a.replaceUrl});
+    }
     default: {
       return state;
     }
@@ -487,7 +493,7 @@ export const getStyles = (state:State) => state.styles;
 export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher;
 export const getSetStateCount = (state:State) => state.setStateCount;
 export const getInSearch = (state:State) => state.inSearch;
-export const getState = (state:State) => {return {mapState:state.mapState,queryState:state.queryState,setStateCount:state.setStateCount};}
+export const getState = (state:State) => {return {mapState:state.mapState,queryState:state.queryState,setStateCount:state.setStateCount,replaceUrl:state.replaceUrl};}
 
 export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
 export const selectGetMapState= createSelector(selectMapState, getMapState);

src/app/menu/menu.component.html

@@ -4,7 +4,11 @@
           <div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
             <div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
             <div class="caption" i18n>Farms</div>
-          </div>      
+          </div>   
+          <div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})">
+            <div class="icon rounded-circle thematic-maps-icon"><i class="fa fa-map" aria-hidden="true"></i></div>
+            <div class="caption" i18n>Thematic maps</div>
+          </div>   
         </div>
     </div>     
 </div>