change cursor if hover over feature; fix highlight isssue

src/app/map/map.component.ts

@@ -54,25 +54,6 @@ export class MapComponent implements OnInit {
    */
   public currentFeatureInfo: any;
   
-  public propertyMockData = JSON.parse('{\n' +
-    '\t"FL": "345",\n' +
-    '\t"FLST_LABEL": "93\\/0",\n' +
-    '\t"FLAECHE_HA": 0.19303757998400001,\n' +
-    '\t"FBID": "DEHBEE0433450039",\n' +
-    '\t"FELDBL_NR": "043345-0039",\n' +
-    '\t"BESCHRIFT": "?",\n' +
-    '\t"NUTZER": "?",\n' +
-    '\t"TEILRAUM": "Blockland - Waller Feldmark",\n' +
-    '\t"BAUM17Code": "-",\n' +
-    '\t"B_AUM_2017": "-",\n' +
-    '\t"Parz_Code": "-",\n' +
-    '\t"Nutzung": "Grünland",\n' +
-    '\t"Nat_schutz": "-",\n' +
-    '\t"Gebiet": "Blockland",\n' +
-    '\t"Thema": "Informationen Agrarflächen",\n' +
-    '\t"Flurstck": "Flst. 345: 93\\/0"\n' +
-    '}');
-
   /**
    * A simple cache to save styles
    */
@@ -91,6 +72,7 @@ export class MapComponent implements OnInit {
     this.initBaseLayer();
     this.initLayerGroup();
     this.initMap();
+    this.addMockData();
   }
 
   /**
@@ -153,9 +135,11 @@ export class MapComponent implements OnInit {
       const pixel = this.map.getEventPixel(evt.originalEvent);
       const features = this.map.getFeaturesAtPixel(pixel);
       if (features && features.length > 0) {
+        this.map.getTargetElement().style.cursor = 'pointer';
         this.displayFeatureInfo(features[0]);
         this.highlightFeature(features[0]);
       } else {
+        this.map.getTargetElement().style.cursor = '';
         // reapply original style to last highlighted feature
         if (this.featureCache['lastHighlighted']) {
           this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']);
@@ -172,39 +156,18 @@ export class MapComponent implements OnInit {
       const pixel = this.map.getEventPixel(evt.originalEvent);
       const features = this.map.getFeaturesAtPixel(pixel);
 
-      // TODO
-      //  check which of these are better?
-      // Both seems to remove style after click was undo
-
-      if (features && features.length > 0) {
-        // deselect feature that was selected before
         if (this.featureCache['selectedFeature']) {
-          this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
-          this.styleCache['lastHighlightedStyle'] = null;
-          this.featureCache['selectedFeature'] = null;
-        } else {
-          this.displayFeatureInfo(features[0]);
-          this.featureCache['selectedFeature'] = features[0];
-          features[0].setStyle(this.styleCache['defaultSelected']);
-        }
-      } else if (this.featureCache['selectedFeature']) {
           // use lastHighlightedStyle because the original style is saved there
           this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
-        this.styleCache['lastHighlightedStyle'] = null;
-        this.featureCache['selectedFeature'] = null;
-      }
-
-    //   if (this.featureCache['selectedFeature']) {
-    //     // use lastHighlightedStyle because the original style is saved there
-    //     this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
           // this.styleCache['lastHighlightedStyle'] = null;
-    //     this.featureCache['selectedFeature'] = null;
+          this.featureCache['selectedFeature'] = null;
-    //   } else if (features && features.length > 0) {
+        } else if (features && features.length > 0) {
-    //     this.displayFeatureInfo(features[0]);
+          this.map.getTargetElement().style.cursor = '';
-    //     this.featureCache['selectedFeature'] = features[0];
+          this.displayFeatureInfo(features[0]);
-    //     features[0].setStyle(this.styleCache['defaultSelected']);
+          this.featureCache['selectedFeature'] = features[0];
-    //   }
+          this.featureCache['lastHighlighted'] = null;
-    // });
+          features[0].setStyle(this.styleCache['defaultSelected']);
+        }
     });
   }
 
@@ -235,7 +198,6 @@ export class MapComponent implements OnInit {
     feature.setStyle(this.styleCache['defaultHighlight']);
   }
 
-
   /**
    * Opens a dialog to create a new custom layer
    */
@@ -337,4 +299,101 @@ export class MapComponent implements OnInit {
     })
   }
 
