First functional version

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

@@ -1,4 +1,4 @@
-import { Component, Input, Injectable, Inject, ComponentFactoryResolver, ViewContainerRef, QueryList, ComponentFactory, ViewChildren,AfterViewInit } from '@angular/core';
+import { Component, Input, Injectable, Inject, Optional,ComponentFactoryResolver, ViewContainerRef, QueryList, ComponentFactory, ViewChildren,AfterViewInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
@@ -18,19 +18,21 @@ export class ItemWidgetListComponent implements AfterViewInit {
   public widgets: AbstractItemWidgetComponent[];
   @ViewChildren('widgetTemplate', { read: ViewContainerRef }) private widgetTargets: QueryList<ViewContainerRef>;
 
-  constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, public location: Location, private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractItemWidgetComponent) itemWidgetComponentList: AbstractItemWidgetComponent[]) {
+  constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, public location: Location, private componentFactoryResolver: ComponentFactoryResolver, @Optional() @Inject(AbstractItemWidgetComponent) itemWidgetComponentList: AbstractItemWidgetComponent[]) {
     this.widgets = itemWidgetComponentList; //todo filter this list on widgets available for user 
   }
 
   ngAfterViewInit() {
     let targets = this.widgetTargets.toArray();
-    for (var i = 0; i < this.widgets.length; i++) {
-      var componentFactory: ComponentFactory<AbstractItemWidgetComponent> = this.componentFactoryResolver.resolveComponentFactory(this.widgets[i]['constructor'] as any);
-      const viewContainerRef = targets[i];
-      viewContainerRef.clear();
-
-      const componentRef = viewContainerRef.createComponent(componentFactory);
-      (<AbstractItemWidgetComponent>componentRef.instance).item = this.item;
+    if(this.widgets) {
+      for (var i = 0; i < this.widgets.length; i++) {
+        var componentFactory: ComponentFactory<AbstractItemWidgetComponent> = this.componentFactoryResolver.resolveComponentFactory(this.widgets[i]['constructor'] as any);
+        const viewContainerRef = targets[i];
+        viewContainerRef.clear();
+  
+        const componentRef = viewContainerRef.createComponent(componentFactory);
+        (<AbstractItemWidgetComponent>componentRef.instance).item = this.item;
+      }  
     }
   }
 }

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

@@ -1,8 +1,13 @@
-<aol-map #map (onMoveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':(panelVisible|async)}" class="map">
-  <aol-view [zoom]="(mapState|async).zoom" [rotation]="(mapState|async).rotation">
-    <aol-coordinate [x]="(mapState|async).xCenter" [y]="(mapState|async).yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
-    <zoom-to-extent [extent]="extent|async" [animate]="true"></zoom-to-extent>
-  </aol-view>
+<aol-map #map (onMoveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':(panelVisible|async)}" class="map">  
+  <div>
+
+  </div>
+  <ng-container *ngIf="(mapState$|async) as mapState">
+          <aol-view [zoom]="mapState.zoom" [rotation]="mapState.rotation">
+              <aol-coordinate [x]="mapState.xCenter" [y]="mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
+              <zoom-to-extent [extent]="extent$|async" [animate]="true"></zoom-to-extent>
+            </aol-view>
+  </ng-container>    
   <aol-interaction-default></aol-interaction-default>
   <aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
   <item-layers [itemLayers]="baseLayers|async"></item-layers>

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

@@ -38,7 +38,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   title: string = 'Map';
   public openedModalName: Observable<string>;
   public itemTypes: Observable<{ [id: string]: IItemType }>;
-  public mapState: Observable<IMapState>;
+  public mapState$: Observable<IMapState>;
   public features: Observable<Array<Feature>>;
   public overlayLayers: Observable<Array<IItemLayer>>;
   public selectedOverlayLayer: Observable<IItemLayer>;
@@ -67,7 +67,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public position: Observable<Position>;
   public baseLayersCollapsed:boolean = true;
   public overlayLayersCollapsed: boolean = true;
-  public extent: Observable<Extent>;
+  public extent$: Observable<Extent>;
   @ViewChild('map') 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 ) {
@@ -107,7 +107,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   ngOnInit() {
     this.store.dispatch(new mapActions.Init());
     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.features = this.store.select(mapReducers.selectGetFeatures);
     this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
@@ -126,16 +126,16 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
     this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
     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.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
     this.period = this.store.select(mapReducers.selectGetPeriod);
     this.position = this.geolocationService.getCurrentPosition();
 
-    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);
     });
   }