@cdc/map 4.23.11 → 4.24.2

package/src/components/Legend/index.tsx

@@ -0,0 +1,3 @@
+import Legend from './components/Legend'
+
+export default Legend

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

@@ -0,0 +1,129 @@
+import { useContext } from 'react'
+import { geoCentroid, geoPath } from 'd3-geo'
+import ConfigContext from './../../../../context'
+import { MapContext } from './../../../../types/MapContext'
+import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import chroma from 'chroma-js'
+
+const offsets = {
+  'US-VT': [50, -8],
+  'US-NH': [34, 2],
+  'US-MA': [30, -1],
+  'US-RI': [28, 2],
+  'US-CT': [35, 10],
+  'US-NJ': [42, 1],
+  'US-DE': [33, 0],
+  'US-MD': [47, 10]
+}
+
+const nudges = {
+  'US-FL': [15, 3],
+  'US-AK': [0, -8],
+  'US-CA': [-10, 0],
+  'US-NY': [5, 0],
+  'US-MI': [13, 20],
+  'US-LA': [-10, -3],
+  'US-HI': [-10, 10],
+  'US-ID': [0, 10],
+  'US-WV': [-2, 2]
+}
+
+// todo: combine hexagonLabel & geoLabel functions
+// todo: move geoLabel functions outside of components for reusability
+const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territory, territoryData, ...props }) => {
+  const { state } = useContext<MapContext>(ConfigContext)
+
+  const isHex = state.general.displayAsHex
+
+  // Labels
+  const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
+    let centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
+
+    let abbr = geo?.properties?.iso ? geo.properties.iso : geo.uid
+
+    const getArrowDirection = (geoData, geo, isTerritory = false) => {
+      if (!isTerritory) {
+        centroid = projection(geoCentroid(geo))
+      }
+
+      return (
+        <>
+          {state.hexMap.shapeGroups.map((group, groupIndex) => {
+            return group.items.map((item, itemIndex) => {
+              if (item.operator === '=') {
+                if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
+                  return (
+                    <Group style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }} key={`territory-hex--${itemIndex}`}>
+                      {item.shape === 'Arrow Down' && <AiOutlineArrowDown size={12} stroke='none' fontWeight={100} />}
+                      {item.shape === 'Arrow Up' && <AiOutlineArrowUp size={12} stroke='none' fontWeight={100} />}
+                      {item.shape === 'Arrow Right' && <AiOutlineArrowRight size={12} stroke='none' fontWeight={100} />}
+                    </Group>
+                  )
+                }
+              }
+            })
+          })}
+        </>
+      )
+    }
+
+    if (undefined === abbr) return null
+
+    let textColor = '#FFF'
+
+    // Dynamic text color
+    if (chroma.contrast(textColor, bgColor) < 3.5) {
+      textColor = '#202020' // dark gray
+    }
+
+    // always make HI black since it is off to the side
+    if (abbr === 'US-HI') {
+      textColor = '#000'
+    }
+
+    let x = 0,
+      y = state.hexMap.type === 'shapes' ? -10 : 5
+
+    // used to nudge/move some of the labels for better readability
+    if (nudges[abbr] && false === isHex) {
+      x += nudges[abbr][0]
+      y += nudges[abbr][1]
+    }
+
+    if (undefined === offsets[abbr] || isHex) {
+      let y = state.hexMap.type === 'shapes' ? '30%' : '50%'
+      return (
+        <>
+          <Text fontSize={14} x={'50%'} y={y} style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }} textAnchor='middle' verticalAnchor='middle'>
+            {abbr.substring(3)}
+          </Text>
+          {state.general.displayAsHex && state.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
+        </>
+      )
+    }
+
+    let [dx, dy] = offsets[abbr]
+
+    return (
+      <g>
+        <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke='rgba(0,0,0,.5)' strokeWidth={1} />
+        <text x={4} strokeWidth='0' fontSize={13} style={{ fill: '#202020' }} alignmentBaseline='middle' transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
+          {abbr.substring(3)}
+        </text>
+      </g>
+    )
+  }
+
+  return (
+    <svg viewBox='0 0 45 51' className='territory-wrapper--hex'>
+      <g {...props}>
+        <polygon stroke={stroke} strokeWidth={strokeWidth} points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702' />
+        {state.general.displayAsHex && hexagonLabel(territoryData ? territoryData : geo, stroke, false)}
+      </g>
+    </svg>
+  )
+}
+
+export default TerritoryHexagon

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

