capability of adding more layers into the initial Esrimap in MDE.

Interface is created for layer and a layer updater is added to layer-editor component

assets/javascript/src/app/_interface/application_area.ts

-import { Category } from './category';
-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-// environmental_compartment
-export interface Application_area {
-    [x: string]: any;
-    ocean?: Category;
-    coast?: Category; // coastalwater
-    estuary?: Category;
-    beach?: Category;
-    outlet?: Category;
-    river?: Category;
-    lake?: Category;
-    wwtp?: Category;  // wastewater
-}

assets/javascript/src/app/_interface/category.ts

-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-export interface Category {
-    [x: string]: any;
-
-    // id?: number;
-    prevention?: number;
-    monitoring?: number;
-    sampling?: number;
-    detection?: number;
-    models?: number;
-    cleaning?: number;
-
-}

assets/javascript/src/app/_interface/eventping.ts

-import {FilterData} from '../_interface/filterData'
-export interface Eventping {
-    label: string;
-    object: FilterData;
-}

assets/javascript/src/app/_interface/filterData.ts

-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-export interface FilterData {
-       // id?: number;
-       category?: any[];
-       application_area?: string[];
-       initiator?: string[];
-       funder?: string[];
-       technology?: string[];
-       trl?: string[];
-       litter_target?: string[];
-       source?: string[]; // *
-       search_machine?: string[];
-       litter_size?: string[];
-       acronym?: string[];
-       year?: string[];
-       nutshell?: string[]; // *
-
-}

assets/javascript/src/app/_interface/funder.ts

-import { Category } from './category';
-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-export interface Funder {
-    [x: string]: any;
-    multiplefunders?: Category;
-    science?: Category;
-    eu?: Category;
-    national?: Category;
-    ngo?: Category;
-    industry?: Category;
-    private?: Category;
-
-}

assets/javascript/src/app/_interface/graphFilter.ts

-import { Category } from './category';
-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-import { Search_machine } from './search_machine';
-import { Initiator } from './initiator';
-import { Application_area } from './application_area';
-import { Funder } from './funder';
-import { Litter_size } from './litter_size';
-import { Trl } from './trl';
-
-export interface GraphFilter {
-
-       search_machine: Search_machine;
-       initiator: Initiator;
-       aplication_area: Application_area;
-       funder: Funder;
-       Litter_size: Litter_size;
-       trl: Trl;
-
-}

assets/javascript/src/app/_interface/initiator.ts

-import { Category } from './category';
-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-export interface Initiator {
-    [x: string]: any;
-    science?: Category;
-    cooperation?: Category;
-    industry?: Category;
-    ngo?: Category;
-    private?: Category;
-}

assets/javascript/src/app/_interface/litter_size.ts

-import { Category } from './category';
-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-export interface Litter_size {
-    [x: string]: any;
-    macro?: Category;
-    micro?: Category;
-    nano?: Category;
-}

assets/javascript/src/app/_interface/search_machine.ts

-import { Category } from './category';
-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-export interface Search_machine {
-    [x: string]: any;
-    wos?: Category;
-    network?: Category;
-    cordis?: Category;
-    websearch?: Category;
-    crowd?: Category;
-    esa?: Category;
-    noaa?: Category;
-    cobsea?: Category;
-    emff?: Category;
-}

assets/javascript/src/app/_interface/trl.ts

-import { Category } from './category';
-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-export interface Trl {
-    marketOperational?: Category;
-    systemComplete?: Category;
-    fieldDemo?: Category;
-    labDemo?: Category;
-    fieldValidation?: Category;
-    labValidation?: Category;
-    proofOfConcept?: Category;
-    concept?: Category;
-}

assets/javascript/src/app/_interface/year.ts

-import { Category } from './category';
-import { NgModuleCompileResult } from "@angular/compiler/src/ng_module_compiler";
-
-export interface Year {
-    [x: string]: any;
-    1994?: Category;
-    1997?: Category;
-    1999?: Category;
-    2004?: Category;
-    2005?: Category;
-    2006?: Category;
-    2007?: Category;
-    2008?: Category;
-    2009?: Category;
-    2010?: Category;
-    2011?: Category;
-    2012?: Category;
-    2013?: Category;
-    2014?: Category;
-    2015?: Category;
-    2016?: Category;
-    2017?: Category;
-    2018?: Category;
-    2019?: Category;
-    2020?: Category;
-
-}

