♻️ move map-related code to a stand-alone module

src/app/app.component.html

@@ -74,9 +74,7 @@
       <ng-template ngbNavContent>
         <div class="map-row">
           <h2>Map-based comparison</h2>
-          <div class="hs-map">
-            <hslayers></hslayers>
-          </div>
+          <hslayers-map></hslayers-map>
         </div>
       </ng-template>
     </ng-container>

src/app/app.component.spec.ts

@@ -1,5 +1,5 @@
 import {HsConfig} from 'hslayers-ng';
-import {HslayersAppComponent} from './app.component';
+import {AppComponent} from './app.component';
 import {TestBed, waitForAsync} from '@angular/core/testing';
 class HsConfigMock {
   constructor() {}
@@ -7,25 +7,25 @@ class HsConfigMock {
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [HslayersAppComponent],
+      declarations: [AppComponent],
       providers: [{provide: HsConfig, useValue: new HsConfigMock()}],
     }).compileComponents();
   }));
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(HslayersAppComponent);
+    const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have as title 'hslayers-workspace'`, () => {
-    const fixture = TestBed.createComponent(HslayersAppComponent);
+    const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('hslayers-workspace');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(HslayersAppComponent);
+    const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
     expect(compiled.querySelector('.content span').textContent).toContain(

src/app/app.component.ts

@@ -1,12 +1,5 @@
 import {Component} from '@angular/core';
 
-import {Fill, Stroke, Style} from 'ol/style';
-import {GeoJSON} from 'ol/format';
-import {OSM, Vector as VectorSource} from 'ol/source';
-import {Tile, Vector as VectorLayer} from 'ol/layer';
-
-import {HsConfig, HsEventBusService, HsToastService} from 'hslayers-ng';
-
 import {SdmDihService} from './sdm-dih.service';
 import {YearGraphService} from './discs-chart/year-graph.service';
 
@@ -15,113 +8,13 @@ import {YearGraphService} from './discs-chart/year-graph.service';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class HslayersAppComponent {
-  /* You can name your app as you like or not at all */
-  title = 'hslayers-application';
+export class AppComponent {
   selectedRegion = 'Apulia';
   selectedDomain = 'INFR';
   constructor(
-    /* Inject here all modules from HSLayers-NG which you intend to use */
-    public hsConfig: HsConfig /* public properties are visible in the template */,
-    private hsEventBusService: HsEventBusService /* private properties are only visible from within this component class */,
-    private hsToastService: HsToastService,
     public sdmDihService: SdmDihService,
     public yearGraphService: YearGraphService
-  ) {
-    /* Define and update the HsConfig configuration object */
-    this.hsConfig.update({
-      datasources: [
-        /* You need to set up Layman in order to use it. See https://github.com/LayerManager/layman */
-        /*{
-          title: 'Layman',
-          url: 'http://localhost:8087',
-          user: 'anonymous',
-          type: 'layman',
-          liferayProtocol: 'https',
-        },*/
-        /*{
-          title: 'Micka',
-          url: 'https://hub.sieusoil.eu/cat/csw',
-          language: 'eng',
-          type: 'micka',
-        },*/
-      ],
-      /* Use hslayers-server if you need to proxify your requests to other services. See https://www.npmjs.com/package/hslayers-server */
-      /* proxyPrefix: window.location.hostname.includes('localhost')
-        ? `${window.location.protocol}//${window.location.hostname}:8085/`
-        : '/proxy/',
-      */
-      useProxy: false,
-      panelsEnabled: {
-        tripPlanner: false,
-        datasource_selector: false,
-        composition_browser: false,
-        saveMap: false,
-        draw: false,
-        permalink: false,
-      },
-      componentsEnabled: {
-        basemapGallery: false,
-      },
-      assetsPath: 'assets',
-      symbolizerIcons: [
-        {name: 'beach', url: '/assets/icons/beach17.svg'},
-        {name: 'bicycles', url: '/assets/icons/bicycles.svg'},
-        {name: 'coffee-shop', url: '/assets/icons/coffee-shop1.svg'},
-        {name: 'mountain', url: '/assets/icons/mountain42.svg'},
-        {name: 'warning', url: '/assets/icons/warning.svg'},
-      ],
-      sidebarClosed: true,
-      popUpDisplay: 'hover',
-      default_layers: [
-        /* One baselayer */
-        new Tile({
-          source: new OSM(),
-          visible: true,
-          properties: {
-            title: 'OpenStreetMap',
-            base: true,
-            removable: false,
-          },
-        }),
-        /* One thematic layer */
-        //FIXME: missing loader?
-        /*new VectorLayer({
-          properties: {
-            title: 'Polirural Pilot Regions',
-            editor: {editable: false},
-          },
-          source: new VectorSource({
-            format: new GeoJSON(),
-            // eslint-disable-next-line @typescript-eslint/no-var-requires
-            url: require('../assets/data/pilot_regions.geojson').default,
-          }),
-          visible: true,
-          style: new Style({
-            stroke: new Stroke({
-              color: '#1d941d',
-              width: 1.5,
-            }),
-            fill: new Fill({
-              color: 'rgba(29, 148, 29, 0.2)',
-            }),
-          }),
-        }),*/
-      ],
-    });
-    /* Now wait for the OpenLayers Map object to load */
-    this.hsEventBusService.olMapLoads.subscribe(() => {
-      /* ...and display a simple toast message in the bottom-left corner */
-      // this.hsToastService.createToastPopupMessage(
-      //   'READY!',
-      //   'Your map is now ready to use.',
-      //   {
-      //     toastStyleClasses:
-      //       'bg-success text-white' /* Use any Bootstrap class here, see https://getbootstrap.com/docs/4.0/utilities/colors/ */,
-      //   }
-      // );
-    });
-  }
+  ) {}
 
   baselineFilter = (item): boolean => {
     return item !== 'baseline';

src/app/app.module.ts

@@ -3,23 +3,23 @@ import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
 import {NgbNavModule} from '@ng-bootstrap/ng-bootstrap';
 
-import {HslayersAppComponent} from './app.component';
-import {HslayersModule} from 'hslayers-ng';
+import {AppComponent} from './app.component';
 
 import {DiscsModule} from './discs-chart/discs.module';
 import {DotsModule} from './dots-chart/dots.module';
+import {MapModule} from './map-chart/map.module';
 
 @NgModule({
-  declarations: [HslayersAppComponent],
+  declarations: [AppComponent],
   imports: [
     BrowserModule,
     FormsModule,
-    HslayersModule,
     NgbNavModule,
     DiscsModule,
     DotsModule,
+    MapModule,
   ],
   providers: [],
-  bootstrap: [HslayersAppComponent],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/map-chart/map.component.html

@@ -0,0 +1,3 @@
+<div class="hs-map">
+  <hslayers></hslayers>
+</div>

src/app/map-chart/map.component.ts

@@ -0,0 +1,121 @@
+import {Component, OnInit} from '@angular/core';
+
+import {Fill, Stroke, Style} from 'ol/style';
+import {GeoJSON} from 'ol/format';
+import {OSM, Vector as VectorSource} from 'ol/source';
+import {Tile, Vector as VectorLayer} from 'ol/layer';
+
+import {HsConfig, HsEventBusService, HsToastService} from 'hslayers-ng';
+
+@Component({
+  selector: 'hslayers-map',
+  templateUrl: './map.component.html',
+})
+export class MapComponent implements OnInit {
+  /* You can name your app as you like or not at all */
+  title = 'hslayers-application';
+  constructor(
+    /* Inject here all modules from HSLayers-NG which you intend to use */
+    public hsConfig: HsConfig /* public properties are visible in the template */,
+    private hsEventBusService: HsEventBusService /* private properties are only visible from within this component class */,
+    private hsToastService: HsToastService
+  ) {
+    /* Define and update the HsConfig configuration object */
+    this.hsConfig.update({
+      datasources: [
+        /* You need to set up Layman in order to use it. See https://github.com/LayerManager/layman */
+        /*{
+          title: 'Layman',
+          url: 'http://localhost:8087',
+          user: 'anonymous',
+          type: 'layman',
+          liferayProtocol: 'https',
+        },*/
+        /*{
+          title: 'Micka',
+          url: 'https://hub.sieusoil.eu/cat/csw',
+          language: 'eng',
+          type: 'micka',
+        },*/
+      ],
+      /* Use hslayers-server if you need to proxify your requests to other services. See https://www.npmjs.com/package/hslayers-server */
+      /* proxyPrefix: window.location.hostname.includes('localhost')
+        ? `${window.location.protocol}//${window.location.hostname}:8085/`
+        : '/proxy/',
+      */
+      useProxy: false,
+      panelsEnabled: {
+        tripPlanner: false,
+        datasource_selector: false,
+        composition_browser: false,
+        saveMap: false,
+        draw: false,
+        permalink: false,
+      },
+      componentsEnabled: {
+        basemapGallery: false,
+      },
+      assetsPath: 'assets',
+      symbolizerIcons: [
+        {name: 'beach', url: '/assets/icons/beach17.svg'},
+        {name: 'bicycles', url: '/assets/icons/bicycles.svg'},
+        {name: 'coffee-shop', url: '/assets/icons/coffee-shop1.svg'},
+        {name: 'mountain', url: '/assets/icons/mountain42.svg'},
+        {name: 'warning', url: '/assets/icons/warning.svg'},
+      ],
+      sidebarClosed: true,
+      popUpDisplay: 'hover',
+      default_layers: [
+        /* One baselayer */
+        new Tile({
+          source: new OSM(),
+          visible: true,
+          properties: {
+            title: 'OpenStreetMap',
+            base: true,
+            removable: false,
+          },
+        }),
+        /* One thematic layer */
+        //FIXME: missing loader?
+        /*new VectorLayer({
+          properties: {
+            title: 'Polirural Pilot Regions',
+            editor: {editable: false},
+          },
+          source: new VectorSource({
+            format: new GeoJSON(),
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            url: require('../assets/data/pilot_regions.geojson').default,
+          }),
+          visible: true,
+          style: new Style({
+            stroke: new Stroke({
+              color: '#1d941d',
+              width: 1.5,
+            }),
+            fill: new Fill({
+              color: 'rgba(29, 148, 29, 0.2)',
+            }),
+          }),
+        }),*/
+      ],
+    });
+    /* Now wait for the OpenLayers Map object to load */
+    this.hsEventBusService.olMapLoads.subscribe(() => {
+      /* ...and display a simple toast message in the bottom-left corner */
+      // this.hsToastService.createToastPopupMessage(
+      //   'READY!',
+      //   'Your map is now ready to use.',
+      //   {
+      //     toastStyleClasses:
+      //       'bg-success text-white' /* Use any Bootstrap class here, see https://getbootstrap.com/docs/4.0/utilities/colors/ */,
+      //   }
+      // );
+    });
+  }
+
+  ngOnInit() {
+    null; //unused
+  }
+}

src/app/map-chart/map.module.ts

@@ -0,0 +1,15 @@
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {NgModule} from '@angular/core';
+
+import {HslayersModule} from 'hslayers-ng';
+
+import {MapComponent} from './map.component';
+
+@NgModule({
+  imports: [CommonModule, FormsModule, HslayersModule],
+  exports: [MapComponent],
+  declarations: [MapComponent],
+  providers: [],
+})
+export class MapModule {}