🐛 display proper pop-up window

Features must be copied,
otherwise the same features are used in both sources

src/adjuster/adjuster.service.ts

@@ -245,7 +245,7 @@ export class AdjusterService {
     }*/
     let errs = 0;
     //let logs = 0;
-    nuts.nuts3Source.forEachFeature((feature) => {
+    nuts.nuts3IndexSource.forEachFeature((feature) => {
       // Pair each feature with its attractivity data
       const featureData =
         codeRecordRelations[feature.get('NUTS_ID').toUpperCase()];
@@ -270,13 +270,13 @@ export class AdjusterService {
       });
     });
     // Since we are updating the features silently, we now have to refresh manually
-    nuts.nuts3Source.getFeatures()[0].dispatchEvent('change');
+    nuts.nuts3IndexSource.getFeatures()[0].dispatchEvent('change');
   }
 
   processClusters(codeRecordRelations: Record<string, unknown>): void {
     let errs = 0;
     //let logs = 0;
-    nuts.nuts3Source.forEachFeature((feature) => {
+    nuts.nuts3ClustersSource.forEachFeature((feature) => {
       // Pair each feature with its clustering data
       const featureData = codeRecordRelations[feature.get('NUTS_ID')];
       /*const featureData = clusterData.find(
@@ -303,7 +303,7 @@ export class AdjusterService {
       });
     });
     // Since we are updating the features silently, we now have to refresh manually
-    nuts.nuts3Source.getFeatures()[0].dispatchEvent('change');
+    nuts.nuts3ClustersSource.getFeatures()[0].dispatchEvent('change');
   }
 
   clustersLoaded(): boolean {

src/app.service.ts

@@ -1,8 +1,9 @@
 import hsv2rgb from 'hsv2rgb';
+import {Injectable} from '@angular/core';
+
 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';
 
@@ -50,16 +51,14 @@ export class AppService {
     title: 'NUTS2 regions',
   });
   nuts3IndexLayer = new VectorLayer({
-    source: nuts.nuts3Source,
+    source: nuts.nuts3IndexSource,
     editor: {editable: false},
     visible: true,
-    style: (f) => {
-      return this.indexStyle(f);
-    },
+    style: (f) => this.indexStyle(f),
     title: 'NUTS3 regions: Rural attractiveness index',
   });
   nuts3ClustersLayer = new VectorLayer({
-    source: nuts.nuts3Source,
+    source: nuts.nuts3ClustersSource,
     editor: {editable: false},
     visible: true,
     style: this.generateStyle(this.adjusterService.method),
@@ -117,6 +116,12 @@ export class AppService {
         },
       ],
     });
+    // For debugging only
+    /*this.hsEventBus.olMapLoads.subscribe((map) => {
+      map.on('click', this.debugMe);
+    });*/
+    this.nuts3IndexLayer.set('editable', false);
+    this.nuts3IndexLayer.set('queryable', false);
     this.nuts3ClustersLayer.set('popUp', {
       attributes: [
         {attribute: 'CNTR_CODE', label: 'Country'},
@@ -290,4 +295,10 @@ export class AppService {
     const h = r * 0x10000 + g * 0x100 + b * 0x1;
     return `rgba(${r}, ${g}, ${b}, 0.7)`;
   };
+
+  private debugMe(e) {
+    console.log(e);
+    const feats = e.map.getFeaturesAtPixel(e.pixel);
+    console.log(feats);
+  }
 }

src/nuts.js

@@ -1,14 +0,0 @@
-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';
-
-export const nuts = {
-  nuts2Source: new VectorSource({
-    features: new GeoJSON().readFeatures(nuts2),
-  }),
-
-  nuts3Source: new VectorSource({
-    features: new GeoJSON().readFeatures(nuts3),
-  }),
-};

src/nuts.ts

@@ -0,0 +1,25 @@
+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';
+
+export const nuts = {
+  nuts2Source: new VectorSource({
+    features: new GeoJSON().readFeatures(nuts2),
+    overlaps: false,
+  }),
+
+  nuts3IndexSource: new VectorSource({
+    features: new GeoJSON().readFeatures(nuts3),
+    //format: new GeoJSON(),
+    //url: require('./data/NUTS_RG_20M_2016_3857_LEVL_3.geojson').default,
+    overlaps: false,
+  }),
+
+  nuts3ClustersSource: new VectorSource({
+    features: new GeoJSON().readFeatures(nuts3).map((f) => f.clone()),
+    //format: new GeoJSON(),
+    //url: require('./data/NUTS_RG_20M_2016_3857_LEVL_3.geojson').default,
+    overlaps: false,
+  }),
+};