Aus 3866: Add KML layers to map

src/app/cesium-map/csmap.component.ts

@@ -8,6 +8,7 @@ import { CsMapService, CSWRecordModel, GMLParserService, LayerModel, ManageState
 import { Cartesian3, MapMode2D, Math, ScreenSpaceEventHandler, SceneMode, ScreenSpaceEventType, Rectangle, SplitDirection,
    Cartesian2, WebMapServiceImageryProvider, WebMercatorProjection, Cartographic, GeographicProjection } from 'cesium';
 import { IrisQuerierHandler } from './custom-querier-handler/iris-querier-handler.service';
+import { KMLQuerierHandler } from './custom-querier-handler/kml-querier-handler.service';
 import { AdvancedComponentService } from 'app/services/ui/advanced-component.service';
 
 declare var Cesium: any;
@@ -309,7 +310,12 @@ export class CsMapComponent implements AfterViewInit {
         if (layer.cswRecords.find(c => c.onlineResources.find(o => o.type === ResourceType.IRIS))) {
           this.displayModal(mapClickInfo.clickCoord);
           const handler = new IrisQuerierHandler(layer, entity);
-          this.setModalHTML(handler.getHTML(), layer.name, entity, this.bsModalRef);
+          this.setModalHTML(handler.getHTML(), layer.name+": "+handler.getFeatureName(), entity, this.bsModalRef);
+        // KML layers
+        } else if (layer.cswRecords.find(c => c.onlineResources.find(o => o.type === ResourceType.KML))) {
+          this.displayModal(mapClickInfo.clickCoord);
+          const handler = new KMLQuerierHandler(entity);
+          this.setModalHTML(handler.getHTML(), layer.name+": "+handler.getFeatureName(), entity, this.bsModalRef);
         }
       }
       // TODO: Remove commented code, kept for yet to be re-implemented entity types

src/app/cesium-map/custom-querier-handler/iris-querier-handler.service.ts

@@ -6,12 +6,17 @@ export class IrisQuerierHandler {
 
   constructor(private layer: LayerModel, private entity: KmlFeatureData) {}
 
+  /**
+   * Creates an HTML string using a feature's KMLFeatureData and CSW records info
+   * 
+   * @returns HTML string 
+   */
   public getHTML(): string {
     const extendedData = this.entity['kml']['extendedData'];
     let html = '<div class="row"><div class="col-md-3">Station</div><div class="col-md-9">' + this.entity['name'] + '</div></div><hr>';
     html += '<div class="row"><div class="col-md-3">Code</div><div class="col-md-9">' + extendedData['Code']['value'] + '</div></div><hr>';
     html += '<div class="row"><div class="col-md-3">Country</div><div class="col-md-9">' + extendedData['Country']['value'] + '</div></div><hr>';
-    html += '<div class="row"><div class="col-md-3">Parser</div><div class="col-md-9">' + this.layer.description + '</div></div><hr>';
+    html += '<div class="row"><div class="col-md-3">Brief Description</div><div class="col-md-9">' + this.layer.description + '</div></div><hr>';
     html += '<div class="row"><div class="col-md-3">Layer</div><div class="col-md-9">' + this.layer.group + '</div></div><hr>';
 
     html += '<div class="row"><div class="col-md-3">Record Info</div><div class="col-md-9">';
@@ -25,5 +30,14 @@ export class IrisQuerierHandler {
     html += '</div></div>';
     return html;
   }
+
+  /**
+   * Fetches a feature's name
+   * 
+   * @returns feature name string
+   */
+  public getFeatureName(): string {
+    return this.entity['name'];
+  }
 
 }

src/app/cesium-map/custom-querier-handler/kml-querier-handler.service.ts

@@ -0,0 +1,42 @@
+import { UtilitiesService, LayerModel } from "@auscope/portal-core-ui";
+import { KmlFeatureData } from "cesium";
+
+
+export class KMLQuerierHandler {
+
+  constructor(private entity: KmlFeatureData) {}
+
+  /**
+   * Creates an HTML string using a feature's KMLFeatureData
+   * 
+   * @returns HTML string 
+   */
+  public getHTML(): string {
+    const extendedData = this.entity['kml']['extendedData'];
+    let html = '<div class="row"><div class="col-md-3">Name</div><div class="col-md-9">' + this.entity['name'] + '</div></div><hr>';
+    for (const attr in extendedData) {
+      if (extendedData.hasOwnProperty(attr)) {
+        const data =  extendedData[attr];
+        let displayName = attr
+        if (data.hasOwnProperty('displayName') && !UtilitiesService.isEmpty(data['displayName'])) {
+          displayName = data['displayName'];
+        }
+        if (data.hasOwnProperty('value') && !UtilitiesService.isEmpty(data['value'])) {
+          html += '<div class="row"><div class="col-md-3">' + displayName + '</div><div class="col-md-9">' + data['value'] + '</div></div>';
+        }
+      }
+    }
+    html += '</div></div>';
+    return html;
+  }
+
+  /**
+   * Fetches a feature's name
+   * 
+   * @returns feature name string
+   */
+  public getFeatureName(): string {
+    return this.entity['name'];
+  }
+
+}

src/app/menupanel/search/searchpanel.component.ts

@@ -27,7 +27,7 @@ const SEARCH_FIELDS = [{
     field: 'abstract',
     checked: true
   }];
-const OGC_SERVICES = ['WMS', 'IRIS', 'WFS', 'WCS', 'WWW'];
+const OGC_SERVICES = ['WMS', 'IRIS', 'WFS', 'WCS', 'WWW', 'KML'];
 const NUMBER_OF_SUGGESTIONS = 5;
 
 @Component({