@cdc/map 4.25.10 → 4.26.1

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'
@@ -42,9 +44,9 @@ import {
   displayGeoName,
   SVG_HEIGHT,
   SVG_VIEWBOX,
-  SVG_WIDTH,
-  hashObj
+  SVG_WIDTH
 } from '../../../helpers'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 const { features: unitedStatesHex } = topoFeature(hexTopoJSON, hexTopoJSON.objects.states)
 
 const offsets = {
@@ -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,9 @@ const UsaMap = () => {
           strokeColor='#fff'
           territoryData={territoryData}
           backgroundColor={styles.fill}
+          mapId={mapId}
+          getSyncProps={getSyncProps}
+          syncHandlers={syncHandlers}
         />
       )
 
@@ -242,6 +255,9 @@ const UsaMap = () => {
           territoryData={territoryData}
           tabIndex={-1}
           backgroundColor={styles.fill}
+          mapId={mapId}
+          getSyncProps={getSyncProps}
+          syncHandlers={syncHandlers}
         />
       )
     }
@@ -256,6 +272,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 +457,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 +465,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 +478,10 @@ const UsaMap = () => {
                   location: geoDisplayName,
                   specifics: `location: ${locationName?.toLowerCase()}`
                 })
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
               }}
             >
               {/* state path */}
@@ -499,7 +524,7 @@ const UsaMap = () => {
                         height={patternSizes[size] ?? 6}
                         width={patternSizes[size] ?? 6}
                         stroke={patternColor}
-                        strokeWidth={0.75}
+                        strokeWidth={patternLinesStrokeWidth}
                         orientation={['diagonalRightToLeft']}
                       />
                     )}
@@ -590,7 +615,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

package/src/components/WorldMap/WorldMap.tsx

@@ -11,6 +11,7 @@ import CityList from '../CityList'
 import BubbleList from '../BubbleList'
 import ZoomControls from '../ZoomControls'
 import { supportedCountries } from '../../data/supported-geos'
