Implement menu button

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss 1:9  root stylesheet
An unhandled exception occurred: Can't find stylesheet to import.

.gitignore

@@ -22,6 +22,7 @@ speed-measure-plugin.json
 *.launch
 .settings/
 *.sublime-workspace
+.vs/*
 
 # IDE - VSCode
 .vscode/*

README.md

@@ -16,8 +16,8 @@ Use one of the two options below to get started.
 *Setup*
 
 ```
-docker pull node:10.16.0
+docker pull node:12.13.1
-docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:10.16.0
+docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:12.13.1
 ```
 
 Inside the running container 

angular.json

@@ -66,7 +66,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumError": "7mb"
                 }
               ]
             }

package.json

@@ -11,40 +11,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular/animations": "~8.2.14",
-    "@angular/common": "~7.2.0",
+    "@angular/common": "~8.2.14",
-    "@angular/compiler": "~7.2.0",
+    "@angular/compiler": "~8.2.14",
-    "@angular/core": "~7.2.0",
+    "@angular/core": "~8.2.14",
-    "@angular/forms": "~7.2.0",
+    "@angular/forms": "~8.2.14",
-    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser": "~8.2.14",
-    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/platform-browser-dynamic": "~8.2.14",
-    "@angular/router": "~7.2.0",
+    "@angular/router": "~8.2.14",
     "@aspnet/signalr": "^1.1.4",
-    "@farmmaps/common": ">=0.0.1-prerelease.69 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.109 <0.0.1",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.69 <0.0.1",
+    "@farmmaps/common-map": ">=0.0.1-prerelease.109 <0.0.1",
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",
-    "@ngrx/effects": "^7.2.0",
+    "@ngrx/effects": "^8.2.0",
-    "@ngrx/router-store": "^7.2.0",
+    "@ngrx/router-store": "^8.2.0",
-    "@ngrx/store": "^7.2.0",
+    "@ngrx/store": "^8.2.0",
     "bootstrap": "^4.3.1",
     "font-awesome": "^4.7.0",
     "core-js": "^2.5.4",
     "ngrx-store-localstorage": "^8.0.0",
     "resumablejs": "^1.1.0",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.3",
     "tassign": "^1.0.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular-devkit/build-angular": "^0.803.21",
-    "@angular-devkit/build-ng-packagr": "~0.13.0",
+    "@angular-devkit/build-ng-packagr": "~0.803.19",
-    "@angular/cli": "~7.3.8",
+    "@angular/cli": "~8.3.19",
-    "@angular/compiler-cli": "~7.2.0",
+    "@angular/compiler-cli": "~8.2.14",
-    "@angular/language-service": "~7.2.0",
+    "@angular/language-service": "~8.2.14",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
+    "@types/node": "~8.9.4",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.0.0",
@@ -52,12 +52,12 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^4.2.0",
+    "ng-packagr": "^5.4.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tsickle": ">=0.34.0",
+    "tsickle": "^0.37.0",
     "tslib": "^1.9.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.2.2"
+    "typescript": "~3.5.3"
   }
 }

projects/common-map/package-lock.json

@@ -4,68 +4,42 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@farmmaps/common": {
+    "@openlayers/pepjs": {
-      "version": "0.0.1-prerelease.56",
+      "version": "0.5.3",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.56.tgz",
+      "resolved": "https://registry.npmjs.org/@openlayers/pepjs/-/pepjs-0.5.3.tgz",
-      "integrity": "sha512-m9KxWsLkTSz2JI074gIJH1kDR0PCLsFAug8oBjtlU/QxgBySrvqHCRiODpNmNWnFyNTZHqKHJQefn3Q9iAil4g==",
+      "integrity": "sha512-Bgvi5c14BS0FJWyYWWFstNEnXsB30nK8Jt8hkAAdqr7E0gDdBBWVDglF3Ub19wTxvgJ/CVHyTY6VuCtnyRzglg=="
-      "requires": {
-        "angular-oauth2-oidc": "^5.0.2",
-        "ngx-uploadx": "^3.1.3",
-        "tslib": "^1.9.0"
-      }
-    },
-    "angular-oauth2-oidc": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
-      "integrity": "sha512-jtOv4IWEjSFfBHVE4seWGWT/ZfWJ95QJ1JaFhVVGJEF64ibGuPwV3ztwTOUl98QHi/Yg4PXXDAisb31JnIbxBw==",
-      "requires": {
-        "jsrsasign": "^8.0.12",
-        "tslib": "^1.9.0"
-      }
     },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
       "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
     },
-    "jsrsasign": {
-      "version": "8.0.12",
-      "resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
-      "integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
-    },
     "ngx-openlayers": {
-      "version": "1.0.0-next.9",
+      "version": "1.0.0-next.13",
-      "resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.9.tgz",
+      "resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.13.tgz",
-      "integrity": "sha512-14UFxJX9oeOXtq+HJCJyXn0sBmYmCqj2AnFtetKk1FsDe8EUMFGIRju8UOFegCr2oEu5JsuRjALcfW7lCe+teg==",
+      "integrity": "sha512-6y724s5JV6n1oxEhryxP3wcbwzpierj9RLiMLXInfKOG3l5IO1AtPNkeK9+mKctVDUVm5URIfzzZH02Ld+bvSQ==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "ngx-uploadx": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.2.tgz",
-      "integrity": "sha512-gRdXXq2cRU9HE6dj65qay9GV8NRC7n8y5LtMzJWqsfu2k3CHMQxo2TqZwA9/l/PqJ76RoO7sTPy1OenFQ+krkQ==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "ol": {
-      "version": "5.3.3",
+      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-6.1.1.tgz",
-      "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+      "integrity": "sha512-0dL3i3eJqgOpqIjDKEY3grkeQnjAYfV5L/JCxhOu4SxiaizRwFrFgeas6LILRoxKa03jhQFbut2r2bbgcLGQeA==",
       "requires": {
-        "pbf": "3.1.0",
+        "@openlayers/pepjs": "^0.5.3",
+        "pbf": "3.2.1",
         "pixelworks": "1.1.0",
-        "rbush": "2.0.2"
+        "rbush": "^3.0.1"
       }
     },
     "pbf": {
-      "version": "3.1.0",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
-      "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
       "requires": {
-        "ieee754": "^1.1.6",
+        "ieee754": "^1.1.12",
-        "resolve-protobuf-schema": "^2.0.0"
+        "resolve-protobuf-schema": "^2.1.0"
       }
     },
     "pixelworks": {
@@ -79,16 +53,16 @@
       "integrity": "sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w=="
     },
     "quickselect": {
-      "version": "1.1.1",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
     },
     "rbush": {
-      "version": "2.0.2",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
-      "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
       "requires": {
-        "quickselect": "^1.0.1"
+        "quickselect": "^2.0.0"
       }
     },
     "resolve-protobuf-schema": {

projects/common-map/package.json

@@ -5,16 +5,16 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "dependencies": {
-    "ngx-openlayers": "1.0.0-next.9",
+    "ngx-openlayers": "1.0.0-next.13",
-    "ol": "^5.3.3"
+    "ol": "^6.0.0"
   },
   "peerDependencies": {
-    "@angular/core": "^7.2.0",
+    "@angular/core": "^8.2.0",
     "ngrx-store-localstorage": "^8.0.0",
-    "@ngrx/effects": "^7.2",
+    "@ngrx/effects": "^8.2",
-    "@ngrx/router-store": "^7.2",
+    "@ngrx/router-store": "^8.2",
-    "@ngrx/store": "^7.2",
+    "@ngrx/store": "^8.2",
     "tassign": "^1.0.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.56 <0.0.1"
+    "@farmmaps/common": ">=0.0.1-prerelease.109 <0.0.1"
   }
 }

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

@@ -1,6 +1,8 @@
 import { Action } from '@ngrx/store';
 
-import { IMapState,IItemLayer,IQueryState } from '../models';
+import { IMapState } from '../models/map.state';
+import { IItemLayer } from '../models/item.layer';
+import { IQueryState } from '../models/query.state';
 import { IItem } from '@farmmaps/common';
 import { Feature } from 'ol';
 import { Extent } from 'ol/extent';
@@ -19,7 +21,6 @@ export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
 export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
 export const EXPANDSEARCH = '[Map] ExpandSearch';
 export const COLLAPSESEARCH = '[Map] CollapseSearch';
-export const TOGGLEMENU = '[Map] ToggleMenu';
 export const SETEXTENT = '[Map] SetExtent';
 export const SETQUERYSTATE = '[Map] SetQueryState';
 export const SETTIMESPAN = '[Map] SetTimeSpan';
@@ -119,12 +120,6 @@ export class CollapseSearch implements Action {
   constructor() { }
 }
 
-export class ToggleMenu implements Action {
-  readonly type = TOGGLEMENU;
-
-  constructor() { }
-}
-
 export class SetExtent implements Action {
   readonly type = SETEXTENT;
 
@@ -221,7 +216,6 @@ export type Actions = SetMapState
   | UpdateFeatureSuccess
   | ExpandSearch
   | CollapseSearch
-  | ToggleMenu
   | SetExtent
   | SetQueryState
   | SetTimeSpan

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

@@ -16,12 +16,12 @@ import * as mapReducers from './reducers/map.reducer';
 import * as mapActions from './actions/map.actions';
 import * as mapEffects from './effects/map.effects';
 
-import { IMapState} from './models';
+import { IMapState} from './models/map.state';
-import { ISelectedFeatures } from './models';
+import { ISelectedFeatures } from './models/selected.features';
-import { IItemLayer } from './models';
+import { IItemLayer } from './models/item.layer';
-import { ItemLayer} from './models';
+import { ItemLayer} from './models/item.layer';
-import { IQueryState } from './models';
+import { IQueryState } from './models/query.state';
-import { IPeriodState } from './models';
+import { IPeriodState } from './models/period.state';
 
 // components
 import { GpsLocation} from './components/aol/gps-location/gps-location.component';
@@ -54,18 +54,39 @@ import { LayerListComponent } from './components/aol/layer-list/layer-list.compo
 import { MetaDataModalComponent } from './components/meta-data-modal/meta-data-modal.component';
 import { SelectPeriodModalComponent } from './components/select-period-modal/select-period-modal.component';
 import { MapComponent } from './components/map/map.component';
-import { MapSearchComponent } from './components/map-search';
+import { MapSearchComponent } from './components/map-search/map-search.component';
 import { MapRoutingModule } from './common-map-routing.module';
 import { LegendComponent } from './components/legend/legend.component';
 import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
 import { StateSerializerService } from './services/state-serializer.service';
 import { GeolocationService } from './services/geolocation.service';
-import { localStorageSync } from 'ngrx-store-localstorage';
+import {DeviceOrientationService} from './services/device-orientation.service';
 import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
 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';
 
+export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
+  const r = function(state, action) {
+    const r2 = reducer(state, action);
+
+    if(action.type == "@ngrx/store/update-reducers") {
+        let ms = window.localStorage.getItem(MODULE_NAME+"_mapState");
+        if(ms) {
+          r2["mapState"] = JSON.parse(ms);
+        }
+    }
+    if(action.type == "[Map] MapState" || action.type == "[Map] SetState") {
+        window.localStorage.setItem(MODULE_NAME + "_mapState",JSON.stringify(r2["mapState"]));
+    }
+
+    return r2;
+  };
+  return r;
+ }
+
+const metaReducers: Array<MetaReducer<any, any>> = [LocalStorageSync];
 
 export {
   mapEffects,
@@ -104,6 +125,7 @@ export {
   ItemWidgetListComponent,
   WidgetStatusComponent,
   GpsLocation,
+  PanToLocation,
   AbstractFeatureListComponent,
   AbstractFeatureListFeatureComponent,
   AbstractSelectedItemComponent,
@@ -112,6 +134,7 @@ export {
   AbstractItemListComponent,
   StateSerializerService,
   GeolocationService,
+  DeviceOrientationService,
   IMapState,
   ISelectedFeatures,
   IItemLayer,
@@ -128,7 +151,7 @@ export {
     CommonModule,
     AngularOpenlayersModule,
     MapRoutingModule,
-    StoreModule.forFeature(MODULE_NAME, mapReducers.reducer),
+    StoreModule.forFeature(MODULE_NAME, mapReducers.reducer,{metaReducers:metaReducers}),
     EffectsModule.forFeature([mapEffects.MapEffects]),
     NgbModule,
     FormsModule,
@@ -169,6 +192,7 @@ export {
     ItemWidgetListComponent,
     WidgetStatusComponent,
     GpsLocation,
+    PanToLocation
   ],
   entryComponents: [
     FeatureListComponent,
@@ -192,6 +216,7 @@ export {
        MetaDataModalComponent,
        MapComponent,
        GpsLocation,
+       PanToLocation,
        FeatureListFeatureComponent,
        FeatureListFeatureCropfieldComponent,
        FeatureListFeatureCroppingschemeComponent,
@@ -221,6 +246,7 @@ export {
   ]
 })
 
+
 export class AppCommonMapModule {
   static forRoot(): ModuleWithProviders {
     return {
@@ -228,6 +254,7 @@ export class AppCommonMapModule {
       providers: [
         StateSerializerService,
         GeolocationService,
+        DeviceOrientationService,
         { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
         { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
         { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },

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

@@ -23,7 +23,7 @@ export class GpsLocation  implements OnInit,OnChanges{
   public path: string = "";
   public rotate: string = "";
   private resolution: number = 0;
-  @ViewChild('location') locationElement: ElementRef;
+  @ViewChild('location', { static: true }) locationElement: ElementRef;
 
   constructor(private map: MapComponent) {
     
@@ -62,7 +62,9 @@ export class GpsLocation  implements OnInit,OnChanges{
       this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
       this.locationTolerance = p.coords.accuracy;
       this.recalcLocationTolerance();
-      this.heading = p.coords.heading;
+    }
+    if(changes.heading && this.instance) {
+      this.rotate = "rotate(" + Math.round(changes.heading.currentValue) + " 500 500)";
     }
   }
 }

projects/common-map/src/fm-map/components/aol/item-features-source/item-features-source.component.ts

@@ -4,7 +4,7 @@ import { LayerVectorComponent, SourceVectorComponent, MapComponent, LayerImageCo
 import { LayerVectorImageComponent } from '../layer-vector-image/layer-vector-image.component';
 import { ItemService } from '@farmmaps/common';
 import { IItem } from '@farmmaps/common';
-import { ISelectedFeatures } from '../../../models';
+import { ISelectedFeatures } from '../../../models/selected.features';
 
 import {Vector} from 'ol/source';
 import {Feature,Collection} from 'ol';

projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts

@@ -3,8 +3,9 @@ import { HttpClient } from "@angular/common/http";
 import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
 import { ItemService } from '@farmmaps/common';
 import { AppConfig } from '@farmmaps/common';
-import { IItemLayer, ILayerData, IRenderoutputTiles, IRenderoutputImage, IGradientstop, ILayer, IHistogram } from '../../../models';
+import { IItemLayer} from '../../../models/item.layer';
-
+import { ILayerData} from '../../../models/layer.data';
+import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
 import {Extent} from 'ol/extent';
 import Projection from 'ol/proj/Projection';
 import * as proj from 'ol/proj';

projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.ts

@@ -1,5 +1,5 @@
 import { Component,Input,Output,EventEmitter } from '@angular/core';
-import { IItemLayer } from '../../../models';
+import { IItemLayer } from '../../../models/item.layer';
 
 @Component({
   selector: 'fm-map-layer-list',

projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.html

@@ -0,0 +1,13 @@
+<div (click)="handleClick($event)" class="rounded-circle gps-location">
+  <svg height="100%" width="100%" viewBox="0 0 96 96">
+    <g
+    id="XMLID_1_"><circle      
+      class="pan-to"  [ngClass]="{'pan-to-centered':centered(),'pan-to-disabled':disabled()}"
+      cx="48"
+      cy="48"
+      r="9.8000002"/><path     
+      class="pan-to" [ngClass]="{'pan-to-centered':centered(),'pan-to-disabled':disabled()}"
+      d="M 80.5,44.8 H 73.8 C 72.3,33 63,23.7 51.3,22.2 v -6.7 h -6.5 v 6.7 C 33,23.7 23.7,33 22.2,44.8 h -6.7 v 6.5 h 6.7 C 23.7,63 33,72.3 44.8,73.8 v 6.7 h 6.5 V 73.8 C 63,72.3 72.3,63 73.8,51.3 h 6.7 z M 48,67.5 C 37.2,67.5 28.5,58.8 28.5,48 28.5,37.2 37.2,28.5 48,28.5 c 10.8,0 19.5,8.7 19.5,19.5 0,10.8 -8.7,19.5 -19.5,19.5 z"
+      inkscape:connector-curvature="0"/></g>
+  </svg>
+</div>

projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.scss

@@ -0,0 +1,28 @@
+@import "../../../_theme.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+
+
+.gps-location {
+  display:block; 
+  width:2.5em;
+  height:2.5em;
+  background-color: white;
+  background-size: contain;
+  margin-top:0.5em;
+}
+
+.center, .tolerance, .border {
+  stroke-width: 0;
+}
+
+.pan-to {
+  fill: #333333;
+}
+
+.pan-to-centered {
+  fill: theme-color()
+}
+
+.pan-to-disabled {
+  fill: #808080;
+}

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

@@ -0,0 +1,84 @@
+import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
+import { MapComponent } from 'ngx-openlayers';
+import {IMapState} from '../../../models/map.state'
+import {View} from 'ol';
+import { fromLonLat } from 'ol/proj';
+
+
+@Component({
+  selector: 'fm-map-pan-to-location',
+  templateUrl: './pan-to-location.component.html',
+  styleUrls: ['./pan-to-location.component.scss']
+})
+export class PanToLocation  implements OnInit,OnChanges{
+
+  view: View;
+  map: MapComponent;
+  @Input() position: Position;
+  @Input() mapState: IMapState;
+  @Input() animate: boolean;
+
+  constructor(@Host() map: MapComponent,private changeDetectorRef$: ChangeDetectorRef ) {
+    this.map = map;
+  }
+
+  ngOnInit() {  
+    this.view = this.map.instance.getView();
+    this.view.on('change:center', () => {
+      this.changeDetectorRef$.detectChanges();
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // if (changes.position && this.instance) {
+    //   var p = changes.position.currentValue as Position;
+    //   this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
+    //   this.locationTolerance = p.coords.accuracy;
+    //   this.recalcLocationTolerance();
+    //   this.heading = p.coords.heading;
+    // }
+  }
+
+  p
+
+  public centered():boolean {
+    if(this.position && this.mapState) {
+      let center = this.view.getCenter();
+      let newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
+      let x1 = newCenter[0].toFixed(0);
+      let x2 = center[0].toFixed(0);
+      let y1 = newCenter[1].toFixed(0);
+      let y2 = center[1].toFixed(0);
+      return x1==x2 && y1==y2;  
+    }
+    return false;
+  }
+
+  public disabled():boolean {
+    return !this.position;
+  }
+
+  handleClick(event:Event) {
+    if(this.position) {
+      let view = this.map.instance.getView();
+      let newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
+      let extent = [newCenter[0]-500,newCenter[1]-500,newCenter[0]+500,newCenter[1]+500];
+      var options = { padding: [0, 0, 0, 0],minResolution:1 };
+      let size = this.map.instance.getSize();
+      let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      let threshold = 44 * rem;
+      var left = 1 * rem;
+      var right = 1 * rem;
+      var bottom = Math.round(size[1] / 2);
+      var top = 1 * rem;
+      if (size[0] > threshold) {
+        bottom = 1 * rem;
+        left = 23 * rem;
+      }
+      //options.padding = [top, right, bottom, left];
+      if (this.animate) options["duration"] = 2000;
+      view.fit(extent, options);  
+    }
+    event.preventDefault();
+  }
+}

projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.ts

@@ -15,12 +15,14 @@ import {View} from 'ol';
       background-size: contain;
       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAF6AAABegB0iYb4wAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAmlSURBVHic7d39c1xVHcfxz92kCVh0BojVRpABRGBAKj6P4+io1LYp/hv9O/I/dNqmmU2mP9sf7SMFsSBaRMU+ZUAFB8HC1FKqJLR52D3+cJNm0ySb3XvPOd9zN+/XTGfa3eTe76T7yT3n3Hu/VwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMlz0iMXpEes68CymnUBWGGkJu2xLgLLCEha9i7+AdDKSXc76bNL0s0/SZ+zrgc5jiDpeE7S3ZLuGpR+Zl0McgQkHSNLf6m1/B22CEg6bk/OnfS8ZSFYRkAS4KRvSHqo5aUHp6SnrerBMgKShlUrV01Ws5JAQNKwas7hmIckIbMuYLNz0r2Srkrql6TLi69nUkPStqek61a1gSNICnZpMRytnNTXlHYa1IMWBMTeunONGvMQcwTEkMt//r9o8/4ex/+RKX74tr4naVub94empO/GKgarERBbGw6hHMMsUwTEFgFJHAEx4qTtkr650ddl0rNvScMRSsIaCIidEXV2Hiqbl3aHLgZrIyB2Oh46ZQyzzHAm3YCTBiRdk/T5O9+7vPrLJWl6UBp6TJoNWxnuxBHExo+1RjjauGdO+lGoYrA+AmKj6wsRuXjRBgGx0fWcgnmIDQISmcv7Xn29wPc9fln6WoCS0AYBie+XRb+xyTArOgISX+EPeUZAomOZNyInbVW+vHvXel+zzjLvktlMGnpKmvZbGdbDESSu59QmHB0YFD2zoiIgcZVeieLixbgISFy7PGxjxDE0joaAROKkHZK+6mFTD1zK+2ghAgISj7ehEfeqx0NA4vH2oWYeEg9j2QicdJ/y3ld9G33tBsu8kvKeWTXpS09KH5cuDm1xBIljtzoIR6ec1Ndo0w0F/hCQOLwPiRhmxUFAAnP5kcPH8u4KmbTnVx6PSlgbAQnvB5LuD7Dd+56Uvh9gu2hBQMILdoEhT6IKj4CEF2yuwDwkPAISkMv7WT0TcBc7zksPBNz+pkdAwnpeYc81ZX0tzzaEfwQkrOBzBJo5hMWZ9EBcfu/Gf9Rde5+OzqTfYWZQup+eWWFwBAnnJ+oyHAVtvZX32UIABCScaEMf7lUPh4CEE/NDW7hTCtojIAG4vO/VYxF3+ehU3P1tGgQkjOgn8JqcNAyCgIQRfU7APCQMlnk9c9I9yntfDRb5/gLLvEvm+qWhJ6RPi28Cd+II4t9OFQxHSQNN6ecG++1pBMQ/s7kA8xD/CIhHi/2qLJ8nuJeeWX4REL+elfQVw/1vn+rgybnoHAHxy3wliUck+EVA/DKfA9BUzi/Gq544aUjSRyrZSKHEMu+SZkPaviPvw4WSOIL4s0dpdBmp1eiZ5Q0B8SeZsT9n1f0hIB4s9r7aaV1Hi90vS/3WRfQCAuLHDxWm91VR927L+3GhJALiR3JDGpZ7/SAgfiS3tJolWFMVEZCSnPSgpKet61jDM1PSQ9ZFVB0BKW+vEj2f5GyvC+sJBKS8ZMf69MwqL8nffFWx2PvqmvKbpLzwcCa91cxWaehh6ZbfzW4eHEHK+ak8hiOArTN5fy4UREDKSX6liA7w5RCQcpJvHF3LG2ijIAJSkJOekPSodR0bcdLD56XHreuoKgJSXGWGLv0VqjU1BKS4ynzomIcUxzJvAU76gvJHGwz43rbnZd4l87ekL35H+m+YzfcujiDF7FSAcAS0ZZCeWYUQkGIqN2ThXvViCEiXFvtO7bKuo1tOGqFnVvcISPe+rfzptVXz5YvSt6yLqBpuy+xS6F/B+/btC7btZrMp1evBtt+LOIJ078+SrlgXUcBH9Xr9L9ZFVA0B6Z6TdNq6iAJOKK8dXSAgxRy3LqBbWZZVruYUEJBizkiasy6iC/POuZesi6giAlLM/yS9Zl1Ep7Ise3V8fJyz6AUQkOKqNGSpUq1JISDFVeZDV6vVKlNraghIcW9Jese6iA7889ChQ29bF1FVBKSck9YFbMQ5d8y6hiojIOVUYehShRqTRUDKeVnStHURbczMz8+ftS6iyghIObPKQ5Kql44cOUJPrBIISHknrAtoI+XaKoGAlHdciV7j1Gg0TlnXUHUEpLz3JV2yLmINFyYmJt6zLqLqCIgfya0UcXGiHwTEj+TG+s655GqqIgLix+8lfWxdRItPhoeHz1kX0QsIiB8N5ZfAJ8E5d2p0dHTBuo5eQED8SWZIU6vVkqml6giIPyeVH0msNbMse8G6iF5BQPy5JukN6yIkvT42NnbVuoheQUD8SmFpNYUaegYB8ct87M/8wy8C4tebkv5tuP8Px8bG/mq4/55DQPxykiyvf0r2urCqIiD+Wc4BmH94RkD8O6P8PpHY5hYWFuh95RkB8W9a0quxd+qcOzs5Oflp7P32OgISRvSVpCzLWL0KgICEEX0uwOXtYRCQMP4m6e8R9/fO4cOHY+5v0yAg4cQc8vw64r42FQISTrSAMP8Ih4CEc1ZSjFWlmYGBgVci7GdTIiDhzEr6TYT9nNm/f7/FeZdNgYCEFXzow73nYRGQsI4p7LVRzjmXfAPtKiMgYV2RdCHg9s/X6/UPAm5/0yMg4YU8gcfJwcAISHjB5gjMP8IjIOGdU5ieWddv3LjxeoDtogUBCa8h6bTvjWZZdvLo0aMpdFHpaQQkjhBzBeYfERCQOE7Jb8+sRn9/P72vIiAgcVyX5G2+4Jw7d+DAgZR6AfcsAhKPzyERw6tICEg83j7UzjkCEgkBiee8pH952M4H9Xr9ooftoAMEJC4fy70nRO+raAhIXKWHRgyv4iIgcb0oqcxzy2e3bNkS4x4TLCIgcc1IKnz3X5Zlvz148OC0x3qwAQISX+ELDLk4MT4CEl/hDiSNRoOAREZA4ntXed+sbr09MTHxD9/FoD0CYqPrlShWr2wQEBtdD5V4cpQNAmLjFXXXM2t6YGDgd6GKwfoIiI055edEOvUCva9sEBA7Hc8pmH/YISB2Or2myjUaDcvnHm5qBMTOh5I6eSLtm5OTk1dCF4O1ERBbnQydGF4ZIiC2CEjiCIitP0q62ub9a8PDw2/EKgarERBbTUntupOcHB0dbcYqBqsREHvrDqF4MKc9AmLvtKSFNV5vLCwsnIldDFYiIPY+kfSHNV5/bWJi4nrsYrASAUnDqgsReTBnGghIGlbNNZh/pIGApOGipPda/v3+2NjYJatisIyApKP1WYPHzKrACgQkHbfnHDRnSEe/dQG47UVJNyVlWZbR+yoRBCQdNyWdleTGx8c/sy4GOQKSluOi725SCEhaTvT19VnXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOvB/FOHOpgoUlk8AAAAASUVORK5CYII=);
       opacity: 1;
+      margin-top:0.5em;
     }
     .compass-n {    
       background-image: url(data:image/png;base64,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);
-      transition: opacity 1s ease-out;
+      transition: opacity 1s ease-out 2s,height 1s ease-out 3s,margin-top 1s ease-out 3s;
-      transition-delay: 2s;
       opacity:0;
+      height:0;
+      margin-top:0;
     }
 `]
 })

projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts

@@ -21,7 +21,7 @@ export class FeatureListContainerComponent {
   @Input() features: Array<Feature>
   @Input() queryState: IQueryState;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent(queryState:IQueryState) {
     var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default

projects/common-map/src/fm-map/components/feature-list-feature-container/feature-list-feature-container.component.ts

@@ -19,7 +19,7 @@ export class FeatureListFeatureContainerComponent {
 
   @Input() feature: Feature;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
     var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default

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

@@ -8,7 +8,7 @@ import * as mapActions from '../../actions/map.actions';
 import { Observable, from } from 'rxjs';
 import { withLatestFrom } from 'rxjs/operators';
 import { tassign } from 'tassign';
-import { IQueryState } from '../../models';
+import { IQueryState } from '../../models/query.state';
 
 
 @Injectable()

projects/common-map/src/fm-map/components/item-list-item-container/item-list-item-container.component.ts

@@ -19,7 +19,7 @@ export class ItemListItemContainerComponent {
 
   @Input() item: IListItem;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
     var componentFactory: ComponentFactory<AbstractItemListItemComponent> = this.componentFactoryResolver.resolveComponentFactory(ItemListItemComponent); // default

projects/common-map/src/fm-map/components/item-list/item-list.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="items;let items" class="widget-container">
+<div *ngIf="items;let items" class="widget-container pt-0">
   <div class="widget" *ngFor="let item of items" (click)="handleItemClick(item)">
     <div class="content">
       <fm-map-item-list-item-container [item]="item" class="item-container"></fm-map-item-list-item-container>

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

@@ -1,14 +1,10 @@
 import { Component, Input, Injectable } from '@angular/core';
 import { Location } from '@angular/common';
-import { Feature } from 'ol';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService, IItem, Item,IListItem } from '@farmmaps/common';
+import { commonReducers,ItemTypeService,IListItem } from '@farmmaps/common';
 import * as mapActions from '../../actions/map.actions';
-import { Observable, from } from 'rxjs';
-import { withLatestFrom } from 'rxjs/operators';
 import { tassign } from 'tassign';
-import { IQueryState } from '../../models';
 
 
 @Injectable()

projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="widgets;let widgets" class="widget-container">
+<div *ngIf="widgets;let widgets" class="widget-container pt-0">
   <div class="widget" *ngFor="let widget of widgets">
     <div class="content">
       <ng-template #widgetTemplate></ng-template>

projects/common-map/src/fm-map/components/legend/legend.component.html

@@ -1,4 +1,4 @@
-<table class="container" *ngIf="layer">
+<table class="container" *ngIf="showLegend()">
   <tr>
     <td colspan="2">
       <div class="title">
@@ -14,20 +14,22 @@
     </td>
   </tr>
   <tr *ngFor="let entry of layer.renderer.colorMap.entries; let i = index ">
-    <td class="legend-items"><div [style.background-color]="getHex(entry.color)"></div></td>
+    <td class="legend-items"><span [style.background-color]="getHex(entry.color)" class="color"></span></td>
-    <td class="legend-items-text">{{entry.value | number:'1.0-2'}} {{legendunit}}</td>
+    <td class="legend-items-text"><span *ngIf="!entry.label">{{entry.value | number:'1.0-2'}} {{legendunit}}</span><span *ngIf="entry.label">{{entry.label}}</span></td>    
-    <!--<td class="histogram-items-text"><span *ngIf="histogramenabled">{{entry.value}} {{histogramunit}}</span></td>
     <td class="histogram-items">
-      <div *ngIf="histogramenabled" [style.background-color]="getHex(selectedColorMap.noValue)" [style.width]="getPart(selectedColorMap, entry)">
+      <div *ngIf="showHistogram()">
+        <span class="bar" [style.background-color]="getHex(entry.color)" [style.width]="getPart(layer.renderer, i)">
+        </span>
+        <span class="bar-label">{{getLabel(layer.renderer,i)}}</span>
       </div>     
-    </td>-->
+    </td>
   </tr>
   <tr>
     <td colspan="4"></td>
   </tr>
-  <!--<tr>
+  <!--<tr *ngIf="layer.renderer.colorMap.entries.length > 0">
     <td>
-      <i class="fas fa-chart-bar" (click)="onClickHistoGram()"></i>
+      <i title="Show histogram" class="fa fa-bar-chart fa-rotate-90" (click)="onClickHistoGram()"></i>
     </td>
     <td colspan="3"></td>
   </tr>-->

projects/common-map/src/fm-map/components/legend/legend.component.scss

@@ -16,9 +16,13 @@
   margin-bottom: 0;
 }
 
-.legend-items {
+span.color {
+  display:inline-block;
   width: 1.5em;
   height: 1.5em;
+}
+
+.legend-items {
   padding: 0.1em;
   border-style: none;
   border-width: 0.05em;
@@ -36,16 +40,10 @@
 }
 
 .histogram-items {
-  width: 5em;
+  width: 100%;
   padding-left: 1em;
 }
 
-  .histogram-items > div {
-    height: 1em;
-    border-style: solid;
-    border-width: 0.05em;
-    vertical-align: middle;
-  }
 
 .histogram-items-text {
   max-width: 20em;
@@ -54,5 +52,16 @@
   text-align: left;
 }
 
+.bar {
+  display:inline-block;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.bar-label {
+  margin-left:0.3em;
+  font-size:0.7em;
+}
+
 
 

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
-import { IColorMap, IColor, IColorEntry,ILayer } from '../../models';
+import { IColorMap, IColor, IColorEntry,ILayer, IRenderer } from '../../models/color.map';
 
 
 @Component({
@@ -45,22 +45,39 @@ export class LegendComponent implements OnInit,AfterViewInit {
     this.histogramenabled = !this.histogramenabled;
   }
 
+
+
+
   public getHex(color: IColor): string {
     return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
   }
 
-  public componentToHex(c: number): string {
+  private componentToHex(c: number): string {
     const hex = c.toString(16);
     return hex.length === 1 ? `0${hex}` : hex;
   }
 
-  private getPart(colorMap: IColorMap, colorEntry: IColorEntry): string {
+  public getPart(renderer: IRenderer, index: number): string {
-    let sumOfValue = colorMap.entries.reduce((sum, item) => sum + item.value, 0);
+    let max = renderer.band.histogram.entries.reduce((max, entry) => entry.freqency > max ? entry.freqency : max, 0);
-    let part = ((colorEntry.value / sumOfValue) * 100) + "%";
+    let scale = 75 / max;
+    let part = (renderer.band.histogram.entries[index].freqency * scale) + "%";
 
     return part;
   }
 
+  public getLabel(renderer: IRenderer, index: number): string {
+    let scale = 100 / renderer.band.histogram.entries.reduce((sum, entry) => sum + entry.freqency, 0);
+    let percent = renderer.band.histogram.entries[index].freqency * scale;
+    return percent < 0.1 ? "" : percent.toFixed(1) + " %";
+  }
+
+  showLegend(): boolean {
+       return this.layer && this.layer.renderer && this.layer.renderer.renderType != "MULTIBAND_COLOR";
+  }
+
+  showHistogram(): boolean {
+    return this.histogramenabled && this.layer.renderer.band.histogram.entries && this.layer.renderer.band.histogram.entries.length > 0 && this.layer.renderer.colorMap.colormapType == "minmax";
+  }
 }
 
 

projects/common-map/src/fm-map/components/map-search/index.ts

@@ -1 +0,0 @@
-export * from './map-search.component';

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

@@ -2,8 +2,8 @@ import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChange
 import { Observable ,  of } from 'rxjs';
 import { debounceTime,distinctUntilChanged,tap,switchMap,merge,catchError} from 'rxjs/operators';
 import { TypeaheadService, TimespanService } from '@farmmaps/common';
-import { IQueryState,IPeriodState } from '../../models';
+import { IQueryState } from '../../models/query.state';
-import { fillProperties } from '@angular/core/src/util/property';
+import { IPeriodState } from '../../models/period.state';
 import { tassign } from 'tassign';
 
 @Component({
@@ -13,7 +13,7 @@ import { tassign } from 'tassign';
 })
 export class MapSearchComponent {
 
-  @ViewChild('searchText') searchText;
+  @ViewChild('searchText', { static: true }) searchText;
   @Input() clearEnabled: boolean
   @Input() set collapsed(collapsed: boolean) {
     this.collapsedLocal = collapsed;

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

@@ -1,58 +1,68 @@
-<aol-map #map (onMoveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':(panelVisible|async)}" class="map">  
+<ng-container *ngIf="{
+  mapState:mapState$|async,
+  extent:extent$|async,
+  baseLayers:baseLayers$|async,
+  overlayLayers:overlayLayers$|async,
+  selectedItemLayer:selectedItemLayer$|async,
+  features:features$|async,
+  position:position$|async,
+  parentCode:parentCode$|async,
+  panelVisible:panelVisible$|async,
+  openedModalName:openedModalName$|async,
+  panelCollapsed:panelCollapsed$|async,
+  searchMinified:searchMinified$|async,
+  selectedItem:selectedItem$|async,
+  queryState:queryState$|async,
+  searchCollapsed:searchCollapsed$|async,
+  clearEnabled:clearEnabled$|async,
+  period:period$|async,
+  compassHeading:compassHeading$|async
+} as state">
+  <aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':state.panelVisible}" class="map">  
     <div>
   
     </div>
-  <aol-view [zoom]="(mapState|async).zoom" [rotation]="(mapState|async).rotation">
+    <aol-view [zoom]="state.mapState.zoom" [rotation]="state.mapState.rotation">
-     <aol-coordinate [x]="(mapState|async).xCenter" [y]="(mapState|async).yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
+       <aol-coordinate [x]="state.mapState.xCenter" [y]="state.mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
-     <fm-map-zoom-to-extent [extent]="extent|async" [animate]="true"></fm-map-zoom-to-extent>
+       <fm-map-zoom-to-extent [extent]="state.extent" [animate]="true"></fm-map-zoom-to-extent>
     </aol-view>
     <aol-interaction-default></aol-interaction-default>
     <aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
-  <fm-map-item-layers [itemLayers]="baseLayers|async"></fm-map-item-layers>
+    <fm-map-item-layers [itemLayers]="state.baseLayers"></fm-map-item-layers>
-  <fm-map-item-layers [itemLayers]="overlayLayers|async"></fm-map-item-layers>
+    <fm-map-item-layers [itemLayers]="state.overlayLayers"></fm-map-item-layers>
-  <fm-map-item-layers [itemLayer]="selectedItemLayer|async"></fm-map-item-layers>
+    <fm-map-item-layers [itemLayer]="state.selectedItemLayer"></fm-map-item-layers>
     <aol-layer-vector>
-    <fm-map-item-source-vector [features]="features|async" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="selectedFeature|async" [selectedItem]="selectedItem|async"></fm-map-item-source-vector>
+      <fm-map-item-source-vector [features]="state.features" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
     </aol-layer-vector>
-  <fm-map-gps-location [position]="position|async" [headingTolerance]="20" [showHeading]="true"></fm-map-gps-location>
+    <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location>
     <div class="control-container">
-<!--    <switch2d3d></switch2d3d>-->
+  <!--    <switch2d3d></switch2d3d>-->
+      <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>
-  <fm-map-file-drop-target [parentCode]="(parentCode | async)" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
+    <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
-</aol-map>
+  </aol-map>
-<fm-map-map-search #mapSearch [openedModalName]="openedModalName|async" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':(menuVisible|async)}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="searchCollapsed|async" [searchMinified]="(searchMinified | async)" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="queryState|async" [clearEnabled]="clearEnabled|async" [period]="period|async"></fm-map-map-search>
+  <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period"></fm-map-map-search>
-<fm-side-panel [resizeable]="true" [visible]="(panelVisible|async)" [collapsed]="(panelCollapsed|async)" [collapsable]="false">
+  <fm-side-panel [resizeable]="true" [visible]="state.panelVisible" [collapsed]="state.panelCollapsed" [collapsable]="false">
     <div class="panel-wrapper">
-    <div class="panel-top bg-secondary" *ngIf="!(searchMinified | async)">
+      <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
       </div>
       <div class="panel-bottom">
   
-      <div *ngIf="!(selectedItem|async)">
+        <div *ngIf="!(state.selectedItem)">
-        <fm-map-feature-list-container [features]="(features | async)" [queryState]="(queryState|async)"></fm-map-feature-list-container>
+          <fm-map-feature-list-container [features]="state.features" [queryState]="state.queryState"></fm-map-feature-list-container>
         </div>
   
-      <div *ngIf="(selectedItem | async);let item">
+        <div *ngIf="state.selectedItem;let item">
           <fm-map-selected-item-container [item]="item"></fm-map-selected-item-container>
         </div>
-      <div *ngIf="(features|async).length == 0" class="no-results  m-2">
+        <div *ngIf="state.features.length == 0" class="no-results  m-2">
-        <div *ngIf="(queryState|async)?.query">Cannot find <span>{{(queryState|async)?.query}}</span></div>
+          <div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>
-        <div *ngIf="(queryState|async)?.tags">Cannot find tag <span>{{(queryState|async)?.tags}}</span></div>
+          <div *ngIf="state.queryState?.tags">Cannot find tag <span>{{state.queryState?.tags}}</span></div>
         </div>
       </div>
     </div>
-</fm-side-panel>
+  </fm-side-panel>
-<fm-side-panel [visible]="(menuVisible|async)" class="menu">
+</ng-container>
-  <div class="container-fluid">
+
-    <div class="body">
-      <div class="d-flex flex-row">
-        <div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
-        <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
-      </div>
-      <div class="d-flex flex-column cards"> 
-          <router-outlet name="side-panel-menu"></router-outlet>          
-      </div>      
-  </div>
-  </div>
-</fm-side-panel>
 

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

@@ -117,10 +117,6 @@ timespan.menuVisible {
   transition: height 0.5s;
 }
 
-:host ::ng-deep .menu .side-panel {
-  z-index: 100;
-  background-color: rgb(245,245,245);
-}
 
 @media screen and (min-width:44rem) {
   .panel-top {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit,ChangeDetectorRef,NgZone } from '@angular/core';
 import { Location } from '@angular/common';
 import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
 import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
@@ -9,11 +9,16 @@ import { Store } from '@ngrx/store';
 // Map
 import * as mapReducers from '../../reducers/map.reducer';
 import * as mapActions from '../../actions/map.actions';
-import { IMapState,ISelectedFeatures,IItemLayer, ItemLayer,IQueryState,IPeriodState } from '../../models';
+import { IMapState} from '../../models/map.state';
+import { ISelectedFeatures } from '../../models/selected.features';
+import { IItemLayer } from '../../models/item.layer';
+import { IQueryState } from '../../models/query.state';
+import { IPeriodState } from '../../models/period.state';
 import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
 import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
 import { StateSerializerService } from '../../services/state-serializer.service';
 import { GeolocationService} from '../../services/geolocation.service';
+import {DeviceOrientationService} from '../../services/device-orientation.service';
 
 // AppCommon
 import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
@@ -36,41 +41,51 @@ import { tassign } from 'tassign';
 
 export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   title: string = 'Map';
-  public openedModalName: Observable<string>;
+  public openedModalName$: Observable<string>;
-  public itemTypes: Observable<{ [id: string]: IItemType }>;
+  public itemTypes$: Observable<{ [id: string]: IItemType }>;
-  public mapState: Observable<IMapState>;
+  public mapState$: Observable<IMapState>;
-  public features: Observable<Array<Feature>>;
+  public features$: Observable<Array<Feature>>;
-  public overlayLayers: Observable<Array<IItemLayer>>;
+  public overlayLayers$: Observable<Array<IItemLayer>>;
-  public selectedOverlayLayer: Observable<IItemLayer>;
+  public selectedOverlayLayer$: Observable<IItemLayer>;
-  public selectedItemLayer: Observable<IItemLayer>;
+  public selectedItemLayer$: Observable<IItemLayer>;
-  public baseLayers: Observable<Array<IItemLayer>>;
+  public baseLayers$: Observable<Array<IItemLayer>>;
-  public selectedBaseLayer: Observable<IItemLayer>;
+  public selectedBaseLayer$: Observable<IItemLayer>;
-  public projection: Observable<string>;
+  public projection$: Observable<string>;
-  public selectedFeatures: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
+  public selectedFeatures$: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
-  public droppedFile: Subject<IDroppedFile>  = new Subject<IDroppedFile>();
+  public droppedFile$: Subject<IDroppedFile>  = new Subject<IDroppedFile>();
   private paramSub: Subscription;
   private itemTypeSub: Subscription;
   private mapStateSub: Subscription;
   private queryStateSub: Subscription;
-  public parentCode: Observable<string>;
+  public parentCode$: Observable<string>;
-  public panelVisible: Observable<boolean>;
+  public panelVisible$: Observable<boolean>;
-  public panelCollapsed: Observable<boolean>;
+  public panelCollapsed$: Observable<boolean>;
-  public selectedFeature: Observable<Feature>;
+  public selectedFeature$: Observable<Feature>;
-  public selectedItem: Observable<IItem>;
+  public selectedItem$: Observable<IItem>;
-  public queryState: Observable<IQueryState>;
+  public queryState$: Observable<IQueryState>;
-  public period: Observable<IPeriodState>;
+  public period$: Observable<IPeriodState>;
-  public clearEnabled: Observable<boolean>;
+  public clearEnabled$: Observable<boolean>;
-  public searchCollapsed: Observable<boolean>;
+  public searchCollapsed$: Observable<boolean>;
-  public searchMinified: Observable<boolean>;
+  public searchMinified$: Observable<boolean>;
-  public menuVisible: Observable<boolean>;
+  public menuVisible$: Observable<boolean>;
-  public query: Observable<IQueryState>;
+  public query$: Observable<IQueryState>;
-  public position: Observable<Position>;
+  public position$: Observable<Position>;
+  public compassHeading$: Observable<number>;
   public baseLayersCollapsed:boolean = true;
   public overlayLayersCollapsed: boolean = true;
-  public extent: Observable<Extent>;
+  public extent$: Observable<Extent>;
-  @ViewChild('map') map;
+  @ViewChild('map', { static: false }) map;
   
-  constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
+  constructor(private store: Store<mapReducers.State | commonReducers.State>, 
+    private route: ActivatedRoute, 
+    private router: Router,
+    private uploadService: ResumableFileUploadService, 
+    private serializeService: StateSerializerService, 
+    public itemTypeService: ItemTypeService, 
+    private location: Location, 
+    private geolocationService: GeolocationService,
+    private zone: NgZone,
+    private deviceorientationService:DeviceOrientationService) {
   }
 
   @HostListener('document:keyup', ['$event'])
@@ -106,36 +121,36 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
 
   ngOnInit() {
     this.store.dispatch(new mapActions.Init());
-    this.selectedFeatures.next({x:0,y:0,features:[]});
+    this.selectedFeatures$.next({x:0,y:0,features:[]});
-    this.mapState = this.store.select(mapReducers.selectGetMapState);
+    this.mapState$ = this.store.select(mapReducers.selectGetMapState);
-    this.parentCode = this.store.select(mapReducers.selectGetParentCode);
+    this.parentCode$ = this.store.select(mapReducers.selectGetParentCode);
-    this.features = this.store.select(mapReducers.selectGetFeatures);
+    this.features$ = this.store.select(mapReducers.selectGetFeatures);
-    this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
+    this.overlayLayers$ = this.store.select(mapReducers.selectGetOverlayLayers);
-    this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
+    this.selectedOverlayLayer$ = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
-    this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
+    this.baseLayers$ = this.store.select(mapReducers.selectGetBaseLayers);
-    this.projection = this.store.select(mapReducers.selectGetProjection);
+    this.projection$ = this.store.select(mapReducers.selectGetProjection);
-    this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
+    this.selectedBaseLayer$ = this.store.select(mapReducers.selectGetSelectedBaseLayer);
-    this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
+    this.panelVisible$ = this.store.select(mapReducers.selectGetPanelVisible);
-    this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
+    this.panelCollapsed$ = this.store.select(mapReducers.selectGetPanelCollapsed);
-    this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
+    this.selectedFeature$ = this.store.select(mapReducers.selectGetSelectedFeature);
-    this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
+    this.selectedItem$ = this.store.select(mapReducers.selectGetSelectedItem);
-    this.queryState = this.store.select(mapReducers.selectGetQueryState);
+    this.queryState$ = this.store.select(mapReducers.selectGetQueryState);
-    this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
+    this.clearEnabled$ = this.store.select(mapReducers.selectGetClearEnabled);
-    this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
+    this.searchCollapsed$ = this.store.select(mapReducers.selectGetSearchCollapsed);
-    this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
+    this.searchMinified$ = this.store.select(mapReducers.selectGetSearchMinified);
-    this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
+    this.openedModalName$ = this.store.select(commonReducers.selectOpenedModalName);
-    this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
+    this.query$ = this.store.select(mapReducers.selectGetQuery);
-    this.query = this.store.select(mapReducers.selectGetQuery);
+    this.extent$ = this.store.select(mapReducers.selectGetExtent);
-    this.extent = this.store.select(mapReducers.selectGetExtent);
+    this.selectedFeatures$.next(null);
-    this.selectedFeatures.next(null);
+    this.selectedItemLayer$ = this.store.select(mapReducers.selectGetSelectedItemLayer);
-    this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
+    this.period$ = this.store.select(mapReducers.selectGetPeriod);
-    this.period = this.store.select(mapReducers.selectGetPeriod);
+    this.position$ = this.geolocationService.getCurrentPosition();
-    this.position = this.geolocationService.getCurrentPosition();
+    this.compassHeading$ = this.deviceorientationService.getCurrentCompassHeading();
 
-    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);
     });
   }
@@ -159,6 +174,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
         newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
         mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
         this.lastMapState = JSON.stringify(newMapState);
+        window.localStorage.setItem("FarmMapsCommonMap_mapState",this.lastMapState);
       }
       if (params.has("queryState")) {
         let queryState = params.get("queryState");
@@ -196,7 +212,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   handleToggleMenu(event) {
-    this.store.dispatch(new mapActions.ToggleMenu());
+    this.store.dispatch(new commonActions.ToggleMenu());
   }
 
   handleToggleBaseLayers(event:MouseEvent) {
@@ -237,6 +253,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   handleOnMoveEnd(event) {
+    this.zone.run(() =>{
       var map = event.map;
       var view = map.getView();
       var rotation = view.getRotation();
@@ -246,17 +263,20 @@ 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 }));
           this.store.dispatch(new mapActions.SetViewExtent(state.extent));
         }
       });
+    });   
   }
 
   handleOnMouseDown(event: MouseEvent) {
+    this.zone.run(() =>{
       this.store.dispatch(new mapActions.CollapseSearch());
+    });
   }
 
   handleOnDownload(event) {

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.ts

@@ -18,7 +18,7 @@ export class MetaDataModalComponent {
   private modalName: string = 'metaDataModal';
   private modalRef: NgbModalRef;
 
-  @ViewChild('content') _templateModal:ElementRef;
+  @ViewChild('content', { static: true }) _templateModal:ElementRef;
   @Input() droppedFile: IDroppedFile;
   @Input() set modalState(_modalState:any) {;
     if(_modalState == this.modalName) {

projects/common-map/src/fm-map/components/select-period-modal/select-period-modal.component.ts

@@ -29,7 +29,7 @@ export class SelectPeriodModalComponent {
   fromDate: NgbDateStruct;
   toDate: NgbDateStruct;
 
-  @ViewChild('content') _templateModal:ElementRef;
+  @ViewChild('content', { static: true }) _templateModal:ElementRef;
 
   @Input() set modalState(_modalState:any) {;
     if(_modalState == this.modalName) {

projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts

@@ -16,13 +16,23 @@ export class SelectedItemContainerComponent {
 
   @Input() item: IItem;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
-    var componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
+    let componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
-    for (var i = 0; i < this.selectedItemComponents.length; i++) {
+    let firstComponentWithTypeAndTask = this.selectedItemComponents
-      if (this.selectedItemComponents[i]['forItemType'] == this.item.itemType) {
+      .find(value => value['forSourceTask'] == this.item.sourceTask &&
-        componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[i]['constructor'] as any);
+        value['forItemType'] == this.item.itemType
+      );
+
+    if (firstComponentWithTypeAndTask) {
+      componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithTypeAndTask['constructor'] as any);
+    } else {
+      let firstComponentWithType = this.selectedItemComponents
+        .find(value => value['forItemType'] == this.item.itemType);
+
+      if (firstComponentWithType) {
+        componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithType['constructor'] as any);
       }
     }
     const viewContainerRef = this.widgetHost.viewContainerRef;

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.html

@@ -3,11 +3,15 @@
   <div class="card border-0">
     <div class="card-body">
       <div><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
-      <h4>Cropfield</h4>
+      <div class="card menu-card">
-      <h1>{{item.name}}</h1>
+        <h1>Cropfield</h1>
+        <h4>{{item.name}}</h4>
         <div>{{item.data.cropTypeName}}</div>
         <div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
-      <div class="mt-1"><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></div>
+        <ul class="p-0 mt-2">
+          <li><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
+        </ul>
+      </div>
     </div>
     <fm-map-item-list [items]="(items|async)"></fm-map-item-list>
     <fm-map-item-widget-list [item]="item"></fm-map-item-widget-list>

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss

@@ -13,6 +13,10 @@
   font-size: 1rem;
 }
 
+.card-body {
+  padding-bottom: unset;
+}
+
 .spacer {
   display: none;
   height: 4rem;
@@ -23,3 +27,11 @@
     display: block;
   }
 }
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html

@@ -3,15 +3,15 @@
   <div class="card border-0">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
+      <div class="card menu-card">
         <h1>{{item.name}}</h1>
-      <div class="legend-container" *ngIf="item?.data.layers;let layers">
-        <!--<div *ngIf="layers.length>1">
-          <select (change)="onLayerChanged($event.target.value)">
-            <option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
-          </select>
-        </div>-->
-        <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
       </div>
+      <div class="legend-container" *ngIf="item?.data.layers;let layers">
+        <div class="card menu-card">
+          <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+        </div>
+      </div>
+      <div class="card menu-card">
         <ul class="p-0 mt-2">
           <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
           <li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
@@ -20,3 +20,4 @@
       </div>
     </div>
   </div>
+</div>

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.scss

@@ -31,3 +31,12 @@ li {
     display:block;
   }
 }
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}
+

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html

@@ -3,15 +3,20 @@
   <div class="card border-0">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
+      <div class="card menu-card">
         <h1>{{item.name}}</h1>
+      </div>
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
+        <div class="card menu-card">
           <div *ngIf="layers.length>1">
             <select (change)="onLayerChanged($event.target.value)">
               <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
             </select>
           </div>
-        <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
+          <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
+      </div>
+      <div class="card menu-card">
         <ul class="p-0 mt-2">
           <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
           <li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
@@ -20,3 +25,4 @@
       </div>
     </div>
   </div>
+</div>

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss

@@ -39,3 +39,11 @@ li {
     display: block;
   }
 }
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}

projects/common-map/src/fm-map/components/selected-item/selected-item.component.html

@@ -1,9 +1,11 @@
 <div *ngIf="item;let item">
   <div class="card border-0">
-    <img *ngIf="item.thumbnail" class="card-img-top" [src]="'/api/v1/items/'+item.code+'/thumbnail?v='+item.updated.getTime()" />
+    <img *ngIf="item.thumbnail" class="card-img-top" [src]="config.getConfig('apiEndPoint') +'/api/v1/items/'+item.code+'/thumbnail?v='+item.updated.getTime()" />
     <div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
       <i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
     </div>
+  </div>
+  <div class="card">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <h1 class="card-title">{{item.name}}</h1>
@@ -13,4 +15,4 @@
       <a *ngIf="itemTypeService.isLayer(item)" href="#" (click)="handleAddAsLayer(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a>
     </div>
   </div>
- </div>
+</div>

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

@@ -3,7 +3,7 @@ import { Location } from '@angular/common';
 import { Feature } from 'ol';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService, IItem, Item } from '@farmmaps/common';
+import { commonReducers,ItemTypeService, IItem, Item,AppConfig } from '@farmmaps/common';
 import * as mapActions from '../../actions/map.actions';
 import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
 
@@ -50,7 +50,7 @@ export abstract class AbstractSelectedItemComponent {
 })
 export class SelectedItemComponent extends AbstractSelectedItemComponent {
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, public config:AppConfig) {
     super(store, itemTypeService,location,router);
   }
 }

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

@@ -7,7 +7,7 @@ import { Effect, Actions,ofType } from '@ngrx/effects';
 import { Observable ,  of } from 'rxjs';
 import { withLatestFrom, switchMap, map, catchError, mergeMap, delay} from 'rxjs/operators';
 
-import {GeoJSON} from 'ol/format';
+import {GeoJSON,WKT} from 'ol/format';
 import {Feature} from 'ol';
 import { getCenter, Extent, createEmpty, extend} from 'ol/extent';
 import {Point} from 'ol/geom'
@@ -25,10 +25,15 @@ import { tassign } from 'tassign';
 
 @Injectable()
 export class MapEffects {
-  private _format: GeoJSON;
+  private _geojsonFormat: GeoJSON;
+  private _wktFormat: WKT;
 
-  private toPointFeature(feature: any): Feature {
+  private toPointFeature(updateEvent:commonActions.DeviceUpdateEvent): Feature {
-    var f = this._format.readFeature(feature);
+    var f = this._wktFormat.readFeature(updateEvent.attributes["geometry"],{
+      dataProjection: 'EPSG:4326',
+      featureProjection: 'EPSG:3857'
+    });
+    f.setId(updateEvent.itemCode);
     var centroid = getCenter(f.getGeometry().getExtent());
     f.setGeometry(new Point(centroid));
     return f;
@@ -74,7 +79,7 @@ export class MapEffects {
       console.debug("Start search");
       var startDate = action.queryState.startDate;
       var endDate = action.queryState.endDate;    
-      var newAction;
+      var newAction:Observable<Action>;
       if (action.queryState.itemCode || action.queryState.parentCode || action.queryState.itemType || action.queryState.query || action.queryState.tags) {
         newAction= this.itemService$.getFeatures(action.queryState.bbox, "EPSG:3857", action.queryState.query, action.queryState.tags, startDate, endDate, action.queryState.itemType, action.queryState.parentCode).pipe(
           switchMap((features: any) => {
@@ -83,7 +88,7 @@ export class MapEffects {
                 f.id = f.properties["code"];
               }
             }
-            return of(new mapActions.StartSearchSuccess(this._format.readFeatures(features), action.queryState));
+            return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features), action.queryState));
           }
           ),
           catchError(error => of(new commonActions.Fail(error))));
@@ -99,7 +104,7 @@ export class MapEffects {
     ofType(mapActions.STARTSEARCHSUCCESS),
     mergeMap((action: mapActions.StartSearchSuccess) => {
       if (action.query.bboxFilter) {
-        return [];
+        return [new commonActions.SetMenuVisible(false)];
       } else { 
       var extent = createEmpty();
 
@@ -109,7 +114,7 @@ export class MapEffects {
         }
       }
       //return [];
-      return of(new mapActions.SetExtent(extent));
+      return [new mapActions.SetExtent(extent),new commonActions.SetMenuVisible(false)];
     }
     }));
 
@@ -135,7 +140,11 @@ export class MapEffects {
     ofType(mapActions.SELECTITEMSUCCESS),
     switchMap((action:mapActions.SelectItemSuccess) => {
       return this.itemService$.getFeature(action.item.code, "EPSG:3857").pipe(
-        map((feature: IItem) => new mapActions.AddFeatureSuccess(this._format.readFeature(feature) )),
+        map((feature: any) => {
+          let f = this._geojsonFormat.readFeature(feature);
+          f.setId(action.item.code);
+          return new mapActions.AddFeatureSuccess(f );
+        }),
         catchError(error => of(new commonActions.Fail(error))));
     }
     ));
@@ -163,21 +172,19 @@ export class MapEffects {
 
   @Effect()
   featureUpdate$: Observable<Action> = this.actions$.pipe(
-    ofType(commonActions.ITEMCHANGEDEVENT),
+    ofType(commonActions.DEVICEUPDATEEVENT),
     withLatestFrom(this.store$.select(mapReducers.selectGetFeatures)),
     mergeMap(([action, features]) => {
-      let itemChangedAction = action as commonActions.ItemChangedEvent;
+      let deviceUpdateEventAction = action as commonActions.DeviceUpdateEvent;
       var feature: Feature = null;
       for (let f of features) {
-        if (f.get("code") == itemChangedAction.itemCode) {
+        if (f.getId() == deviceUpdateEventAction.itemCode) {
           feature = f;
           break;
         }
       }     
       if (feature) {
-        return this.itemService$.getFeature(itemChangedAction.itemCode, "EPSG:3857").pipe(
+        return of(new mapActions.UpdateFeatureSuccess(this.toPointFeature(deviceUpdateEventAction)));        
-          map((feature: any) => new mapActions.UpdateFeatureSuccess(this.toPointFeature(feature))),
-          catchError(error => of(new commonActions.Fail(error))));
       } else {
         return [];
       }
@@ -225,6 +232,7 @@ export class MapEffects {
     }));
 
   constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService) {
-    this._format = new GeoJSON();
+    this._geojsonFormat = new GeoJSON();
+    this._wktFormat = new WKT();
   }
 }

projects/common-map/src/fm-map/models/color.map.ts

@@ -7,7 +7,8 @@ export interface IColor {
 
 export interface IColorEntry {
    value: number,
-   color: IColor
+   color: IColor,
+   label: string
 }
 
 export interface IHistogramEntry {
@@ -32,7 +33,8 @@ export interface IGradientstop {
 export interface IColorMap {
   gradient: IGradientstop[],
   noValue: IColorEntry,
-   entries: IColorEntry[]
+  entries: IColorEntry[],
+  colormapType: string
 }
 
 export interface IBand {
@@ -42,7 +44,8 @@ export interface IBand {
 
 export interface IRenderer {
   band:IBand,
-  colorMap: IColorMap
+  colorMap: IColorMap,
+  renderType:string
 }
 
 export interface IRenderoutput {

projects/common-map/src/fm-map/models/index.ts

@@ -1,7 +0,0 @@
-export * from './map.state';
-export * from './selected.features';
-export * from './item.layer'
-export * from './layer.data'
-export * from './color.map';
-export * from './query.state';
-export * from './period.state';

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

@@ -1,6 +1,9 @@
 import { tassign } from 'tassign';
 import { IItem,Item } from '@farmmaps/common';
-import { IItemLayer,ItemLayer, IMapState,IQueryState,IPeriodState} from '../models'
+import { IItemLayer,ItemLayer} from '../models/item.layer';
+import { IMapState} from '../models/map.state';
+import { IQueryState} from '../models/query.state';
+import { IPeriodState} from '../models/period.state';
 import * as mapActions from '../actions/map.actions';
 import {commonActions} from '@farmmaps/common';
 import { createSelector, createFeatureSelector } from '@ngrx/store';
@@ -42,7 +45,6 @@ export interface State {
   clearEnabled: boolean,
   searchCollapsed: boolean,
   searchMinified: boolean, 
-  menuVisible: boolean,
   extent: number[],
   baseLayers: Array<IItemLayer>
   overlayLayers: Array<IItemLayer>,
@@ -76,7 +78,6 @@ export const initialState: State = {
   clearEnabled: false,
   searchCollapsed: true,
   searchMinified:false,
-  menuVisible: true,
   extent: null,
   baseLayers: [],
   overlayLayers: [],
@@ -162,8 +163,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         selectedItemLayer:null,
         queryState: tassign(a.queryState),
         searchCollapsed: false,
-        searchMinified: true,
+        searchMinified: true
-        menuVisible:false
       });
     }
     case mapActions.DOQUERY: {
@@ -178,7 +178,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       return tassign(state, {
         panelVisible: true,
         selectedFeature: a.feature,
-        menuVisible: false,
         extent: a.feature.getGeometry().getExtent(),
         searchCollapsed: false,
         clearEnabled:true,
@@ -190,7 +189,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       let features: any[] = [];
       var index = -1;
       for (var i = 0; i < state.features.length; i++) {
-        if (state.features[i].get("code") == a.feature.get("code")) {
+        if (state.features[i].getId() == a.feature.getId()) {
           features.push(a.feature);
         } else {
           features.push(state.features[i]);
@@ -204,9 +203,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.COLLAPSESEARCH: {
       return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
     }
-    case mapActions.TOGGLEMENU: {
-      return tassign(state, { menuVisible: !state.menuVisible });
-    }
     case mapActions.SETEXTENT: {
       let a = action as mapActions.SetExtent;    
       return tassign(state, { extent: a.extent });
@@ -307,7 +303,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
           clearEnabled: false,
           searchCollapsed: true,
           searchMinified: false,
-          menuVisible:false,
           features: [],
           query:initialState.query
         });
@@ -332,7 +327,6 @@ export const getQueryState = (state: State) => state.queryState;
 export const getClearEnabled = (state: State) => state.clearEnabled;
 export const getSearchCollapsed = (state: State) => state.searchCollapsed;
 export const getSearchMinified = (state: State) => state.searchMinified;
-export const getMenuVisible = (state: State) => state.menuVisible;
 export const getExtent = (state: State) => state.extent;
 export const getOverlayLayers = (state: State) => state.overlayLayers;
 export const getBaseLayers = (state: State) => state.baseLayers;
@@ -355,7 +349,6 @@ export const selectGetQueryState = createSelector(selectMapState, getQueryState)
 export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
 export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
 export const selectGetSearchMinified = createSelector(selectMapState, getSearchMinified);
-export const selectGetMenuVisible = createSelector(selectMapState, getMenuVisible);
 export const selectGetExtent = createSelector(selectMapState, getExtent);
 export const selectGetOverlayLayers = createSelector(selectMapState, getOverlayLayers);
 export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers);

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

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Observer, Observable } from 'rxjs';
+
+
+@Injectable()
+export class DeviceOrientationService {
+
+  compassHeading(alpha, beta, gamma):number {
+
+    // Convert degrees to radians
+    var alphaRad = alpha * (Math.PI / 180);
+    var betaRad = beta * (Math.PI / 180);
+    var gammaRad = gamma * (Math.PI / 180);
+  
+    // Calculate equation components
+    var cA = Math.cos(alphaRad);
+    var sA = Math.sin(alphaRad);
+    var cB = Math.cos(betaRad);
+    var sB = Math.sin(betaRad);
+    var cG = Math.cos(gammaRad);
+    var sG = Math.sin(gammaRad);
+  
+    // Calculate A, B, C rotation components
+    var rA = - cA * sG - sA * sB * cG;
+    var rB = - sA * sG + cA * sB * cG;
+    var rC = - cB * cG;
+  
+    // Calculate compass heading
+    var compassHeading = Math.atan(rA / rB);
+  
+    // Convert from half unit circle to whole unit circle
+    if(rB < 0) {
+      compassHeading += Math.PI;
+    }else if(rA < 0) {
+      compassHeading += 2 * Math.PI;
+    }
+    return compassHeading * (180/Math.PI);
+  }
+
+  getCurrentCompassHeading(): Observable<number> {
+    return Observable.create((observer: Observer<number>) => {  
+        window.addEventListener("deviceorientation", (event:DeviceOrientationEvent)=>{
+          observer.next(this.compassHeading(event.alpha,event.beta,event.gamma));
+        } );
+    });
+  }
+
+}

projects/common/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "angular-oauth2-oidc": {
-      "version": "5.0.2",
+      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-8.0.4.tgz",
-      "integrity": "sha512-jtOv4IWEjSFfBHVE4seWGWT/ZfWJ95QJ1JaFhVVGJEF64ibGuPwV3ztwTOUl98QHi/Yg4PXXDAisb31JnIbxBw==",
+      "integrity": "sha512-7/3niJBqD7rnElcW+SudE36g7zMWChW4gSq7NpJSzDA4aQadBgvg0hn317MfPm9tpYGrpE3G/z2NMnbzek4TMA==",
       "requires": {
         "jsrsasign": "^8.0.12",
         "tslib": "^1.9.0"
@@ -19,9 +19,9 @@
       "integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
     },
     "ngx-uploadx": {
-      "version": "3.1.3",
+      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.2.tgz",
-      "integrity": "sha512-RX3uEaqMTpjTv5mtdnTQYsDOED3Qg5V3OBU5ohOyL35uL+dllF7I0y+kojJprm9thzHNAWih1DLeTlVWZKo+hQ==",
+      "integrity": "sha512-gRdXXq2cRU9HE6dj65qay9GV8NRC7n8y5LtMzJWqsfu2k3CHMQxo2TqZwA9/l/PqJ76RoO7sTPy1OenFQ+krkQ==",
       "requires": {
         "tslib": "^1.9.0"
       }

projects/common/package.json

@@ -5,17 +5,17 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "dependencies": {
-    "angular-oauth2-oidc": "^5.0.2",
+    "angular-oauth2-oidc": "^8.0.2",
-    "ngx-uploadx": "^3.1.3"
+    "ngx-uploadx": "^3.3.2"
   },
   "peerDependencies": {
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",
-    "@angular/common": "^7.2.0",
+    "@angular/common": "^8.2.0",
-    "@angular/core": "^7.2.0",
+    "@angular/core": "^8.2.0",
-    "@angular/forms": "^7.2.0",
+    "@angular/forms": "^8.2.0",
-    "@ngrx/effects": "^7.2",
+    "@ngrx/effects": "^8.2",
-    "@ngrx/router-store": "^7.2",
+    "@ngrx/router-store": "^8.2",
-    "@ngrx/store": "^7.2",
+    "@ngrx/store": "^8.2",
     "tassign": "^1.0.0",
     "bootstrap": "^4.3.1",
     "@aspnet/signalr": "^1.1.4",

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

@@ -27,6 +27,8 @@ export const TASKSTARTEVENT = '[AppCommon] TaskStartEvent';
 export const TASKENDEVENT = '[AppCommon] TaskEndEvent';
 export const TASKERRORTEVENT = '[AppCommon] TaskErrorEvent';
 
+export const DEVICEUPDATEEVENT = '[AppCommon] DeviceUpdateEvent';
+
 export const DELETEITEMS = '[AppCommon] DeleteItems';
 export const DELETEITEMSSUCCESS = '[AppCommon] DeleteItemsSuccess';
 
@@ -44,6 +46,10 @@ export const FAIL = '[AppCommon] Fail';
 
 export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick';
 
+export const TOGGLEMENU = '[AppCommon] ToggleMenu';
+
+export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
+
 export class InitUser implements Action {
   readonly type = INITUSER;
 
@@ -164,6 +170,12 @@ export class TaskErrorEvent implements Action {
   constructor(public itemCode: string, public attributes: any) { }
 }
 
+export class DeviceUpdateEvent implements Action {
+  readonly type = DEVICEUPDATEEVENT;
+
+  constructor(public itemCode: string, public attributes: any) { }
+}
+
 export class DeleteItems implements Action {
   readonly type = DELETEITEMS;
 
@@ -205,6 +217,18 @@ export class UploadedFileClick implements Action {
   constructor(public itemCode:string) { }
 }
 
+export class ToggleMenu implements Action {
+  readonly type = TOGGLEMENU;
+
+  constructor() { }
+}
+
+export class SetMenuVisible implements Action {
+  readonly type = SETMENUVISIBLE;
+
+  constructor(public visible:boolean) { }
+}
+  
 
 export type Actions = OpenModal
   | InitRoot
@@ -231,4 +255,7 @@ export type Actions = OpenModal
   | InitUserSuccess
   | TaskStartEvent
   | TaskEndEvent
-  | TaskErrorEvent;
+  | TaskErrorEvent
+  | DeviceUpdateEvent
+  | ToggleMenu
+  | SetMenuVisible;

projects/common/src/fm/common-routing.module.ts

@@ -3,6 +3,7 @@ import {RouterModule} from '@angular/router';
 
 import {AuthCallbackComponent} from './components/auth-callback/auth-callback.component';
 import {AuthCallbackGuard} from './components/auth-callback/auth-callback.guard';
+import {NavBarGuard} from './services/nav-bar-guard.service';
 import {FullScreenGuard} from './services/full-screen-guard.service';
 import {SessionClearedComponent} from './components/session-cleared/session-cleared.component';
 import {NotFoundComponent} from './components/not-found/not-found.component';
@@ -21,16 +22,8 @@ const routes = [
   },
   {
     path: '**', component: NotFoundComponent,
-    data: {
+    canActivate: [NavBarGuard]   
-      title: '404 - Not found',
+  }
-      meta: [{name: 'description', content: '404 - Error'}],
-      links: [],
-      // links: [
-      //  { rel: 'canonical', href: 'http://blogs.example.com/bootstrap/something' },
-      //  { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/bootstrap-demo' }
-      //]
-    },
-  },
 ];
 
 @NgModule({

projects/common/src/fm/common-service.module.ts

@@ -0,0 +1,106 @@
+// angular modules
+import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector,Optional,SkipSelf } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+
+// external modules
+import { OAuthModule,AuthConfig, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
+
+
+// routing module
+import { AppCommonRoutingModule } from './common-routing.module';
+
+import { MODULE_NAME }  from './module-name';
+
+//components
+import { ItemTypeService } from './services/itemtype.service';
+import { FolderService } from './services/folder.service';
+import { TimespanService} from './services/timespan.service';
+import { ItemService} from './services/item.service';
+import { EventService } from './services/event.service';
+import { TypeaheadService } from './services/typeahead.service';
+import { UserService } from './services/user.service';
+import { AppConfig } from './shared/app.config';
+import { AccessTokenInterceptor } from "./shared/accesstoken.interceptor";
+import { appConfigFactory } from "./shared/app.config.factory";
+import { AuthGuard } from './services/auth-guard.service';
+import { NavBarGuard } from './services/nav-bar-guard.service';
+import { FullScreenGuard } from './services/full-screen-guard.service';
+import { SafePipe } from './shared/safe.pipe';
+import { AppComponent} from './components/app/app.component';
+import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
+import { AuthCallbackGuard } from './components/auth-callback/auth-callback.guard';
+import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
+import { ResumableFileUploadService } from './components/resumable-file-upload/resumable-file-upload.service';
+import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
+import { NotImplementedComponent } from './components/not-implemented/not-implemented.component';
+import { SidePanelComponent } from './components/side-panel/side-panel.component';
+import { TimespanComponent } from './components/timespan/timespan.component';
+import { TagInputComponent } from './components/tag-input/tag-input.component';
+import {IEventMessage } from './models/event.message';
+import { IItem, Item } from './models/item';
+import {IItemType} from './models/item.type';
+import {IItemTypes} from './models/item.types';
+import {IItemTask,ItemTask} from './models/itemTask';
+import {IListItem} from './models/list.item';
+import {ITypeaheadItem} from './models/typeahead.item';
+import {IUser} from './models/user';
+import * as commonActions from './actions/app-common.actions';
+import * as commonReducers from './reducers/app-common.reducer';
+import * as commonEffects from './effects/app-common.effects';
+import {NgbDateNativeAdapter} from './services/date-adapter.service'
+import { from } from 'rxjs';
+import {AuthConfigFactory} from './shared/authconfigFactory';
+
+export {FolderService,
+  ItemTypeService,
+  TimespanService,
+  ItemService,
+  EventService,
+  TypeaheadService,
+  UserService,
+  AppConfig,
+  AccessTokenInterceptor,
+  AuthGuard,
+  NavBarGuard,
+  FullScreenGuard,
+  AuthCallbackGuard,
+  ResumableFileUploadService,
+  NgbDateNativeAdapter
+};
+
+@NgModule({
+  imports: [
+    OAuthModule.forRoot(),
+  ]
+})
+export class AppCommonServiceModule {
+  constructor (@Optional() @SkipSelf() parentModule: AppCommonServiceModule) {
+    if (parentModule) {
+      throw new Error(
+        'AppCommonServiceModule is already loaded. Import it in the AppModule only');
+    }
+  }
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: AppCommonServiceModule,
+      providers: [
+        AppConfig,
+        {
+          provide: APP_INITIALIZER,
+          useFactory: appConfigFactory,
+          deps: [Injector, AppConfig, OAuthService,AuthConfigFactory],
+          multi: true
+        },       
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: AccessTokenInterceptor,
+          multi: true
+        },
+        DatePipe
+      ]
+    };
+  }
+}

projects/common/src/fm/common.module.ts

@@ -18,31 +18,18 @@ import { AppCommonRoutingModule } from './common-routing.module';
 import { MODULE_NAME }  from './module-name';
 
 //components
-import { ItemTypeService } from './services/itemtype.service';
-import { FolderService } from './services/folder.service';
-import { TimespanService} from './services/timespan.service';
-import { ItemService} from './services/item.service';
-import { EventService } from './services/event.service';
-import { TypeaheadService } from './services/typeahead.service';
-import { UserService } from './services/user.service';
-import { AppConfig } from './shared/app.config';
-import { AccessTokenInterceptor } from "./shared/accesstoken.interceptor";
-import { appConfigFactory } from "./shared/app.config.factory";
-import { AuthGuard } from './services/auth-guard.service';
-import { NavBarGuard } from './services/nav-bar-guard.service';
-import { FullScreenGuard } from './services/full-screen-guard.service';
 import { SafePipe } from './shared/safe.pipe';
+import { AuthConfigFactory,IAuthconfigFactory} from './shared/authconfigFactory';
 import { AppComponent} from './components/app/app.component';
 import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
-import { AuthCallbackGuard } from './components/auth-callback/auth-callback.guard';
 import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
-import { ResumableFileUploadService } from './components/resumable-file-upload/resumable-file-upload.service';
 import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { NotImplementedComponent } from './components/not-implemented/not-implemented.component';
 import { SidePanelComponent } from './components/side-panel/side-panel.component';
 import { TimespanComponent } from './components/timespan/timespan.component';
 import { TagInputComponent } from './components/tag-input/tag-input.component';
+import {MenuBackgroundComponent} from './components/menu-background/menu-background.component';
 import {IEventMessage } from './models/event.message';
 import { IItem, Item } from './models/item';
 import {IItemType} from './models/item.type';
@@ -54,27 +41,12 @@ import {IUser} from './models/user';
 import * as commonActions from './actions/app-common.actions';
 import * as commonReducers from './reducers/app-common.reducer';
 import * as commonEffects from './effects/app-common.effects';
-import {NgbDateNativeAdapter} from './services/date-adapter.service'
-import { from } from 'rxjs';
 
-export {FolderService,
+export {
-  ItemTypeService,
-  TimespanService,
-  ItemService,
-  EventService,
-  TypeaheadService,
-  UserService,
-  AppConfig,
-  AccessTokenInterceptor,
-  AuthGuard,
-  NavBarGuard,
-  FullScreenGuard,
   SafePipe,
   AuthCallbackComponent,
-  AuthCallbackGuard,
   AppComponent,
   SessionClearedComponent,
-  ResumableFileUploadService,
   ResumableFileUploadComponent,
   NotFoundComponent,
   NotImplementedComponent,
@@ -93,7 +65,9 @@ export {FolderService,
   IUser,
   commonActions,
   commonReducers,
-  NgbDateNativeAdapter
+  IAuthconfigFactory,
+  AuthConfigFactory,
+  MenuBackgroundComponent
 };
 
 @NgModule({
@@ -108,9 +82,6 @@ export {FolderService,
     FormsModule,
     UploadxModule
   ],
-  providers: [
-    DatePipe
-  ],
   declarations: [
     AppComponent,
     AuthCallbackComponent,
@@ -121,7 +92,8 @@ export {FolderService,
     ResumableFileUploadComponent,
     TimespanComponent,
     TagInputComponent,
-    SessionClearedComponent
+    SessionClearedComponent,
+    MenuBackgroundComponent
   ],
   exports: [
     NgbModule,
@@ -137,33 +109,9 @@ export {FolderService,
     ResumableFileUploadComponent,
     TimespanComponent,
     TagInputComponent,
-    SessionClearedComponent
+    SessionClearedComponent,
+    MenuBackgroundComponent
     ]
 })
 export class AppCommonModule {
-  constructor (@Optional() @SkipSelf() parentModule: AppCommonModule) {
-    if (parentModule) {
-      throw new Error(
-        'AppCommonModule is already loaded. Import it in the AppModule only');
-    }
-  }
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: AppCommonModule,
-      providers: [
-        AppConfig,
-        {
-          provide: APP_INITIALIZER,
-          useFactory: appConfigFactory,
-          deps: [Injector, AppConfig, OAuthService],
-          multi: true
-        },       
-        {
-          provide: HTTP_INTERCEPTORS,
-          useClass: AccessTokenInterceptor,
-          multi: true
-        }
-      ]
-    };
-  }
 }

projects/common/src/fm/components/app/app.component.html

@@ -1,14 +1,25 @@
 <div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-    <a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
+    <button type="button" class="btn btn-light" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
-    <ul class="navbar-nav">
+    <router-outlet class="logo" [routerLink]="['/']" name="logo"></router-outlet>
-      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
-      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
-    </ul>
     <router-outlet name="menu"></router-outlet>
   </nav>
   <div class="body">
     <router-outlet></router-outlet>
   </div>  
+  <fm-menu-background [visible]="menuVisible|async"></fm-menu-background>
+  <fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
+    <div class="container-fluid">
+      <div class="body">
+        <div class="d-flex flex-row">
+          <div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
+          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
+        </div>
+        <div class="d-flex flex-column cards"> 
+            <router-outlet name="side-panel-menu"></router-outlet>          
+        </div>      
+    </div>
+    </div>
+  </fm-side-panel>
   <fm-resumable-file-upload></fm-resumable-file-upload>
 </div>

projects/common/src/fm/components/app/app.component.scss

@@ -70,3 +70,11 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
   color: #ffffff;
 }
 
+.menu .side-panel {
+  z-index: 100;
+  background-color: rgb(245,245,245);
+}
+
+.logo {
+  margin-left: 1rem;
+}

projects/common/src/fm/components/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener } from '@angular/core';
 import { Router, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
-import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
+import { Meta, Title, MetaDefinition } from '@angular/platform-browser';import { DOCUMENT } from "@angular/common";
 import { Subscription ,  Observable } from 'rxjs';
 import { Store, Action } from '@ngrx/store';
 
@@ -36,6 +36,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public fileDroptarget: any;
   public fullScreen: Observable<boolean>;
   public routeLoading: Observable<boolean>;
+  public menuVisible:Observable<boolean>;
 
   constructor(
     private router: Router,
@@ -77,6 +78,10 @@ export class AppComponent implements OnInit, OnDestroy {
         action = new commonActions.TaskErrorEvent(event.itemCode, event.attributes);
         break;
       }
+      case "deviceUpdate": {
+        action = new commonActions.DeviceUpdateEvent(event.itemCode, event.attributes);
+        break;
+      }
     }
     return action;
   }
@@ -84,6 +89,7 @@ export class AppComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
     this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
+    this.menuVisible = this.store.select(appReducers.SelectGetMenuVisible);
     this.InstallRouteEventHandler();
     this.InstallEventServiceEventHandler();
   }
@@ -125,5 +131,14 @@ export class AppComponent implements OnInit, OnDestroy {
   handleClick(event: MouseEvent) {
     this.store.dispatch(new commonActions.Escape(false,true));
   }  
+
+  handleStopBubble(event: MouseEvent) {
+    event.stopPropagation();
+  }  
+
+  handleToggleMenu(event:MouseEvent) {
+    event.stopPropagation();
+    this.store.dispatch(new commonActions.ToggleMenu());
+  }
 }
 

projects/common/src/fm/components/menu-background/menu-background.component.html

@@ -0,0 +1,3 @@
+<div class="menu-background" [ngClass]="{'show':visible}">
+
+</div>

projects/common/src/fm/components/menu-background/menu-background.component.scss

@@ -0,0 +1,17 @@
+.menu-background {
+    display: block;
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    opacity: 0;
+    background-color: #000000;
+    transition: opacity 0s ease-out 1s;
+    pointer-events: none;
+}
+
+.menu-background.show {
+    pointer-events: all;
+    opacity: 0.3;
+}

projects/common/src/fm/components/menu-background/menu-background.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit,Input } from '@angular/core';
+import { Store, Action } from '@ngrx/store';
+import * as appReducers from '../../reducers/app-common.reducer';
+import * as  commonActions  from '../../actions/app-common.actions';
+
+@Component({
+    selector: 'fm-menu-background',
+    templateUrl: './menu-background.component.html',
+    styleUrls: ['./menu-background.component.scss'],
+})
+export class MenuBackgroundComponent implements OnInit {
+    @Input() visible:boolean = false;
+    constructor(private store: Store<appReducers.State>) { }
+
+    ngOnInit() { }
+
+    handleOnClick(event:MouseEvent) {
+        if(this.visible) {
+            this.store.dispatch(new commonActions.SetMenuVisible(false));
+            event.stopPropagation();
+        }
+    }
+}

projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html

@@ -2,7 +2,7 @@
   <div>
     <div class="card">
       <div class="card-header  p-3 bg-primary text-white">
-        <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress}}</span> %)</span>
+        <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
         <span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
         <span title="Cancel" class="fa fa-times pull-right" (click)="uploadService.close()"></span><span title="Minimize" class="fa fa-chevron-down pull-right" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
       </div>

projects/common/src/fm/components/side-panel/side-panel.component.html

@@ -1,4 +1,4 @@
-<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing }" [ngStyle]="{'top':top}">
+<div class="side-panel hidden collapsed left" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
   <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
     <i class="fa fa-chevron-left" aria-hidden="true"></i>
   </div>

projects/common/src/fm/components/side-panel/side-panel.component.scss

@@ -96,5 +96,18 @@ div.resizegrip > span {
     left:-24rem;
     height:100%;
   }  
-
+}
+
+
+.side-panel.left {
+  top:0px;
+  width: 22rem;
+  height:100%;
+  left:0px;
+}
+
+.side-panel.left.hidden {
+  width: 22rem;
+  left:-24rem;
+  height:100%;
 }  

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -12,7 +12,8 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
   @Input() public resizeable: boolean = false;
-  @ViewChild("resizeGrip") elementView: ElementRef;
+  @Input() public left: boolean = false;
+  @ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
   public mobile:boolean = true;
   private parentHeight:number = 0;
   public top = "100%";
@@ -32,7 +33,7 @@ export class SidePanelComponent  implements OnChanges {
   }
 
   setTop() {
-    this.mobile = this.checkMobile();
+    this.mobile = this.checkMobile() && ! this.left;
     this.resizeTop = this.mobile?50:0;
     this.top =  (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
   }

projects/common/src/fm/components/tag-input/tag-input.component.ts

@@ -19,7 +19,7 @@ import { TypeaheadService } from '../../services/typeahead.service';
 
 export class TagInputComponent implements ControlValueAccessor  {
   @Input() tags: string[]
-  @ViewChild('taginput') tagInputElement: ElementRef;
+  @ViewChild('taginput', { static: true }) tagInputElement: ElementRef;
   public tag: string;
   searching = false;
   searchFailed = false;

projects/common/src/fm/components/timespan/timespan.component.ts

@@ -34,9 +34,9 @@ export class TimespanComponent implements OnInit, OnChanges {
   elementWidth:number;
   elementHeight:number;
   lastOffsetInPixels:number=0;
-  @ViewChild('timeLine') canvasRef;
+  @ViewChild('timeLine', { static: true }) canvasRef;
-  @ViewChild('popoverStart') public popoverStart:NgbPopover;
+  @ViewChild('popoverStart', { static: true }) public popoverStart:NgbPopover;
-  @ViewChild('popoverEnd') public popoverEnd:NgbPopover;
+  @ViewChild('popoverEnd', { static: true }) public popoverEnd:NgbPopover;
   @Input() collapsed: boolean = true;
   @Input() startDate: Date = new Date(2018,1,3);
   @Input() endDate: Date = new Date(2018,1,5);

projects/common/src/fm/index.ts

@@ -1 +0,0 @@
-

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

@@ -14,7 +14,8 @@ export interface State {
   itemTypes: IItemTypes,
   user:IUser,
   fullScreen: boolean,
-  routeLoading:boolean
+  routeLoading:boolean,
+  menuVisible: boolean,
 }
 
 export const initialState: State = {
@@ -24,7 +25,8 @@ export const initialState: State = {
   itemTypes: {},
   user:null,
   fullScreen: true,
-  routeLoading: false
+  routeLoading: false,
+  menuVisible: false
 }
 
 export function reducer(state = initialState, action: appCommonActions.Actions ): State {
@@ -70,6 +72,16 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
         routeLoading: false
       });
     }
+    case appCommonActions.TOGGLEMENU: {
+      return tassign(state, { menuVisible: !state.menuVisible });
+    }
+    case appCommonActions.ESCAPE: {
+      return tassign(state, { menuVisible: false });
+    }
+    case appCommonActions.SETMENUVISIBLE: {
+      let a = action as appCommonActions.SetMenuVisible;
+      return tassign(state, { menuVisible: a.visible });
+    }
     default: {
       return state;
     }
@@ -82,6 +94,7 @@ export const getItemTypes = (state: State) => state.itemTypes;
 export const getRootItems = (state: State) => state.rootItems;
 export const getFullScreen = (state: State) => state.fullScreen;
 export const getRouteLoading = (state: State) => state.routeLoading;
+export const getMenuVisible = (state: State) => state.menuVisible;
 
 
 export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
@@ -92,4 +105,5 @@ export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTy
 export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
 export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen);
 export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading);
+export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible);
 

projects/common/src/fm/services/item.service.ts

@@ -75,7 +75,7 @@ export class ItemService {
       params = params.append("df", JSON.stringify(dataFilter));
     }
     params = params.append("lvl", level.toString());
-    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
   }
 
   getChildItemListByExtent(parentcode: string, itemType: string, extent: number[], crs: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
@@ -87,13 +87,15 @@ export class ItemService {
       params = params.append("df", JSON.stringify(dataFilter));
     }
     params = params.append("lvl", level.toString());
-    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
   }
 
   getItemFeatures(code: string, extent: number[], crs: string, layerIndex?:number): Observable<any> {
     var params = new HttpParams();
-    params = params.append("bbox", extent.join(","));
     params = params.append("crs", crs);
+    if(extent != null) {
+      params = params.append("bbox", extent.join(","));
+    }
     if(layerIndex!=null)
       return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
     else

projects/common/src/fm/services/itemtype.service.ts

@@ -33,6 +33,12 @@ export class ItemTypeService {
         return false;
       }
 
+      hasEditor(item: IItem) {
+        let itemType: string = item.itemType;
+        if (this.itemTypes[itemType]) return this.itemTypes[itemType].editor !== undefined;
+        return false;
+      }
+
       isLayer(item: IItem) {
         let itemType: string = item.itemType;
         return itemType == "vnd.farmmaps.itemtype.geotiff.processed" || itemType == "vnd.farmmaps.itemtype.layer" || itemType == "vnd.farmmaps.itemtype.shape.processed";

projects/common/src/fm/shared/app.config.factory.ts

@@ -1,23 +1,12 @@
 import { Injector } from '@angular/core';
+import { Location} from '@angular/common';
 import { Router,UrlSerializer } from '@angular/router';
 import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent  } from 'angular-oauth2-oidc';
 import { AppConfig } from "./app.config";
+import { IAuthconfigFactory } from './authconfigFactory';
 
-function getAuthConfig(appConfig: AppConfig): AuthConfig {
-  let authConfig: AuthConfig = new AuthConfig();
-  authConfig.issuer = appConfig.getConfig("issuer");
-  authConfig.redirectUri = window.location.origin + "/cb";
-  authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
-  authConfig.clientId = appConfig.getConfig("clientId");
-  authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
-  authConfig.scope = "openid profile email";
-  authConfig.oidc = true;
-  authConfig.disableAtHashCheck = true;
-  authConfig.requireHttps = appConfig.getConfig("requireHttps");
-  return authConfig;
-}
 
-export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthService: OAuthService): () => Promise<any> {
+export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthService: OAuthService, authconfigFactory:IAuthconfigFactory): () => Promise<any> {
   return (): Promise<any> => {
     return appConfig.load().then(() => {     
       oauthService.events.subscribe((event) => {
@@ -32,15 +21,14 @@ export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthS
           }          
         }
       });
-      oauthService.configure(getAuthConfig(appConfig));
+      oauthService.configure(authconfigFactory.getAuthConfig(appConfig));
       oauthService.tokenValidationHandler = new JwksValidationHandler();
       oauthService.tokenValidationHandler.validateAtHash = function () {
         return new Promise<boolean>((res) => { res(true); })
       };
       oauthService.setupAutomaticSilentRefresh();
-      let router = injector.get(Router);
+      let location = injector.get(Location);
-      var urlTree = router.parseUrl(window.location.href);
+      var urlPath =location.path();
-      var urlPath = window.location.pathname;
       oauthService.loadDiscoveryDocument().then(() => {
         oauthService.tryLogin({
           onTokenReceived: (info) => {

projects/common/src/fm/shared/app.config.ts

@@ -1,4 +1,5 @@
 import {Inject, Injectable} from '@angular/core';
+import { Location,PathLocationStrategy,LocationStrategy } from '@angular/common';
 import {HttpClient, HttpXhrBackend} from '@angular/common/http';
 import {Observable} from 'rxjs';
 
@@ -8,7 +9,7 @@ export class AppConfig {
   private config: Object = null;
   private httpClient: HttpClient;
 
-  constructor(xhrBackend: HttpXhrBackend) {
+  constructor(xhrBackend: HttpXhrBackend,private location:Location) {
     this.httpClient = new HttpClient(xhrBackend);
     this.config = null;
   }
@@ -21,7 +22,8 @@ export class AppConfig {
   }
 
   public load(): Promise<any> {
-    return this.httpClient.get('/configuration.json')
+    var url = this.location.prepareExternalUrl('/configuration.json');
+    return this.httpClient.get(url)
       .toPromise()
       .then(data => {
         this.config = data;

projects/common/src/fm/shared/authconfigFactory.ts

@@ -0,0 +1,22 @@
+import { AuthConfig } from 'angular-oauth2-oidc';
+import {AppConfig} from './app.config';
+
+export interface IAuthconfigFactory {
+    getAuthConfig(appConfig: AppConfig): AuthConfig;
+}
+
+export class AuthConfigFactory implements IAuthconfigFactory {
+    getAuthConfig(appConfig: AppConfig): AuthConfig {
+      let authConfig: AuthConfig = new AuthConfig();
+      authConfig.issuer = appConfig.getConfig("issuer");
+      authConfig.redirectUri = window.location.origin + "/cb";
+      authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
+      authConfig.clientId = appConfig.getConfig("clientId");
+      authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
+      authConfig.scope = "openid profile email";
+      authConfig.oidc = true;
+      authConfig.disableAtHashCheck = true;
+      authConfig.requireHttps = appConfig.getConfig("requireHttps");
+      return authConfig;
+    }
+  }

projects/common/src/public-api.ts

@@ -3,3 +3,4 @@
  */
 
 export * from './fm/common.module';
