feat(import-export): imported file can be styled from a style list

packages/geo/src/lib/import-export/import-export.module.ts

@@ -15,6 +15,7 @@ import { IgoKeyValueModule, IgoDrapDropModule, IgoSpinnerModule } from '@igo2/co
 
 import { ImportExportComponent } from './import-export/import-export.component';
 import { DropGeoFileDirective } from './shared/drop-geo-file.directive';
+import { IgoStyleListModule } from './style-list/style-list.module';
 
 @NgModule({
   imports: [
@@ -30,9 +31,10 @@ import { DropGeoFileDirective } from './shared/drop-geo-file.directive';
     IgoLanguageModule,
     IgoSpinnerModule,
     IgoKeyValueModule,
-    IgoDrapDropModule
+    IgoDrapDropModule,
+    IgoStyleListModule.forRoot()
   ],
-  exports: [ImportExportComponent, DropGeoFileDirective],
+  exports: [ImportExportComponent, DropGeoFileDirective, IgoStyleListModule],
   declarations: [ImportExportComponent, DropGeoFileDirective]
 })
 export class IgoImportExportModule {

packages/geo/src/lib/import-export/import-export/import-export.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Subscription, BehaviorSubject } from 'rxjs';
 
-import { MessageService, LanguageService } from '@igo2/core';
+import { MessageService, LanguageService, ConfigService } from '@igo2/core';
 
 import { Feature } from '../../feature/shared/feature.interfaces';
 import { IgoMap } from '../../map/shared/map';
@@ -19,6 +19,8 @@ import {
   handleFileImportSuccess,
   handleFileImportError
 } from '../shared/import.utils';