+import { getCountriesPicked } from '../../helpers/getCountriesPicked'
 import {
   getGeoFillColor,
   getGeoStrokeColor,
@@ -24,6 +25,7 @@ import {
 } from '../../helpers'
 import useGeoClickHandler from '../../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../../hooks/useApplyTooltipsToGeo'
+import useCountryZoom from '../../hooks/useCountryZoom'
 import generateRuntimeData from '../../helpers/generateRuntimeData'
 import { applyLegendToRow } from '../../helpers/applyLegendToRow'
 
@@ -33,17 +35,24 @@ import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 let projection = geoMercator()
 
+const GRAYED_OUT_COLOR = '#d3d3d3'
+
+type MapPosition = { coordinates: number[]; zoom: number }
+
 const WorldMap = () => {
   // prettier-ignore
   const {
     runtimeData,
-    position,
+    position: mapPosition,
     config,
     tooltipId,
     runtimeLegend,
     interactionLabel
   } = useContext(ConfigContext)
 
+  // Type assertion: position from context is actually the map viewport position, not legend position
+  const position = mapPosition as unknown as MapPosition
+
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
 
   const { type, allowMapZoom } = config.general
@@ -51,12 +60,16 @@ const WorldMap = () => {
   const [world, setWorld] = useState(null)
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+
+  const { centerOnCountries } = useCountryZoom(world)
+
   const dispatch = useContext(MapDispatchContext)
 
   useEffect(() => {
     const fetchData = async () => {
       import(/* webpackChunkName: "world-topo" */ './data/world-topo.json').then(topoJSON => {
-        setWorld(feature(topoJSON, topoJSON.objects.countries).features)
+        const worldFeatures = feature(topoJSON, topoJSON.objects.countries).features
+        setWorld(worldFeatures)
       })
     }
     fetchData()
@@ -66,6 +79,19 @@ const WorldMap = () => {
     return <></>
   }
 
+  // Filter countries based on selection
+  const getFilteredWorld = () => {
+    if (!config.general.countriesPicked || config.general.countriesPicked.length === 0) {
+      return world // Show all countries if none selected
+    }
+
+    // Always show all countries when multi-country mode is active
+    // Individual country styling will handle hide/grayed-out states
+    return world
+  }
+
+  const filteredWorld = getFilteredWorld()
+
   const handleFiltersReset = () => {
     const newRuntimeData = generateRuntimeData(config)
     publishAnalyticsEvent({
@@ -89,7 +115,15 @@ const WorldMap = () => {
       eventLabel: interactionLabel,
       vizTitle: getVizTitle(config)
     })
-    dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+
+    // If countries are selected, center on them; otherwise, use default world position
+    const countriesPicked = getCountriesPicked(config)
+
+    if (countriesPicked && countriesPicked.length > 0) {
+      centerOnCountries('reset')
+    } else {
+      dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+    }
   }
 
   const handleZoomIn = position => {
@@ -189,25 +223,57 @@ const WorldMap = () => {
       const geoStrokeColor = getGeoStrokeColor(config)
       const geoFillColor = getGeoFillColor(config)
 
+      // Check if this country should be greyed out for multi-country selection
+      const countriesPicked = getCountriesPicked(config)
+
+      const isGreyedOut = Boolean(
+        countriesPicked.length > 0 &&
+          config.general.hideUnselectedCountries !== true &&
+          !countriesPicked.some(country => country.iso === geo.properties.iso || country.name === geoDisplayName)
+      )
+
+      // Determine visual state for TDD tests
+      const isSelected = countriesPicked.some(
+        country => country.iso === geo.properties.iso || country.name === geoDisplayName
+      )
+      const isHidden = countriesPicked.length > 0 && config.general.hideUnselectedCountries === true && !isSelected
+
+      // Build CSS class names for TDD tests
+      let geoClassName = ''
+      if (countriesPicked.length > 0) {
+        if (isSelected) {
+          geoClassName = 'selected'
+        } else if (isGreyedOut) {
+          geoClassName = 'grayed-out'
+        } else if (isHidden) {
+          geoClassName = 'hidden'
+        }
+      }
+
       let styles: Record<string, string | Record<string, string>> = {
-        fill: geoFillColor,
-        cursor: 'default'
+        fill: isGreyedOut ? GRAYED_OUT_COLOR : geoFillColor,
+        cursor: 'default',
+        ...(isGreyedOut && { opacity: '0.3' })
       }
 
-      const strokeWidth = 0.9
+      // Scale stroke width inversely with zoom level to maintain consistent visual thickness
+      // At zoom=1, use base width of 0.9; at zoom=4, use 0.225; etc.
+      const baseStrokeWidth = 0.9
+      const currentZoom = position?.zoom || 1
+      const strokeWidth = baseStrokeWidth / currentZoom
 
       // If a legend applies, return it with appropriate information.
       const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
       if (legendColors && legendColors[0] !== '#000000' && type !== 'bubble') {
         styles = {
           ...styles,
-          fill: type !== 'world-geocode' ? legendColors[0] : geoFillColor,
+          fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: type !== 'world-geocode' ? legendColors[1] : geoFillColor
+            fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: type !== 'world-geocode' ? legendColors[2] : geoFillColor
+            fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[2] : geoFillColor
           }
         }
 
@@ -228,6 +294,7 @@ const WorldMap = () => {
             path={path}
             stroke={geoStrokeColor}
             strokeWidth={strokeWidth}
+            className={geoClassName}
             onClick={() => geoClickHandler(geoDisplayName, geoData)}
             onMouseEnter={() => {
               // Track hover analytics event if this is a new location
@@ -245,6 +312,7 @@ const WorldMap = () => {
             }}
             data-tooltip-id={`tooltip__${tooltipId}`}
             data-tooltip-html={toolTip}
+            data-country-code={geo.properties.iso}
             tabIndex={-1}
           />
         )
@@ -260,6 +328,7 @@ const WorldMap = () => {
           strokeWidth={strokeWidth}
           styles={styles}
           path={path}
+          className={geoClassName}
           onMouseEnter={() => {
             // Track hover analytics event if this is a new location
             const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
@@ -276,6 +345,7 @@ const WorldMap = () => {
           }}
           data-tooltip-id={`tooltip__${tooltipId}`}
           data-tooltip-html={toolTip}
+          data-country-code={geo.properties.iso}
         />
       )
     })
@@ -305,7 +375,7 @@ const WorldMap = () => {
             width={SVG_WIDTH}
             height={SVG_HEIGHT}
           >
-            <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
+            <Mercator data={filteredWorld}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       ) : (
@@ -319,7 +389,7 @@ const WorldMap = () => {
             width={SVG_WIDTH}
             height={SVG_HEIGHT}
           >
-            <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
+            <Mercator data={filteredWorld}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       )}

package/src/data/initial-state.js

@@ -24,6 +24,7 @@ const createInitialState = () => {
       headerColor: 'theme-blue',
       title: '',
       showTitle: true,
+      titleStyle: 'small',
       showSidebar: true,
       showDownloadMediaButton: false,
       displayAsHex: false,
@@ -140,6 +141,16 @@ const createInitialState = () => {
     },
     filterBehavior: 'Filter Change',
     filterIntro: '',
+    smallMultiples: {
+      mode: '',
+      tileColumn: '',
+      tilesPerRowDesktop: 2,
+      tilesPerRowMobile: 1,
+      tileOrderType: 'asc',
+      tileOrder: [],
+      tileTitles: {},
+      synchronizedTooltips: true
+    },
     markupVariables: [],
     enableMarkupVariables: false
   }

package/src/data/supported-geos.js

@@ -98,74 +98,6 @@ export const supportedRegions = {
   'region 10': ['REGION 10', 'R10']
 }
 
-/**
- * State Name to ISO Code Mapping
- *
- * Maps proper case state names to their corresponding ISO 3166-2 codes.
- * Provides reverse lookup capability for the supportedStates table.
- *
- * Structure: { 'State Name': 'US-XX' }
- * - Key: Proper case state name (e.g., 'California')
- * - Value: ISO 3166-2 state code (e.g., 'US-CA')
- *
- * Used in:
- * - Data processing when state names need to be converted to ISO codes
- * - Validation and normalization of state data
- */
-export const stateToIso = {
-  // States
-  Alabama: 'US-AL',
-  Alaska: 'US-AK',
-  Arizona: 'US-AZ',
-  Arkansas: 'US-AR',
-  California: 'US-CA',
-  Colorado: 'US-CO',
-  Connecticut: 'US-CT',
-  Delaware: 'US-DE',
-  Florida: 'US-FL',
-  Georgia: 'US-GA',
-  Hawaii: 'US-HI',
-  Idaho: 'US-ID',
-  Illinois: 'US-IL',
-  Indiana: 'US-IN',
-  Iowa: 'US-IA',
-  Kansas: 'US-KS',
-  Kentucky: 'US-KY',
-  Louisiana: 'US-LA',
-  Maine: 'US-ME',
-  Maryland: 'US-MD',
-  Massachusetts: 'US-MA',
-  Michigan: 'US-MI',
-  Minnesota: 'US-MN',
-  Mississippi: 'US-MS',
-  Missouri: 'US-MO',
-  Montana: 'US-MT',
-  Nebraska: 'US-NE',
-  Nevada: 'US-NV',
-  'New Hampshire': 'US-NH',
-  'New Jersey': 'US-NJ',
-  'New Mexico': 'US-NM',
-  'New York': 'US-NY',
-  'North Carolina': 'US-NC',
-  'North Dakota': 'US-ND',
-  Ohio: 'US-OH',
-  Oklahoma: 'US-OK',
-  Oregon: 'US-OR',
-  Pennsylvania: 'US-PA',
-  'Rhode Island': 'US-RI',
-  'South Carolina': 'US-SC',
-  'South Dakota': 'US-SD',
-  Tennessee: 'US-TN',
-  Texas: 'US-TX',
-  Utah: 'US-UT',
-  Vermont: 'US-VT',
-  Virginia: 'US-VA',
-  Washington: 'US-WA',
-  'West Virginia': 'US-WV',
-  Wisconsin: 'US-WI',
-  Wyoming: 'US-WY'
-}
-
 /**
  * State FIPS Code to Two-Letter Abbreviation Mapping
  *
@@ -750,7 +682,7 @@ export const supportedCities = {
   'GREAT PLAINS TRIBAL LEADERS HEALTH BOARD': [-103.22444, 44.083054],
   'GREENSBORO': [-79.791977, 36.072636],
   'HENDERSON': [-114.981720, 36.039524],
-  'HERSHEY': [-76.6779444, 40.2849997 ],
+  'HERSHEY': [-76.6779444, 40.2849997],
   'HIALEAH': [-80.278107, 25.857595],
   'HONOLULU': [-157.858337, 21.306944],
   'HOPI TRIBE': [-110.5035, 35.7833],
@@ -783,7 +715,7 @@ export const supportedCities = {
   'LUBBOCK': [-101.855164, 33.577862],
   'MADISON': [-89.401230, 43.073051],
   'MARION COUNTY, INDIANA': [-86.136543, 39.781029],
-  'MARION':[-88.9330556,37.7305556],
+  'MARION': [-88.9330556, 37.7305556],
   'MEMPHIS': [-90.048981, 35.149532],
   'MESA': [-111.831474, 33.415184],
   'MIAMI': [-80.191788, 25.761681],
@@ -808,7 +740,7 @@ export const supportedCities = {
   'OLYMPIA': [-122.9382403, 47.0394791],
   'OMAHA': [-95.934502, 41.256538],
   'ORLANDO': [-81.379234, 28.538336],
-  'PASADENA':[-95.209099,29.691063],
+  'PASADENA': [-95.209099, 29.691063],
   'PHILADELPHIA': [-75.165222, 39.952583],
   'PHOENIX': [-112.074036, 33.448376],
   'PITTSBURGH': [-79.995888, 40.440624],
@@ -828,9 +760,9 @@ export const supportedCities = {
   'SACRAMENTO': [-121.494400, 38.581573],
   'SAINT PAUL': [-93.089958, 44.953705],
   'SALEM, ALABAMA': [-85.2386, 32.5968],
-  'SALEM, CONNECTICUT': [-72.2754,41.4904],
+  'SALEM, CONNECTICUT': [-72.2754, 41.4904],
   'SALEM, FLORIDA': [-83.4129, 29.8869],
-  'SALEM, ILLINOIS':[-88.945618,38.626991],
+  'SALEM, ILLINOIS': [-88.945618, 38.626991],
   'SALEM, MASSACHUSETTS': [-70.8955, 42.5197],
   'SALEM, OR': [-123.0351, 44.9429],
   'SALEM, OREGON': [-123.0351, 44.9429],
@@ -839,19 +771,19 @@ export const supportedCities = {
   'SALUDA, VIRGINIA': [-76.5950, 37.6064],
   'SAN ANTONIO': [-98.493629, 29.424122],
   'SAN BENITO': [-97.6311, 26.1326],
-  'SAN BERNARDINO':[-117.302399,34.115784],
+  'SAN BERNARDINO': [-117.302399, 34.115784],
   'SAN DIEGO': [-117.161087, 32.715736],
   'SAN FRANCISCO': [-122.419418, 37.774929],
   'SAN JOSE': [-121.886330, 37.338207],
   'SANTA ANA': [-117.867653, 33.745472],
-  'SANTA CLARA':[-121.955238,37.354107],
+  'SANTA CLARA': [-121.955238, 37.354107],
   'SCOTTSDALE': [-111.926048, 33.494171],
   'SEATTLE': [-122.332069, 47.606209],
   'SOUTH PUGET INTERTRIBAL PLANNING AGENCY': [-123.0832, 47.1241],
   'SOUTHCENTRAL FOUNDATION': [-149.7971, 61.1821],
   'SOUTHEAST ALASKA REGIONAL HEALTH CONSORTIUM': [-135.3369, 57.05479],
   'SPOKANE': [-117.426048, 47.658779],
-  'ST PAUL': [ -93.089958, 44.953705],
+  'ST PAUL': [-93.089958, 44.953705],
   'ST. LOUIS': [-90.199402, 38.627003],
   'ST. PETERSBURG': [-82.640289, 27.767601],
   'STOCKTON': [-121.290779, 37.957703],

package/src/helpers/addUIDs.ts

@@ -25,8 +25,16 @@ const geoLookups: Record<string, GeoLookup> = {
   country: { keys: countryKeys, data: supportedCountries }
 }
 
-const memoizedFindUID = (geoName: string, type: keyof typeof geoLookups): string | undefined => {
+const memoizedFindUID = (
+  geoName: string,
+  type: keyof typeof geoLookups,
+  caseInsensitive = false
+): string | undefined => {
   const lookup = geoLookups[type]
+  if (caseInsensitive) {
+    const lowerGeoName = geoName.toLowerCase()
+    return lookup.keys.find(key => lookup.data[key].some(name => name.toLowerCase() === lowerGeoName))
+  }
   return lookup.keys.find(key => lookup.data[key].includes(geoName))
 }
 
@@ -72,7 +80,10 @@ const handleUSLocation = (row: DataRow, geoColumn: string, displayAsHex: boolean
 
 const handleWorldLocation = (row: DataRow, geoColumn: string, isWorldGeocodeType: boolean): string | null => {
   const geoName = row[geoColumn]
-  let uid = memoizedFindUID(geoName, 'country')
+  if (!geoName) return null
+
+  // Use case-insensitive matching for world countries to handle various input formats
+  let uid = memoizedFindUID(geoName, 'country', true)
   if (!uid && (isWorldGeocodeType || geoName)) {
     uid = findCityUID(geoName)
   }

package/src/helpers/applyColorToLegend.ts

@@ -65,6 +65,30 @@ export const applyColorToLegend = (legendIdx: number, config: MapConfig, result:
     color = mapPaletteNameMigrations[color]
   }
 
+  // Check for customColorsOrdered first (direct 1-to-1 mapping, no distribution)
+  if (general?.palette?.customColorsOrdered && Array.isArray(general.palette.customColorsOrdered)) {
+    const customColorsOrdered = general.palette.customColorsOrdered
+
+    // Count actual special classes in the result array
+    const actualSpecialClassCount = result.filter(item => item.special).length
+    const colorIdx = legendIdx - actualSpecialClassCount
+
+    // Handle special classes coloring
+    if (result[legendIdx]?.special) {
+      const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(actualSpecialClassCount)
+      const specialClassIdx = result.slice(0, legendIdx + 1).filter(item => item.special).length - 1
+      return specialClassColors[specialClassIdx]
+    }
+
+    // Direct 1-to-1 mapping with customColorsOrdered (no distribution array)
+    if (colorIdx >= 0 && colorIdx < customColorsOrdered.length) {
+      return customColorsOrdered[colorIdx]
+    }
+
+    // Fallback to last color if index out of bounds
+    return customColorsOrdered[customColorsOrdered.length - 1] || '#d3d3d3'
+  }
+
   // Try multiple approaches to find the palette
   let mapColorPalette = general?.palette?.customColors
 
@@ -118,7 +142,7 @@ export const applyColorToLegend = (legendIdx: number, config: MapConfig, result:
   // For category legends, use the actual result length
   const isNumericLegend = legend && ['equalnumber', 'equalinterval'].includes(legend.type)
   const nonSpecialItemCount = isNumericLegend
-    ? (legend.numberOfItems || result.length)
+    ? legend.numberOfItems || result.length
     : result.length - actualSpecialClassCount
 
   const amt =

package/src/helpers/applyLegendToRow.ts

@@ -1,5 +1,6 @@
 import { generateColorsArray } from '@cdc/core/helpers/generateColorsArray'
-import { hashObj, DEFAULT_MAP_BACKGROUND } from '../helpers'
+import { hashObj } from '@cdc/core/helpers/hashObj'
+import { DEFAULT_MAP_BACKGROUND, DISABLED_MAP_COLOR } from '../helpers'
 import { mapColorPalettes as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { MapConfig } from '../types/MapConfig'
 import { type RuntimeLegend } from '../types/runtimeLegend'
@@ -42,8 +43,9 @@ export const applyLegendToRow = (
     const idx = legendMemo.current.get(hash)!
     const disabledIdx = showSpecialClassesLast ? legendSpecialClassLastMemo.current.get(hash) ?? idx : idx
 
-    if (runtimeLegend.items?.[disabledIdx]?.disabled) {
-      return generateColorsArray(DEFAULT_MAP_BACKGROUND)
+    // Note: DISABLED_MAP_COLOR is used in UsaMap.County.tsx to check for hidden bubbles. Should be refactored to use the hidden value when that is implemented.
+    if (runtimeLegend.items?.[disabledIdx]?.disabled || runtimeLegend.items?.[disabledIdx]?.hidden) {
+      return generateColorsArray(DISABLED_MAP_COLOR)
     }
 
     const legendBinColor = runtimeLegend.items.find(o => o.bin === idx)?.color