+export * from './fm/common-service.module';

src/app/app-routing.module.ts

@@ -1,35 +1,18 @@
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule ,UrlSegment} from '@angular/router';
 
 import { AuthGuard,FullScreenGuard } from '@farmmaps/common';
 import { MapComponent } from '@farmmaps/common-map';
 import { LogoComponent } from './logo/logo.component';
 import { MenuComponent } from './menu/menu.component';
 import {NotImplementedComponent} from '@farmmaps/common';
+import { NavBarGuard } from 'projects/common/src/public-api';
+
+export function urlMatcher(url: UrlSegment[]) {
+  return {consumed:url};
+}
 
 const routes = [
-  {
-    path: '',
-    redirectTo: 'map',
-    pathMatch: 'full'
-  },
-  {
-    path:'editor/:type/item/:itemcode',
-    component: NotImplementedComponent
-  },
-  {
-    path:'viewer/:type/item/:itemcode',
-    component: NotImplementedComponent
-  },
-  { path: 'map', canActivateChild: [AuthGuard],canActivate:[FullScreenGuard], children: [
-    {
-        path: '',
-        component: MapComponent
-    },
-    {
-        path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
-        component: MapComponent,
-        children:[
   {
     path: '',
     component: LogoComponent,
@@ -39,10 +22,32 @@ const routes = [
     path: '',
     component: MenuComponent,
     outlet: 'side-panel-menu'
+  },
+  {
+    path: '',
+    redirectTo: 'map',
+    pathMatch: 'full'
+  },  
+  {
+    path:'editor/:type/item/:itemcode',
+    canActivate:[NavBarGuard],
+    component: NotImplementedComponent
+  },
+  {
+    path:'viewer/:type/item/:itemcode',
+    canActivate:[NavBarGuard],
+    component: NotImplementedComponent
+  },
+  { path: 'map', canActivateChild: [AuthGuard],canActivate:[FullScreenGuard], children: [
+    {
+        path: '',
+        component: MapComponent
+    },
+    {
+        path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
+        component: MapComponent       
     }    
-        ]
+   ]}
-    }
-   ]},  
 ];
 
 @NgModule({

src/app/app.component.spec.ts

@@ -1,31 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'farmmaps-lib-app'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('farmmaps-lib-app');
-  });
-
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to farmmaps-lib-app!');
-  });
-});

