fix PinImages and ClusterPinImages not changing pin size (#807)

One of the requirements of the vertical-full-page-map is that users can jambo override the PinImages and ClusterPinImages files in order to change the pin size. @rosiegrant says that this was tested at some point, and since none of this code has been changed since the initial 8000+ line full page map commit, it's likely this was dropped somewhere during prototyping. Talked with @rosiegrant about the interface change. J=TECHOPS-603 TEST=manual see that I can resize both the regular pin and the cluster pin, on both chrome and ie11, for both google and mapbox check that the default pin/cluster pin sizes did not change before and after this commit check that pinCount is passed to propertiesForStatus correctly
yext · Jun 4, 2021 · 911d215 · 911d215
1 parent b77e9f2
commit 911d215
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 44 deletions.
diff --git a/static/js/theme-map/ClusterPinImages.js b/static/js/theme-map/ClusterPinImages.js
@@ -20,29 +20,29 @@ 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 = `
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
         <g fill="none" fill-rule="evenodd">
           <circle fill="${backgroundColor}" fill-rule="nonzero" stroke="${strokeColor}" cx="12" cy="12" r="11"/>
           <text fill="${labelColor}" font-family="Arial-BoldMT,Arial" font-size="12" font-weight="bold">
             <tspan x="50%" y="16" text-anchor="middle">${labelText}</tspan>
           </text>
         </g>
-      </svg>
-    `;
+      </svg>`;
+    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
@@ -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
@@ -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 `
-    <svg width="${width}" height="${height}" viewBox="0 0 20 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    const svg = `
+      <svg width="${width}" height="${height}" viewBox="0 0 20 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>Path</title>
         <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <path d="M10.0501608,26.9990713 C16.0167203,19.9483571 19,14.5376667 19,10.767 C19,4.82 14.9704545,1 10,1 C5.02954545,1 1,4.82 1,10.767 C1,14.4756667 4.01672027,19.8863571 10.0501608,26.9990713 Z" id="Path" stroke="${strokeColor}" fill="${backgroundColor}" fill-rule="nonzero"></path>
@@ -46,8 +46,8 @@ class PinImages {
           <tspan x="50%" y="15" text-anchor="middle">${index}</tspan>
         </text>
         </g>
-    </svg>
-    `;
+      </svg>`;
+    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
@@ -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;