@cdc/map 4.24.1 → 4.24.2

package/examples/{private/zika-issue.json → zika.json}

@@ -1,16 +1,12 @@
 {
   "general": {
-    "title": "Default World Map",
-    "subtext": "",
-    "type": "data",
     "geoType": "world",
-    "headerColor": "theme-blue",
     "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "title": "Countries and territories where Zika cases have been reported (as of October 5, 2023)*",
+    "showTitle": false,
     "showSidebar": true,
-    "showTitle": true,
     "showDownloadButton": true,
-    "expandDataTable": true,
-    "equalNumberOptIn": true,
     "showDownloadMediaButton": false,
     "displayAsHex": false,
     "displayStateLabels": false,
@@ -20,9 +16,10 @@
     "geoLabelOverride": "",
     "hasRegions": false,
     "fullBorder": false,
+    "type": "data",
     "convertFipsCodes": true,
     "palette": {
-      "isReversed": false
+      "isReversed": true
     },
     "allowMapZoom": true,
     "hideGeoColumnInTooltip": false,
@@ -30,10 +27,12 @@
     "statePicked": {
       "fipsCode": "01",
       "stateName": "Alabama"
-    }
+    },
+    "footnotes": "*Does not include countries or territories where only imported cases have been documented. Small island nations might not display on the map but data are included in the table above.",
+    "introText": ""
   },
   "type": "map",
-  "color": "pinkpurple",
+  "color": "sequential-blue-2(MPX)reverse",
   "columns": {
     "geo": {
       "name": "Country",
@@ -42,17 +41,15 @@
       "dataTable": true
     },
     "primary": {
-      "name": "Category",
-      "label": "Data Label",
-      "prefix": "",
-      "suffix": "%",
       "dataTable": true,
-      "tooltip": true
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "Category",
+      "label": ""
     },
     "navigate": {
-      "name": "Link",
-      "tooltip": false,
-      "dataTable": false
+      "name": ""
     },
     "latitude": {
       "name": ""
@@ -62,30 +59,22 @@
     }
   },
   "legend": {
-    "numberOfItems": 3,
-    "position": "side",
-    "title": "Legend Title",
-    "description": "Legend Text",
-    "type": "category",
-    "specialClasses": [
-      {
-        "key": "Data",
-        "value": "N/A",
-        "label": "N/A"
-      }
-    ],
-    "separateZero": true,
     "descriptions": {},
+    "specialClasses": [],
     "unified": false,
     "singleColumn": false,
     "singleRow": false,
     "verticalSorted": false,
     "showSpecialClassesLast": false,
     "dynamicDescription": false,
+    "type": "category",
+    "numberOfItems": 3,
+    "position": "bottom",
+    "title": "Legend",
     "categoryValuesOrder": [
+      "Current or past Zika transmission",
       "Known to have mosquito that transmits Zika, but no reported Zika cases ",
-      "Not known to have mosquito that transmits Zika",
-      "Current or past Zika transmission"
+      "Not known to have mosquito that transmits Zika"
     ]
   },
   "filters": [],
@@ -96,11 +85,12 @@
     "height": "",
     "caption": "",
     "showDownloadUrl": false,
-    "showDataTableLink": true,
+    "showDataTableLink": false,
     "showFullGeoNameInCSV": false,
     "forceDisplay": true,
-    "download": false,
-    "indexLabel": ""
+    "download": true,
+    "indexLabel": "",
+    "wrapColumns": false
   },
   "tooltips": {
     "appearanceType": "hover",
@@ -108,9 +98,6 @@
     "capitalizeLabels": true,
     "opacity": 90
   },
-  "runtime": {
-    "editorErrorMessage": []
-  },
   "visual": {
     "minBubbleSize": 1,
     "maxBubbleSize": 20,
@@ -127,7 +114,8 @@
     "zoom": 1
   },
   "map": {
-    "layers": []
+    "layers": [],
+    "patterns": []
   },
   "hexMap": {
     "type": "",
@@ -148,6 +136,10 @@
     ]
   },
   "filterBehavior": "Filter Change",
