@cdc/map 4.25.7-2 → 4.25.8

package/src/components/CityList.tsx

@@ -3,7 +3,7 @@ import { scaleLinear } from 'd3-scale'
 import { GlyphCircle, GlyphDiamond, GlyphSquare, GlyphStar, GlyphTriangle } from '@visx/glyph'
 import ConfigContext from '../context'
 import { supportedCities } from '../data/supported-geos'
-import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
+import { getFilterControllingStatesPicked } from './UsaMap/helpers/map'
 import { displayGeoName, getGeoStrokeColor, SVG_HEIGHT, SVG_PADDING, SVG_WIDTH, titleCase } from '../helpers'
 import useGeoClickHandler from '../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
@@ -129,15 +129,15 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
     }
 
     if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName] && config.general.geoType === 'single-state') {
-      const statePicked = getFilterControllingStatePicked(config, runtimeData)
-      const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
+      const statesPicked = getFilterControllingStatesPicked(config, runtimeData)
+      const _statesPickedData = topoData?.states?.find(s => statesPicked.includes(s.properties.name))
 
       const newProjection = projection.fitExtent(
         [
           [SVG_PADDING, SVG_PADDING],
           [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
         ],
-        _statePickedData
+        _statesPickedData
       )
       let coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
       transform = `translate(${newProjection(coords)}) scale(${

package/src/components/DataTable.tsx

@@ -12,8 +12,8 @@ import SkipTo from '@cdc/core/components/elements/SkipTo'
 import Loading from '@cdc/core/components/Loading'
 import { navigationHandler } from '../helpers'
 import ConfigContext, { MapDispatchContext } from '../context'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
   const {
     state,
@@ -29,7 +29,8 @@ const DataTable = props => {
     applyLegendToRow,
     displayGeoName,
     formatLegendLocation,
-    tabbingId
+    tabbingId,
+    interactionLabel
   } = props
 
   const dispatch = useContext(MapDispatchContext)
@@ -176,7 +177,10 @@ const DataTable = props => {
       <a
         download={fileName}
         type='button'
-        onClick={saveBlob}
+        onClick={() => {
+          saveBlob
+          publishAnalyticsEvent('data_downloaded', 'click', interactionLabel)
+        }}
         href={URL.createObjectURL(blob)}
         aria-label='Download this data in a CSV file format.'
         className={`${headerColor} no-border`}
@@ -192,7 +196,7 @@ const DataTable = props => {
   const TableMediaControls = ({ belowTable }) => {
     return (
       <MediaControls.Section classes={['download-links']}>
-        <MediaControls.Link config={state} />
+        <MediaControls.Link config={state} interactionLabel={interactionLabel} />
         {state.table.download && <DownloadButton />}
       </MediaControls.Section>
     )

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -48,6 +48,7 @@ import { addUIDs, HEADER_COLORS } from '../../../helpers'
 import './editorPanel.styles.css'
 import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
 import { Datasets } from '@cdc/core/types/DataSet'
+import MultiSelect from '@cdc/core/components/MultiSelect'
 
 type MapEditorPanelProps = {
   datasets?: Datasets
@@ -656,15 +657,6 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
           }
         })
         break
-      case 'capitalizeLabels':
-        setConfig({
-          ...config,
-          tooltips: {
-            ...config.tooltips,
-            capitalizeLabels: value
-          }
-        })
-        break
       case 'showDataTable':
         setConfig({
           ...config,
@@ -684,15 +676,16 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
         })
         break
       case 'chooseState':
-        let fipsCode = Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === value)
-        let stateName = value
-        let stateData = { fipsCode, stateName }
+        let stateData = value.map(state => ({
+          fipsCode: Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === state),
+          stateName: state
+        }))
 
         setConfig({
           ...config,
           general: {
             ...config.general,
-            statePicked: stateData
+            statesPicked: stateData
           }
         })
 
@@ -728,12 +721,12 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
           }
         })
         break
-      case 'filterControlsStatePicked':
+      case 'filterControlsStatesPicked':
         setConfig({
           ...config,
           general: {
             ...config.general,
-            filterControlsStatePicked: value
+            filterControlsStatesPicked: value
           }
         })
         break
@@ -1198,13 +1191,13 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               {config.general.geoType === 'single-state' && runtimeData && (
                 <Select
                   label='Filter Controlling State Picked'
-                  value={config.general.filterControlsStatePicked || ''}
+                  value={config.general.filterControlsStatesPicked || ''}
                   options={[
                     { value: '', label: 'None' },
                     ...(runtimeData && columnsInData?.map(col => ({ value: col, label: col })))
                   ]}
                   onChange={event => {
-                    handleEditorChanges('filterControlsStatePicked', event.target.value)
+                    handleEditorChanges('filterControlsStatesPicked', event.target.value)
                   }}
                 />
               )}
@@ -1212,17 +1205,20 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               {/* Type */}
               {/* Select > Filter a state */}
               {config.general.geoType === 'single-state' && (
-                <Select
-                  label='State Selector'
-                  value={config.general.statePicked?.stateName || ''}
-                  options={StateOptionList().map(option => ({
-                    value: option.props.value,
-                    label: option.props.children
-                  }))}
-                  onChange={event => {
-                    handleEditorChanges('chooseState', event.target.value)
-                  }}
-                />
+                <label>
+                  <span>States Selector</span>
+                  <MultiSelect
+                    selected={config.general.statesPicked.map(state => state.stateName)}
+                    options={StateOptionList().map(option => ({
+                      value: option.props.value,
+                      label: option.props.children
+                    }))}
+                    fieldName={'statesPicked'}
+                    updateField={(_, __, ___, selectedOptions) => {
+                      handleEditorChanges('chooseState', selectedOptions)
+                    }}
+                  />
+                </label>
               )}
               {/* Type */}
               <Select
@@ -2872,16 +2868,6 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   updateField={updateField}
                 />
               )}
-              <label className='checkbox'>
-                <input
-                  type='checkbox'
-                  checked={config.tooltips.capitalizeLabels}
-                  onChange={event => {
-                    handleEditorChanges('capitalizeLabels', event.target.checked)
-                  }}
-                />
-                <span className='edit-label'>Capitalize text inside tooltip</span>
-              </label>
             </AccordionItemPanel>
           </AccordionItem>
           <AccordionItem>

package/src/components/Legend/components/Legend.tsx

@@ -18,12 +18,13 @@ import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from
 import { Group } from '@visx/group'
 import './index.scss'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
-import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { isBelowBreakpoint, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 import { toggleLegendActive } from '@cdc/map/src/helpers/toggleLegendActive'
 import { resetLegendToggles } from '../../../helpers'
 import { MapContext } from '../../../types/MapContext'
 import LegendGroup from './LegendGroup/Legend.Group'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 const LEGEND_PADDING = 30
 
@@ -32,10 +33,11 @@ type LegendProps = {
   dimensions: DimensionsType
   containerWidthPadding: number
   currentViewport: ViewPort
+  interactionLabel: string
 }
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
-  const { skipId, containerWidthPadding } = props
+  const { skipId, containerWidthPadding, interactionLabel } = props
 
   const {
     config,
@@ -105,7 +107,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   const legendList = (patternsOnly = false) => {
     const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
-    const patternsOnlyFont = isMobileHeightViewport(viewport) ? '12px' : '14px'
+    const patternsOnlyFont = isMobileFontViewport(viewport) ? '12px' : '14px'
     const hasDisabledItems = formattedItems.some(item => item.disabled)
     let legendItems
 
@@ -127,11 +129,25 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           className={handleListItemClass()}
           key={idx}
           title={`Legend item ${item.label} - Click to disable`}
-          onClick={() => toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)}
+          onClick={() => {
+            toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+            publishAnalyticsEvent(
+              `map_legend_item_toggled--isolate-mode`,
+              'click',
+              `${interactionLabel}|${item.label}`,
+              'map'
+            )
+          }}
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault()
               toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+              publishAnalyticsEvent(
+                `map_legend_item_toggled--isolate-mode`,
+                'keydown',
+                `${interactionLabel}|${item.label}`,
+                'map'
+              )
             }
           }}
           tabIndex={0}
@@ -224,6 +240,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     if (e) {
       e.preventDefault()
     }
+    publishAnalyticsEvent('map_legend_reset', 'click', interactionLabel, 'map')
     resetLegendToggles(runtimeLegend, setRuntimeLegend)
     dispatch({
       type: 'SET_ACCESSIBLE_STATUS',
@@ -314,41 +331,41 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
             {((config.visual.additionalCityStyles && config.visual.additionalCityStyles.some(c => c.label)) ||
               config.visual.cityStyleLabel) && (
-                <>
-                  <hr />
-                  <div className={legendClasses.div.join(' ') || ''}>
-                    {config.visual.cityStyleLabel && (
-                      <div>
-                        <svg>
-                          <Group
-                            top={
-                              config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
-                            }
-                            left={10}
-                          >
-                            {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
-                          </Group>
-                        </svg>
-                        <p>{config.visual.cityStyleLabel}</p>
-                      </div>
-                    )}
-
-                    {config.visual.additionalCityStyles.map(
-                      ({ shape, label }) =>
-                        label && (
-                          <div>
-                            <svg>
-                              <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
-                                {cityStyleShapes[shape.toLowerCase()]}
-                              </Group>
-                            </svg>
-                            <p>{label}</p>
-                          </div>
-                        )
-                    )}
-                  </div>
-                </>
-              )}
+              <>
+                <hr />
+                <div className={legendClasses.div.join(' ') || ''}>
+                  {config.visual.cityStyleLabel && (
+                    <div>
+                      <svg>
+                        <Group
+                          top={
+                            config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
+                          }
+                          left={10}
+                        >
+                          {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
+                        </Group>
+                      </svg>
+                      <p>{config.visual.cityStyleLabel}</p>
+                    </div>
+                  )}
+
+                  {config.visual.additionalCityStyles.map(
+                    ({ shape, label }) =>
+                      label && (
+                        <div>
+                          <svg>
+                            <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
+                              {cityStyleShapes[shape.toLowerCase()]}
+                            </Group>
+                          </svg>
+                          <p>{label}</p>
+                        </div>
+                      )
+                  )}
+                </div>
+              </>
+            )}
             {runtimeLegend.disabledAmt > 0 && (
               <Button className={legendClasses.showAllButton.join(' ')} onClick={handleReset}>
                 Show All

package/src/components/Modal.tsx

@@ -5,19 +5,13 @@ import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
 import { MapContext } from '../types/MapContext'
 
 const Modal = () => {
-  const { content, config, currentViewport: viewport } = useContext<MapContext>(ConfigContext)
-  const { capitalizeLabels } = config.tooltips
+  const { content, currentViewport: viewport } = useContext<MapContext>(ConfigContext)
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
   const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
   const dispatch = useContext(MapDispatchContext)
 
   return (
-    <section
-      className={
-        capitalizeLabels ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport
-      }
-      aria-hidden='true'
-    >
+    <section className={'modal-content tooltip ' + viewport} aria-hidden='true'>
       <div className='content'>{tooltip}</div>
       <Icon
         display='close'

package/src/components/NavigationMenu.tsx

@@ -1,8 +1,9 @@
 import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../context'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoName, mapTabbingID }) => {
-  const { state } = useContext(ConfigContext)
+  const { interactionLabel } = useContext(ConfigContext)
   const [activeGeo, setActiveGeo] = useState('')
   const [dropdownItems, setDropdownItems] = useState({})
 
@@ -11,6 +12,8 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
     if (activeGeo !== '') {
       const urlString = data[dropdownItems[activeGeo]][columns.navigate.name]
 
+      publishAnalyticsEvent('map_navigation_menu', 'submit', `${interactionLabel}|${urlString}`)
+
       navigationHandler(urlString)
     }
   }

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

@@ -1,37 +1,43 @@
 import { useContext } from 'react'
-import { mesh, Topology } from 'topojson-client'
+import { Topology } from 'topojson-client'
 import ConfigContext from '../../../../context'
-import { getGeoFillColor, getGeoStrokeColor } from '../../../../helpers/colors'
+import { getGeoStrokeColor } from '../../../../helpers/colors'
+import { getStatesPicked } from '../../../../helpers/getStatesPicked'
 
 type StateOutputProps = {
   topoData: Topology
   path: any
   scale: any
+  runtimeData?: any
 }
 
-const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateToShow }: StateOutputProps) => {
+const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, runtimeData }: StateOutputProps) => {
   const { config } = useContext(ConfigContext)
-  if (!topoData?.objects?.states) return null
-  let geo = topoData.objects.states.geometries.filter(s => {
-    return s.properties.name === config.general.statePicked.stateName
+  if (!topoData?.states) return null
+
+  // Use filter-aware state selection instead of direct config access
+  const statesPickedData = getStatesPicked(config, runtimeData)
+  const stateNames = statesPickedData.map(sp => sp.stateName)
+
+  const statesPicked = topoData.states.filter(s => {
+    return stateNames.includes(s.properties.name)
   })
 
   const geoStrokeColor = getGeoStrokeColor(config)
-  const geoFillColor = getGeoFillColor(config)
 
-  let stateLines = path(mesh(topoData, geo[0]))
+  const stateLines = statesPicked.map(s => path(s.geometry))
 
-  return (
+  return stateLines.map((line, index) => (
     <g
-      key={'single-state'}
-      className='single-state'
-      style={{ fill: geoFillColor }}
+      key={`single-state-${index}`}
+      className='single-state pe-none'
+      style={{ fill: 'transparent' }}
       stroke={geoStrokeColor}
-      strokeWidth={0.95 / scale}
+      strokeWidth={2 / scale}
     >
-      <path tabIndex={-1} className='state-path' d={stateLines} />
+      <path tabIndex={-1} className='state-path' d={line} />
     </g>
-  )
+  ))
 }
 
 export default StateOutput

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

@@ -55,7 +55,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
           <div className='d-flex flex-wrap' style={{ columnGap: '1.5rem' }}>
             {(usTerritories.length > 0 || config.general.territoriesAlwaysShow) && (
               <div>
-                <h5 className='territories-label'>U.S. territories</h5>
+                <span className='territories-label'>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` }}
@@ -66,7 +66,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
             )}
             {(freelyAssociatedStates.length > 0 || config.general.territoriesAlwaysShow) && (
               <div>
-                <h5 className='territories-label'>Freely associated states</h5>
+                <span className='territories-label'>Freely associated states</span>
                 <span
                   className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
                   style={{

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

@@ -14,6 +14,7 @@ import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
 import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
 import { MapConfig } from '../../../types/MapConfig'
 import { DEFAULT_MAP_BACKGROUND } from '../../../helpers/constants'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -138,7 +139,8 @@ const CountyMap = () => {
     tooltipId,
     tooltipRef,
     legendMemo,
-    legendSpecialClassLastMemo
+    legendSpecialClassLastMemo,
+    configUrl
   } = useContext(ConfigContext)
 
   // CREATE STATE LINES
@@ -210,6 +212,7 @@ const CountyMap = () => {
   const lineWidth = 1
 
   const onReset = () => {
+    publishAnalyticsEvent('map_reset_zoom_level', 'click', configUrl, 'map')
     setConfig({
       ...config,
       mapPosition: { coordinates: [0, 30], zoom: 1 }
@@ -268,6 +271,8 @@ const CountyMap = () => {
 
       // Redraw with focus on state
       setFocus({ id: clickedState.id, index: focusIndex, center: geoCentroid(clickedState), feature: clickedState })
+      publishAnalyticsEvent('map_zoomed_in', 'click', `${configUrl}|zoom_level_3|${clickedState.properties.name}`, 'map')
+
     }
     if (config.general.type === 'us-geocode') {
       const geoRadius = (config.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)

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

@@ -1,4 +1,4 @@
-import { useEffect, memo, useContext } from 'react'
+import { useEffect, memo, useContext, useMemo } from 'react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { geoPath } from 'd3-geo'
 import { CustomProjection } from '@visx/geo'
@@ -24,7 +24,7 @@ import { getTopoData, getCurrentTopoYear, isTopoReady } from '../helpers/map'
 import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { SVG_WIDTH, SVG_HEIGHT, SVG_PADDING, SVG_VIEWBOX } from '../../../helpers'
 import _ from 'lodash'
-import { getStatePicked } from '../../../helpers/getStatePicked'
+import { getStatesPicked } from '../../../helpers/getStatesPicked'
 
 const SingleStateMap: React.FC = () => {
   const {
@@ -42,8 +42,17 @@ const SingleStateMap: React.FC = () => {
 
   const dispatch = useContext(MapDispatchContext)
   const { handleMoveEnd, handleZoomIn, handleZoomOut, handleReset, projection } = useStateZoom(topoData)
-  const statePicked = getStatePicked(config, runtimeData)
-  const stateToShow = topoData?.states?.find(s => s.properties.name === statePicked.stateName)
+
+  // Memoize statesPicked to prevent creating new arrays on every render
+  const statesPicked = useMemo(() => {
+    return getStatesPicked(config, runtimeData)
+  }, [
+    config.general.statesPicked?.length,
+    config.general.statesPicked?.[0]?.stateName
+    // Don't include runtimeData as it causes excessive re-renders
+  ])
+
+  const statesToShow = topoData?.states?.find(s => statesPicked.map(sp => sp.stateName).includes(s.properties.name))
 
   const { geoClickHandler } = useGeoClickHandler()
 
@@ -61,7 +70,7 @@ const SingleStateMap: React.FC = () => {
         dispatch({ type: 'SET_TOPO_DATA', payload: response })
       })
     }
-  }, [config.general.countyCensusYear, config.general.filterControlsCountyYear, JSON.stringify(runtimeFilters)])
+  }, [runtimeFilters?.length, topoData?.year])
 
   if (!isTopoReady(topoData, config, runtimeFilters)) {
     return (
@@ -72,8 +81,8 @@ const SingleStateMap: React.FC = () => {
   }
 
   const checkForNoData = () => {
-    // If no statePicked, return true
-    if (!statePicked.fipsCode) return true
+    // If no statesPicked, return true
+    if (statesPicked?.every(sp => !sp.fipsCode)) return true
   }
 
   // Constructs and displays markup for all geos on the map (except territories right now)
@@ -81,17 +90,6 @@ const SingleStateMap: React.FC = () => {
     const counties = geographies[0].feature.counties
 
     let geosJsx = []
-
-    // Push config lines
-    geosJsx.push(
-      // prettier-ignore
-      <SingleState.StateOutput
-        topoData={topoData}
-        path={path}
-        scale={scale}
-      />
-    )
-
     // Push county lines
     geosJsx.push(
       // prettier-ignore
@@ -103,6 +101,16 @@ const SingleStateMap: React.FC = () => {
         path={path}
       />
     )
+    // Push config lines
+    geosJsx.push(
+      // prettier-ignore
+      <SingleState.StateOutput
+        topoData={topoData}
+        path={path}
+        scale={scale}
+        runtimeData={runtimeData}
+      />
+    )
 
     // Push city list
     geosJsx.push(
@@ -121,7 +129,7 @@ const SingleStateMap: React.FC = () => {
   }
   return (
     <ErrorBoundary component='SingleStateMap'>
-      {statePicked && config.general.allowMapZoom && statePicked.fipsCode && (
+      {statesPicked.length && config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
           viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
@@ -150,7 +158,9 @@ const SingleStateMap: React.FC = () => {
               data={[
                 {
                   states: topoData?.states,
-                  counties: topoData.counties.filter(c => c.id.substring(0, 2) === statePicked.fipsCode)
+                  counties: topoData.counties.filter(c =>
+                    statesPicked.map(sp => sp.fipsCode).includes(c.id.substring(0, 2))
+                  )
                 }
               ]}
               projection={geoAlbersUsaTerritories}
@@ -159,7 +169,7 @@ const SingleStateMap: React.FC = () => {
                   [SVG_PADDING, SVG_PADDING],
                   [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
                 ],
-                stateToShow
+                statesToShow
               ]}
             >
               {({ features, projection }) => {
@@ -182,7 +192,7 @@ const SingleStateMap: React.FC = () => {
           </ZoomableGroup>
         </svg>
       )}
-      {statePicked && !config.general.allowMapZoom && statePicked.fipsCode && (
+      {statesPicked && !config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
           viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
@@ -201,7 +211,9 @@ const SingleStateMap: React.FC = () => {
             data={[
               {
                 states: topoData?.states,
-                counties: topoData.counties.filter(c => c.id.substring(0, 2) === statePicked.fipsCode)
+                counties: topoData.counties.filter(c =>
+                  statesPicked.map(sp => sp.fipsCode).includes(c.id.substring(0, 2))
+                )
               }
             ]}
             projection={geoAlbersUsaTerritories}
@@ -210,7 +222,7 @@ const SingleStateMap: React.FC = () => {
                 [SVG_PADDING, SVG_PADDING],
                 [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
               ],
-              stateToShow
+              statesToShow
             ]}
           >
             {({ features }) => {