feat: add Polirural pilot regions

src/app.service.ts

@@ -1,8 +1,10 @@
 import * as hsv2rgb from 'hsv2rgb';
 import {Feature} from 'ol';
 import {Fill, Stroke, Style} from 'ol/style';
+import {GeoJSON} from 'ol/format';
 import {Injectable} from '@angular/core';
 import {Vector as VectorLayer} from 'ol/layer';
+import {Vector as VectorSource} from 'ol/source';
 
 import {HsConfig} from 'hslayers-ng/config.service';
 import {HsLayoutService} from 'hslayers-ng/components/layout/layout.service';
@@ -79,6 +81,25 @@ export class AppService {
     style: this.nuts3style,
     title: 'NUTS3 regions',
   });
+  pilotsStyle = new Style({
+    stroke: new Stroke({
+      color: '#1d941d',
+      width: 1.5,
+    }),
+    fill: new Fill({
+      color: 'rgba(29, 148, 29, 0.2)',
+    }),
+  });
+  pilotRegions = new VectorLayer({
+    source: new VectorSource({
+      format: new GeoJSON(),
+      url: require('./data/pilot_regions.geojson').default,
+    }),
+    editor: {editable: false},
+    visible: true,
+    style: this.pilotsStyle,
+    title: 'Polirural Pilot Regions',
+  });
   method: string;
   serviceUrl: string;
   constructor(
@@ -106,6 +127,19 @@ export class AppService {
         },
       ],
     });
+    this.pilotRegions.set('popUp', {
+      attributes: [
+        {attribute: 'NUTS_NAME', label: 'Region name'},
+        //TODO: Uncomment when implemented in the rural-attractiveness-service
+        /*{
+          attribute: 'NUTS_ID',
+          label: 'Pilot region details',
+          displayFunction: (x) => {
+            return `<a href="${this.serviceUrl}${x}" target="_blank">in a new page</a>.`;
+          },
+        },*/
+      ],
+    });
     this.adjusterEventService.clustersLoaded.subscribe(() => {
       this.colorPalette = this.generateRandomColorPalette(
         adjusterService.clusters.length
@@ -114,6 +148,7 @@ export class AppService {
     /* The order of pushes matter! */
     this.hsConfig.default_layers.push(this.nuts3Layer);
     this.hsConfig.default_layers.push(this.nuts2Layer);
+    this.hsConfig.default_layers.push(this.pilotRegions);
     /*this.hsMapService
       .loaded()
       .then((map) => this.hsMapService.repopulateLayers([]));*/

src/nuts.js

@@ -1,5 +1,5 @@
-import nuts2 from './NUTS_RG_20M_2016_3857_LEVL_2.json';
-import nuts3 from './NUTS_RG_20M_2016_3857_LEVL_3.json';
+import nuts2 from './data/NUTS_RG_20M_2016_3857_LEVL_2.json';
+import nuts3 from './data/NUTS_RG_20M_2016_3857_LEVL_3.json';
 import {GeoJSON} from 'ol/format';
 import {Vector as VectorSource} from 'ol/source';
 

webpack.common.js

@@ -71,6 +71,18 @@ module.exports = {
           },
         ],
       },
+      // Load data files
+      {
+        test: /\.geojson$/,
+        include: path.resolve(__dirname, 'src/data'),
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'data',
+          },
+        },
+      },
     ],
   },
 };