@cdc/map 4.25.10 → 4.25.11

package/src/components/UsaMap/components/TerritoriesSection.tsx

@@ -12,7 +12,7 @@ type TerritoriesSectionProps = {
 }
 
 const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config, territoriesData }) => {
-  const { currentViewport } = useContext<MapContext>(ConfigContext)
+  const { currentViewport, vizViewport } = useContext<MapContext>(ConfigContext)
 
   // filter territioriesData into the two groups below
   const freelyAssociatedKeys = territoriesData.filter(territory => {
@@ -38,7 +38,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
       return a.props.label.localeCompare(b.props.label)
     })
 
-  const isMobileViewport = isMobileTerritoryViewport(currentViewport)
+  const isMobileViewport = isMobileTerritoryViewport(vizViewport)
   const SVG_GAP = 9
   const SVG_WIDTH = isMobileViewport ? 30 : 45
 
@@ -55,10 +55,18 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
           <div className='d-flex flex-wrap' style={{ columnGap: '1.5rem' }}>
             {(usTerritories.length > 0 || config.general.territoriesAlwaysShow) && (
               <div>
-                <span className='territories-label'>U.S. territories</span>
+                <span className='territories-label' style={{ fontSize: isMobileViewport ? '0.8rem' : '1rem' }}>
+                  U.S. territories
+                </span>
                 <span
-                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
-                  style={{ minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px` }}
+                  className={`${isMobileViewport ? 'mt-1 mb-3' : 'mt-2 mb-4'} d-flex territories`}
+                  style={
+                    {
+                      minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px`,
+                      '--territory-svg-max-width': `${SVG_WIDTH}px`,
+                      '--territory-svg-min-width': `${SVG_WIDTH}px`
+                    } as React.CSSProperties
+                  }
                 >
                   {usTerritories}
                 </span>
@@ -66,14 +74,20 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
             )}
             {(freelyAssociatedStates.length > 0 || config.general.territoriesAlwaysShow) && (
               <div>
-                <span className='territories-label'>Freely associated states</span>
+                <span className='territories-label' style={{ fontSize: isMobileViewport ? '0.8rem' : '1rem' }}>
+                  Freely associated states
+                </span>
                 <span
-                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
-                  style={{
-                    minWidth: `${
-                      freelyAssociatedStates.length * SVG_WIDTH + (freelyAssociatedStates.length - 1) * SVG_GAP
-                    }px`
-                  }}
+                  className={`${isMobileViewport ? 'mt-1 mb-3' : 'mt-2 mb-4'} d-flex territories`}
+                  style={
+                    {
+                      minWidth: `${
+                        freelyAssociatedStates.length * SVG_WIDTH + (freelyAssociatedStates.length - 1) * SVG_GAP
+                      }px`,
+                      '--territory-svg-max-width': `${SVG_WIDTH}px`,
+                      '--territory-svg-min-width': `${SVG_WIDTH}px`
+                    } as React.CSSProperties
+                  }
                 >
                   {freelyAssociatedStates}
                 </span>

package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx

@@ -43,12 +43,17 @@ const TerritoryHexagon = ({
   territory,
   territoryData,
   textColor,
+  getSyncProps,
+  syncHandlers,
   ...props
 }) => {
   const { config } = useContext<MapContext>(ConfigContext)
 
   const isHex = config.general.displayAsHex
 
+  // Construct geography key: use territory prop if available, otherwise construct from label
+  const geoKey = territory || `US-${label}`
+
   // Labels
   const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
     let centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
@@ -133,7 +138,14 @@ const TerritoryHexagon = ({
             fontSize={14}
             x={'50%'}
             y={y}
-            style={{ fill: 'currentColor', stroke: strokeColor, fontWeight: 900, opacity: 1, fillOpacity: 1 }}
+            style={{
+              fill: 'currentColor',
+              stroke: strokeColor,
+              fontWeight: 900,
+              opacity: 1,
+              fillOpacity: 1,
+              pointerEvents: 'none'
+            }}
             paintOrder='stroke'
             textAnchor='middle'
             verticalAnchor='middle'
@@ -143,7 +155,9 @@ const TerritoryHexagon = ({
           >
             {abbr.substring(3)}
           </Text>
-          {config.general.displayAsHex && config.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
+          {config.general.displayAsHex &&
+            config.hexMap.type === 'shapes' &&
+            getArrowDirection(territoryData, geo, true)}
         </>
       )
     }
@@ -151,7 +165,7 @@ const TerritoryHexagon = ({
     let [dx, dy] = offsets[abbr]
 
     return (
-      <g>
+      <g style={{ pointerEvents: 'none' }}>
         <line
           x1={centroid[0]}
           y1={centroid[1]}
@@ -179,11 +193,23 @@ const TerritoryHexagon = ({
 
   return (
     <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
-      <g {...props} data-tooltip-html={dataTooltipHtml} data-tooltip-id={dataTooltipId} onClick={handleShapeClick}>
+      <g
+        {...(getSyncProps ? getSyncProps(geoKey) : {})}
+        {...props}
+        data-tooltip-html={dataTooltipHtml}
+        data-tooltip-id={dataTooltipId}
+        onClick={handleShapeClick}
+      >
         <polygon
           stroke={stroke}
           strokeWidth={strokeWidth}
           points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702'
+          onMouseEnter={e => {
+            syncHandlers?.onMouseEnter(geoKey, e.clientY)
+          }}
+          onMouseLeave={() => {
+            syncHandlers?.onMouseLeave()
+          }}
         />
         {config.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
       </g>

package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -18,6 +18,9 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   territory,
   textColor,
   backgroundColor,
+  svgStyle,
+  getSyncProps,
+  syncHandlers,
   ...props
 }) => {
   const { config } = useContext<MapContext>(ConfigContext)
@@ -25,17 +28,32 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   const rectanglePath =
     'M42,0.5 C42.8284271,0.5 43.5,1.17157288 43.5,2 L43.5,2 L43.5,26 C43.5,26.8284271 42.8284271,27.5 42,27.5 L42,27.5 L3,27.5 C2.17157288,27.5 1.5,26.8284271 1.5,26 L1.5,26 L1.5,2 C1.5,1.17157288 2.17157288,0.5 3,0.5 L3,0.5 Z'
 
+  const geoKey = territory || `US-${label}`
+
   return (
-    <svg viewBox='0 0 45 29' key={territory} className={territory}>
+    <svg viewBox='0 0 45 29' key={geoKey} className={geoKey} style={svgStyle}>
       <g
+        {...(getSyncProps ? getSyncProps(geoKey) : {})}
         {...otherProps}
         strokeLinejoin='round'
         tabIndex={-1}
         onClick={handleShapeClick}
         data-tooltip-id={dataTooltipId}
         data-tooltip-html={dataTooltipHtml}
+        onMouseEnter={e => {
+          syncHandlers?.onMouseEnter(geoKey, e.clientY)
+        }}
+        onMouseLeave={() => {
+          syncHandlers?.onMouseLeave()
+        }}
       >
-        <path stroke={stroke} strokeWidth={strokeWidth} d={rectanglePath} {...otherProps} />
+        <path
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          d={rectanglePath}
+          style={{ pointerEvents: 'none' }}
+          {...otherProps}
+        />
         <text
           textAnchor='middle'
           dominantBaseline='middle'
@@ -45,7 +63,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           stroke={strokeColor}
           className='territory-text'
           paintOrder='stroke'
-          onClick={handleShapeClick}
+          style={{ pointerEvents: 'none' }}
           data-tooltip-id={dataTooltipId}
           data-tooltip-html={dataTooltipHtml}
         >
@@ -97,6 +115,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 strokeWidth={strokeWidth}
                 d={rectanglePath}
                 fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
+                style={{ pointerEvents: 'none' }}
                 className={[
                   `territory-pattern-${patternData?.dataKey}`,
                   `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
@@ -111,7 +130,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 stroke={strokeColor}
                 className='territory-text'
                 paintOrder='stroke'
-                onClick={handleShapeClick}
+                style={{ pointerEvents: 'none' }}
                 data-tooltip-id={dataTooltipId}
                 data-tooltip-html={dataTooltipHtml}
               >

package/src/components/UsaMap/components/Territory/TerritoryShape.ts

@@ -11,4 +11,10 @@ export type TerritoryShape = {
   territory: string
   territoryData: object
   textColor: string
+  svgStyle?: React.CSSProperties
+  getSyncProps?: (geoKey: string) => any
+  syncHandlers?: {
+    onMouseEnter: (geoKey: string, clientY: number) => void
+    onMouseLeave: () => void
+  }
 }

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -501,8 +501,20 @@ const CountyMap = () => {
           const distance = Math.hypot(pixelCoords[0] - x, pixelCoords[1] - y)
           if (
             distance < 15 &&
-            applyLegendToRow(runtimeData[runtimeKeys[i]], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo) &&
-            !isLegendItemDisabled(runtimeData[runtimeKeys[i]], runtimeLegend, legendMemo, legendSpecialClassLastMemo, config)
+            applyLegendToRow(
+              runtimeData[runtimeKeys[i]],
+              config,
+              runtimeLegend,
+              legendMemo,
+              legendSpecialClassLastMemo
+            ) &&
+            !isLegendItemDisabled(
+              runtimeData[runtimeKeys[i]],
+              runtimeLegend,
+              legendMemo,
+              legendSpecialClassLastMemo,
+              config
+            )
           ) {
             hoveredGeo = runtimeData[runtimeKeys[i]]
             hoveredGeoIndex = i

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -12,6 +12,7 @@ import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import ConfigContext from '../../../context'
 import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import Annotation from '../../Annotation'
+import SmallMultiples from '../../SmallMultiples/SmallMultiples'
 
 // Data
 import { supportedTerritories } from '../../../data/supported-geos'
@@ -23,6 +24,7 @@ import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
 import './UsaMap.Region.styles.css'
 import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
+import { useSynchronizedGeographies } from '../../../hooks/useSynchronizedGeographies'
 
 type TerritoryRectProps = {
   posX?: number
@@ -59,6 +61,7 @@ const UsaRegionMap = () => {
   const [focusedStates, setFocusedStates] = useState(null)
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+  const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
   const { general } = config
   const { displayStateLabels, territoriesLabel, displayAsHex, type } = general
   const tooltipInteractionType = config.tooltips.appearanceType
@@ -88,6 +91,11 @@ const UsaRegionMap = () => {
     return <></>
   }
 
+  // Early return for small multiples rendering
+  if (config.smallMultiples?.mode) {
+    return <SmallMultiples />
+  }
+
   const geoStrokeColor = getGeoStrokeColor(config)
   const geoFillColor = getGeoFillColor(config)
 
@@ -212,6 +220,7 @@ const UsaRegionMap = () => {
 
         return (
           <g
+            {...getSyncProps(geoKey)}
             key={key}
             className='geo-group'
             style={styles}
@@ -219,7 +228,7 @@ const UsaRegionMap = () => {
             data-tooltip-id={`tooltip__${tooltipId}`}
             data-tooltip-html={toolTip}
             tabIndex={-1}
-            onMouseEnter={() => {
+            onMouseEnter={e => {
               // Track hover analytics event if this is a new location
               const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
               publishAnalyticsEvent({
@@ -232,6 +241,10 @@ const UsaRegionMap = () => {
                 location: geoDisplayName,
                 specifics: `location: ${locationName?.toLowerCase()}`
               })
+              syncHandlers.onMouseEnter(geoKey, e.clientY)
+            }}
+            onMouseLeave={() => {
+              syncHandlers.onMouseLeave()
             }}
           >
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />

package/src/components/UsaMap/components/UsaMap.SingleState.tsx

@@ -13,6 +13,7 @@ import ZoomControls from '../../ZoomControls'
 import { MapContext } from '../../../types/MapContext'
 import useStateZoom from '../../../hooks/useStateZoom'
 import { Text } from '@visx/text'
+import SmallMultiples from '../../SmallMultiples/SmallMultiples'
 
 import './UsaMap.SingleState.styles.css'
 
@@ -37,11 +38,12 @@ const SingleStateMap: React.FC = () => {
     position,
     topoData,
     scale,
-    translate
+    translate,
+    useDynamicViewbox
   } = useContext<MapContext>(ConfigContext)
 
   const dispatch = useContext(MapDispatchContext)
-  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, projection } = useStateZoom(topoData)
+  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, projection, bounds } = useStateZoom(topoData)
 
   // Memoize statesPicked to prevent creating new arrays on every render
   const statesPicked = useMemo(() => {
@@ -62,6 +64,19 @@ const SingleStateMap: React.FC = () => {
   const geoStrokeColor = getGeoStrokeColor(config)
   const path = geoPath().projection(projection)
 
+  const dynamicViewBox = useMemo(() => {
+    if (!useDynamicViewbox || !bounds) {
+      return SVG_VIEWBOX
+    }
+
+    const x = Math.floor(bounds[0][0] - SVG_PADDING)
+    const y = Math.floor(bounds[0][1] - SVG_PADDING)
+    const width = Math.ceil(bounds[1][0] - bounds[0][0] + SVG_PADDING * 2)
+    const height = Math.ceil(bounds[1][1] - bounds[0][1] + SVG_PADDING * 2)
+
+    return `${x} ${y} ${width} ${height}`
+  }, [useDynamicViewbox, bounds])
+
   useEffect(() => {
     let currentYear = getCurrentTopoYear(config, runtimeFilters)
 
@@ -80,6 +95,11 @@ const SingleStateMap: React.FC = () => {
     )
   }
 
+  // Early return for small multiples rendering
+  if (config.smallMultiples?.mode) {
+    return <SmallMultiples />
+  }
+
   const checkForNoData = () => {
     // If no statesPicked, return true
     if (statesPicked?.every(sp => !sp.fipsCode)) return true
@@ -131,7 +151,7 @@ const SingleStateMap: React.FC = () => {
     <ErrorBoundary component='SingleStateMap'>
       {!!statesPicked.length && config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
-          viewBox={SVG_VIEWBOX}
+          viewBox={dynamicViewBox}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
@@ -194,7 +214,7 @@ const SingleStateMap: React.FC = () => {
       )}
       {!!statesPicked && !config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
-          viewBox={SVG_VIEWBOX}
+          viewBox={dynamicViewBox}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
@@ -247,7 +267,7 @@ const SingleStateMap: React.FC = () => {
 
       {checkForNoData() && (
         <svg
-          viewBox={SVG_VIEWBOX}
+          viewBox={dynamicViewBox}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -26,6 +26,8 @@ import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import { MapContext } from '../../../types/MapContext'
 import { checkColorContrast, getContrastColor, outlinedTextColor } from '@cdc/core/helpers/cove/accessibility'
 import TerritoriesSection from './TerritoriesSection'
+import SmallMultiples from '../../SmallMultiples'
+import { useSynchronizedGeographies } from '../../../hooks/useSynchronizedGeographies'
 
 import { isMobileStateLabelViewport } from '@cdc/core/helpers/viewports'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
@@ -80,6 +82,8 @@ const UsaMap = () => {
     mapId,
     logo,
     currentViewport,
+    vizViewport,
+    dimensions,
     translate,
     runtimeLegend,
     interactionLabel
@@ -87,6 +91,8 @@ const UsaMap = () => {
 
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
 
+  const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
+
   let isFilterValueSupported = false
   const { general, columns, tooltips, hexMap, map, annotations } = config
   const { displayAsHex } = general
@@ -165,6 +171,10 @@ const UsaMap = () => {
   const geoStrokeColor = getGeoStrokeColor(config)
   const geoFillColor = getGeoFillColor(config)
 
+  // Chrome needs wider stroke for small maps or it doesn't render the pattern
+  const mapWidth = dimensions?.[0] || 880
+  const patternLinesStrokeWidth = mapWidth < 200 ? 1.75 : mapWidth < 375 ? 1.25 : 0.75
+
   const territories = territoriesData.map((territory, territoryIndex) => {
     const Shape = displayAsHex ? Territory.Hexagon : Territory.Rectangle
 
@@ -190,6 +200,8 @@ const UsaMap = () => {
           strokeColor='#fff'
           territoryData={territoryData}
           backgroundColor={styles.fill}
+          getSyncProps={getSyncProps}
+          syncHandlers={syncHandlers}
         />
       )
 
@@ -242,6 +254,8 @@ const UsaMap = () => {
           territoryData={territoryData}
           tabIndex={-1}
           backgroundColor={styles.fill}
+          getSyncProps={getSyncProps}
+          syncHandlers={syncHandlers}
         />
       )
     }
@@ -256,6 +270,10 @@ const UsaMap = () => {
     return <></>
   }
 
+  if (config.smallMultiples?.mode) {
+    return <SmallMultiples />
+  }
+
   // Constructs and displays markup for all geos on the map (except territories right now)
   const constructGeoJsx = (geographies, projection) => {
     let showLabel = general.displayStateLabels
@@ -437,6 +455,7 @@ const UsaMap = () => {
         return (
           <g data-name={geoName} key={key} tabIndex={-1}>
             <g
+              {...getSyncProps(geoKey)}
               className='geo-group'
               style={styles}
               onClick={() => geoClickHandler(geoDisplayName, geoData)}
@@ -444,7 +463,7 @@ const UsaMap = () => {
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={tooltip}
               tabIndex={-1}
-              onMouseEnter={() => {
+              onMouseEnter={e => {
                 // Track hover analytics event if this is a new location
                 const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
                 publishAnalyticsEvent({
@@ -457,6 +476,10 @@ const UsaMap = () => {
                   location: geoDisplayName,
                   specifics: `location: ${locationName?.toLowerCase()}`
                 })
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
               }}
             >
               {/* state path */}
@@ -499,7 +522,7 @@ const UsaMap = () => {
                         height={patternSizes[size] ?? 6}
                         width={patternSizes[size] ?? 6}
                         stroke={patternColor}
-                        strokeWidth={0.75}
+                        strokeWidth={patternLinesStrokeWidth}
                         orientation={['diagonalRightToLeft']}
                       />
                     )}
@@ -590,7 +613,7 @@ const UsaMap = () => {
           <text
             x={x}
             y={y}
-            fontSize={isMobileStateLabelViewport(currentViewport) ? 16 : 13}
+            fontSize={isMobileStateLabelViewport(vizViewport) ? 16 : 13}
             fontWeight={900}
             strokeWidth='1'
             paintOrder='stroke'

package/src/components/UsaMap/helpers/map.ts

@@ -1,7 +1,7 @@
 import { feature } from 'topojson-client'
 import usExtendedGeography from './../data/us-extended-geography.json'
 
-export const getCountyTopoURL = year => {
+const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
 }
 
@@ -85,7 +85,7 @@ export const isTopoReady = (topoData, state, runtimeFilters) => {
   return topoData?.year && (!currentYear || currentYear === topoData?.year)
 }
 
-export const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {
+const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {
   // Get all keys of the data object
   const keys = Object.keys(data)
 

package/src/components/UsaMap/helpers/shapes.ts

@@ -1,4 +1,4 @@
-export const drawCircle = (circle, context, state) => {
+const drawCircle = (circle, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 1
   const adjustedGeoRadius =
@@ -12,7 +12,8 @@ export const drawCircle = (circle, context, state) => {
   context.fill()
   context.stroke()
 }
-export const drawSquare = (square, context, state) => {
+
+const drawSquare = (square, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 1.75
   const sideLength = square.size * scaleVal
@@ -32,7 +33,7 @@ export const drawSquare = (square, context, state) => {
   context.stroke()
 }
 
-export const drawDiamond = (diamond, context, state) => {
+const drawDiamond = (diamond, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 2.2
   const fullSize = diamond.size * scaleVal
@@ -69,7 +70,8 @@ export const drawDiamond = (diamond, context, state) => {
   context.fill()
   context.stroke()
 }
-export const drawTriangle = (triangle, context, state) => {
+
+const drawTriangle = (triangle, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 2.2
   const baseLength = triangle.size * scaleVal
@@ -102,7 +104,8 @@ export const drawTriangle = (triangle, context, state) => {
   context.fill()
   context.stroke()
 }
-export const drawStar = (star, context, state) => {
+
+const drawStar = (star, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 2.2
   const spikes = star.spikes
@@ -155,7 +158,7 @@ export const drawStar = (star, context, state) => {
   context.stroke()
 }
 
-export const drawPin = (pin, ctx, state) => {
+const drawPin = (pin, ctx, state) => {
   const scaleVal = 10
   const percentOfOriginalSize = 0.75
   const baseSize = pin.size * scaleVal