+  "openModal": false,
+  "uid": "map1701275481219",
+  "editing": true,
+  "validated": 4.23,
   "data": [
     {
       "Country": "Afghanistan",
@@ -182,7 +174,7 @@
       "Category": "Current or past Zika transmission"
     },
     {
-      "Country": "Antartica",
+      "Country": "Antarctica",
       "Category": "Not known to have mosquito that transmits Zika"
     },
     {
@@ -361,10 +353,6 @@
       "Country": "Comoros",
       "Category": "Not known to have mosquito that transmits Zika"
     },
-    {
-      "Country": "Continental United States",
-      "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
-    },
     {
       "Country": "Cook Islands",
       "Category": "Current or past Zika transmission"
@@ -719,7 +707,7 @@
     },
     {
       "Country": "Mali",
-      "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
+      "Category": "Current or past Zika transmission"
     },
     {
       "Country": "Malta",
@@ -854,7 +842,7 @@
       "Category": "Current or past Zika transmission"
     },
     {
-      "Country": "Palestinian Territories",
+      "Country": "Gaza/West Bank",
       "Category": "Not known to have mosquito that transmits Zika"
     },
     {
@@ -942,11 +930,11 @@
       "Category": "Current or past Zika transmission"
     },
     {
-      "Country": "Saint Paul and New Amsterdam Islands",
+      "Country": "Sicily",
       "Category": "Not known to have mosquito that transmits Zika"
     },
     {
-      "Country": "Saint Pierre and Miquelon",
+      "Country": "Saint Paul and Amsterdam Islands",
       "Category": "Not known to have mosquito that transmits Zika"
     },
     {
@@ -1141,6 +1129,10 @@
       "Country": "United States Minor Outlying Islands",
       "Category": "Not known to have mosquito that transmits Zika"
     },
+    {
+      "Country": "United States of America",
+      "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
+    },
     {
       "Country": "Uruguay",
       "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
@@ -1190,9 +1182,13 @@
       "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
     },
     {
-      "Country": "Zimbabwe",
+      "Country": "Dhekelia",
       "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
     }
   ],
-  "validated": 4.23
+  "dataDescription": {
+    "series": false,
+    "horizontal": false
+  },
+  "dataKey": "Map-data-1_23_24-wMali.csv"
 }

package/index.html

@@ -11,11 +11,16 @@
       .cdc-map-outer-container {
         min-height: 100vh;
       }
+      /* .alaska,
+      .hawaii {
+        display: none;
+      } */
     </style>
   </head>
 
   <body>
     <!-- DEFAULT EXAMPLES -->
+    <!-- <div class="react-container" data-config="/examples/private/antarctica.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/private/zika-issue.json"></div> -->
 
     <!-- <div class="react-container react-container--maps" data-config="/examples/private/tooltip-issue.json"></div> -->
@@ -38,15 +43,15 @@
     <!-- <div class="react-container" data-config="/examples/private/wastewater.json"></div> -->
 
     <!-- TP4 EXAMPLES -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/private/solr.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/custom-map-layers.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-stateBAD.json"></div> -->
-    <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div>
+    <!-- <div class="react-container react-container--maps" data-config="/examples/private/world-map.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/hex-with-arrows.json"></div> -->
 
     <!-- TP4 EXAMPLES -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
+    <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div>
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state-no-territories.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.24.1",
+  "version": "4.24.2",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -24,7 +24,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.24.1",
+    "@cdc/core": "^4.24.2",
     "@emotion/core": "^10.0.28",
     "@emotion/react": "^11.1.5",
     "@hello-pangea/dnd": "^16.2.0",
@@ -51,5 +51,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "a352a3f74f4b681191e3244061dbb3621f36eec3"
+  "gitHead": "edde49c96dee146de5e3a4537880b1bcf4dbee08"
 }

package/src/CdcMap.tsx

@@ -52,6 +52,7 @@ import NavigationMenu from './components/NavigationMenu' // Future: Lazy
 import UsaMap from './components/UsaMap' // Future: Lazy
 import WorldMap from './components/WorldMap' // Future: Lazy
 import useTooltip from './hooks/useTooltip'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 
 // Data props
 const stateKeys = Object.keys(supportedStates)