assets/javascript/src/app/_template/template-side-filter/template-side-filter.component.ts

 
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import {MenuItem, MessageService, TreeNode} from 'primeng/api';
-import { FilterData } from 'src/app/_interface/filterData';
+
 import { NodeService } from 'src/app/_service/nodeservice';
 
 @Component({
@@ -18,7 +18,7 @@ export class TemplateSideFilterComponent {
 
 
     selectedFiles1: TreeNode[] = [];
-    public filterData$!: FilterData;
+
     public filterArray: any = [];
 
     constructor(private nodeService: NodeService, private messageService: MessageService) { }

assets/javascript/src/app/components/esri-map/esri-map.component.ts

@@ -38,6 +38,7 @@ export class EsriMapComponent implements OnInit {
   color2: string = "#1976D2";
 
   value1: string;
+  map: __esri.Map;
 
   constructor(private primengConfig: PrimeNGConfig) {
   }
@@ -89,7 +90,7 @@ export class EsriMapComponent implements OnInit {
     ])
       .then(async ([Map, MapView, Graphic, ImageryLayer, Compass, BasemapToggle, CoordinateConversion, BasemapLayerList, Fullscreen,
         Legend, LayerList, MapImageLayer, Renderer, RasterFunction, Search, SimpleRenderer, colorRendererCreator, RasterColormapRenderer, ClassBreaksRenderer, SimpleFillSymbol, Color]) => {
-        const map: __esri.Map = new Map({
+        this.map = new Map({
           basemap: 'topo-vector'
 
         });
@@ -101,7 +102,7 @@ export class EsriMapComponent implements OnInit {
 
 
           zoom: 5,
-          map: map
+          map: this.map
         });
 
 
@@ -222,7 +223,7 @@ export class EsriMapComponent implements OnInit {
         
 
 
-        map.add(layer);
+        this.map.add(layer);
 
         let compass = new Compass({
           view: this.mapView
@@ -434,7 +435,7 @@ export class EsriMapComponent implements OnInit {
       //   name: // name of the sublayer,
       //   legendUrl: // url to the legend
       // }]
-      map.add(layer);
+      this.map.add(layer);
 
       let compass = new Compass({
         view: this.mapView
@@ -486,6 +487,72 @@ export class EsriMapComponent implements OnInit {
     }
   }
 
+  public async addLayer(newLayerUrl: String){
+    this.primengConfig.ripple = true;
+    // use esri-loader to load JSAPI modules
+    try {
+      const [Map, MapView, Graphic, ImageryLayer, Compass, BasemapToggle, CoordinateConversion, BasemapLayerList, Fullscreen, Legend, LayerList, MapImageLayer, Renderer, RasterFunction, Search, SimpleRenderer, colorRendererCreator, RasterColormapRenderer, ClassBreaksRenderer, SimpleFillSymbol, Color] = await loadModules([
+        'esri/Map',
+        'esri/views/MapView',
+        'esri/Graphic',
+        'esri/layers/ImageryLayer',
+        'esri/widgets/Compass',
+        'esri/widgets/BasemapToggle',
+        'esri/widgets/CoordinateConversion',
+        'esri/widgets/BasemapLayerList',
+        'esri/widgets/Fullscreen',
+        'esri/widgets/Legend',
+        'esri/widgets/LayerList',
+        'esri/layers/MapImageLayer',
+        'esri/renderers/Renderer',
+        'esri/layers/support/RasterFunction',
+        'esri/widgets/Search',
+        'esri/renderers/SimpleRenderer',
+        'esri/smartMapping/renderers/color',
+        'esri/renderers/RasterColormapRenderer',
+        'esri/renderers/ClassBreaksRenderer',
+        'esri/symbols/SimpleFillSymbol',
+        'esri/Color'
+      ]);
+
+
+
+
+
+
+     
+
+
+      // const layer = new WMSLayer({
+      //   url: "https://coastmap.hzg.de/image/services/rehan_3/ImageServer/WMSServer?request=GetCapabilities&service=WMS",
+      //   renderer: renderer
+      // });
+      const layer = new ImageryLayer({
+        url: newLayerUrl,
+
+      });
+
+      // const layer = new ImageryLayer({
+      //   url: newLayerUrl,
+      //   popupTemplate: imagePopupTemplate,
+      //   renderer: renderer
+      // });
+
+      // sublayers: [{
+      //   name: // name of the sublayer,
+      //   legendUrl: // url to the legend
+      // }]
+  
+
+    
+
+      this.map.add(layer)
+
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
 
 
 }

assets/javascript/src/app/components/layer-editor/layer-editor.component.html

@@ -39,7 +39,7 @@
           </div>
     
         <ng-template pTemplate="footer">
-            <p-button icon="pi pi-check" (click)="displayMaximizable=false; layerChange()"  label="Ok" styleClass="p-button-text" ></p-button>
+            <p-button icon="pi pi-check" (click)="displayMaximizable=false; addLayer()"  label="Ok" styleClass="p-button-text" ></p-button>
         </ng-template>
 </p-dialog>
 

assets/javascript/src/app/components/layer-editor/layer-editor.component.ts

@@ -33,13 +33,21 @@ export class LayerEditorComponent implements OnInit {
       this.displayPosition = true;
   }
 
-  public layerChange(){
+  public updateLayer(){
     alert("I am an alert box!: "+ this.esriLayerServiceURL);
     this.esriMapComponent.updateLayer(this.esriLayerServiceURL)
     
     
   }
 
+  public addLayer(){
+    alert("I am an alert box!: "+ this.esriLayerServiceURL);
+    this.esriMapComponent.addLayer(this.esriLayerServiceURL)
+    
+    
+  }
+
+
 
 
 }

assets/javascript/src/styles.scss

@@ -117,6 +117,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   padding: 3px !important;
   font-size: 1em;
   border-top-left-radius: 10px  !important;
+  border-top-right-radius: 10px  !important;
  
 }