diff --git a/static/js/theme-map/ClusterPinImages.js b/static/js/theme-map/ClusterPinImages.js index a82feaaec..1d0405d8d 100644 --- a/static/js/theme-map/ClusterPinImages.js +++ b/static/js/theme-map/ClusterPinImages.js @@ -20,20 +20,20 @@ class ClusterPinImages { * @param {string} pin.backgroundColor Background color for the pin * @param {string} pin.strokeColor Stroke (border) color for the pin * @param {string} pin.labelColor Label (text) color for the pin - * @param {string} pin.width The width of the pin - * @param {string} pin.height The height of the pin + * @param {number} pin.width The width of the pin + * @param {number} pin.height The height of the pin * @param {string} pin.labelText The label text for the cluster pin (normally size of cluster) - * @return string The SVG of the pin + * @return {Object} The SVG of the pin, and its width and height */ generatePin ({ backgroundColor = '#00759e', strokeColor = 'black', labelColor = 'white', - width = '24px', - height= '24px', + width = 24, + height= 24, labelText = '' } = {}) { - return ` + const svg = ` @@ -41,8 +41,8 @@ class ClusterPinImages { ${labelText} - - `; + `; + return { svg, width, height }; }; /** @@ -55,8 +55,8 @@ class ClusterPinImages { backgroundColor: this.defaultPinConfig.backgroundColor, strokeColor: this.defaultPinConfig.strokeColor, labelColor: this.defaultPinConfig.labelColor, - width: '24px', - height: '24px', + width: 24, + height: 24, labelText: pinCount, }); } @@ -71,8 +71,8 @@ class ClusterPinImages { backgroundColor: this.hoveredPinConfig.backgroundColor, strokeColor: this.hoveredPinConfig.strokeColor, labelColor: this.hoveredPinConfig.labelColor, - width: '24px', - height: '24px', + width: 24, + height: 24, labelText: pinCount, }); } @@ -87,8 +87,8 @@ class ClusterPinImages { backgroundColor: this.selectedPinConfig.backgroundColor, strokeColor: this.selectedPinConfig.strokeColor, labelColor: this.selectedPinConfig.labelColor, - width: '24px', - height: '24px', + width: 24, + height: 24, labelText: pinCount, }); } diff --git a/static/js/theme-map/PinClusterer/PinClusterer.js b/static/js/theme-map/PinClusterer/PinClusterer.js index 67d5e5b3c..5caf83119 100644 --- a/static/js/theme-map/PinClusterer/PinClusterer.js +++ b/static/js/theme-map/PinClusterer/PinClusterer.js @@ -342,7 +342,7 @@ class PinClusterer { const pinOptions = this._map.newPinOptions() .withCoordinate(GeoBounds.fit(coordinates).getCenter(this._mapProjection)) .withHideOffscreen(this._hideOffscreen) - .withPropertiesForStatus(this._propertiesForStatus); + .withPropertiesForStatus(status => this._propertiesForStatus(status, pinCluster.length)); // Build cluster icon(s) from template for (const [icon, template] of Object.entries(this._iconTemplates)) { diff --git a/static/js/theme-map/PinImages.js b/static/js/theme-map/PinImages.js index c49739177..f56f15379 100644 --- a/static/js/theme-map/PinImages.js +++ b/static/js/theme-map/PinImages.js @@ -20,22 +20,22 @@ class PinImages { * @param {string} pin.backgroundColor Background color for the pin * @param {string} pin.strokeColor Stroke (border) color for the pin * @param {string} pin.labelColor Label (text) color for the pin - * @param {string} pin.width The width of the pin - * @param {string} pin.height The height of the pin + * @param {number} pin.width The width of the pin + * @param {number} pin.height The height of the pin * @param {string} pin.pinCount The index of the pin for the pin text - * @return string The SVG of the pin + * @return {Object} The SVG of the pin, and its width and height */ generatePin ({ backgroundColor = '#00759e', strokeColor = 'black', labelColor = 'white', - width = '20px', - height= '27px', + width = 20, + height= 27, index = '', profile = '' } = {}) { - return ` - + const svg = ` + Path @@ -46,8 +46,8 @@ class PinImages { ${index} - - `; + `; + return { svg, width, height }; }; /** @@ -60,8 +60,8 @@ class PinImages { backgroundColor: this.defaultPinConfig.backgroundColor, strokeColor: this.defaultPinConfig.strokeColor, labelColor: this.defaultPinConfig.labelColor, - width: '24', - height: '28', + width: 24, + height: 28, index: '', profile: profile }); @@ -77,8 +77,8 @@ class PinImages { backgroundColor: this.hoveredPinConfig.backgroundColor, strokeColor: this.hoveredPinConfig.strokeColor, labelColor: this.hoveredPinConfig.labelColor, - width: '24', - height: '34', + width: 24, + height: 34, index: '', profile: profile }); @@ -94,8 +94,8 @@ class PinImages { backgroundColor: this.selectedPinConfig.backgroundColor, strokeColor: this.selectedPinConfig.strokeColor, labelColor: this.selectedPinConfig.labelColor, - width: '24', - height: '34', + width: 24, + height: 34, index: '', profile: profile }); diff --git a/static/js/theme-map/ThemeMap.js b/static/js/theme-map/ThemeMap.js index 20c52cd2b..37347ce99 100644 --- a/static/js/theme-map/ThemeMap.js +++ b/static/js/theme-map/ThemeMap.js @@ -294,23 +294,23 @@ class ThemeMap extends ANSWERS.Component { this.config.pinClusterClickListener(); }) .withIconTemplate('default', (pinDetails) => { - return getEncodedSvg(this.config.pinClusterImages.getDefaultPin(pinDetails.pinCount)); + return getEncodedSvg(this.config.pinClusterImages.getDefaultPin(pinDetails.pinCount).svg); }) .withIconTemplate('hovered', (pinDetails) => { - return getEncodedSvg(this.config.pinClusterImages.getHoveredPin(pinDetails.pinCount)); + return getEncodedSvg(this.config.pinClusterImages.getHoveredPin(pinDetails.pinCount).svg); }) .withIconTemplate('selected', (pinDetails) => { - return getEncodedSvg(this.config.pinClusterImages.getSelectedPin(pinDetails.pinCount)); + return getEncodedSvg(this.config.pinClusterImages.getSelectedPin(pinDetails.pinCount).svg); }) - .withPropertiesForStatus(status => { + .withPropertiesForStatus((status, pinCount) => { + const defaultPin = this.config.pinClusterImages.getDefaultPin(pinCount); const properties = new PinProperties() .setIcon(status.hovered || status.focused || status.selected ? 'hovered' : 'default') - .setWidth(28) - .setHeight(28) + .setWidth(defaultPin.width) + .setHeight(defaultPin.height) .setAnchorX(this.config.pinClusterAnchors.anchorX) .setAnchorY(this.config.pinClusterAnchors.anchorY); - return properties; }) .withMinClusterSize(this.config.minClusterSize) @@ -328,17 +328,20 @@ class ThemeMap extends ANSWERS.Component { */ buildPin(pinOptions, entity, index) { const id = 'js-yl-' + entity.profile.meta.id; + const defaultPin = this.config.pinImages.getDefaultPin(index, entity.profile); + const hoveredPin = this.config.pinImages.getHoveredPin(index, entity.profile); + const selectedPin = this.config.pinImages.getSelectedPin(index, entity.profile); const pin = pinOptions .withId(id) .withIcon( 'default', - getEncodedSvg(this.config.pinImages.getDefaultPin(index, entity.profile))) + getEncodedSvg(defaultPin.svg)) .withIcon( 'hovered', - getEncodedSvg(this.config.pinImages.getHoveredPin(index, entity.profile))) + getEncodedSvg(hoveredPin.svg)) .withIcon( 'selected', - getEncodedSvg(this.config.pinImages.getSelectedPin(index, entity.profile))) + getEncodedSvg(selectedPin.svg)) .withHideOffscreen(false) .withCoordinate(new Coordinate(entity.profile.yextDisplayCoordinate)) .withPropertiesForStatus(status => { @@ -349,12 +352,12 @@ class ThemeMap extends ANSWERS.Component { .setAnchorX(this.config.pinAnchors.anchorX) .setAnchorY(this.config.pinAnchors.anchorY); - properties.setWidth(24); - properties.setHeight(28); + properties.setWidth(defaultPin.width); + properties.setHeight(defaultPin.height); if (status.selected) { - properties.setWidth(24); - properties.setHeight(34); + properties.setWidth(selectedPin.width); + properties.setHeight(selectedPin.height); } return properties;