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

@@ -1,7 +1,8 @@
-import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
+import { Component, Host, Input, Output, EventEmitter, Optional, QueryList, OnInit, AfterViewInit, OnChanges, SimpleChanges, SkipSelf, forwardRef, Inject, InjectionToken } from '@angular/core';
-import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { HttpClient } from "@angular/common/http";
+import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
 import { ItemService,IItem,AppConfig } from '@farmmaps/common';
-import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
+import { IItemLayer,ItemLayer, ITemporalItemLayer} 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';
@@ -16,6 +17,7 @@ import { Vector as VectorLayer } from 'ol/layer';
 import VectorTileSource from 'ol/source/VectorTile';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import {GeoJSON,MVT} from 'ol/format';
+import { from } from 'rxjs';
 
 @Component({
   selector: 'fm-map-item-layers',
@@ -25,16 +27,11 @@ import {GeoJSON,MVT} from 'ol/format';
   ]
 })
 
-export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit,OnDestroy {
+export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit {
   @Input() itemLayers: IItemLayer[];
   @Input() itemLayer: IItemLayer;
-  @Output() onFeatureSelected: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onFeatureHover: EventEmitter<string> = new EventEmitter<string>();
   private _apiEndPoint: string;
   private initialized:boolean = false;
-  private mapEventHandlerInstalled = false;
-  private selectedFeatures = {};
-  private selectionLayer:Layer = null;
 
   constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
     super(map);
@@ -204,36 +201,6 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     return layer;
   }
 
-  createSelectionLayer(itemLayer:IItemLayer):Layer {
-    var layerIndex = -1;
-    var layer: Layer = null; 
-    layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
-    var data = itemLayer.item.data;
-    var l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null;
-    if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") {
-      return new VectorTileLayer({
-        renderMode: 'vector',
-        source: itemLayer.layer.getSource(),
-        style: (feature) => {
-          if (feature.getId() in this.selectedFeatures) {
-
-            return new style.Style(
-              {               
-                stroke: new style.Stroke({
-                  color: 'red',
-                  width: 2
-                })
-              }
-            );
-          }
-        },
-        minZoom: itemLayer.layer.getMinZoom(),
-        maxZoom: itemLayer.layer.getMaxZoom()        
-      });
-    }
-    return null;
-  }
-
   createExternalLayer(item:IItem,itemLayer:IItemLayer):Layer {
     let data = item.data as ILayerData;
     var layer: Layer = null; 
@@ -317,20 +284,6 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     this.initialized=true;
   }
 
-  installMapEventHandler() {
-    if(!this.mapEventHandlerInstalled) {
-      this.map.instance.on(['click', 'pointermove'],this.mapEventHandler);
-      this.mapEventHandlerInstalled=true;
-    }
-  }
-
-  unInstallMapEventHandler() {
-    if(this.mapEventHandlerInstalled) {
-      this.map.instance.un(['click', 'pointermove'],this.mapEventHandler);
-      this.mapEventHandlerInstalled=false;
-    }
-  }
-
   addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer {
     if(!itemLayer) return null;
     var olLayers = this.instance.getLayers();
@@ -377,40 +330,6 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
       while(olLayers.getLength() > newLayers.length) {
         olLayers.removeAt(newLayers.length);
       }
-      this.selectionLayer=null;
-      if(this.mapEventHandlerInstalled && itemLayers.length==1 && itemLayers[0].item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
-        this.selectionLayer = this.createSelectionLayer(itemLayers[0]);
-        olLayers.push(this.selectionLayer)
-      }
-    }
-  }
-
-  mapEventHandler = (event) => {
-    // select only when having observers
-    if(event.type === 'click' && !this.onFeatureSelected.observers.length) return;
-    if(event.type === 'pointermove' && !this.onFeatureHover.observers.length) return;
-    if(this.itemLayer && this.itemLayer.layer) {
-       this.selectedFeatures = {};
-       if(this.itemLayer.layer ) {
-        let minZoom = this.itemLayer.layer.getMinZoom();
-        let currentZoom = this.map.instance.getView().getZoom();
-        if(currentZoom>minZoom) {
-          this.itemLayer.layer.getFeatures(event.pixel).then((features) => {      
-            if(!features.length) {
-              this.onFeatureHover.emit(null);
-              return;
-            }
-           let fid = features[0].getId();
-           if(event.type === 'pointermove') {
-             this.selectedFeatures[fid] = features[0];
-             this.onFeatureHover.emit(features[0]);
-           } else {
-             this.onFeatureSelected.emit(features[0]);
-           }
-          })
-          if(this.selectionLayer) this.selectionLayer.changed(); 
-        }      
-       }
     }
   }
 
@@ -422,21 +341,12 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
       }
       if (changes['itemLayer']) {
         var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
-        this.itemLayer = itemLayer
         if(itemLayer) {
-          if(itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
-            this.installMapEventHandler();
-          }
           this.updateLayers([itemLayer]);
         } else {
-          this.unInstallMapEventHandler();
           this.updateLayers([]);
         }
       }
     }
   }
-
-  ngOnDestroy() {
-    this.unInstallMapEventHandler();
-  }
 }

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

@@ -38,7 +38,6 @@
     <aol-layer-vector>
       <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeatureSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
     </aol-layer-vector>
-    <router-outlet name="map-layers"></router-outlet>
     <!-- <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location> -->
     <div class="control-container" >
       <router-outlet name="map-controls"></router-outlet>

src/configuration.json

@@ -1,9 +1,9 @@
 {
     "issuer": "https://accounts.test.farmmaps.eu",
     "clientId": "farmmapsdev",
-    "audience": "http://localhost:8082",
+    "audience": "https://test.farmmaps.eu/",
     "requireHttps": true,
-    "apiEndPoint": "http://localhost:8082",
+    "apiEndPoint": "https://test.farmmaps.eu",
     "grantType":"code"
 }