projects/common-map/package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "ngx-openlayers": "1.0.0-next.13",
-    "ol": "6.1.1"
+    "ol": "^6.0.0"
   },
   "peerDependencies": {
     "@angular/core": "^8.2.0",

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

@@ -4,7 +4,8 @@ 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,Style } from 'ol';
+import { Feature } from 'ol';
+import { Extent } from 'ol/extent';
 
 export const SETSTATE = '[Map] SetState';
 export const SETMAPSTATE = '[Map] MapState';
@@ -34,7 +35,6 @@ export const SELECTBASELAYER = '[Map] SelectBaseLayers';
 export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
 export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
 export const DOQUERY = '[Map] DoQuery';
-export const SETSTYLE = '[Map] SetStyle';
 
 export class SetState implements Action {
   readonly type = SETSTATE;
@@ -204,12 +204,6 @@ export class DoQuery implements Action {
   constructor(public query:IQueryState) { }
 }
 
-export class SetStyle implements Action {
-  readonly type = SETSTYLE;
-
-  constructor(public itemType:string,public style:Style) { }
-}
-
 export type Actions = SetMapState
   | Init
   | SetParent
@@ -237,6 +231,5 @@ export type Actions = SetMapState
   | ZoomToExtent
   | SetState
   | SetViewExtent
-  | DoQuery
+  | DoQuery;
-  | SetStyle;
 

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

@@ -58,7 +58,6 @@ 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 {FeatureIconService} from './services/feature-icon.service';
 import { GeolocationService } from './services/geolocation.service';
 import {DeviceOrientationService} from './services/device-orientation.service';
 import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
@@ -132,7 +131,6 @@ export {
   AbstractItemListItemComponent,
   AbstractItemListComponent,
   StateSerializerService,
-  FeatureIconService,
   GeolocationService,
   DeviceOrientationService,
   IMapState,
@@ -251,7 +249,6 @@ export class AppCommonMapModule {
       ngModule: AppCommonMapModule,      
       providers: [
         StateSerializerService,
-        FeatureIconService,
         GeolocationService,
         DeviceOrientationService,
         { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },

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

@@ -14,8 +14,6 @@ import {Vector,Cluster} from 'ol/source';
 import {Layer} from 'ol/layer';
 import {GeoJSON} from 'ol/format';
 import {Select} from 'ol/interaction';
-import {IStyles} from '../../../models/style.cache';
-import {FeatureIconService} from '../../../services/feature-icon.service';
  
 @Component({
   selector: 'fm-map-item-source-vector',
@@ -33,11 +31,41 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
   @Input() features: Array<Feature>;
   @Input() selectedFeature: Feature;
   @Input() selectedItem: IItem;
-  @Input() styles:IStyles;
   @Output() onFeaturesSelected: EventEmitter<Feature> = new EventEmitter<Feature>();
-  private stylesCache:IStyles = {};
+  private styleCache = {
+    'file': new style.Style({
+      image: new style.Icon({
+          anchor: [0.5, 1],
+          scale: 0.05,
+        src: this.getIconImageDataUrl("fa fa-file-o")
+      }),         
+      stroke: new style.Stroke({
+        color: 'red',
+        width: 1
+      }),
+      fill: new style.Fill({
+        color: 'rgba(0, 0, 255, 0.1)'
+      }),
+      geometry: (feature) => this.geometry(feature)
+    }),
+    'selected': new style.Style({
+      image: new style.Icon({
+        anchor: [0.5, 1],
+        scale: 0.08,
+        src: this.getIconImageDataUrl(null)
+      }),
+      stroke: new style.Stroke({
+        color: 'red',
+        width: 3
+      }),
+      fill: new style.Fill({
+        color: 'rgba(0, 0, 255, 0.1)'
+      }),
+      geometry: (feature) => this.geometry(feature)
+    })
+    };
 
-  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, @Host() private map: MapComponent, private itemTypeService: ItemTypeService,private featureIconService$:FeatureIconService) {
+  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, @Host() private map: MapComponent, private itemTypeService: ItemTypeService) {
     super(layer);
     this._format = new GeoJSON();
   }
@@ -54,19 +82,51 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     return geometry;
   }
 
+  getIconImageDataUrl(iconClass:string, backgroundColor: string = "#c80a6e",color:string = "#ffffff"): string {
+    var canvas = document.createElement('canvas');
+    canvas.width = 365;
+    canvas.height = 560;
+    var ctx = canvas.getContext('2d');
+    ctx.lineWidth = 6;
+    ctx.fillStyle = backgroundColor;
+    ctx.strokeStyle = "#000000";
+    var path = new Path2D("m182.9 551.7c0 0.1 0.2 0.3 0.2 0.3s175.2-269 175.2-357.4c0-130.1-88.8-186.7-175.4-186.9-86.6 0.2-175.4 56.8-175.4 186.9 0 88.4 175.3 357.4 175.3 357.4z");
+    ctx.fill(path)
+
+    var iconCharacter = "";
+    if (iconClass != null) {
+      var element = document.createElement("i");
+      element.style.display = "none";
+      element.className = iconClass;
+      document.body.appendChild(element);
+      iconCharacter = getComputedStyle(element, "::before").content.replace(/"/g, '');
+      let iconFont = "200px " +getComputedStyle(element, "::before").fontFamily
+      document.body.removeChild(element);
+      ctx.strokeStyle = color;
+      ctx.fillStyle = color;
+      ctx.lineWidth = 15;
+      ctx.font = iconFont;
+      var ts = ctx.measureText(iconCharacter);
+      ctx.fillText(iconCharacter, 182.9 - (ts.width / 2), 250);
+      ctx.strokeText(iconCharacter, 182.9 - (ts.width / 2), 250);
+    }
+
+    return canvas.toDataURL();
+  }
+
   ngOnInit() {
     this.strategy = loadingstrategy.bbox;
     this.format = new GeoJSON();
     this._select = new Select({
       style: (feature) => {        
-        return this.stylesCache['selected'];
+        return this.styleCache['selected'];
       },
       hitTolerance: 10,
       layers: [this.layer.instance as Layer]
     });
     this._hoverSelect = new Select({
       style: (feature) => {
-        return this.stylesCache['selected'];
+        return this.styleCache['selected'];
       },
       hitTolerance: 10,
       condition: (e: MapBrowserEvent) => {
@@ -88,16 +148,16 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
       
     this.host.instance.setStyle((feature) => {     
       var key = feature.get('itemType') + (this.selectedItem?"_I":"");
-      if (!this.stylesCache[key]) {
+      if (!this.styleCache[key]) {
         if (this.itemTypeService.itemTypes[key]) {
           let itemType = this.itemTypeService.itemTypes[key];
           let fillColor = color.asArray(itemType.iconColor);
           fillColor[3] = this.selectedItem?0:0.5;
-          this.stylesCache[key] = new style.Style({
+          this.styleCache[key] = new style.Style({
               image: itemType.icon ? new style.Icon({
                   anchor: [0.5, 1],
                   scale: 0.05,
-                  src: this.featureIconService$.getIconImageDataUrl(itemType.icon)
+                  src: this.getIconImageDataUrl(itemType.icon)
                 }):null,
               stroke: new style.Stroke({
                 color: 'red',
@@ -106,13 +166,13 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
               fill: new style.Fill({
                 color: fillColor
               }),
-              geometry:(feature) => this.geometry(feature)
+              geometry: (feature) => this.geometry(feature)
             });                   
         } else {
           key = 'file';
         }
       } 
-      var styleEntry = this.stylesCache[key];      
+      var styleEntry = this.styleCache[key];
       return styleEntry;
     });
   }
@@ -143,17 +203,5 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
         this.map.instance.addInteraction(this._hoverSelect);  
       }
     }
-    if (changes["styles"] && this.instance) {
-      let styles = changes["styles"].currentValue;
-      for (const key in styles) {
-        if (styles.hasOwnProperty(key)) {
-          let style = styles[key];
-          if(style.geometry == null) {
-            style.setGeometry((feature) => this.geometry(feature));
-          }          
-          this.stylesCache[key]=style;
-        }
-      }
-    }
   }
 }

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

@@ -16,8 +16,7 @@
   searchCollapsed:searchCollapsed$|async,
   clearEnabled:clearEnabled$|async,
   period:period$|async,
-  compassHeading:compassHeading$|async,
+  compassHeading:compassHeading$|async
-  styles:styles$|async
 } as state">
   <aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':state.panelVisible}" class="map">  
     <div>
@@ -33,7 +32,7 @@
     <fm-map-item-layers [itemLayers]="state.overlayLayers"></fm-map-item-layers>
     <fm-map-item-layers [itemLayer]="state.selectedItemLayer"></fm-map-item-layers>
     <aol-layer-vector>
-      <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></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]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location>
     <div class="control-container">

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

@@ -14,7 +14,6 @@ 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 {IStyles} from '../../models/style.cache';
 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';
@@ -75,7 +74,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public baseLayersCollapsed:boolean = true;
   public overlayLayersCollapsed: boolean = true;
   public extent$: Observable<Extent>;
-  public styles$:Observable<IStyles>;
   @ViewChild('map', { static: false }) map;
   
   constructor(private store: Store<mapReducers.State | commonReducers.State>, 
@@ -148,7 +146,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.period$ = this.store.select(mapReducers.selectGetPeriod);
     this.position$ = this.geolocationService.getCurrentPosition();
     this.compassHeading$ = this.deviceorientationService.getCurrentCompassHeading();
-    this.styles$ = this.store.select(mapReducers.selectGetStyles);
 
     this.mapState$.pipe(withLatestFrom(this.queryState$)).subscribe((state) => {
       this.replaceUrl(state[0], state[1], true);

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

@@ -19,15 +19,10 @@ import {commonReducers} from '@farmmaps/common';
 
 import {commonActions} from '@farmmaps/common';
 
-import { IItem } from '@farmmaps/common';
+import { IListItem, IItem } from '@farmmaps/common';
 import { FolderService, ItemService } from '@farmmaps/common';
 import { tassign } from 'tassign';
 
-import {FeatureIconService} from '../services/feature-icon.service';
-
-import * as style from 'ol/style';
-
-
 @Injectable()
 export class MapEffects {
   private _geojsonFormat: GeoJSON;
@@ -49,41 +44,10 @@ export class MapEffects {
     ofType(mapActions.INIT),
     withLatestFrom(this.store$.select(commonReducers.selectGetRootItems)),
     switchMap(([action, rootItems]) => {
-      let actions=[];
       for (let rootItem of rootItems) {
-        if (rootItem.itemType == "UPLOADS_FOLDER") actions.push(new mapActions.SetParent(rootItem.code));
+        if (rootItem.itemType == "UPLOADS_FOLDER") return of(new mapActions.SetParent(rootItem.code));
       }
-      // initialize default feature styles
+      return [];
-      actions.push(new mapActions.SetStyle('file',new style.Style({
-        image: new style.Icon({
-            anchor: [0.5, 1],
-            scale: 0.05,
-          src: this.featureIconService$.getIconImageDataUrl("fa fa-file-o")
-        }),         
-        stroke: new style.Stroke({
-          color: 'red',
-          width: 1
-        }),
-        fill: new style.Fill({
-          color: 'rgba(0, 0, 255, 0.1)'
-        })
-      })));
-      actions.push(new mapActions.SetStyle('selected',new style.Style({
-        image: new style.Icon({
-          anchor: [0.5, 1],
-          scale: 0.08,
-          src: this.featureIconService$.getIconImageDataUrl(null)
-        }),
-        stroke: new style.Stroke({
-          color: 'red',
-          width: 3
-        }),
-        fill: new style.Fill({
-          color: 'rgba(0, 0, 255, 0.1)'
-        })
-      })));      
-
-      return actions;
     }
     ));
 
@@ -267,7 +231,7 @@ export class MapEffects {
       return of(newAction);
     }));
 
-  constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService,private featureIconService$:FeatureIconService) {
+  constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService) {
     this._geojsonFormat = new GeoJSON();
     this._wktFormat = new WKT();
   }

projects/common-map/src/fm-map/models/style.cache.ts

@@ -1,5 +0,0 @@
-import {Style} from 'ol';
-
-export interface IStyles{
-  [id: string]: Style;
-};

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

@@ -4,7 +4,6 @@ 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 { IStyles} from '../models/style.cache';
 import * as mapActions from '../actions/map.actions';
 import {commonActions} from '@farmmaps/common';
 import { createSelector, createFeatureSelector } from '@ngrx/store';
@@ -52,8 +51,7 @@ export interface State {
   selectedItemLayer: IItemLayer,
   projection: string,
   selectedBaseLayer: IItemLayer,
-  selectedOverlayLayer: IItemLayer,
+  selectedOverlayLayer: IItemLayer
-  styles:IStyles
 }
 
 export const initialState: State = {
@@ -86,8 +84,7 @@ export const initialState: State = {
   projection: "EPSG:3857",
   selectedBaseLayer: null,
   selectedOverlayLayer: null,
-  selectedItemLayer: null,
+  selectedItemLayer: null
-  styles: {}
 }
 
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {    
@@ -313,12 +310,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         return tassign(state, {});
       }
     }
-    case mapActions.SETSTYLE:{
-      let a = action as mapActions.SetStyle;
-      let styles = tassign(state.styles);
-      styles[a.itemType] = a.style;
-      return tassign(state,{styles:styles});
-    }
     default: {
       return state;
     }
@@ -345,7 +336,6 @@ export const getSelectedOverlayLayer = (state: State) => state.selectedOverlayLa
 export const getQuery = (state: State) => state.query;
 export const getSelectedItemLayer = (state: State) => state.selectedItemLayer;
 export const getPeriod = (state:State) => state.period;
-export const getStyles = (state:State) => state.styles;
 
 export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
 export const selectGetMapState= createSelector(selectMapState, getMapState);
@@ -368,6 +358,5 @@ export const selectGetSelectedOverlayLayer = createSelector(selectMapState, getS
 export const selectGetQuery = createSelector(selectMapState, getQuery); 
 export const selectGetSelectedItemLayer = createSelector(selectMapState, getSelectedItemLayer);
 export const selectGetPeriod = createSelector(selectMapState, getPeriod);
-export const selectGetStyles = createSelector(selectMapState, getStyles);
 
 

projects/common-map/src/fm-map/services/feature-icon.service.ts

@@ -1,41 +0,0 @@
-import { Injectable} from '@angular/core';
-import { Feature } from 'ol';
-import { Point } from 'ol/geom';
-import * as extent from 'ol/extent';
-
-
-@Injectable()
-export class FeatureIconService {      
-    
-      getIconImageDataUrl(iconClass:string, backgroundColor: string = "#c80a6e",color:string = "#ffffff"): string {
-        var canvas = document.createElement('canvas');
-        canvas.width = 365;
-        canvas.height = 560;
-        var ctx = canvas.getContext('2d');
-        ctx.lineWidth = 6;
-        ctx.fillStyle = backgroundColor;
-        ctx.strokeStyle = "#000000";
-        var path = new Path2D("m182.9 551.7c0 0.1 0.2 0.3 0.2 0.3s175.2-269 175.2-357.4c0-130.1-88.8-186.7-175.4-186.9-86.6 0.2-175.4 56.8-175.4 186.9 0 88.4 175.3 357.4 175.3 357.4z");
-        ctx.fill(path)
-    
-        var iconCharacter = "";
-        if (iconClass != null) {
-          var element = document.createElement("i");
-          element.style.display = "none";
-          element.className = iconClass;
-          document.body.appendChild(element);
-          iconCharacter = getComputedStyle(element, "::before").content.replace(/"/g, '');
-          let iconFont = "200px " +getComputedStyle(element, "::before").fontFamily
-          document.body.removeChild(element);
-          ctx.strokeStyle = color;
-          ctx.fillStyle = color;
-          ctx.lineWidth = 15;
-          ctx.font = iconFont;
-          var ts = ctx.measureText(iconCharacter);
-          ctx.fillText(iconCharacter, 182.9 - (ts.width / 2), 250);
-          ctx.strokeText(iconCharacter, 182.9 - (ts.width / 2), 250);
-        }
-    
-        return canvas.toDataURL();
-      }
-}

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

@@ -4,7 +4,9 @@ import {IItem} from '../models/item'
 import {AppConfig} from '../shared/app.config';
 import {HttpClient, HttpXhrBackend} from '@angular/common/http';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class ItemTypeService {
     public itemTypes: IItemTypes;
     private httpClient: HttpClient;
@@ -13,6 +15,10 @@ export class ItemTypeService {
       this.httpClient = new HttpClient(xhrBackend);
     } 
 
+  //   itemService.getItemTypes().subscribe((itemTypes) => {
+  //     this.itemTypes = itemTypes;
+  //  });
+
      getIcon(itemType: string) {
        var icon = "fa fa-file-o";
        if (this.itemTypes[itemType]) icon = this.itemTypes[itemType].icon;

src/app/app.module.ts

@@ -21,7 +21,6 @@ import { MenuComponent } from './menu/menu.component';
 import {RegisterDeviceComponent} from './registerdevice/registerdevice.component';
 import { SecureOAuthStorage} from '@farmmaps/common';
 import { OAuthStorage } from 'angular-oauth2-oidc';
-import {Id4AuthconfigFactory} from './id4AuthconfigFactory';
 
 export const BOOTSTRAP_EFFECTS = new InjectionToken('Bootstrap Effects');
 

src/app/id4AuthconfigFactory.ts

@@ -1,21 +0,0 @@
-import { IAuthconfigFactory, AppConfig } from '@farmmaps/common';
-import { AuthConfig } from 'angular-oauth2-oidc';
-
-export class Id4AuthconfigFactory implements IAuthconfigFactory {
-  constructor() {
-
-  }
-
-  getAuthConfig(appConfig: AppConfig): AuthConfig {
-    let authConfig: AuthConfig = new AuthConfig();
-    authConfig.issuer = appConfig.getConfig("issuer");
-    authConfig.redirectUri = window.location.origin + "/cb";
-    authConfig.clientId = appConfig.getConfig("clientId");
-    authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
-    authConfig.scope = "api offline_access";
-    authConfig.disableAtHashCheck = true;
-    authConfig.responseType = "code";
-    authConfig.requireHttps = appConfig.getConfig("requireHttps");
-    return authConfig;
-  }
-}