+import { StyleService } from '../../layer/shared/style.service';
+import { StyleListService } from '../style-list/style-list.service';
 
 @Component({
   selector: 'igo-import-export',
@@ -43,7 +45,10 @@ export class ImportExportComponent implements OnDestroy, OnInit {
     private exportService: ExportService,
     private languageService: LanguageService,
     private messageService: MessageService,
-    private formBuilder: FormBuilder
+    private styleListService: StyleListService,
+    private styleService: StyleService,
+    private formBuilder: FormBuilder,
+    private config: ConfigService
   ) {
     this.buildForm();
   }
@@ -104,13 +109,25 @@ export class ImportExportComponent implements OnDestroy, OnInit {
   }
 
   private onFileImportSuccess(file: File, features: Feature[]) {
+    if (!this.config.getConfig('importWithStyle')) {
     handleFileImportSuccess(
       file,
       features,
       this.map,
       this.messageService,
       this.languageService
     );
+    } else {
+      handleFileImportSuccess(
+        file,
+        features,
+        this.map,
+        this.messageService,
+        this.languageService,
+        this.styleListService,
+        this.styleService
+      );
+    }
   }
 
   private onFileImportError(file: File, error: Error) {

packages/geo/src/lib/import-export/shared/drop-geo-file.directive.ts

@@ -2,14 +2,16 @@ import { Directive, HostListener, EventEmitter, OnInit, OnDestroy } from '@angul
 
 import { Subscription } from 'rxjs';
 
-import { MessageService, LanguageService } from '@igo2/core';
+import { MessageService, LanguageService, ConfigService } from '@igo2/core';
 import { DragAndDropDirective } from '@igo2/common';
 
 import { Feature } from '../../feature/shared/feature.interfaces';
 import { IgoMap } from '../../map/shared/map';
 import { MapBrowserComponent } from '../../map/map-browser/map-browser.component';
 import { ImportService } from './import.service';
 import { handleFileImportSuccess, handleFileImportError } from '../shared/import.utils';
+import { StyleService } from '../../layer/shared/style.service';
+import { StyleListService } from '../style-list/style-list.service';
 
 @Directive({
   selector: '[igoDropGeoFile]'
@@ -29,6 +31,9 @@ export class DropGeoFileDirective extends DragAndDropDirective implements OnInit
     private component: MapBrowserComponent,
     private importService: ImportService,
     private languageService: LanguageService,
+    private styleListService: StyleListService,
+    private styleService: StyleService,
+    private config: ConfigService,
     private messageService: MessageService
   ) {
     super();
@@ -71,7 +76,12 @@ export class DropGeoFileDirective extends DragAndDropDirective implements OnInit
   }
 
   private onFileImportSuccess(file: File, features: Feature[]) {
-    handleFileImportSuccess(file, features, this.map, this.messageService, this.languageService);
+    if (!this.config.getConfig('importWithStyle')) {
+      handleFileImportSuccess(file, features, this.map, this.messageService, this.languageService);
+    } else {
+      handleFileImportSuccess(file, features, this.map, this.messageService, this.languageService,
+                               this.styleListService, this.styleService);
+    }
   }
 
   private onFileImportError(file: File, error: Error) {

packages/geo/src/lib/import-export/shared/import.utils.ts

@@ -1,6 +1,6 @@
 import * as olStyle from 'ol/style';
 
-import { MessageService, LanguageService } from '@igo2/core';
+import { MessageService, LanguageService, ConfigService } from '@igo2/core';
 
 import { FeatureDataSource } from '../../datasource/shared/datasources/feature-datasource';
 import { FeatureDataSourceOptions } from '../../datasource/shared/datasources/feature-datasource.interface';
@@ -9,6 +9,9 @@ import { featureToOl, moveToOlFeatures } from '../../feature/shared/feature.util
 import { VectorLayer } from '../../layer/shared/layers/vector-layer';
 import { IgoMap } from '../../map/shared/map';
 import { QueryableDataSourceOptions } from '../../query/shared/query.interfaces';
+import { StyleService } from '../../layer/shared/style.service';
+import { StyleByAttribute } from '../../layer/shared/vector-style.interface';
+import { StyleListService } from '../style-list/style-list.service';
 
 export function addLayerAndFeaturesToMap(features: Feature[], map: IgoMap, layerTitle: string): VectorLayer {
   const olFeatures = features.map((feature: Feature) => featureToOl(feature, map.projection));
@@ -48,20 +51,103 @@ export function addLayerAndFeaturesToMap(features: Feature[], map: IgoMap, layer
   return layer;
 }
 
+export function addLayerAndFeaturesStyledToMap(features: Feature[], map: IgoMap, layerTitle: string,
+                                               styleListService: StyleListService, styleService: StyleService): VectorLayer {
+  const olFeatures = features.map((feature: Feature) => featureToOl(feature, map.projection));
+  let style;
+
+  if (styleListService.getStyleList(layerTitle.toString() + '.styleByAttribute')) {
+    const styleByAttribute: StyleByAttribute = styleListService.getStyleList(layerTitle.toString() + '.styleByAttribute');
+
+    const styleBy = feature => {
+      return styleService.createStyleByAttribute(
+        feature,
+        styleByAttribute
+      );
+    };
+    style = styleBy;
+
+  } else if (styleListService.getStyleList(layerTitle.toString() + '.style')) {
+    const radius = styleListService.getStyleList(layerTitle.toString() + '.style.radius');
+
+    const stroke = new olStyle.Stroke({
+      color: styleListService.getStyleList(layerTitle.toString() + '.style.stroke.color'),
+      width: styleListService.getStyleList(layerTitle.toString() + '.style.stroke.width')
+    });
+
+    const fill = new olStyle.Fill({
+      color: styleListService.getStyleList(layerTitle.toString() + '.style.fill.color')
+    });
+
+    style = new olStyle.Style({
+      stroke,
+      fill,
+      image: new olStyle.Circle({
+        radius: radius ? radius : 5,
+        stroke,
+        fill
+      })
+    });
+  } else {
+    const radius = styleListService.getStyleList('default.style.radius');
+
+    const stroke = new olStyle.Stroke({
+      color: styleListService.getStyleList('default.style.stroke.color'),
+      width: styleListService.getStyleList('default.style.stroke.width')
+    });
+
+    const fill = new olStyle.Fill({
+      color: styleListService.getStyleList('default.style.fill.color')
+    });
+
+    style = new olStyle.Style({
+      stroke,
+      fill,
+      image: new olStyle.Circle({
+        radius: radius ? radius : 5,
+        stroke,
+        fill
+      })
+    });
+  }
+  const sourceOptions: FeatureDataSourceOptions & QueryableDataSourceOptions = {
+    queryable: true
+  };
+  const source = new FeatureDataSource(sourceOptions);
+  source.ol.addFeatures(olFeatures);
+
+  const layer = new VectorLayer({
+    title: layerTitle,
+    source,
+    style
+  });
+  map.addLayer(layer);
+  moveToOlFeatures(map, olFeatures);
+
+  return layer;
+}
+
 export function handleFileImportSuccess(
   file: File,
   features: Feature[],
   map: IgoMap,
   messageService: MessageService,
-  languageService: LanguageService
+  languageService: LanguageService,
+  styleListService?: StyleListService,
+  styleService?: StyleService
 ) {
   if (features.length === 0) {
     handleNothingToImportError(file, messageService, languageService);
     return;
   }
 
   const layerTitle = computeLayerTitleFromFile(file);
-  addLayerAndFeaturesToMap(features, map, layerTitle);
+
+  if (!styleListService) {
+    addLayerAndFeaturesToMap(features, map, layerTitle);
+  } else {
+    addLayerAndFeaturesStyledToMap(features, map, layerTitle, styleListService, styleService);
+  }
 
   const translate = languageService.translate;
   const messageTitle = translate.instant('igo.geo.dropGeoFile.success.title');

packages/geo/src/lib/import-export/style-list/index.ts

@@ -0,0 +1,2 @@
+export * from './style-list.service';
+export * from './style-list.interface';

packages/geo/src/lib/import-export/style-list/style-list.interface.ts

@@ -0,0 +1,4 @@
+export interface StyleListOptions {
+  default?: { [key: string]: any };
+  path?: string;
+}

packages/geo/src/lib/import-export/style-list/style-list.module.ts

@@ -0,0 +1,16 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { provideStyleListOptions, provideStyleListLoader } from './style-list.provider';
+
+@NgModule({
+  imports: [],
+  declarations: [],
+  exports: []
+})
+export class IgoStyleListModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: IgoStyleListModule,
+      providers: [provideStyleListOptions({}), provideStyleListLoader()]
+    };
+  }
+}

packages/geo/src/lib/import-export/style-list/style-list.provider.ts

@@ -0,0 +1,29 @@
+import { APP_INITIALIZER, InjectionToken } from '@angular/core';
+
+import { StyleListService } from './style-list.service';
+import { StyleListOptions } from './style-list.interface';
+
+export let STYLELIST_OPTIONS = new InjectionToken<StyleListOptions>('styleListOptions');
+
+export function provideStyleListOptions(options: StyleListOptions) {
+  return {
+    provide: STYLELIST_OPTIONS,
+    useValue: options
+  };
+}
+
+export function styleListFactory(
+  styleListService: StyleListService,
+  options: StyleListOptions
+) {
+  return () => styleListService.load(options);
+}
+
+export function provideStyleListLoader() {
+  return {
+    provide: APP_INITIALIZER,
+    useFactory: styleListFactory,
+    multi: true,
+    deps: [StyleListService, STYLELIST_OPTIONS]
+  };
+}

packages/geo/src/lib/import-export/style-list/style-list.service.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+
+import { StyleListService } from './style-list.service';
+
+describe('StyleListService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+      providers: [StyleListService]
+    });
+  });
+
+  it(
+    'should ...',
+    inject([StyleListService], (service: StyleListService) => {
+      expect(service).toBeTruthy();
+    })
+  );
+});

