diff --git a/package-lock.json b/package-lock.json index 4518611..cf06ceb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3534,6 +3534,11 @@ "schema-utils": "^1.0.0" } }, + "file-saver": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz", + "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==" + }, "fileset": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz", diff --git a/package.json b/package.json index 59fb1c6..64213db 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@angular/router": "^7.2.15", "@types/openlayers": "^4.6.17", "core-js": "^2.5.4", + "file-saver": "^2.0.2", "ngx-color-picker": "^7.5.0", "ol": "^5.3.2", "rxjs": "~6.3.3", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 002ce3f..d3a5f09 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,23 +1,23 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { MapComponent } from './map/map.component'; -import {FormsModule} from "@angular/forms"; -import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {AppRoutingModule} from './app-routing.module'; +import {AppComponent} from './app.component'; +import {MapComponent} from './map/map.component'; +import {FormsModule} from '@angular/forms'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import { MatCardModule, MatDialogModule, MatGridListModule, MatInputModule, MatTableModule, - MatToolbarModule -} from "@angular/material"; -import {DragDropModule} from "@angular/cdk/drag-drop"; -import { AddLayerComponent } from './add-layer-component/add-layer.component'; -import {FeatureManagerComponent} from "./feature-management/feature-manager/feature-manager.component"; -import {CustomColorEntryComponent} from "./feature-management/custom-color-entry/custom-color-entry.component"; -import {ColorPickerModule} from "ngx-color-picker"; + MatToolbarModule, +} from '@angular/material'; +import {DragDropModule} from '@angular/cdk/drag-drop'; +import {AddLayerComponent} from './add-layer-component/add-layer.component'; +import {FeatureManagerComponent} from './feature-management/feature-manager/feature-manager.component'; +import {CustomColorEntryComponent} from './feature-management/custom-color-entry/custom-color-entry.component'; +import {ColorPickerModule} from 'ngx-color-picker'; @NgModule({ declarations: [ @@ -46,4 +46,5 @@ import {ColorPickerModule} from "ngx-color-picker"; ], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} diff --git a/src/app/feature-management/custom-color-entry/custom-color-entry.component.html b/src/app/feature-management/custom-color-entry/custom-color-entry.component.html index 02425ed..d09a764 100644 --- a/src/app/feature-management/custom-color-entry/custom-color-entry.component.html +++ b/src/app/feature-management/custom-color-entry/custom-color-entry.component.html @@ -4,7 +4,7 @@ (default color)
-
-

Properties

-
-
- {{item.key}} -
- {{item.value}} -

Custom Properties

+
+

Properties

+
+
+ {{item.key}} : {{item.value}} +
diff --git a/src/app/feature-management/feature-manager/feature-manager.component.scss b/src/app/feature-management/feature-manager/feature-manager.component.scss index 90ab3f1..d06a94e 100644 --- a/src/app/feature-management/feature-manager/feature-manager.component.scss +++ b/src/app/feature-management/feature-manager/feature-manager.component.scss @@ -1,7 +1,7 @@ .header, .entry { display: flex; - height: 3rem; + height: 1.5rem; align-items: center; margin: 0 0 .125rem 0; border: 1px black solid; @@ -10,12 +10,19 @@ .controls { margin-left: auto; } + + .property-name { + + } + .property-value { + margin: 0 0 0 6px; + } } -.header{ +.header { background-color: whitesmoke; } -.button-container{ +.button-container { margin-top: 3rem; } diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index a69e979..ee57cfb 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -18,16 +18,21 @@ import Style from 'ol/style/Style'; import Stroke from 'ol/style/Stroke'; import Fill from 'ol/style/Fill'; import {FeatureManagerComponent} from '../feature-management/feature-manager/feature-manager.component'; +import {saveAs} from 'file-saver'; /** * TODO: add description * * TODO * - The order of the layers inside the layer menu does not reflect the real order on the map - * - define the data structure to create for use on mobile devices - * - define how the color format should look like to use it with mapbox - * - extend feature manager to handle many properties - * - The desing und ux of the whole application has to be improved. + * - extend feature manager to handle more properties + * - The design und ux of the whole application has to be improved + * - Add bunch edit to ease coloring of the features + * - add possibility to filter for features to color them easier (or add some kind of custom query language) + * - add software versions number to geo json + * - how about the import of an previous exported file? + * -> Would work, but the export has to be improved: Single Layer export as geojson or multi geojson export, + * currently just the rawLawers are exported. */ @Component({ selector: 'app-map', @@ -303,13 +308,23 @@ export class MapComponent implements OnInit { } /** - * TODO add description (currently it is not complety clear what this function is goint to do) + * TODO add description (currently it is not completely clear what this function is going to do) */ - public saveLayers(): RawLayer[] { + public saveLayers(): void { const rawLayers = []; this.customLayerCollection.forEach(layer => rawLayers.push(RawLayer.fromVectorLayer(layer))); - console.log('Created RawLayers[]', rawLayers); - return rawLayers; + + // process raw layer to avoid escaping in data property e. g. {\"type\": \"aaa\"... + // the geo json string in data property comes like this from openlayer function GeoJSON().writeFeatures + const processedRawLayers = rawLayers.map(rawLayer => { + return { + name: rawLayer.name, + data: JSON.parse(rawLayer.data) + }; + }); + const blob = new Blob([JSON.stringify(processedRawLayers)], {type: 'application/geo+json;charset=utf-8'}); + // TODO use dynamic name + saveAs(blob, 'lm_layer.geojson'); } /** @@ -366,7 +381,7 @@ export class MapComponent implements OnInit { 'features': [{ 'type': 'Feature', 'properties': { - 'name': 'Layer 1' + 'name': 'Feature 1' }, 'geometry': { 'type': 'MultiPolygon', @@ -385,7 +400,7 @@ export class MapComponent implements OnInit { { 'type': 'Feature', 'properties': { - 'name': 'Layer 2' + 'name': 'Feature 2' }, 'geometry': { 'type': 'MultiPolygon', @@ -404,7 +419,7 @@ export class MapComponent implements OnInit { { 'type': 'Feature', 'properties': { - 'name': 'Layer 3' + 'name': 'Feature 3' }, 'geometry': { 'type': 'MultiPolygon', @@ -423,7 +438,7 @@ export class MapComponent implements OnInit { { 'type': 'Feature', 'properties': { - 'name': 'Layer 4' + 'name': 'Feature 4' }, 'geometry': { 'type': 'MultiPolygon',