@cdc/map 4.24.1 → 4.24.3

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

@@ -1,18 +1,20 @@
 //TODO: Move legends to core
-import { useContext } from 'react'
+import { forwardRef, useContext } from 'react'
 import parse from 'html-react-parser'
-import chroma from 'chroma-js'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
 import LegendItemHex from './LegendItem.Hex'
+import Button from '@cdc/core/components/elements/Button'
 
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import ConfigContext from '../../../context'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
+import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
+import { Group } from '@visx/group'
 import './index.scss'
 
-const Legend = () => {
+const Legend = forwardRef((props, ref) => {
   // prettier-ignore
   const {
     displayDataAsText,
@@ -93,8 +95,16 @@ const Legend = () => {
           onClick={() => {
             toggleLegendActive(idx, legendLabel)
           }}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              toggleLegendActive(idx, legendLabel)
+            }
+          }}
+          role='button'
+          tabIndex={0}
         >
-          <LegendCircle fill={entry.color} /> <span className='label'>{legendLabel}</span>
+          <LegendCircle fill={entry.color} /> <span>{legendLabel}</span>
         </li>
       )
     })
@@ -114,7 +124,7 @@ const Legend = () => {
 
         legendItems.push(
           <>
-            <li className={`legend-container__li legend-container__li--geo-pattern`}>
+            <li className={`legend-container__li legend-container__li--geo-pattern`} aria-label='You are on a pattern button. We dont support toggling patterns on this legend at the moment, but provide the area as being focusable for congruity.' tabIndex={0}>
               <span className='legend-item' style={{ border: 'unset' }}>
                 <svg width={legendSize} height={legendSize}>
                   {pattern === 'waves' && <PatternWaves id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
@@ -136,21 +146,33 @@ const Legend = () => {
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
-    e.preventDefault()
+    const legend = ref.current
+    if (e) {
+      e.preventDefault()
+    }
     resetLegendToggles()
     setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
+    if (legend) {
+      legend.focus()
+    }
+  }
+
+  const pin = <path className='marker' d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z' strokeWidth={2} stroke={'black'} transform={`scale(0.5)`} />
+
+  const cityStyleShapes = {
+    pin: pin,
+    circle: <GlyphCircle color='#000' size={150} />,
+    square: <GlyphSquare color='#000' size={150} />,
+    diamond: <GlyphDiamond color='#000' size={150} />,
+    star: <GlyphStar color='#000' size={150} />,
+    triangle: <GlyphTriangle color='#000' size={150} />
   }
 
   return (
     <ErrorBoundary component='Sidebar'>
       <div className='legends'>
-        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend'>
+        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend' tabIndex={0} ref={ref}>
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
-            {runtimeLegend.disabledAmt > 0 && (
-              <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
-                Clear
-              </button>
-            )}
             {legend.title && <span className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</span>}
             {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>}
             {legend.dynamicDescription === true &&
@@ -172,12 +194,44 @@ const Legend = () => {
             <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
               {legendList()}
             </ul>
+            {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
+              <>
+                <hr />
+                <div className={legendClasses.div.join(' ') || ''}>
+                  {state.visual.cityStyleLabel && (
+                    <div>
+                      <svg>
+                        <Group top={state.visual.cityStyle === 'pin' ? 19 : state.visual.cityStyle === 'triangle' ? 13 : 11} left={10}>
+                          {cityStyleShapes[state.visual.cityStyle.toLowerCase()]}
+                        </Group>
+                      </svg>
+                      <p>{state.visual.cityStyleLabel}</p>
+                    </div>
+                  )}
+
+                  {state.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 onClick={handleReset}>Reset</Button>}
           </section>
         </aside>
         {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />}
       </div>
     </ErrorBoundary>
   )
-}
+})
 
 export default Legend

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/Legend/components/index.scss

@@ -89,17 +89,14 @@
       }
       .legend-container__reset-button {
         font-size: 0.75em;
-        color: rgba(0, 0, 0, 0.6);
-        position: absolute;
         right: 1em;
-        background: rgba(0, 0, 0, 0.1);
         text-transform: uppercase;
         transition: 0.2s all;
         padding: 0.2em 0.5em;
         border: rgba(0, 0, 0, 0.2) 1px solid;
+        padding: 0.375rem;
         &:hover {
           text-decoration: none;
-          background: rgba(0, 0, 0, 0.15);
           transition: 0.2s all;
         }
       }
@@ -118,7 +115,7 @@
           flex-direction: column;
         }
 
-        &:not(.vertical-sorted, .legend-container__ul--single-column) {
+        &:not(.vertical-sorted, .legend-container__ul--single-column, .single-row) {
           width: 100%;
           @include breakpoint(sm) {
             .legend-container__li {
@@ -231,5 +228,34 @@
         }
       }
     }
+    & .shape-container {
+      &.single-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+
+        & > div {
+          margin-right: 2em;
+        }
+        & > div:last-child {
+          margin-right: 0;
+        }
+      }
+
+      & > div {
+        display: flex;
+        flex-direction: row;
+      }
+      & div > svg {
+        width: 25px;
+        height: 32px;
+      }
+      & div > p {
+        white-space: nowrap;
+        margin-top: 1px;
+      }
+    }
   }
 }