src/app/app.module.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppCommonModule,  } from '@farmmaps/common';
+import { AppCommonModule,AppCommonServiceModule,AuthConfigFactory  } from '@farmmaps/common';
 import { AppCommonMapModule} from '@farmmaps/common-map';
 
 import {AppRootComponent} from './app.component';
@@ -18,6 +18,8 @@ import { StoreRouterConnectingModule} from '@ngrx/router-store';
 import {AppRoutingModule} from './app-routing.module';
 import { LogoComponent } from './logo/logo.component';
 import { MenuComponent } from './menu/menu.component';
+import { LocalAuthconfigFactory} from './localAuthconfigFactory';
+import { AuthConfig } from 'angular-oauth2-oidc';
 
 export const BOOTSTRAP_EFFECTS = new InjectionToken('Bootstrap Effects');
 
@@ -52,13 +54,20 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
   ],
   imports: [
     AppRoutingModule,
-    AppCommonModule.forRoot() ,
+    AppCommonModule,
+    AppCommonServiceModule.forRoot(),
     AppCommonMapModule.forRoot(),
     BrowserModule,
     StoreModule.forRoot({}),
     EffectsModule.forRoot([])
   ],
-  providers: [],
+  providers: [
+    AuthConfigFactory
+    // {
+    //   provide:AuthConfigFactory,
+    //   useClass:LocalAuthconfigFactory
+    // }
+   ],
   bootstrap: [AppRootComponent]
 })
 export class AppModule { }

