Merge pull request #455 from AuScope/AUS-4275

AUS-4275 Added GeoJson file layer.

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

@@ -16,6 +16,7 @@ import { KMLQuerierHandler } from './custom-querier-handler/kml-querier-handler.
 import { AdvancedComponentService } from 'app/services/ui/advanced-component.service';
 import { UserStateService } from 'app/services/user/user-state.service';
 import { VMFQuerierHandler } from './custom-querier-handler/vmf-querier-handler.service';
+import { GeoJsonQuerierHandler } from './custom-querier-handler/geojson-querier-handler.service'
 import { Observable, forkJoin, throwError } from 'rxjs';
 import { catchError, finalize, tap, timeout } from 'rxjs/operators';
 import { ToolbarComponent } from 'app/menupanel/toolbar/toolbar.component';
@@ -174,6 +175,7 @@ export class CsMapComponent implements AfterViewInit {
     return this.viewer;
   }
 
+
   ngAfterViewInit() {
     this.csMapService.init();
 
@@ -332,6 +334,10 @@ export class CsMapComponent implements AfterViewInit {
           this.displayModal(mapClickInfo.clickCoord);
           const handler = new VMFQuerierHandler(entity);
           this.setModalHTML(handler.getHTML(), layer.name + ": " + handler.getFeatureName(), entity, this.bsModalRef);
+        } else if (layer.cswRecords.find(c => c.onlineResources.find(o => o.type === ResourceType.GEOJSON))) {
+          this.displayModal(mapClickInfo.clickCoord);
+          const handler = new GeoJsonQuerierHandler(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/geojson-querier-handler.service.ts

@@ -0,0 +1,33 @@
+import { UtilitiesService, LayerModel } from "@auscope/portal-core-ui";
+
+export class GeoJsonQuerierHandler {
+
+  constructor(private entity: any) {}
+
+  /**
+   * Creates an HTML string using a feature's GeoJsonFeatureData
+   *
+   * @returns HTML string
+   */
+  public getHTML(): string {
+    let html = '<div class="row"><div class="col-md-3">Name</div><div class="col-md-9">' + this.entity['name'] + '</div></div><hr>';
+
+    const extendedData = this.entity['_properties']['_propertyNames'];
+    for (const attr in extendedData) {
+        const key = extendedData[attr];
+        html += '<div class="row"><div class="col-md-3">' + key + '</div><div class="col-md-9">' + this.entity['_properties'][key]['_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/custompanel/custompanel.component.html

@@ -37,10 +37,10 @@
 <div class="form-group">
 	<label class="control-label" for="inputSuccess2"><span class="white">Upload KML/KMZ file</span></label>
 	<div class="input-group">
-		<input type="file" accept=".kml, .kmz" style="display:none" class="file-input" (change)="onKmlFileSelected($event)" #CustomKmlFileLoader>
-		<button (click)="CustomKmlFileLoader.click()" type="button" title="Load KML/KMZ file"  class="btn-primary btn-sm">
+		<input type="file" accept=".kml, .kmz, .geojson" style="display:none" class="file-input" (change)="onKmlFileSelected($event)" #CustomKmlFileLoader>
+		<button (click)="CustomKmlFileLoader.click()" type="button" title="Load KML/KMZ/GEOJSON file"  class="btn-primary btn-sm">
 			<i class="fa fa-lg fa-file" aria-hidden="true"></i>
-			&nbsp;Load KML/KMZ
+			&nbsp;Load KML/KMZ/GEOJSON
 			<i *ngIf="!loading" class="fa"></i>
 			<i *ngIf="loading" class="fa fa-spinner fa-spin fa-fw"></i>
 		</button>

src/app/menupanel/custompanel/custompanel.component.ts

@@ -389,7 +389,10 @@ export class CustomPanelComponent {
   public setupLayer(me: this, name: string, kmzData: any, proxyUrl: string, docType: ResourceType, sourceType: string) {
     let layerRec: LayerModel= null;
     // Make a layer model object
-    if (docType == ResourceType.KMZ) {
+    if (docType == ResourceType.GEOJSON) {
+      layerRec  = me.layerHandlerService.makeCustomGEOJSONLayerRecord(name, proxyUrl, kmzData);
+      layerRec.group = 'geojson-layer';
+    } else if (docType == ResourceType.KMZ) {
       layerRec  = me.layerHandlerService.makeCustomKMZLayerRecord(name, proxyUrl, kmzData);
       layerRec.group = 'kmz-layer';
     } else {
@@ -417,7 +420,17 @@ export class CustomPanelComponent {
     const me = this;
     const file: File = event.target.files[0];
     if (file) {
-      if (getExtension(file.name) === "kmz") {
+      if (getExtension(file.name) === "geojson") {
+        const reader = new FileReader();
+        // When file has been read this function is called
+        reader.onload = () => {
+
+          let jsonStr = reader.result.toString();
+          this.setupLayer(this, file.name, jsonStr, "", ResourceType.GEOJSON, "FILE");
+        };
+        // Initiate reading the GEOJSON file
+        reader.readAsText(file);
+      } else if (getExtension(file.name) === "kmz") {
         this.loading = true; // start spinner
         let getDom = xml => (new DOMParser()).parseFromString(xml, "text/xml")