@@ -0,0 +1,66 @@
+import { useContext } from 'react'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
+import chroma from 'chroma-js'
+import ConfigContext from './../../../../context'
+import { type MapContext } from '../../../../types/MapContext'
+// todo: move this somewhere that makes better sense for pattern sizes.
+const sizes = {
+  small: '8',
+  medium: '10',
+  large: '12'
+}
+
+const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPattern, territory, ...props }) => {
+  const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
+
+  return (
+    <svg viewBox='0 0 45 28'>
+      <g {...props} strokeLinejoin='round'>
+        <path
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
+          {...props}
+        />
+        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: textColor, strokeWidth: 1 }} className='territory-text' paint-order='stroke'>
+          {label}
+        </text>
+
+        {state.map.patterns.map((patternData, patternIndex) => {
+          let defaultPatternColor = 'black'
+
+          const hasMatchingValues = supportedTerritories[territory].includes(patternData?.dataValue)
+          console.log('has match', patternData)
+
+          if (chroma.contrast(defaultPatternColor, props.style.fill) < 3.5) {
+            defaultPatternColor = 'white'
+          }
+
+          if (!hasMatchingValues) return null
+          if (!patternData.pattern) return null
+
+          return (
+            <>
+              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 10} width={sizes[patternData?.size] ?? 10} fill={defaultPatternColor} complement />}
+              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 10} width={sizes[patternData?.size] ?? 10} fill={defaultPatternColor} complement />}
+              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 6} width={sizes[patternData?.size] ?? 6} stroke={defaultPatternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
+              <path
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
+                fill={`url(#territory-${patternData?.dataKey}--${patternIndex})`}
+                color='white'
+                className={[`territory-pattern-${patternData.dataKey}`, `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`].join(' ')}
+              />
+              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='stroke'>
+                {label}
+              </text>
+            </>
+          )
+        })}
+      </g>
+    </svg>
+  )
+}
+
+export default TerritoryRectangle

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

@@ -0,0 +1,9 @@
+import TerritoryHexagon from './Territory.Hexagon'
+import TerritoryRectangle from './Territory.Rectangle'
+
+const Territory = {
+  Rectangle: TerritoryRectangle,
+  Hexagon: TerritoryHexagon
+}
+
+export default Territory

package/src/components/{CountyMap.jsx → UsaMap/components/UsaMap.County.tsx}

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, memo, useRef, useContext } from 'react'
+import { useEffect, useState, useRef, useContext } from 'react'
 
 import { geoCentroid, geoPath, geoContains } from 'd3-geo'
 import { feature } from 'topojson-client'
@@ -8,11 +8,11 @@ import debounce from 'lodash.debounce'
 import Loading from '@cdc/core/components/Loading'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-import useMapLayers from '../hooks/useMapLayers'
-import ConfigContext from '../context'
+import useMapLayers from '../../../hooks/useMapLayers'
+import ConfigContext from '../../../context'
 
