diff --git a/HISTORY.md b/HISTORY.md index 41fd524..3e5550d 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,3 +1,10 @@ +v3.19.27 +=================== +## Enhancement: +* Rise and highlight the selected marker for `px-map-marker-group` +* Support cluster icon customization +* Support show/hide tooltip configuration when highlighting the selected marker for `px-map-marker-group` + v3.19.26 =================== ## Enhancement: diff --git a/bower.json b/bower.json index 456a2cb..1ed5696 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "px-map", - "version": "3.19.26", + "version": "3.19.27", "description": "A lightweight framework for building interactive maps with web components", "main": [ "px-map.html" diff --git a/css/px-map-styles.html b/css/px-map-styles.html index a5cddae..6cd95f6 100644 --- a/css/px-map-styles.html +++ b/css/px-map-styles.html @@ -17,7 +17,7 @@ \ No newline at end of file diff --git a/package.json b/package.json index 03e88ff..1f3c6b4 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.19.26", + "version": "3.19.27", "private": false, "extName": null, "repository": { diff --git a/px-map-behavior-marker-group.es6.js b/px-map-behavior-marker-group.es6.js index abcb4b8..e1783f7 100644 --- a/px-map-behavior-marker-group.es6.js +++ b/px-map-behavior-marker-group.es6.js @@ -178,6 +178,7 @@ * - {String} `polygonOptions.fillColor`: [default=--px-map-marker-group-cluster-polygon-fill-color] Sets the fill color color, prefer setting with the style variable. * - {Number} `polygonOptions.fillOpacity`: [default=0.4] Sets the opacity of the polygon fill * - {Object} `spiderLegPolylineOptions`: [default=undefined] Sets the style for the marker spiderfy legs, see [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) + * - {String} `clusterIcon`: [default=''] Specify a predefined icon (defined in `px-map-behavior-icon`) as the cluster icon. `iconFns` has higher priority than it. * * @type {Object} */ @@ -196,6 +197,45 @@ notify: true }, + /** + * Indicate whether need to open the popup when selecting a marker. + */ + openPopupOnSelect: { + type: Boolean, + value: true, + observer: 'shouldUpdateInst', + notify: true + }, + + /** + * Indicate whether bring the selected marker to top + */ + riseOnSelect: { + type: Boolean, + value: false, + observer: 'shouldUpdateInst', + notify: true + }, + + /** + * The z-index offset of highlighted/selected marker + */ + riseZIndexOffset: { + type: Number, + value: 250, + observer: 'shouldUpdateInst', + notify: true + }, + + /** + * The highlight class for selected marker + */ + riseClass: { + type: String, + value: 'map-icon__highlight', + observer: 'shouldUpdateInst', + notify: true + }, }, // PUBLIC METHODS @@ -320,6 +360,7 @@ && selectedFeature.__parent._markers && selectedFeature.__parent._markers.length > 1) { this._fireEventOnMarkerOrVisibleParentCluster(selectedFeature); + this._highlightMarkerIfNeeded(selectedFeature); } else { this._bindAndOpenPopup(selectedFeature); this._unspiderfyPreviousClusterIfNotParentOf(selectedFeature); @@ -331,7 +372,15 @@ this._markerCloseAllPopups(); } } + }, + _highlightMarkerIfNeeded(marker) { + if (this.riseOnSelect) { + marker.setZIndexOffset(this.riseZIndexOffset); + if (this.riseClass && !L.DomUtil.hasClass(marker._icon, this.riseClass)) { + L.DomUtil.addClass(marker._icon, this.riseClass); + } + } }, _fireEventOnMarkerOrVisibleParentCluster(marker) { @@ -404,6 +453,11 @@ options.iconCreateFunction = this._createClusterIcon.bind(this); options.opened = this.opened; + options.riseOnSelect = this.riseOnSelect; + options.riseZIndexOffset = this.riseZIndexOffset; + options.riseClass = this.riseClass; + options.openPopupOnSelect = this.openPopupOnSelect; + // Return the options composed together return options; }, @@ -504,6 +558,12 @@ return this.iconFns.cluster.call(this, cluster); } + const { clusterIcon } = this.getInstOptions(); + if (clusterIcon) { + const klassName = this._strToKlassName(clusterIcon); + return new PxMap[klassName](); + } + // Otherwise, build the marker ourselves const markers = cluster.getAllChildMarkers(); const count = markers.length; @@ -972,7 +1032,7 @@ */ _bindAndOpenPopup(marker) { - if (!marker || !marker.bindPopup || !marker.openPopup) return; + if (!marker || !marker.bindPopup || !marker.openPopup || !this.openPopupOnSelect) return; const popupSettings = this._featSettingsToProps(marker.featureProperties['marker-popup'], 'popup'); if (!popupSettings || !Object.keys(popupSettings).length) return; diff --git a/sass/px-map.scss b/sass/px-map.scss index 5b26c32..7c7933c 100644 --- a/sass/px-map.scss +++ b/sass/px-map.scss @@ -186,6 +186,10 @@ $px-map-marker-locate-icon-accuracy-opacity: var(--px-map-marker-locate-i line-height: $px-map-marker-group-cluster-line-height; } +.map-icon__highlight { + --internal-px-map-icon-border-color: #45ACE5; +} + /******************************************************************************* * POPUPS ******************************************************************************/