packages/geo/src/lib/import-export/style-list/style-list.service.ts

@@ -0,0 +1,53 @@
+import { Injectable, Injector } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+import { ObjectUtils } from '@igo2/utils';
+
+import { StyleListOptions } from './style-list.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StyleListService {
+  private styleList: object = {};
+
+  constructor(private injector: Injector) {}
+
+  /**
+   * Use to get the data found in styleList file
+   */
+  public getStyleList(key: string): any {
+    return ObjectUtils.resolve(this.styleList, key);
+  }
+
+  /**
+   * This method loads "[path]" to get all styleList's variables
+   */
+  public load(options: StyleListOptions) {
+    const baseStyleList = options.default || {};
+    if (!options.path) {
+      this.styleList = baseStyleList;
+      return true;
+    }
+
+    const http = this.injector.get(HttpClient);
+
+    return new Promise((resolve, _reject) => {
+      http
+        .get(options.path)
+        .pipe(
+          catchError((error: any): any => {
+            console.log(`StyleList file ${options.path} could not be read`);
+            resolve(true);
+            return throwError(error.error || 'Server error');
+          })
+        )
+        .subscribe(styleListResponse => {
+          this.styleList = ObjectUtils.mergeDeep(baseStyleList, styleListResponse);
+          resolve(true);
+        });
+    });
+  }
+}

packages/geo/src/lib/layer/shared/style.service.ts

@@ -109,7 +109,8 @@ export class StyleService {
               image: new olstyle.Circle({
                 radius: radius ? radius[i] : 4,
                 stroke: new olstyle.Stroke({
-                  color: stroke ? stroke[i] : 'black'
+                  color: stroke ? stroke[i] : 'black',
+                  width: width ? width[i] : 1
                 }),
                 fill: new olstyle.Fill({
                   color: fill ? fill[i] : 'black'

packages/geo/src/public_api.ts

@@ -43,6 +43,7 @@ export * from './lib/search/shared/sources/nominatim.providers';
 export * from './lib/search/shared/sources/storedqueries.providers';
 export * from './lib/routing/routing-sources/routing-source.provider';
 export * from './lib/routing/shared/routing-source.service';
+export * from './lib/import-export/style-list/style-list.provider';
 
 export * from './lib/catalog';
 export * from './lib/datasource';