-const getCountyTopoURL = (year) => {
-  return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`;
+const getCountyTopoURL = year => {
+  return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
 }
 
 const sortById = (a, b) => {
@@ -23,11 +23,11 @@ const sortById = (a, b) => {
 
 const getTopoData = year => {
   return new Promise((resolve, reject) => {
-    const resolveWithTopo = async (response) => {
-      if(response.status !== 200){
-        response = await import('../data/cb_2019_us_county_20m.json');
+    const resolveWithTopo = async response => {
+      if (response.status !== 200) {
+        response = await import('./../data/cb_2019_us_county_20m.json')
       } else {
-        response = await response.json();
+        response = await response.json()
       }
 
       let topoData = {}

package/src/components/{UsaRegionMap.jsx → UsaMap/components/UsaMap.Region.tsx}

@@ -7,7 +7,7 @@ import { feature } from 'topojson-client'
 import topoJSON from '../data/us-regions-topo-2.json'
 import { Mercator } from '@visx/geo'
 import chroma from 'chroma-js'
-import ConfigContext from '../context'
+import ConfigContext from '../../../context'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
 
@@ -36,11 +36,9 @@ const UsaRegionMap = props => {
     data,
     displayGeoName,
     geoClickHandler,
-    handleCircleClick,
     handleMapAriaLabels,
     state,
     supportedTerritories,
-    titleCase,
   } = useContext(ConfigContext)
 
   // "Choose State" options

package/src/components/{SingleStateMap.jsx → UsaMap/components/UsaMap.SingleState.tsx}

@@ -6,28 +6,27 @@ import { geoPath } from 'd3-geo'
 import { feature, mesh } from 'topojson-client'
 import { CustomProjection } from '@visx/geo'
 import Loading from '@cdc/core/components/Loading'
-import colorPalettes from '../../../core/data/colorPalettes'
+import colorPalettes from '@cdc/core/data/colorPalettes'
 import { geoAlbersUsaTerritories } from 'd3-composite-projections'
-import CityList from './CityList'
-import ConfigContext from '../context'
+import CityList from '../../CityList'
+import ConfigContext from '../../../context'
 
 // SVG ITEMS
 const WIDTH = 880
 const HEIGHT = 500
 const PADDING = 25
 
-
-const getCountyTopoURL = (year) => {
-  return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`;
+const getCountyTopoURL = year => {
+  return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
 }
 
 const getTopoData = year => {
   return new Promise((resolve, reject) => {
     const resolveWithTopo = async response => {
-      if(response.status !== 200){
-        response = await import('../data/cb_2019_us_county_20m.json');
+      if (response.status !== 200) {
+        response = await import('./../data/cb_2019_us_county_20m.json')
       } else {
-        response = await response.json();
+        response = await response.json()
       }
       let topoData = {}
 
@@ -265,7 +264,6 @@ const SingleStateMap = props => {
         titleCase={titleCase}
         setSharedFilterValue={setSharedFilterValue}
         isFilterValueSupported={isFilterValueSupported}
-        isGeoCodeMap={state.general.type === 'us-geocode'}
       />
     )
 

package/src/components/{UsaMap.jsx → UsaMap/components/UsaMap.State.tsx}

@@ -1,138 +1,33 @@
 import React, { useState, useEffect, memo, useContext } from 'react'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { geoCentroid, geoPath } from 'd3-geo'
-import { feature } from 'topojson-client'
+
+// United States Topojson resources
 import topoJSON from '../data/us-topo.json'
 import hexTopoJSON from '../data/us-hex-topo.json'
+
+import { geoCentroid, geoPath } from 'd3-geo'
+import { feature } from 'topojson-client'
 import { AlbersUsa, Mercator } from '@visx/geo'
 import chroma from 'chroma-js'
-import CityList from './CityList'
-import BubbleList from './BubbleList'
-import { supportedCities, supportedStates } from '../data/supported-geos'
+import CityList from '../../CityList'
+import BubbleList from '../../BubbleList'
+import { supportedCities, supportedStates } from '../../../data/supported-geos'
 import { geoAlbersUsa } from 'd3-composite-projections'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
-
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
 
-import useMapLayers from '../hooks/useMapLayers'
-import ConfigContext from '../context'
+import Territory from './Territory'
+
+import useMapLayers from '../../../hooks/useMapLayers'
+import ConfigContext from '../../../context'
+import { MapContext } from '../../../types/MapContext'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
 
-// todo: combine hexagonLabel & geoLabel functions
-// todo: move geoLabel functions outside of components for reusability
-const Hexagon = ({ label, text, stroke, strokeWidth, textColor, territory, territoryData, ...props }) => {
-  const { state } = useContext(ConfigContext)
-
-  // Labels
-  const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
-    let centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
-
-    let abbr = geo?.properties?.iso ? geo.properties.iso : geo.uid
-
-    const getArrowDirection = (geoData, geo, isTerritory = false) => {
-      if (!isTerritory) {
-        centroid = projection(geoCentroid(geo))
-      }
-
-      return (
-        <>
-          {state.hexMap.shapeGroups.map((group, groupIndex) => {
-            return group.items.map((item, itemIndex) => {
-              if (item.operator === '=') {
-                if (geoData[item.key] === item.value) {
-                  return (
-                    <Group style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }}>
-                      {item.shape === 'Arrow Down' && <AiOutlineArrowDown size={12} stroke='none' fontWeight={100} />}
-                      {item.shape === 'Arrow Up' && <AiOutlineArrowUp size={12} stroke='none' fontWeight={100} />}
-                      {item.shape === 'Arrow Right' && <AiOutlineArrowRight size={12} stroke='none' fontWeight={100} />}
-                    </Group>
-                  )
-                }
-              }
-            })
-          })}
-        </>
-      )
-    }
-
-    if (undefined === abbr) return null
-
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020' // dark gray
-    }
-
-    // always make HI black since it is off to the side
-    if (abbr === 'US-HI') {
-      textColor = '#000'
-    }
-
-    let x = 0,
-      y = state.hexMap.type === 'shapes' ? -10 : 5
-
-    // used to nudge/move some of the labels for better readability
-    if (nudges[abbr] && false === isHex) {
-      x += nudges[abbr][0]
-      y += nudges[abbr][1]
-    }
-
-    if (undefined === offsets[abbr] || isHex) {
-      let y = state.hexMap.type === 'shapes' ? '30%' : '50%'
-      return (
-        <>
-          <Text fontSize={14} x={'50%'} y={y} style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }} textAnchor='middle' verticalAnchor='middle'>
-            {abbr.substring(3)}
-          </Text>
-          {state.general.displayAsHex && state.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
-        </>
-      )
-    }
-
-    let [dx, dy] = offsets[abbr]
-
-    return (
-      <g>
-        <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke='rgba(0,0,0,.5)' strokeWidth={1} />
-        <text x={4} strokeWidth='0' fontSize={13} style={{ fill: '#202020' }} alignmentBaseline='middle' transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
-          {abbr.substring(3)}
-        </text>
-      </g>
-    )
-  }
-
-  return (
-    <svg viewBox='0 0 45 51' className='territory-wrapper--hex'>
-      <g {...props}>
-        <polygon stroke={stroke} strokeWidth={strokeWidth} points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702' />
-        {state.general.displayAsHex && hexagonLabel(territoryData ? territoryData : geo, stroke, false)}
-      </g>
-    </svg>
-  )
-}
-
-const Rect = ({ label, text, stroke, strokeWidth, textColor, ...props }) => {
-  return (
-    <svg viewBox='0 0 45 28'>
-      <g {...props} strokeLinejoin='round'>
-        <path
-          stroke={stroke}
-          strokeWidth={strokeWidth}
-          d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
-        />
-        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} stroke={textColor}>
-          {label}
-        </text>
-      </g>
-    </svg>
-  )
-}
-
 const offsets = {
   'US-VT': [50, -8],
   'US-NH': [34, 2],
@@ -156,7 +51,7 @@ const nudges = {
   'US-WV': [-2, 2]
 }
 
-const UsaMap = props => {
+const UsaMap = () => {
   // prettier-ignore
   const {
       applyLegendToRow,
@@ -170,7 +65,7 @@ const UsaMap = props => {
       state,
       supportedTerritories,
       titleCase,
-    } = useContext(ConfigContext)
+    } = useContext<MapContext>(ConfigContext)
 
   let isFilterValueSupported = false
 
@@ -224,7 +119,7 @@ const UsaMap = props => {
   const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
 
   const territories = territoriesData.map(territory => {
-    const Shape = isHex ? Hexagon : Rect
+    const Shape = isHex ? Territory.Hexagon : Territory.Rectangle
 
     const territoryData = data[territory]
 
@@ -271,11 +166,18 @@ const UsaMap = props => {
           fill: legendColors[2]
         }
       }
-      return <Shape key={label} label={label} css={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} territory={territory} territoryData={territoryData} />
+
+      return (
+        <>
+          <Shape key={label} label={label} style={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} territory={territory} territoryData={territoryData} />
+        </>
+      )
     }
   })
 
   let pathGenerator = geoPath().projection(geoAlbersUsa().translate(translate))
+
+  // Note: Layers are different than patterns
   const { pathArray } = useMapLayers(state, '', pathGenerator)
 
   // Constructs and displays markup for all geos on the map (except territories right now)
@@ -368,9 +270,9 @@ const UsaMap = props => {
               {state.hexMap.shapeGroups.map((group, groupIndex) => {
                 return group.items.map((item, itemIndex) => {
                   if (item.operator === '=') {
-                    if (geoData[item.key] === item.value) {
+                    if (geoData[item.key] === item.value || Number(geoData[item.key]) == Number(item.value)) {
                       return (
-                        <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start'>
+                        <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${itemIndex}`}>
                           {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
                           {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
                           {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}
@@ -384,10 +286,37 @@ const UsaMap = props => {
           )
         }
 
+        const sizes = {
+          small: '8',
+          medium: '10',
+          large: '12'
+        }
+
         return (
           <g data-name={geoName} key={key}>
             <g className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id='tooltip' data-tooltip-html={tooltip}>
               <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
+              {state.map.patterns.map((patternData, patternIndex) => {
+                let { pattern, dataKey, size } = patternData
+                let defaultPatternColor = 'black'
+
+                const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
+
+                if (chroma.contrast(defaultPatternColor, legendColors[0]) < 3.5) {
+                  defaultPatternColor = 'white'
+                }
+
+                return (
+                  hasMatchingValues && (
+                    <>
+                      {pattern === 'waves' && <PatternWaves id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
+                      {pattern === 'circles' && <PatternCircles id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
+                      {pattern === 'lines' && <PatternLines id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 6} width={sizes[size] ?? 6} stroke={defaultPatternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
+                      <path className={`pattern-geoKey--${dataKey}`} tabIndex={-1} stroke='transparent' d={path} fill={`url(#${dataKey}--${patternIndex})`} />
+                    </>
+                  )
+                )
+              })}
               {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
               {isHex && state.hexMap.type === 'shapes' && getArrowDirection(geoData, geo, legendColors[0])}
             </g>
@@ -417,7 +346,6 @@ const UsaMap = props => {
         displayGeoName={displayGeoName}
         geoClickHandler={geoClickHandler}
         isFilterValueSupported={isFilterValueSupported}
-        isGeoCodeMap={state.general.type === 'us-geocode'}
         key='cities'
         projection={projection}
         setSharedFilterValue={setSharedFilterValue}
@@ -511,7 +439,7 @@ const UsaMap = props => {
               <span className='territories-label label'>{state.general.territoriesLabel}</span>
             </div>
             <div>
-              <span className={window.visualViewport.width < 500 ? 'territories--mobile' : 'territories'}>{territories}</span>
+              <span className={window.visualViewport.width < 700 ? 'territories--mobile' : 'territories'}>{territories}</span>
             </div>
           </div>
         </>

package/src/components/UsaMap/index.tsx

@@ -0,0 +1,13 @@
+import UsaStateMap from './components/UsaMap.State'
+import UsaRegionMap from './components/UsaMap.Region.jsx'
+import UsaCountyMap from './components/UsaMap.County'
+import UsaSingleStateMap from './components/UsaMap.SingleState.jsx'
+
+const UsaMap = {
+  State: UsaStateMap,
+  Region: UsaRegionMap,
+  County: UsaCountyMap,
+  SingleState: UsaSingleStateMap
+}
+
+export default UsaMap

package/src/components/{WorldMap.jsx → WorldMap/components/WorldMap.jsx}

@@ -5,12 +5,12 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { geoMercator } from 'd3-geo'
 import { Mercator } from '@visx/geo'
 import { feature } from 'topojson-client'
-import topoJSON from '../data/world-topo.json'
-import ZoomableGroup from './ZoomableGroup'
-import Geo from './Geo'
-import CityList from './CityList'
-import BubbleList from './BubbleList'
-import ConfigContext from '../context'
+import topoJSON from './../data/world-topo.json'
+import ZoomableGroup from '../../ZoomableGroup'
+import Geo from '../../Geo'
+import CityList from '../../CityList'
+import BubbleList from '../../BubbleList'
+import ConfigContext from '../../../context'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
@@ -101,14 +101,22 @@ const WorldMap = props => {
 
   const constructGeoJsx = geographies => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
-      const geoKey = geo.properties.iso
+      // If the geo.properties.state value is found in the data use that, otherwise fall back to geo.properties.iso
+      const dataHasStateName = state.data.some(d => d[state.columns.geo.name] === geo.properties.state)
+      const geoKey = geo.properties.state && data[geo.properties.state] ? geo.properties.state : geo.properties.name ? geo.properties.name : geo.properties.iso
 
+      const additionalData = {
+        name: geo.properties.name
+      }
       if (!geoKey) return null
 
-      const geoData = data[geoKey]
+      let geoData = data[geoKey]
 
-      const geoDisplayName = displayGeoName(supportedCountries[geoKey][0])
+      // if ((geoKey === 'Alaska' || geoKey === 'Hawaii') && !geoData) {
+      //   geoData = data['United States']
+      // }
 
+      const geoDisplayName = displayGeoName(supportedCountries[geoKey]?.[0])
       let legendColors
 
       // Once we receive data for this geographic item, setup variables.
@@ -146,17 +154,15 @@ const WorldMap = props => {
           styles.cursor = 'pointer'
         }
 
-        return <Geo key={i + '-geo'} css={styles} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
+        return <Geo additionalData={additionalData} geoData={geoData} state={state} key={i + '-geo'} style={styles} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
       }
 
       // Default return state, just geo with no additional information
-      return <Geo key={i + '-geo'} stroke={geoStrokeColor} strokeWidth={strokeWidth} css={styles} path={path} />
+      return <Geo additionalData={additionalData} geoData={geoData} state={state} key={i + '-geo'} stroke={geoStrokeColor} strokeWidth={strokeWidth} style={styles} path={path} />
     })
 
     // Cities
-    geosJsx.push(
-      <CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} isGeoCodeMap={state.general.type === 'world-geocode'} key='cities' projection={projection} state={state} titleCase={titleCase} />
-    )
+    geosJsx.push(<CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} key='cities' projection={projection} state={state} titleCase={titleCase} />)
 
     // Bubbles
     if (state.general.type === 'bubble') {