@@ -239,8 +240,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         }
 
         // Cities
-        if (!uid) {
-          uid = cityKeys.find(key => key === geoName)
+        if (!uid && geoName) {
+          uid = cityKeys.find(key => key === geoName.toUpperCase())
         }
       }
 
@@ -267,6 +268,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         if (!uid && 'world-geocode' === state.general.type) {
           uid = cityKeys.find(key => key === geoName?.toUpperCase())
         }
+
+        // Cities
+        if (!uid && geoName) {
+          uid = cityKeys.find(key => key === geoName.toUpperCase())
+        }
       }
 
       // County Check
@@ -279,6 +285,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         uid = row[state.columns.geo.name]
       }
 
+      if (!uid && state.columns.latitude?.name && state.columns.longitude?.name && row[state.columns.latitude?.name] && row[state.columns.longitude?.name]) {
+        uid = row[state.columns.geo.name]
+      }
+
       if (uid) {
         Object.defineProperty(row, 'uid', {
           value: uid,
@@ -687,12 +697,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
           dataSet.forEach((row, dataIndex) => {
             let number = row[state.columns.primary.name]
-            let updated = 0
-
-            // check if we're seperating zero out
-            updated = state.legend.separateZero && hasZeroInData ? index : index
-            // check for special classes
-            updated = state.legend.specialClasses ? updated + state.legend.specialClasses.length : index
+            let updated = result.length - 1
 
             if (result[updated]?.min === (null || undefined) || result[updated]?.max === (null || undefined)) return
 
@@ -1074,6 +1079,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   // Attempts to find the corresponding value
   const displayGeoName = key => {
     if (!state.general.convertFipsCodes) return key
+
+    // World Map
+    // If we're returning a city name instead of a country ISO code, capitalize it for the data table.
+    if (state.type === 'map' && state.general.geoType === 'world') {
+      if (String(key).length > 3) return titleCase(key)
+    }
     let value = key
     // Map to first item in values array which is the preferred label
     if (stateKeys.includes(value)) {
@@ -1085,7 +1096,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
 
     if (countryKeys.includes(value)) {
-      value = titleCase(supportedCountries[key][0])
+      value = supportedCountries[key][0]
     }
 
     if (countyKeys.includes(value)) {
@@ -1266,18 +1277,19 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         const regex = /(?:\.([^.]+))?$/
 
         const ext = regex.exec(dataUrl.pathname)[1]
-        if ('csv' === ext) {
+        if ('csv' === ext || isSolrCsv(dataUrlFinal)) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
             .then(responseText => {
               const parsedCsv = Papa.parse(responseText, {
                 header: true,
                 dynamicTyping: true,
-                skipEmptyLines: true
+                skipEmptyLines: true,
+                encoding: 'utf-8'
               })
               return parsedCsv.data
             })
-        } else if ('json' === ext) {
+        } else if ('json' === ext || isSolrJson(dataUrlFinal)) {
           data = await fetch(dataUrlFinal).then(response => response.json())
         } else {
           data = []
@@ -1293,6 +1305,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         data = transform.developerStandardize(data, state.dataDescription)
       }
 
+      console.log('data', data)
+
       setState({ ...state, runtimeDataUrl: dataUrlFinal, data })
     }
   }
@@ -1610,6 +1624,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
               config={config}
               classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${general.headerColor}`]}
             />
+            <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={tabId}>
+              Skip Over Map Container
+            </a>
             {general.introText && <section className='introText'>{parse(general.introText)}</section>}
 
             {/* prettier-ignore */}
@@ -1626,10 +1643,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                 }
               }}
             >
-              <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={tabId}>
-                Skip Over Map Container
-              </a>
-
               {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
               <section className='outline-none geography-container' ref={mapSvg} tabIndex='0' style={{ width: '100%' }}>
                 {currentViewport && (

package/src/components/CityList.jsx

@@ -4,50 +4,57 @@ import { jsx } from '@emotion/react'
 import { supportedCities } from '../data/supported-geos'
 import { scaleLinear } from 'd3-scale'
 
-const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported, isGeoCodeMap }) => {
+const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported }) => {
   const [citiesData, setCitiesData] = useState({})
 
   useEffect(() => {
-    if (!isGeoCodeMap) {
-      const citiesList = Object.keys(data).filter(item => Object.keys(supportedCities).includes(item))
+    const citiesDictionary = {}
 
-      const citiesDictionary = {}
-
-      citiesList.map(city => (citiesDictionary[city] = data[city]))
-
-      setCitiesData(citiesDictionary)
-    } else {
-      const citiesDictionary = {}
-      state.data.map(city => (citiesDictionary[city[state.columns.geo.name]] = city))
-      setCitiesData(citiesDictionary)
+    if (data) {
+      Object.keys(data).forEach(key => {
+        const city = data[key]
+        citiesDictionary[city[state.columns.geo.name]] = city
+      })
     }
-  }, [data, state.data])
+
+    setCitiesData(citiesDictionary)
+  }, [data])
 
   if (state.general.type === 'bubble') {
-    const maxDataValue = Math.max(...state.data.map(d => d[state.columns.primary.name]))
+    const maxDataValue = Math.max(...(data ? Object.keys(data).map(key => data[key][state.columns.primary.name]) : [0]))
     const sortedRuntimeData = Object.values(data).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))
     if (!sortedRuntimeData) return
 
     // Set bubble sizes
     var size = scaleLinear().domain([1, maxDataValue]).range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
   }
-  let cityList = isGeoCodeMap ? Object.keys(citiesData).filter(c => undefined !== c) : Object.keys(citiesData).filter(c => undefined !== data[c])
+  let cityList = Object.keys(citiesData).filter(c => undefined !== c || undefined !== data[c])
   if (!cityList) return true
 
   // Cities output
   const cities = cityList.map((city, i) => {
-    const geoData = isGeoCodeMap ? state.data.filter(item => city === item[state.columns.geo.name])[0] : data[city]
-    const cityDisplayName = isGeoCodeMap ? city : titleCase(displayGeoName(city))
+    let geoData
+    if (data) {
+      Object.keys(data).forEach(key => {
+        if (city === data[key][state.columns.geo.name]) {
+          geoData = data[key]
+        }
+      })
+    }
+    if (!geoData) {
+      geoData = data ? data[city] : undefined
+    }
+    const cityDisplayName = titleCase(displayGeoName(city))
 
-    const legendColors = isGeoCodeMap && geoData ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false
+    const legendColors = geoData ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false
 
     if (legendColors === false) {
       return true
     }
 
-    const toolTip = applyTooltipsToGeo(cityDisplayName, isGeoCodeMap ? geoData : data[city])
+    const toolTip = applyTooltipsToGeo(cityDisplayName, geoData || data[city])
 
-    const radius = state.general.geoType === 'us' && !isGeoCodeMap ? 8 : isGeoCodeMap ? state.visual.geoCodeCircleSize : 4
+    const radius = state.visual.geoCodeCircleSize || 8
 
     const additionalProps = {
       fillOpacity: state.general.type === 'bubble' ? 0.4 : 1
@@ -71,18 +78,22 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
 
     let transform = ''
 
-    if (!isGeoCodeMap) {
-      transform = `translate(${projection(supportedCities[city])})`
+    if (!geoData?.[state.columns.longitude.name] && !geoData?.[state.columns.latitude.name] && city && supportedCities[city.toUpperCase()]) {
+      transform = `translate(${projection(supportedCities[city.toUpperCase()])})`
     }
 
     let needsPointer = false
 
-    if (isGeoCodeMap) {
+    if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name]) {
       let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
       transform = `translate(${projection(coords)})`
       needsPointer = true
     }
 
+    if (!transform) {
+      return
+    }
+
     const styles = {
       fill: legendColors[0],
       opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,

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

@@ -134,8 +134,6 @@ const EditorPanel = props => {
   }
 
   const handleEditorChanges = async (property, value) => {
-    console.log('prop', property)
-    console.log('value', value)
     switch (property) {
       // change these to be more generic.
       // updateVisualPropertyValue
@@ -278,6 +276,7 @@ const EditorPanel = props => {
         setState({
           ...state,
           visual: {
+            ...state.visual,
             cityStyle: value
           }
         })
@@ -1929,7 +1928,7 @@ const EditorPanel = props => {
                     </label>
                   </fieldset>
                 )}
-                {('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && (
+                {(
                   <>
                     <label>Latitude Column</label>
                     <select
@@ -2850,7 +2849,7 @@ const EditorPanel = props => {
                     )
                   })}
                 </ul>
-                {('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && state.visual.cityStyle === 'circle' && (
+                {state.visual.cityStyle === 'circle' && (
                   <label>
                     Geocode Settings
                     <TextField type='number' value={state.visual.geoCodeCircleSize} section='visual' max='10' fieldName='geoCodeCircleSize' label='Geocode Circle Size' updateField={updateField} />

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

@@ -255,7 +255,7 @@ const HexSettingShapeColumns = props => {
                                             ...group.items,
                                             {
                                               key: '',
-                                              shape: 'Arrow up',
+                                              shape: 'Arrow Up',
                                               column: '',
                                               operator: '=',
                                               value: ''
@@ -309,7 +309,7 @@ const HexSettingShapeColumns = props => {
               copy.push({
                 legendTitle: '',
                 legendDescription: '',
-                items: [{ key: '', shape: 'Arrow up', column: '', operator: '=', value: '' }]
+                items: [{ key: '', shape: 'Arrow Up', column: '', operator: '=', value: '' }]
               })
               copy.legendTitle = ''
               copy.legendDescription = ''

package/src/components/Geo.jsx

@@ -1,9 +1,11 @@
 import React, { memo } from 'react'
 
 const Geo = ({ path, styles, stroke, strokeWidth, ...props }) => {
+  const { className, ...restProps } = props
+  const geoClassName = String(props.additionalData?.name)?.toLowerCase()?.replaceAll(' ', '') || 'country'
   return (
-    <g className='geo-group' css={styles} {...props}>
-      <path tabIndex={-1} className='single-geo' stroke={stroke} strokeWidth={strokeWidth} d={path} />
+    <g className={`geo-group ${geoClassName}`} style={styles} {...restProps}>
+      <path tabIndex={-1} className={`single-geo ${geoClassName}`} stroke={stroke} strokeWidth={strokeWidth} d={path} />
     </g>
   )
 }

package/src/components/Legend/components/LegendItem.Hex.tsx

@@ -3,11 +3,7 @@ import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react
 import parse from 'html-react-parser'
 
 const LegendItemHex = props => {
-  const { state, runtimeLegend, viewport } = props
-  const { legend } = state
-  const { title } = state.general
-
-  const columnLogic = legend.position === 'side' && legend.singleColumn ? 'single-column' : legend.position === 'bottom' && legend.singleRow ? 'single-row' : ''
+  const { state, viewport } = props
 
   const getItemShape = shape => {
     switch (shape) {
@@ -29,15 +25,15 @@ const LegendItemHex = props => {
     state.hexMap.type === 'shapes' &&
     state.hexMap.shapeGroups.map((shapeGroup, shapeGroupIndex) => {
       return (
-        <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex='0'>
+        <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex={0}>
           <section className={legendClasses.section.join(' ')} aria-label='Map Legend'>
-            {legend.title && <span className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</span>}
-            {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>}
+            {shapeGroup.legendTitle && <span className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</span>}
+            {shapeGroup.legendDescription && <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>}
 
             <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>
               {shapeGroup.items.map((item, itemIndex) => {
                 return (
-                  <li className={legendClasses.li.join(' ')}>
+                  <li className={legendClasses.li.join(' ')} key={`hex-legend-item-${itemIndex}`}>
                     {getItemShape(item.shape)} {item.value}
                   </li>
                 )

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

@@ -53,9 +53,9 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
           {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 style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }}>
+                    <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} />}

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

@@ -264,7 +264,6 @@ const SingleStateMap = props => {
         titleCase={titleCase}
         setSharedFilterValue={setSharedFilterValue}
         isFilterValueSupported={isFilterValueSupported}
-        isGeoCodeMap={state.general.type === 'us-geocode'}
       />
     )