package/src/components/UsaMap/components/HexIcon.tsx

@@ -0,0 +1,41 @@
+import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight, AiOutlineArrowLeft } from 'react-icons/ai'
+import { Group } from '@visx/group'
+
+type HexIconProps = {
+  item: {
+    operator: '=' | '≠' | '<' | '>' | '<=' | '>='
+    shape: 'Arrow Up' | 'Arrow Down' | 'Arrow Right' | 'Arrow Left'
+    key: string
+    value: string
+  }
+  index: number
+  centroid: [number, number]
+  iconSize: number
+  textColor: string
+  isTerritory: boolean
+}
+
+const HexIcon: React.FC<HexIconProps> = props => {
+  const { item, index, centroid, iconSize, textColor, isTerritory } = props
+  if (!centroid) return
+
+  if (isTerritory) {
+    return (
+      <Group style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }} key={`territory-hex--${index}`}>
+        {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} />}
+        {item.shape === 'Arrow Left' && <AiOutlineArrowLeft size={12} stroke='none' fontWeight={100} />}
+      </Group>
+    )
+  }
+  return (
+    <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${index}`}>
+      {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
+      {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
+      {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}
+      {item.shape === 'Arrow Left' && <AiOutlineArrowLeft />}
+    </Group>
+  )
+}
+export default HexIcon

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

@@ -2,10 +2,9 @@ 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 HexIcon from '../HexIcon'
 import { Text } from '@visx/text'
-import chroma from 'chroma-js'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const offsets = {
   'US-VT': [50, -8],
@@ -52,16 +51,41 @@ 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) {
-                  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>
-                  )
-                }
+              switch (item.operator) {
+                case '=':
+                  if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '≠':
+                  if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '<':
+                  if (Number(geoData[item.key]) < Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '>':
+                  if (Number(geoData[item.key]) > Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '<=':
+                  if (Number(geoData[item.key]) <= Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '>=':
+                  if (item.operator === '>=') {
+                    if (Number(geoData[item.key]) >= Number(item.value)) {
+                      return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                    }
+                  }
+                  break
+                default:
+                  break
               }
             })
           })}
@@ -71,12 +95,7 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
 
     if (undefined === abbr) return null
 
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020' // dark gray
-    }
+    let textColor = getContrastColor('#FFF', bgColor)
 
     // always make HI black since it is off to the side
     if (abbr === 'US-HI') {

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

@@ -1,21 +1,16 @@
 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'
-}
+import { patternSizes } from './../../helpers/patternSizes'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 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'>
+      <g {...props} strokeLinejoin='round' tabIndex={-1}>
         <path
           stroke={stroke}
           strokeWidth={strokeWidth}
@@ -27,32 +22,26 @@ const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPa
         </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'
-          }
+          const patternColor = getContrastColor('#FFF', props.style.fill)
+          const hasMatchingValues = supportedTerritories[territory]?.includes(patternData?.dataValue)
 
           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']} />}
+              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
+              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
+              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 6} width={patternSizes[patternData?.size] ?? 6} stroke={patternColor} 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'
+                color={patternData ? 'white' : textColor}
                 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'>
+              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ fill: patternData ? 'white' : 'black', stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='stroke'>
                 {label}
               </text>
             </>

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect, memo, useContext } from 'react'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
-import { jsx } from '@emotion/react'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+// 3rd party
 import { geoCentroid } from 'd3-geo'
 import { feature } from 'topojson-client'
-import topoJSON from '../data/us-regions-topo-2.json'
 import { Mercator } from '@visx/geo'
-import chroma from 'chroma-js'
+
+// cdc
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
@@ -74,7 +76,7 @@ const UsaRegionMap = props => {
 
     let toolTip
 
-    let styles = {
+    let styles: React.CSSProperties = {
       fill: '#E6E6E6',
       color: '#202020'
     }
@@ -87,13 +89,8 @@ const UsaRegionMap = props => {
 
     const legendColors = applyLegendToRow(territoryData)
 
-    let textColor = '#FFF'
-
     if (legendColors) {
-      // Use white text if the background is dark, and dark grey if it's light
-      if (chroma.contrast(textColor, legendColors[0]) < 3.5) {
-        textColor = '#202020'
-      }
+      const textColor = getContrastColor('#FFF', legendColors[0])
 
       let needsPointer = false
 
@@ -124,12 +121,7 @@ const UsaRegionMap = props => {
 
     if (undefined === abbr) return null
 
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020'
-    }
+    const textColor = getContrastColor('#FFF', bgColor)
 
     let x = 0,
       y = 5
@@ -195,11 +187,7 @@ const UsaRegionMap = props => {
 
         const TerratoryRect = props => {
           const { posX = 0, tName } = props
-          let textColor = '#fff'
-
-          if (chroma.contrast(textColor, legendColors[0]) < 4.5) {
-            textColor = '#202020'
-          }
+          const textColor = getContrastColor('#FFF', legendColors[0])
           return (
             <>
               <rect x={posX} width='36' height='24' rx='6' stroke='#fff' strokeWidth='1' />
@@ -212,28 +200,14 @@ const UsaRegionMap = props => {
 
         const circleRadius = 15
 
-        // SIDE CHART EXPERIMENT
-        // const height = state.data[index].Change;
-        // const barHeight = Math.abs(height * 20 );
-        // const barPositive = height > 0;
-        // const barY = barPositive ? -barHeight + 15 : 15;
-        // const baseY = 14;
-        // const barFill = barPositive ? "#fff" : "#fff";
-
         return (
-          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip}>
+          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} tabIndex={-1}>
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
             <g id={`region-${index + 1}-label`}>
               <circle fill='#fff' stroke='#999' cx={circleRadius} cy={circleRadius} r={circleRadius} />
               <text fill='#333' x='15px' y='20px' textAnchor='middle'>
                 {index + 1}
               </text>
-              {/* SIDE CHART EXPERIMENT */}
-              {/*<g y={barY*20}>*/}
-              {/*  <rect x="-20" y={barY} width="10" height={barHeight} fill={barFill} stroke="#333"/>*/}
-              {/*  <rect x="-23" y={baseY} width="16" height="2" fill="#000" />*/}
-              {/*</g>*/}
-              {/* / SIDE CHART EXPERIMENT */}
             </g>
             {geoKey === 'region 2' && (
               <g id='region-2-territories'>

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'}
       />
     )