src/app/localAuthconfigFactory.ts

@@ -0,0 +1,22 @@
+import {IAuthconfigFactory,AppConfig} from '@farmmaps/common';
+import {AuthConfig} from 'angular-oauth2-oidc';
+
+export class LocalAuthconfigFactory implements IAuthconfigFactory {
+    getAuthConfig(appConfig:AppConfig): AuthConfig {
+        let authConfig: AuthConfig = new AuthConfig();
+        authConfig.issuer = appConfig.getConfig("issuer");
+        authConfig.redirectUri = window.location.origin + "/cb";
+        authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
+        authConfig.clientId = appConfig.getConfig("clientId");
+        authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
+        authConfig.scope = "openid profile email";
+        authConfig.oidc = true;
+        authConfig.disableAtHashCheck = true;
+        authConfig.openUri = uri => {
+            window.alert("OK "+uri);
+          }
+        authConfig.requireHttps = appConfig.getConfig("requireHttps");
+        return authConfig;
+    }
+
+}

src/app/logo/logo.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-logo',
   template: '<span><img src="/images/farmmapslogo.png" /></span>',
-  styles:['img {width:100%;align-self:center;}']
+  styles:['img {max-height:100%;max-width:100%;align-self:center;}']
 })
 export class LogoComponent implements OnInit {
 

src/configuration.json

@@ -1,8 +1,8 @@
 {
-    "issuer": "https://accounts.awacc.nl",
+    "issuer": "http://accounts.awtest.nl",
     "clientId": "farmmaps",
-    "audience": "https://farmmaps.awacc.nl/",
+    "audience": "http://farmmaps.awtest.nl/",
-    "requireHttps": true,
+    "requireHttps": false,
-    "apiEndPoint": "https://farmmaps.awacc.nl"
+    "apiEndPoint": "http://farmmaps.awtest.nl"
 }
   

src/polyfills.ts

@@ -43,7 +43,7 @@
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge

tsconfig.json

@@ -2,15 +2,16 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -62,12 +62,12 @@
     ],
     "trailing-comma": false,
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
+    "no-inputs-metadata-property": true,
-    "use-output-property-decorator": true,
+    "no-outputs-metadata-property": true,
-    "use-host-property-decorator": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true