Fix select features in the map.

package-lock.json

@@ -2213,6 +2213,19 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/lodash": {
+      "version": "4.14.116",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.116.tgz",
+      "integrity": "sha512-lRnAtKnxMXcYYXqOiotTmJd74uawNWuPnsnPrrO7HiFuE3npE2iQhfABatbYDyxTNqZNuXzcKGhw37R7RjBFLg=="
+    },
+    "@types/lodash.clonedeep": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.4.tgz",
+      "integrity": "sha512-+rCVPIZOJaub++wU/lmyp/SxiKlqXQaXI5LryzjuHBKFj51ApVt38Xxk9psLWNGMuR/obEQNTH0l/yDfG4ANNQ==",
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/mapbox-gl": {
       "version": "0.47.2",
       "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-0.47.2.tgz",
@@ -8639,8 +8652,7 @@
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
-      "dev": true
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
     },
     "lodash.debounce": {
       "version": "4.0.8",

package.json

@@ -29,6 +29,7 @@
     "@angular/router": "6.1.0",
     "@turf/centroid": "^5.1.5",
     "@turf/helpers": "^6.1.4",
+    "@types/lodash.clonedeep": "^4.5.4",
     "@types/mapbox-gl": "^0.47.0",
     "angulartics2": "^6.2.0",
     "bulma": "^0.7.1",
@@ -38,6 +39,7 @@
     "core-js": "^2.5.7",
     "font-awesome": "^4.7.0",
     "lodash": "^4.17.10",
+    "lodash.clonedeep": "^4.5.0",
     "mapbox-gl": "^0.47.0",
     "ng-inline-svg": "^8.0.1",
     "ngx-infinite-scroll": "^6.0.1",

src/app/map/services/map.service.ts

@@ -12,6 +12,7 @@ import { Minimap } from '../components/minimap-control';
 
 import { DatasetDetailService } from '../../geosource/services';
 import { settings } from '../settings';
+import { cloneDeep } from 'lodash';
 
 @Injectable()
 export class MapService {
@@ -357,10 +358,11 @@ export class MapService {
 
         this.handleMapPosition(e.point.x, e.lngLat, () => {
           const feature = this.geojson.features.find(f => f.properties._featureId === this.selectedFeature);
+          const featureCloned = cloneDeep(feature);
 
           // Remove the generated id from the properties to be displayed
-          delete feature.properties._featureId;
-          this._panelState.next({ state: true, properties: feature.properties });
+          delete featureCloned.properties._featureId;
+          this._panelState.next({ state: true, properties: featureCloned.properties });
         });
       });
 
@@ -371,10 +373,10 @@ export class MapService {
 
         this.handleMapPosition(e.point.x, e.lngLat, () => {
           const feature = this.geojson.features.find(f => f.properties._featureId === this.selectedFeature);
-
+          const featureCloned = cloneDeep(feature);
           // Remove the generated id from the properties to be displayed
-          delete feature.properties._featureId;
-          this._panelState.next({ state: true, properties: feature.properties });
+          delete featureCloned.properties._featureId;
+          this._panelState.next({ state: true, properties: featureCloned.properties });
         });
       });
 
@@ -385,10 +387,10 @@ export class MapService {
 
         this.handleMapPosition(e.point.x, e.lngLat, () => {
           const feature = this.geojson.features.find(f => f.properties._featureId === this.selectedFeature);
-
+          const featureCloned = cloneDeep(feature);
           // Remove the generated id from the properties to be displayed
-          delete feature.properties._featureId;
-          this._panelState.next({ state: true, properties: feature.properties });
+          delete featureCloned.properties._featureId;
+          this._panelState.next({ state: true, properties: featureCloned.properties });
         });
       });