From e675d626b1d3e16ce9cabdf816b9a69e040d8d38 Mon Sep 17 00:00:00 2001 From: Mallikarjuna Gurushanthappa Date: Mon, 10 Dec 2018 16:45:12 -0800 Subject: [PATCH 1/2] Support highlight and un-highlight routes with `multiple px-map-layer-geojson`. --- HISTORY.md | 5 ++++ bower.json | 2 +- examples/layer-geojson-custom-popup.html | 34 ++++++++++++++++-------- package.json | 2 +- px-map-behavior-layer-geojson.es6.js | 22 ++++++++++++--- 5 files changed, 48 insertions(+), 17 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index a126426..e24d0fa 100644 --- a/HISTORY.md +++ b/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: diff --git a/bower.json b/bower.json index 30fad73..8abae6f 100644 --- a/bower.json +++ b/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" diff --git a/examples/layer-geojson-custom-popup.html b/examples/layer-geojson-custom-popup.html index ab6c11e..64e9eac 100644 --- a/examples/layer-geojson-custom-popup.html +++ b/examples/layer-geojson-custom-popup.html @@ -64,6 +64,8 @@ + + @@ -95,7 +97,7 @@ document.addEventListener('WebComponentsReady', function () { - const geoJSONLine = { + const geoJSONLine = { "type": "FeatureCollection", "features": [ { @@ -174,6 +176,12 @@ "minWidth": 100 } }, + ] +}; + + const geoJSONLine1 = { + "type": "FeatureCollection", + "features": [ { "type": "Feature", "id": "d0deb0eb-6a3c-4283-87f1-4893c50be2be", @@ -4594,15 +4602,19 @@ "minWidth": 100, "name": "1. Home to 2. [JOB-YYY] Sony" } - } - ] -}; + }, + ] + } + + tmpl.geoJSONLine = geoJSONLine; + tmpl.geoJSONLine1 = geoJSONLine1; tmpl.mapClicked = () => { pxLayerGeoJson.selectedFeature = null; }; var pxLayerGeoJson = document.getElementById('pxLayerGeoJson'); + var pxLayerGeoJson1 = document.getElementById('pxLayerGeoJson1'); // Trip-1 click document.getElementById('tripOne').addEventListener('click', function() { @@ -4616,19 +4628,19 @@ pxLayerGeoJson.selectedFeature = id; }); - // route-3 click + // route-3 click(pxLayerGeoJson1) document.getElementById('tripThree').addEventListener('click', function() { - const { id } = geoJSONLine.features[2]; - pxLayerGeoJson.selectedFeature = id; + const { id } = geoJSONLine1.features[0]; + pxLayerGeoJson1.selectedFeature = id; }); - // route-3 click + // route-4 click(pxLayerGeoJson1) document.getElementById('tripFour').addEventListener('click', function() { - const { id } = geoJSONLine.features[3]; - pxLayerGeoJson.selectedFeature = id; + const { id } = geoJSONLine1.features[1]; + pxLayerGeoJson1.selectedFeature = id; }); - // route-3 click + // clear-highlight click document.getElementById('clearHighlight').addEventListener('click', function() { pxLayerGeoJson.selectedFeature = null; }); diff --git a/package.json b/package.json index be1f458..4ed3abc 100644 --- a/package.json +++ b/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": { diff --git a/px-map-behavior-layer-geojson.es6.js b/px-map-behavior-layer-geojson.es6.js index e92091c..2eae355 100644 --- a/px-map-behavior-layer-geojson.es6.js +++ b/px-map-behavior-layer-geojson.es6.js @@ -108,6 +108,10 @@ }, }, + /** + * 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 @@ -140,6 +144,7 @@ // 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 }); }); } @@ -149,7 +154,15 @@ // 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) { @@ -259,7 +272,7 @@ const styleAttributeProperties = this.getInstOptions().featureStyle; // toggle highlight selected feature - const geoData = this._toggleHighlightSelectedFeature(lastOptions, nextOptions); + const geoData = this._toggleHighlightSelectedFeature(); this.elementInst.clearLayers(); this.elementInst.options.style = (feature) => { @@ -293,13 +306,14 @@ }; }, - _toggleHighlightSelectedFeature(lastOptions, nextOptions) { + _toggleHighlightSelectedFeature() { + const originalData = this._getOriginalData(); // un-highlight when no selectedFeature if (this.selectedFeature === null) { - return lastOptions.data; + return originalData; } - const geoData = JSON.parse(JSON.stringify(nextOptions.data)); + const geoData = JSON.parse(JSON.stringify(originalData)); let objectToAppendWeight = {}; let objectToAppendHighlight = {}; let objectToAppendColor = {}; From a568643b435beb6d6944ba3e86a948e0a05b1dd0 Mon Sep 17 00:00:00 2001 From: Mallikarjuna Gurushanthappa Date: Wed, 12 Dec 2018 10:27:18 -0800 Subject: [PATCH 2/2] multiple geojson highlight - fix updatedata --- examples/layer-geojson-custom-popup.html | 72 +++++++++++++++++++++++- px-map-behavior-layer-geojson.es6.js | 34 +++++------ 2 files changed, 86 insertions(+), 20 deletions(-) diff --git a/examples/layer-geojson-custom-popup.html b/examples/layer-geojson-custom-popup.html index 64e9eac..f32057a 100644 --- a/examples/layer-geojson-custom-popup.html +++ b/examples/layer-geojson-custom-popup.html @@ -84,6 +84,11 @@
    • @@ -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": "Updated Data Trip.", + "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 index 2eae355..16621b5 100644 --- 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 = {