diff --git a/src/app/cesium-map/csmap.component.ts b/src/app/cesium-map/csmap.component.ts index 508034af..41f1d8c1 100644 --- a/src/app/cesium-map/csmap.component.ts +++ b/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 diff --git a/src/app/cesium-map/custom-querier-handler/geojson-querier-handler.service.ts b/src/app/cesium-map/custom-querier-handler/geojson-querier-handler.service.ts new file mode 100644 index 00000000..e53e6a6e --- /dev/null +++ b/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 = '
Name
' + this.entity['name'] + '

'; + + const extendedData = this.entity['_properties']['_propertyNames']; + for (const attr in extendedData) { + const key = extendedData[attr]; + html += '
' + key + '
' + this.entity['_properties'][key]['_value'] + '
'; + } + html += ''; + return html; + } + + /** + * Fetches a feature's name + * + * @returns feature name string + */ + public getFeatureName(): string { + return this.entity['name']; + } + +} diff --git a/src/app/menupanel/custompanel/custompanel.component.html b/src/app/menupanel/custompanel/custompanel.component.html index 6edb94ae..d5888df5 100644 --- a/src/app/menupanel/custompanel/custompanel.component.html +++ b/src/app/menupanel/custompanel/custompanel.component.html @@ -37,10 +37,10 @@
- - diff --git a/src/app/menupanel/custompanel/custompanel.component.ts b/src/app/menupanel/custompanel/custompanel.component.ts index 67d1d1ad..1e0c47b5 100644 --- a/src/app/menupanel/custompanel/custompanel.component.ts +++ b/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")