🚧 clean up the map

angular.json

@@ -7,7 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "sass"
+          "style": "scss"
         }
       },
       "root": "",
@@ -55,7 +55,7 @@
             ],
             "scripts": [],
             "customWebpackConfig": {
-              "path": "custom-webpack.config.js"
+              "path": "./custom-webpack.config.js"
             }
           },
           "configurations": {

custom-webpack.config.js

@@ -1,11 +1,27 @@
-var webpack = require('webpack');
+const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
   devtool: false,
   plugins: [
     new webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
-      exclude: ['vendor.js'],
+      exclude: ['vendor.*.js'],
     })
   ],
+  module: {
+    rules: [
+      {
+        test: /\.(geo|topo)json$/,
+        include: path.resolve(__dirname, "src/assets/data"),
+        use: {
+          loader: "file-loader",
+          options: {
+            name: "[name].[ext]",
+            outputPath: "assets/data",
+          },
+        },
+      },
+    ],
+  },
 };

package-lock.json

@@ -29,6 +29,7 @@
         "eslint-config-openlayers": "^14.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-tsdoc": "^0.2.14",
+        "file-loader": "^6.2.0",
         "karma-jasmine": "^4.0.1"
       }
     },
@@ -9394,6 +9395,89 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/file-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/file-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/file-loader/node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/filelist": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
@@ -23580,6 +23664,65 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "filelist": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",

package.json

@@ -30,6 +30,7 @@
     "eslint-config-openlayers": "^14.0.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-tsdoc": "^0.2.14",
+    "file-loader": "^6.2.0",
     "karma-jasmine": "^4.0.1"
   }
 }

src/app/app.component.ts

@@ -1,5 +1,6 @@
 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';
@@ -20,62 +21,6 @@ export class HslayersAppComponent {
     private hsEventBusService: HsEventBusService /* private properties are only visible from within this component class */,
     private hsToastService: HsToastService
   ) {
-    /* Define a geometry of one square polygon */
-    const geojsonObject = {
-      'type': 'FeatureCollection',
-      'crs': {
-        'type': 'name',
-        'properties': {
-          'name': 'EPSG:3857',
-        },
-      },
-      'features': [
-        {
-          'type': 'Feature',
-          'geometry': {
-            'type': 'Polygon',
-            'coordinates': [
-              [
-                [1e6, 6e6],
-                [1e6, 8e6],
-                [3e6, 8e6],
-                [3e6, 6e6],
-                [1e6, 6e6],
-              ],
-            ],
-          },
-          'properties': {
-            'name': 'Poly 1',
-            'population': Math.floor(Math.random() * 100000),
-          },
-        },
-      ],
-    };
-    /* Define the polygon's style using SLD */
-    const polygonSld = `<?xml version="1.0" encoding="ISO-8859-1"?>
-      <StyledLayerDescriptor version="1.0.0" 
-          xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
-          xmlns="http://www.opengis.net/sld" 
-          xmlns:ogc="http://www.opengis.net/ogc" 
-          xmlns:xlink="http://www.w3.org/1999/xlink" 
-          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-        <NamedLayer>
-          <Name>Simple point with stroke</Name>
-          <UserStyle>
-            <Title>Default</Title>
-            <FeatureTypeStyle>
-              <Rule>
-              <PolygonSymbolizer>
-              <Fill>
-                <CssParameter name="fill">#000080</CssParameter>
-              </Fill>
-            </PolygonSymbolizer>
-              </Rule>
-            </FeatureTypeStyle>
-          </UserStyle>
-        </NamedLayer>
-      </StyledLayerDescriptor>
-    `;
     /* Define and update the HsConfig configuration object */
     this.hsConfig.update({
       datasources: [
@@ -87,12 +32,12 @@ export class HslayersAppComponent {
           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')
@@ -101,10 +46,15 @@ export class HslayersAppComponent {
       */
       useProxy: false,
       panelsEnabled: {
-        tripPlanner: true,
+        tripPlanner: false,
+        datasource_selector: false,
+        composition_browser: false,
+        saveMap: false,
+        draw: false,
+        permalink: false,
       },
       componentsEnabled: {
-        basemapGallery: true,
+        basemapGallery: false,
       },
       assetsPath: 'assets',
       symbolizerIcons: [
@@ -114,6 +64,7 @@ export class HslayersAppComponent {
         {name: 'mountain', url: '/assets/icons/mountain42.svg'},
         {name: 'warning', url: '/assets/icons/warning.svg'},
       ],
+      sidebarClosed: true,
       popUpDisplay: 'hover',
       default_layers: [
         /* One baselayer */
@@ -127,42 +78,41 @@ export class HslayersAppComponent {
           },
         }),
         /* One thematic layer */
-        new VectorLayer({
+        //FIXME: missing loader?
+        /*new VectorLayer({
           properties: {
-            title: 'Polygon vector layer',
-            synchronize: false,
-            cluster: false,
-            inlineLegend: true,
-            popUp: {
-              attributes: ['population'],
-            },
-            editor: {
-              editable: true,
-              defaultAttributes: {
-                name: 'New polygon',
-                description: 'none',
-              },
-            },
-            sld: polygonSld,
-            path: 'User generated',
+            title: 'Polirural Pilot Regions',
+            editor: {editable: false},
           },
           source: new VectorSource({
-            features: new GeoJSON().readFeatures(geojsonObject),
+            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/ */,
-        }
-      );
+      // 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/ */,
+      //   }
+      // );
     });
   }
 }