Use refactored styles

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

@@ -14,7 +14,7 @@ import {Vector,Cluster} from 'ol/source';
 import {Layer} from 'ol/layer';
 import {GeoJSON} from 'ol/format';
 import {Select} from 'ol/interaction';
-import {IStyleCache} from '../../../models/style.cache';
+import {IStyles} from '../../../models/style.cache';
 import {FeatureIconService} from '../../../services/feature-icon.service';
  
 @Component({
@@ -33,8 +33,9 @@ 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 styleCache:IStyleCache = {};
+  private stylesCache:IStyles = {};
 
   constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, @Host() private map: MapComponent, private itemTypeService: ItemTypeService,private featureIconService$:FeatureIconService) {
     super(layer);
@@ -58,14 +59,14 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     this.format = new GeoJSON();
     this._select = new Select({
       style: (feature) => {        
-        return this.styleCache['selected'];
+        return this.stylesCache['selected'];
       },
       hitTolerance: 10,
       layers: [this.layer.instance as Layer]
     });
     this._hoverSelect = new Select({
       style: (feature) => {
-        return this.styleCache['selected'];
+        return this.stylesCache['selected'];
       },
       hitTolerance: 10,
       condition: (e: MapBrowserEvent) => {
@@ -87,12 +88,12 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
       
     this.host.instance.setStyle((feature) => {     
       var key = feature.get('itemType') + (this.selectedItem?"_I":"");
-      if (!this.styleCache[key]) {
+      if (!this.stylesCache[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.styleCache[key] = new style.Style({
+          this.stylesCache[key] = new style.Style({
               image: itemType.icon ? new style.Icon({
                   anchor: [0.5, 1],
                   scale: 0.05,
@@ -105,13 +106,13 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
               fill: new style.Fill({
                 color: fillColor
               }),
+              geometry:(feature) => this.geometry(feature)
             });                   
         } else {
           key = 'file';
         }
       } 
-      var styleEntry = this.styleCache[key];
-      styleEntry.geometry =  (feature) => this.geometry(feature);
+      var styleEntry = this.stylesCache[key];      
       return styleEntry;
     });
   }
@@ -142,5 +143,17 @@ 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,7 +16,8 @@
   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>
@@ -32,7 +33,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 [features]="state.features" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-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>
     </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,6 +14,7 @@ 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';
@@ -74,6 +75,7 @@ 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>, 
@@ -146,6 +148,7 @@ 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/models/style.cache.ts

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

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

@@ -4,7 +4,7 @@ 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 { IStyleCache} from '../models/style.cache';
+import { IStyles} from '../models/style.cache';
 import * as mapActions from '../actions/map.actions';
 import {commonActions} from '@farmmaps/common';
 import { createSelector, createFeatureSelector } from '@ngrx/store';
@@ -53,7 +53,7 @@ export interface State {
   projection: string,
   selectedBaseLayer: IItemLayer,
   selectedOverlayLayer: IItemLayer,
-  styleCache:IStyleCache
+  styles:IStyles
 }
 
 export const initialState: State = {
@@ -87,7 +87,7 @@ export const initialState: State = {
   selectedBaseLayer: null,
   selectedOverlayLayer: null,
   selectedItemLayer: null,
-  styleCache: {}
+  styles: {}
 }
 
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {    
@@ -315,9 +315,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     }
     case mapActions.SETSTYLE:{
       let a = action as mapActions.SetStyle;
-      let styles = state.styleCache;
+      let styles = tassign(state.styles);
       styles[a.itemType] = a.style;
-      return tassign(state,{styleCache:styles});
+      return tassign(state,{styles:styles});
     }
     default: {
       return state;
@@ -345,6 +345,7 @@ 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);
@@ -367,5 +368,6 @@ 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);