@cdc/map 4.25.10 → 4.26.1

package/src/components/SmallMultiples/SynchronizedTooltip.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useRef, RefObject } from 'react'
+
+interface SynchronizedTooltipProps {
+  tileTooltipId: string
+  opacity: number
+  containerRef: RefObject<HTMLElement>
+}
+
+/**
+ * Custom tooltip component for small multiples that responds to synthetic events
+ * This bypasses react-tooltip's lazy initialization issues
+ */
+const SynchronizedTooltip: React.FC<SynchronizedTooltipProps> = ({ tileTooltipId, opacity, containerRef }) => {
+  const [tooltipState, setTooltipState] = useState<{
+    visible: boolean
+    html: string
+    x: number
+    y: number
+  }>({
+    visible: false,
+    html: '',
+    x: 0,
+    y: 0
+  })
+
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const currentGeoRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    const handleMouseEnter = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      const tooltipId = target.getAttribute('data-tooltip-id')
+
+      if (tooltipId === `tooltip__${tileTooltipId}`) {
+        const tooltipHtml = target.getAttribute('data-tooltip-html')
+        const geoId = target.getAttribute('data-geo-id') || ''
+
+        // Don't show tooltip if there's no content
+        if (!tooltipHtml || tooltipHtml === 'undefined' || tooltipHtml.trim() === '') {
+          setTooltipState(prev => ({ ...prev, visible: false }))
+          currentGeoRef.current = null
+          return
+        }
+
+        // Only update if we're entering a different geography or showing for first time
+        if (geoId !== currentGeoRef.current) {
+          currentGeoRef.current = geoId
+
+          // Position tooltip relative to the geography element's bounding box
+          const rect = target.getBoundingClientRect()
+          const x = rect.left + rect.width / 2
+          const y = rect.top + rect.height / 2
+
+          setTooltipState({
+            visible: true,
+            html: tooltipHtml,
+            x,
+            y
+          })
+        }
+      }
+    }
+
+    const handleMouseLeave = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      const tooltipId = target.getAttribute('data-tooltip-id')
+
+      if (tooltipId === `tooltip__${tileTooltipId}`) {
+        setTooltipState(prev => ({ ...prev, visible: false }))
+        currentGeoRef.current = null
+      }
+    }
+
+    const container = containerRef.current
+    if (!container) return
+
+    container.addEventListener('mouseenter', handleMouseEnter, true)
+    container.addEventListener('mouseleave', handleMouseLeave, true)
+
+    return () => {
+      container.removeEventListener('mouseenter', handleMouseEnter, true)
+      container.removeEventListener('mouseleave', handleMouseLeave, true)
+    }
+  }, [tileTooltipId, containerRef])
+
+  if (!tooltipState.visible) return null
+
+  return (
+    <div
+      ref={tooltipRef}
+      className='tooltip tooltip-test'
+      style={{
+        position: 'fixed',
+        left: `${tooltipState.x + 10}px`,
+        top: `${tooltipState.y + 10}px`,
+        background: `rgba(255,255,255, ${opacity / 100})`,
+        pointerEvents: 'none',
+        zIndex: 9999
+      }}
+      dangerouslySetInnerHTML={{ __html: tooltipState.html }}
+    />
+  )
+}
+
+export default SynchronizedTooltip

package/src/components/SmallMultiples/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './SmallMultiples'
+export { default as SmallMultiples } from './SmallMultiples'
+export { default as SmallMultipleTile } from './SmallMultipleTile'

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

