multiple geojson highlight - fix updatedata

ServiceMax-Engineering · Dec 12, 2018 · a568643 · a568643
1 parent e675d62
commit a568643
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 20 deletions.
diff --git a/examples/layer-geojson-custom-popup.html b/examples/layer-geojson-custom-popup.html
@@ -84,6 +84,11 @@
       <li><button id="tripFour">Long Trip - Overlapped</button></li>
     </ul>
     <ul>
+      <li><hr /></li>
+      <li><button id="updateData">Update Data</button></li>
+      <li><hr /></li>
+      <li><button id="updateDataTrip">Updated Data Trip - Highlight</button></li>
+      <li><hr /></li>
       <li><button id="clearHighlight">Clear - Highlight</button></li>
     </ul>
   </section>
@@ -4606,12 +4611,57 @@
     ]
   }
 
-
+  const geoJSONLine2 = {
+    "type": "FeatureCollection",
+    "features": [
+      {
+        "type": "Feature",
+        "id": "64c074a9-1d03-4404-b2bd-4ba662a346c9",
+        "properties": {},
+        "geometry": {
+          "type": "LineString",
+          "coordinates": [
+            [
+              -122.21363067626952,
+              37.48739055919013
+            ],
+            [
+              -122.1799850463867,
+              37.4530574713902
+            ],
+            [
+              -122.13878631591798,
+              37.42170795425973
+            ],
+            [
+              -122.1030807495117,
+              37.39716439046104
+            ],
+            [
+              -122.03887939453125,
+              37.322120359451766
+            ],
+            [
+              -122.02926635742188,
+              37.323212446730174
+            ]
+          ]
+        },
+        "customPopup": {
+        "content": "<span style=\"display: block;text-align: center; font-size: 13px;\">Updated Data Trip</strong>.</span>",
+        "margin": "10px",
+        "maxWidth": 400,
+        "minWidth": 100
+      }
+      }
+    ]
+  }
 
     tmpl.geoJSONLine = geoJSONLine;
     tmpl.geoJSONLine1 = geoJSONLine1;
     tmpl.mapClicked = () => {
       pxLayerGeoJson.selectedFeature = null;
+      pxLayerGeoJson1.selectedFeature = null;
     };
     var pxLayerGeoJson = document.getElementById('pxLayerGeoJson');
     var pxLayerGeoJson1 = document.getElementById('pxLayerGeoJson1');
@@ -4620,29 +4670,49 @@
     document.getElementById('tripOne').addEventListener('click', function() {
       const { id } = geoJSONLine.features[0];
       pxLayerGeoJson.selectedFeature = id;
+      pxLayerGeoJson1.selectedFeature = id;
     });
 
     // route-2 click
     document.getElementById('tripTwo').addEventListener('click', function() {
       const { id } = geoJSONLine.features[1];
       pxLayerGeoJson.selectedFeature = id;
+      pxLayerGeoJson1.selectedFeature = id;
     });
 
     // route-3 click(pxLayerGeoJson1)
     document.getElementById('tripThree').addEventListener('click', function() {
       const { id } = geoJSONLine1.features[0];
       pxLayerGeoJson1.selectedFeature = id;
+      pxLayerGeoJson.selectedFeature = id;
     });
 
     // route-4 click(pxLayerGeoJson1)
     document.getElementById('tripFour').addEventListener('click', function() {
       const { id } = geoJSONLine1.features[1];
       pxLayerGeoJson1.selectedFeature = id;
+      pxLayerGeoJson.selectedFeature = id;
+    });
+
+
+    // update data
+    document.getElementById('updateData').addEventListener('click', function() {
+      tmpl.geoJSONLine = geoJSONLine2;
+      pxLayerGeoJson.selectedFeature = null;
+      pxLayerGeoJson1.selectedFeature = null;
+    });
+
+    // updated data route click
+    document.getElementById('updateDataTrip').addEventListener('click', function() {
+      const { id } = geoJSONLine2.features[0];
+      pxLayerGeoJson1.selectedFeature = id;
+      pxLayerGeoJson.selectedFeature = id;
     });
 
     // clear-highlight click
     document.getElementById('clearHighlight').addEventListener('click', function() {
       pxLayerGeoJson.selectedFeature = null;
+      pxLayerGeoJson1.selectedFeature = null;
     });
 
   });

diff --git a/px-map-behavior-layer-geojson.es6.js b/px-map-behavior-layer-geojson.es6.js
@@ -108,10 +108,6 @@
       },
     },
 
-    /**
-     * Local/private property that aggregates multiple geojson elements feature/route segments
-     */
-    _multipleGeoJsonFeatures: [],
     /**
      * Forces the GeoJSON layer to deeply check the `data` attribute for differences
      * in the data from the last draw, and make any necessary updates. Call this
@@ -144,7 +140,6 @@
       // added events to attach listeners/notify the world the layer is added
       if (this.elementInst.getLayers().length !== 0) {
         this.elementInst.eachLayer((layer) => {
-          this._multipleGeoJsonFeatures.push(layer.feature);
           this.elementInst.fire('layeradd', { layer });
         });
       }
@@ -154,15 +149,7 @@
       // create map element instance and an handler to click
       const pxMapEl = document.getElementsByTagName('px-map')[0];
       pxMapEl.elementInst.on('click', this._handleMapClick.bind(this));
-    },
 
-    // get non-modified original feature data from multiple geojson elements
-    _getOriginalData() {
-      const originalData = {
-        type: this.data.type,
-        features: this._multipleGeoJsonFeatures,
-      }
-      return originalData;
     },
 
     _handleMapClick(evt) {
@@ -272,7 +259,7 @@
         const styleAttributeProperties = this.getInstOptions().featureStyle;
 
         // toggle highlight selected feature
-        const geoData = this._toggleHighlightSelectedFeature();
+        const geoData = this._toggleHighlightSelectedFeature(nextOptions);
 
         this.elementInst.clearLayers();
         this.elementInst.options.style = (feature) => {
@@ -306,14 +293,13 @@
       };
     },
 
-    _toggleHighlightSelectedFeature() {
-      const originalData = this._getOriginalData();
+    _toggleHighlightSelectedFeature(nextOptions) {
       // un-highlight when no selectedFeature
       if (this.selectedFeature === null) {
-        return originalData;
+        return nextOptions.data;
       }
 
-      const geoData = JSON.parse(JSON.stringify(originalData));
+      const geoData = JSON.parse(JSON.stringify(nextOptions.data));
       let objectToAppendWeight = {};
       let objectToAppendHighlight = {};
       let objectToAppendColor = {};
@@ -324,14 +310,24 @@
         }
       });
 
+      // just return original data when there is no matching id found(no route is highlighted)
+      if(!featureToHighlight) {
+        return geoData;
+      }
+
       objectToAppendWeight = JSON.parse(JSON.stringify(featureToHighlight));
       objectToAppendHighlight = JSON.parse(JSON.stringify(featureToHighlight));
       objectToAppendColor = JSON.parse(JSON.stringify(featureToHighlight));
 
+      // default to primary-blue in case feature doesn't have style color
+      const segmentDefaultColor = featureToHighlight.properties &&
+        featureToHighlight.properties.style &&
+        featureToHighlight.properties.style.color || '#3E87E8'; // primary-blue,
+
       objectToAppendWeight.properties.style = {
         weight: 7,
         opacity: 0.7,
-        color: featureToHighlight.properties.style.color,
+        color: segmentDefaultColor
       };
 
       objectToAppendHighlight.properties.style = {