+  /**
+   * DeBUG DEBUG DBEUG
+   */
+  private addMockData() {
+    const data = {
+      "type": "FeatureCollection",
+      "name": "background",
+      "crs": {
+        "type": "name",
+        "properties": {
+          "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
+        }
+      },
+      "features": [{
+        "type": "Feature",
+        "properties": {
+          "name": "Layer 1"
+        },
+        "geometry": {
+          "type": "MultiPolygon",
+          "coordinates": [
+            [
+              [
+                [8.801864395832126, 53.14770721254275],
+                [8.806370506977146, 53.14770721254275],
+                [8.806542168354099, 53.14500456859233],
+                [8.80203605720908, 53.14521049030746]
+              ]
+            ]
+          ]
+        }
+      },
+        {
+          "type": "Feature",
+          "properties": {
+            "name": "Layer 2"
+          },
+          "geometry": {
+            "type": "MultiPolygon",
+            "coordinates": [
+              [
+                [
+                  [8.807787400997881, 53.1477644198588],
+                  [8.808044893063311, 53.145010298994144],
+                  [8.813452226437335, 53.145010298994144],
+                  [8.813194734371905, 53.1477644198588]
+                ]
+              ]
+            ]
+          }
+        },
+        {
+          "type": "Feature",
+          "properties": {
+            "name": "Layer 3"
+          },
+          "geometry": {
+            "type": "MultiPolygon",
+            "coordinates": [
+              [
+                [
+                  [8.80207966021419, 53.14392919393571],
+                  [8.802122575558428, 53.138780701270434],
+                  [8.80632827929378, 53.13896090893504],
+                  [8.806542856014971, 53.14410938000193]
+                ]
+              ]
+            ]
+          }
+        },
+        {
+          "type": "Feature",
+          "properties": {
+            "name": "Layer 4"
+          },
+          "geometry": {
+            "type": "MultiPolygon",
+            "coordinates": [
+              [
+                [
+                  [8.808654874418039, 53.143631496039035],
+                  [8.809770673368234, 53.1391523112723],
+                  [8.816036313627023, 53.13930677369489],
+                  [8.8156071601846, 53.14352853151957]
+                ]
+              ]
+            ]
+          }
+        }
+      ]
+    };
+    const rawLayer = new RawLayer('Mock Data Layer', JSON.stringify(data));
+    rawLayer.saveDefaultColor([125,125,125])
+    const customLayer = RawLayer.toVectorLayer(rawLayer);
+    this.centerLayerOnMap(customLayer);
+    this.customLayerCollection.push(customLayer);
+  }
 }

src/app/models/RawLayer.ts

@@ -7,6 +7,7 @@ import Stroke from 'ol/style/Stroke';
 import Fill from 'ol/style/Fill';
 import {Config} from "../misc/Config";
 import {Feature} from 'ol/Feature';
+
 /**
  * Represents a raw (not processed) map layer
  */
@@ -47,9 +48,9 @@ export class RawLayer {
       // TODO
       //  determine if this feature has a own color! If so, do not apply default color and use own color.
       const featureProperties = feature.getProperties();
+      if (featureProperties[Config.GEO_JSON_PREFIX] && featureProperties[Config.GEO_JSON_PREFIX]['default-style-stroke']) {
         const strokeColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-stroke'];
         const fillColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-fill'];
-
         feature.setStyle(new Style({
           stroke: new Stroke({
             color: strokeColor,
@@ -59,6 +60,7 @@ export class RawLayer {
             color: fillColor
           })
         }));
+      }
     })
 
     // add features to source