More or less working now

angular.json

@@ -11,8 +11,11 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./custom-webpack.config.js"
+            },
             "aot": true,
             "outputPath": "dist/farmmaps-lib-app",
             "index": "src/index.html",
@@ -85,7 +88,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "farmmaps-lib-app:build"
           },

custom-webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    node: {
+      // Resolve node module use of fs
+      fs: "empty",
+      Buffer: false,
+      http: "empty",
+      https: "empty",
+      zlib: "empty"
+    }
+  };

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges ,Host} from '@angular/core';
 import { MapComponent } from 'ngx-openlayers';
 import Overlay from 'ol/Overlay';
 import { fromLonLat, toLonLat } from 'ol/proj';
@@ -23,9 +23,10 @@ export class GpsLocation  implements OnInit,OnChanges{
   public path: string = "";
   public rotate: string = "";
   private resolution: number = 0;
+  initialized:boolean = false;
   @ViewChild('location', { static: true }) locationElement: ElementRef;
 
-  constructor(private map: MapComponent) {
+  constructor(@Host() private map: MapComponent) {
     
   }
 
@@ -54,12 +55,13 @@ export class GpsLocation  implements OnInit,OnChanges{
       this.resolution = evt.target.get('resolution');
       this.recalcLocationTolerance();
     });
+    this.initialized = true;
   }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.position && this.instance) {
       var p = changes.position.currentValue as Position;
-      if(p) {
+      if(p && this.initialized) {
         this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
         this.locationTolerance = p.coords.accuracy;
         this.recalcLocationTolerance();  

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

@@ -99,17 +99,12 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null;
     if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
       var rt = l.rendering as IRenderoutputTiles;
-      let source = new XYZ({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${Date.parse(item.updated)}` });
+      let source = new XYZ({crossOrigin: 'use-credentials', maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${Date.parse(item.updated)}` });
       layer = new Tile({ source: source });
     }
     if (l && l.rendering && l.rendering.renderoutputType == "Image") {
-      var ri = l.rendering as IRenderoutputImage;
+      var ri = l.rendering as IRenderoutputImage;     
-      let projection = new Projection({
+      let source = new ImageStatic({ imageExtent: ri.extent,  crossOrigin: 'use-credentials',projection: "EPSG:3857", url: `${this._apiEndPoint}/api/v1/items/${item.code}/mapimage/${layerIndex}?v=${Date.parse(item.updated)}` });
-        code: 'image',
-        units: 'pixels',
-        extent: ri.extent
-      });
-      let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${item.code}/mapimage/${layerIndex}?v=${Date.parse(item.updated)}` });
       layer = new Image({ source: source });
     }
     return layer;

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

@@ -2,6 +2,7 @@ import { Component, OnInit,Input,Host  } from '@angular/core';
 import { MapComponent } from 'ngx-openlayers';
 import OLCesium from 'ol-cesium';
 
+declare var olcs: any;
 
 @Component({
   selector: 'fm-map-switch2d3d',
@@ -21,20 +22,35 @@ export class Switch2D3DComponent {
   @Input() enable:boolean;
   public label: string = "3D";
   private ol3d: OLCesium;
+  private synchronizers:any[];
 
 
   constructor(@Host() private map: MapComponent) {
     
   }
 
-  ngOnInit() {
+  ngOnInit() {   
-    this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance
+    this.ol3d = new OLCesium({ map: this.map.instance,createSynchronizers: (map,scene) => {
+        this.synchronizers = [
+            new olcs.RasterSynchronizer(map,scene),
+            new olcs.VectorSynchronizer(map,scene)
+        ];
+        return this.synchronizers;
+    },stopOpenLayersEventsPropagation:true}); 
+  }
+
+  synchronize() {
+      this.synchronizers.forEach((synchronizer) => {
+        synchronizer.synchronize();
+      });
   }
 
   handleClick(event) {
-    this.enable = !this.enable;
+    this.enable = !this.enable; 
-    if (this.enable)
+    if(this.enable) {
-      this.ol3d.setEnabled(this.enable);
+        this.synchronize();
-      this.label = this.enable?"2D":"3D";
+    }
+    this.ol3d.setEnabled(this.enable);
+    this.label = this.enable?"2D":"3D";    
   }
 }

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

@@ -37,7 +37,7 @@
     <aol-layer-vector>
       <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeaturesSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($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>
+    <!-- <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location> -->
     <div class="control-container">
      <fm-map-switch2d3d></fm-map-switch2d3d>
       <fm-map-layer-switcher></fm-map-layer-switcher>

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

@@ -1,4 +1,4 @@
-import { Component, Input, Injectable, OnInit, ComponentFactoryResolver, Inject, ComponentFactory } from '@angular/core';
+import { Component, Input, Injectable, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Feature } from 'ol';
 import { Store } from '@ngrx/store';
@@ -11,7 +11,6 @@ import { Observable,of } from 'rxjs';
 import {GeoJSON} from 'ol/format';
 import {getArea} from 'ol/sphere';
 import { withLatestFrom,switchMap,combineLatest } from 'rxjs/operators';
-import { AbstractItemListItemComponent, ItemListItemComponent } from '../item-list-item/item-list-item.component';
 
 
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
@@ -25,8 +24,7 @@ export class SelectedItemCropfieldComponent extends AbstractSelectedItemComponen
 
   public items: Observable<IListItem[]>;
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService,
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
-    private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractItemListItemComponent) public itemComponentList: AbstractItemListItemComponent[] ) {
     super(store, itemTypeService,location,router);
   }
 
@@ -41,7 +39,6 @@ export class SelectedItemCropfieldComponent extends AbstractSelectedItemComponen
   }
 
   ngOnInit() {
-    var componentFactory: ComponentFactory<AbstractItemListItemComponent> = this.componentFactoryResolver.resolveComponentFactory(ItemListItemComponent); // default
     var childItems = this.folderService$.getItems(this.item.code, 0, 1000);
     var atLocationItems = this.itemService$.getItemList(null,null,null,this.item.code,true);
     this.items =  childItems.pipe(
@@ -50,12 +47,8 @@ export class SelectedItemCropfieldComponent extends AbstractSelectedItemComponen
           let retVal:IListItem[] = [];
           let codes = {};
           ci.forEach((listItem) => {
-             if (this.itemComponentList.findIndex(i => 
+             retVal.push(listItem);
-                    i.item['forItemType'].indexOf(this.item.itemType) >= 0 &&
+             codes[listItem.code]=listItem;
-                    i.item['forSourceTask'].indexOf(this.item.sourceTask) >= 0) >= 0) {
-                retVal.push(listItem);
-                codes[listItem.code]=listItem;
-              }
           });
           ali.forEach((atlocationitem) => {
              let listItem = atlocationitem as IListItem;

src/main.ts

@@ -1,4 +1,4 @@
-import * as Cesium from 'cesium'
+import * as Cesium from 'cesium';
 
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';