Merge pull request #41 from mallik-svmx/UI-2961

UI-2961: Support highlight and unhighlight routes with multiple px-map-layer-geojson

HISTORY.md

@@ -1,3 +1,8 @@
+v3.18.0
+===================
+## Enhancement:
+*  Support highlight and un-highlight routes with `multiple px-map-layer-geojson`.
+
 v3.17.0
 ===================
 ## Enhancement:

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "px-map",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "A lightweight framework for building interactive maps with web components",
   "main": [
     "px-map.html"

examples/layer-geojson-custom-popup.html

@@ -64,6 +64,8 @@
           <px-map-layer-geojson id="pxLayerGeoJson" on-px-map-clicked="mapClicked" data="{{geoJSONLine}}" feature-style='{"color": "purple", "fillColor": "purple", "fillOpacity": "0.3"}'
             show-feature-properties intersecting-route-popup="<section><ul><li><a href='#'>3-4: 12 mi, 0:33min</a></li><li><a href='#'>4-5: 34 mi, 1:33min</a></li></ul></section>">
           </px-map-layer-geojson>
+          <px-map-layer-geojson id="pxLayerGeoJson1" on-px-map-clicked="mapClicked" data="{{geoJSONLine1}}" show-feature-properties>
+          </px-map-layer-geojson>
           <px-map-marker-custom lat="37.389933" lng="-121.971807" icon="px-nav:unconfirmed" stroke-color="blue" fill-color="white" icon-content="1"></px-map-marker-custom>
           <px-map-marker-custom lat="37.596371" lng="-122.081633" icon="px-nav:unconfirmed" stroke-color="blue" fill-color="white" icon-content="2" /></px-map-marker-custom>
           <px-map-marker-custom lat="37.336182" lng="-121.890603" icon="px-nav:unconfirmed" stroke-color="blue" fill-color="white" icon-content="3" /></px-map-marker-custom>
@@ -82,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>
@@ -95,7 +102,7 @@
 
   document.addEventListener('WebComponentsReady', function () {
 
-    const geoJSONLine = {
+  const geoJSONLine = {
   "type": "FeatureCollection",
   "features": [
     {
@@ -174,6 +181,12 @@
         "minWidth": 100
       }
     },
+  ]
+};
+
+  const geoJSONLine1 = {
+    "type": "FeatureCollection",
+    "features": [
     {
       "type": "Feature",
       "id": "d0deb0eb-6a3c-4283-87f1-4893c50be2be",
@@ -4594,43 +4607,112 @@
         "minWidth": 100,
         "name": "1. Home to 2. [JOB-YYY] Sony"
       }
-    }
-  ]
-};
+    },
+    ]
+  }
+
+  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');
 
     // Trip-1 click
     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
+    // route-3 click(pxLayerGeoJson1)
     document.getElementById('tripThree').addEventListener('click', function() {
-      const { id } = geoJSONLine.features[2];
+      const { id } = geoJSONLine1.features[0];
+      pxLayerGeoJson1.selectedFeature = id;
       pxLayerGeoJson.selectedFeature = id;
     });
 
-    // route-3 click
+    // route-4 click(pxLayerGeoJson1)
     document.getElementById('tripFour').addEventListener('click', function() {
-      const { id } = geoJSONLine.features[3];
+      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;
     });
 
-    // route-3 click
+    // clear-highlight click
     document.getElementById('clearHighlight').addEventListener('click', function() {
       pxLayerGeoJson.selectedFeature = null;
+      pxLayerGeoJson1.selectedFeature = null;
     });
 
   });

package.json

@@ -2,7 +2,7 @@
   "name": "px-map",
   "author": "General Electric",
   "description": "A lightweight framework for building interactive maps with web components",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "private": false,
   "extName": null,
   "repository": {

px-map-behavior-layer-geojson.es6.js

@@ -259,7 +259,7 @@
         const styleAttributeProperties = this.getInstOptions().featureStyle;
 
         // toggle highlight selected feature
-        const geoData = this._toggleHighlightSelectedFeature(lastOptions, nextOptions);
+        const geoData = this._toggleHighlightSelectedFeature(nextOptions);
 
         this.elementInst.clearLayers();
         this.elementInst.options.style = (feature) => {
@@ -293,10 +293,10 @@
       };
     },
 
-    _toggleHighlightSelectedFeature(lastOptions, nextOptions) {
+    _toggleHighlightSelectedFeature(nextOptions) {
       // un-highlight when no selectedFeature
       if (this.selectedFeature === null) {
-        return lastOptions.data;
+        return nextOptions.data;
       }
 
       const geoData = JSON.parse(JSON.stringify(nextOptions.data));
@@ -310,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 = {