@@ -8,6 +8,7 @@ import { applyLegendToRow } from '../../../../helpers/applyLegendToRow'
 import useGeoClickHandler, { geoClickHandler } from '././../../../../hooks/useGeoClickHandler'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { useSynchronizedGeographies } from '../../../../hooks/useSynchronizedGeographies'
 
 interface CountyOutputProps {
   counties: any[]
@@ -23,6 +24,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
   const geoFillColor = getGeoFillColor(config)
   const { geoClickHandler } = useGeoClickHandler()
+  const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
 
   return (
     <>
@@ -71,14 +73,16 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
 
           return (
             <g
+              {...getSyncProps(geoKey)}
               key={`key--${county.id}`}
-              className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[config.columns.geo.name]
-                }`}
+              className={`county county--${geoDisplayName.split(' ').join('')} county--${
+                geoData[config.columns.geo.name]
+              }`}
               style={styles}
               onClick={() => geoClickHandler(geoDisplayName, geoData)}
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
-              onMouseEnter={() => {
+              onMouseEnter={e => {
                 // Track hover analytics event if this is a new location
                 const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
                 publishAnalyticsEvent({
@@ -91,6 +95,10 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
                   location: geoDisplayName,
                   specifics: `location: ${locationName?.toLowerCase()}`
                 })
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
               }}
             >
               <path
@@ -105,11 +113,18 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
         } else {
           return (
             <g
+              {...getSyncProps(geoKey)}
               key={`key--${county.id}`}
               className={`county county--${geoDisplayName.split(' ').join('')}`}
               style={{ fill: geoFillColor }}
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
+              onMouseEnter={e => {
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
+              }}
             >
               <path
                 tabIndex={-1}

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,10 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   territory,
   textColor,
   backgroundColor,
+  mapId,
+  svgStyle,
+  getSyncProps,
+  syncHandlers,
   ...props
 }) => {
   const { config } = useContext<MapContext>(ConfigContext)
@@ -25,17 +29,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,14 +64,14 @@ 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}
         >
           {label}
         </text>
 
-        {config.map.patterns.map((patternData, patternIndex) => {
+        {config.map?.patterns?.map((patternData, patternIndex) => {
           const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
           const hasMatchingValues = patternData.dataValue === territoryData?.[patternData.dataKey]
 
@@ -63,7 +82,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
             <>
               {patternData?.pattern === 'waves' && (
                 <PatternWaves
-                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  id={`${mapId}--territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
@@ -73,7 +92,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               )}
               {patternData?.pattern === 'circles' && (
                 <PatternCircles
-                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  id={`${mapId}--territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
@@ -84,7 +103,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               )}
               {patternData?.pattern === 'lines' && (
                 <PatternLines
-                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  id={`${mapId}--territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 6}
                   width={patternSizes[patternData?.size] ?? 6}
                   stroke={patternColor}
@@ -96,7 +115,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 stroke={stroke}
                 strokeWidth={strokeWidth}
                 d={rectanglePath}
-                fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
+                fill={`url(#${mapId}--territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
+                style={{ pointerEvents: 'none' }}
                 className={[
                   `territory-pattern-${patternData?.dataKey}`,
                   `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
@@ -111,7 +131,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,11 @@ export type TerritoryShape = {
   territory: string
   territoryData: object
   textColor: string
+  mapId?: 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

@@ -15,7 +15,7 @@ import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
 import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
 import { MapConfig } from '../../../types/MapConfig'
-import { DEFAULT_MAP_BACKGROUND } from '../../../helpers/constants'
+import { DEFAULT_MAP_BACKGROUND, DISABLED_MAP_COLOR } from '../../../helpers/constants'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
@@ -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
@@ -696,7 +708,7 @@ const CountyMap = () => {
                 ? applyLegendToRow(runtimeData[key], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
                 : false
             if (legendValues) {
-              if (legendValues?.[0] === '#000000' || legendValues?.[0] === DEFAULT_MAP_BACKGROUND) return
+              if (legendValues?.[0] === '#000000' || legendValues?.[0] === DISABLED_MAP_COLOR) return
               const shapeType = config.visual.cityStyle.toLowerCase()
               const shapeProperties = createShapeProperties(shapeType, pixelCoords, legendValues, config, geoRadius)
               if (shapeProperties) {

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(() => {
@@ -56,12 +58,22 @@ const SingleStateMap: React.FC = () => {
 
   const { geoClickHandler } = useGeoClickHandler()
 
-  const cityListProjection = geoAlbersUsaTerritories()
-    .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
-    .scale(1)
   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 +92,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
@@ -112,10 +129,10 @@ const SingleStateMap: React.FC = () => {
       />
     )
 
-    // Push city list
+    // Push city list - use projection from useStateZoom which is fitted to ALL selected states
     geosJsx.push(
       <CityList
-        projection={cityListProjection}
+        projection={projection}
         key='cities'
         geoClickHandler={geoClickHandler}
         titleCase={titleCase}
@@ -131,7 +148,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'
@@ -172,7 +189,7 @@ const SingleStateMap: React.FC = () => {
                 statesToShow
               ]}
             >
-              {({ features, projection }) => {
+              {({ features }) => {
                 return (
                   <g
                     id='mapGroup'
@@ -183,7 +200,7 @@ const SingleStateMap: React.FC = () => {
                     data-scale=''
                     key='countyMapGroup'
                   >
-                    {constructGeoJsx(features, projection)}
+                    {constructGeoJsx(features)}
                   </g>
                 )
               }}
@@ -194,7 +211,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 +264,7 @@ const SingleStateMap: React.FC = () => {
 
       {checkForNoData() && (
         <svg
-          viewBox={SVG_VIEWBOX}
+          viewBox={dynamicViewBox}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'