@cdc/map 4.24.5 → 4.24.9

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -16,13 +16,14 @@ import { geoAlbersUsa } from 'd3-composite-projections'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import HexIcon from './HexIcon'
 import { patternSizes } from '../helpers/patternSizes'
+import Annotation from '../../Annotation'
 
 import Territory from './Territory'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
 import { MapContext } from '../../../types/MapContext'
-import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { checkColorContrast, getContrastColor, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -64,7 +65,10 @@ const UsaMap = () => {
       state,
       supportedTerritories,
       titleCase,
-      tooltipId
+      tooltipId,
+      handleDragStateChange,
+      setState,
+      mapId
     } = useContext<MapContext>(ConfigContext)
 
   let isFilterValueSupported = false
@@ -118,7 +122,15 @@ const UsaMap = () => {
 
   const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
 
-  const territories = territoriesData.map(territory => {
+  const getTerritoriesClasses = () => {
+    const screenWidth = window?.visualViewport?.width
+    let className = 'territories'
+    if (screenWidth < 700) return 'territories--mobile'
+    if (screenWidth < 900) return 'territories--tablet'
+    return className
+  }
+
+  const territories = territoriesData.map((territory, territoryIndex) => {
     const Shape = isHex ? Territory.Hexagon : Territory.Rectangle
 
     const territoryData = data[territory]
@@ -144,15 +156,28 @@ const UsaMap = () => {
       let needsPointer = false
 
       // If we need to add a pointer cursor
-      if ((state.columns.navigate && territoryData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+      if (
+        (state.columns.navigate && territoryData[state.columns.navigate.name]) ||
+        state.tooltips.appearanceType === 'click'
+      ) {
         needsPointer = true
       }
 
       styles = {
         color: textColor,
         fill: legendColors[0],
-        opacity: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== territoryData[state.columns.geo.name] ? 0.5 : 1,
-        stroke: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === territoryData[state.columns.geo.name] ? 'rgba(0, 0, 0, 1)' : geoStrokeColor,
+        opacity:
+          setSharedFilterValue &&
+          isFilterValueSupported &&
+          setSharedFilterValue !== territoryData[state.columns.geo.name]
+            ? 0.5
+            : 1,
+        stroke:
+          setSharedFilterValue &&
+          isFilterValueSupported &&
+          setSharedFilterValue === territoryData[state.columns.geo.name]
+            ? 'rgba(0, 0, 0, 1)'
+            : geoStrokeColor,
         cursor: needsPointer ? 'pointer' : 'default',
         '&:hover': {
           fill: legendColors[1]
@@ -163,22 +188,20 @@ const UsaMap = () => {
       }
 
       return (
-        <>
-          <Shape
-            key={label}
-            label={label}
-            style={styles}
-            text={styles.color}
-            strokeWidth={1.5}
-            textColor={textColor}
-            onClick={() => geoClickHandler(territory, territoryData)}
-            data-tooltip-id={`tooltip__${tooltipId}`}
-            data-tooltip-html={toolTip}
-            territory={territory}
-            territoryData={territoryData}
-            tabIndex={-1}
-          />
-        </>
+        <Shape
+          key={`label__${territoryIndex}`}
+          label={label}
+          style={styles}
+          text={styles.color}
+          strokeWidth={1.5}
+          textColor={textColor}
+          onClick={() => geoClickHandler(territory, territoryData)}
+          data-tooltip-id={`tooltip__${tooltipId}`}
+          data-tooltip-html={toolTip}
+          territory={territory}
+          territoryData={territoryData}
+          tabIndex={-1}
+        />
       )
     }
   })
@@ -245,8 +268,14 @@ const UsaMap = () => {
 
         styles = {
           fill: state.general.type !== 'bubble' ? legendColors[0] : '#E6E6E6',
-          opacity: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[state.columns.geo.name] ? 0.5 : 1,
-          stroke: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === geoData[state.columns.geo.name] ? 'rgba(0, 0, 0, 1)' : geoStrokeColor,
+          opacity:
+            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[state.columns.geo.name]
+              ? 0.5
+              : 1,
+          stroke:
+            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === geoData[state.columns.geo.name]
+              ? 'rgba(0, 0, 0, 1)'
+              : geoStrokeColor,
           cursor: 'default',
           '&:hover': {
             fill: state.general.type !== 'bubble' ? legendColors[1] : '#e6e6e6'
@@ -257,7 +286,10 @@ const UsaMap = () => {
         }
 
         // When to add pointer cursor
-        if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+        if (
+          (state.columns.navigate && geoData[state.columns.navigate.name]) ||
+          state.tooltips.appearanceType === 'click'
+        ) {
           styles.cursor = 'pointer'
         }
 
@@ -275,33 +307,81 @@ const UsaMap = () => {
                   switch (item.operator) {
                     case '=':
                       if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
-                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return (
+                          <HexIcon
+                            textColor={textColor}
+                            item={item}
+                            index={itemIndex}
+                            centroid={centroid}
+                            iconSize={iconSize}
+                          />
+                        )
                       }
                       break
                     case '≠':
                       if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
-                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return (
+                          <HexIcon
+                            textColor={textColor}
+                            item={item}
+                            index={itemIndex}
+                            centroid={centroid}
+                            iconSize={iconSize}
+                          />
+                        )
                       }
                       break
                     case '<':
                       if (Number(geoData[item.key]) < Number(item.value)) {
-                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return (
+                          <HexIcon
+                            textColor={textColor}
+                            item={item}
+                            index={itemIndex}
+                            centroid={centroid}
+                            iconSize={iconSize}
+                          />
+                        )
                       }
                       break
                     case '>':
                       if (Number(geoData[item.key]) > Number(item.value)) {
-                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return (
+                          <HexIcon
+                            textColor={textColor}
+                            item={item}
+                            index={itemIndex}
+                            centroid={centroid}
+                            iconSize={iconSize}
+                          />
+                        )
                       }
                       break
                     case '<=':
                       if (Number(geoData[item.key]) <= Number(item.value)) {
-                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        return (
+                          <HexIcon
+                            textColor={textColor}
+                            item={item}
+                            index={itemIndex}
+                            centroid={centroid}
+                            iconSize={iconSize}
+                          />
+                        )
                       }
                       break
                     case '>=':
                       if (item.operator === '>=') {
                         if (Number(geoData[item.key]) >= Number(item.value)) {
-                          return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                          return (
+                            <HexIcon
+                              textColor={textColor}
+                              item={item}
+                              index={itemIndex}
+                              centroid={centroid}
+                              iconSize={iconSize}
+                            />
+                          )
                         }
                       }
                       break
@@ -316,7 +396,15 @@ const UsaMap = () => {
 
         return (
           <g data-name={geoName} key={key} tabIndex={-1}>
-            <g className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={tooltip} tabIndex={-1}>
+            <g
+              className='geo-group'
+              style={styles}
+              onClick={() => geoClickHandler(geoDisplayName, geoData)}
+              id={geoName}
+              data-tooltip-id={`tooltip__${tooltipId}`}
+              data-tooltip-html={tooltip}
+              tabIndex={-1}
+            >
               {/* state path */}
               <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
 
@@ -327,15 +415,45 @@ const UsaMap = () => {
                 const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
                 const patternColor = patternData.color || getContrastColor('#000', currentFill)
 
+                if (!hasMatchingValues) return
+                checkColorContrast(currentFill, patternColor)
+
                 return (
-                  hasMatchingValues && (
-                    <>
-                      {pattern === 'waves' && <PatternWaves id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 10} width={patternSizes[size] ?? 10} fill={patternColor} />}
-                      {pattern === 'circles' && <PatternCircles id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 10} width={patternSizes[size] ?? 10} fill={patternColor} />}
-                      {pattern === 'lines' && <PatternLines id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 6} width={patternSizes[size] ?? 6} stroke={patternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
-                      <path className={`pattern-geoKey--${dataKey}`} tabIndex={-1} stroke='transparent' d={path} fill={`url(#${dataKey}--${geoIndex})`} />
-                    </>
-                  )
+                  <>
+                    {pattern === 'waves' && (
+                      <PatternWaves
+                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        height={patternSizes[size] ?? 10}
+                        width={patternSizes[size] ?? 10}
+                        fill={patternColor}
+                      />
+                    )}
+                    {pattern === 'circles' && (
+                      <PatternCircles
+                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        height={patternSizes[size] ?? 10}
+                        width={patternSizes[size] ?? 10}
+                        fill={patternColor}
+                      />
+                    )}
+                    {pattern === 'lines' && (
+                      <PatternLines
+                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        height={patternSizes[size] ?? 6}
+                        width={patternSizes[size] ?? 6}
+                        stroke={patternColor}
+                        strokeWidth={1}
+                        orientation={['diagonalRightToLeft']}
+                      />
+                    )}
+                    <path
+                      className={`pattern-geoKey--${dataKey}`}
+                      tabIndex={-1}
+                      stroke='transparent'
+                      d={path}
+                      fill={`url(#${mapId}--${dataKey}--${geoIndex})`}
+                    />
+                  </>
                 )
               })}
               {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
@@ -378,7 +496,18 @@ const UsaMap = () => {
 
     // Bubbles
     if (state.general.type === 'bubble') {
-      geosJsx.push(<BubbleList key='bubbles' data={state.data} runtimeData={data} state={state} projection={projection} applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} displayGeoName={displayGeoName} />)
+      geosJsx.push(
+        <BubbleList
+          key='bubbles'
+          data={state.data}
+          runtimeData={data}
+          state={state}
+          projection={projection}
+          applyLegendToRow={applyLegendToRow}
+          applyTooltipsToGeo={applyTooltipsToGeo}
+          displayGeoName={displayGeoName}
+        />
+      )
     }
 
     // })
@@ -427,8 +556,22 @@ const UsaMap = () => {
 
     return (
       <g tabIndex={-1}>
-        <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})`}>
+        <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>
@@ -447,6 +590,7 @@ const UsaMap = () => {
             {({ features, projection }) => constructGeoJsx(features, projection)}
           </AlbersUsa>
         )}
+        {state.annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
       {territories.length > 0 && (
@@ -456,7 +600,7 @@ const UsaMap = () => {
               <span className='territories-label label'>{state.general.territoriesLabel}</span>
             </div>
             <div>
-              <span className={window.visualViewport.width < 700 ? 'territories--mobile' : 'territories'}>{territories}</span>
+              <span className={getTerritoriesClasses()}>{territories}</span>
             </div>
           </div>
         </>

package/src/components/UsaMap/data/us-extended-geography.json

@@ -0,0 +1 @@
+{"type":"Topology","arcs":[[[128628,58684],[30,57],[-17,63],[30,47],[44,-21],[35,35],[74,5],[26,-46],[170,8],[9,-28],[-140,-76],[-178,-47],[-83,3]],[[1608,280],[113,17],[5,-80],[-39,13],[-35,-44],[-44,94]],[[1408,384],[91,12],[-17,-33],[-57,-19],[-17,40]],[[122,156],[48,-77]],[[170,79],[-65,-79],[-48,74],[-57,25],[57,55],[65,2]],[[128706,59939],[0,-30]],[[128706,59909],[26,-69],[-69,-17],[-66,36],[-30,-32],[-52,78],[-105,-23],[30,85],[44,-36],[52,41],[83,-33],[87,0]],[[384328,54018],[17,44],[9,159],[39,-19],[87,105],[22,-34],[-61,-126],[17,-99],[-56,11],[0,-115],[-53,28],[-21,46]],[[128759,59886],[56,61],[48,-6],[66,-44],[-57,-7],[4,-77],[-39,32],[-57,-8],[-21,49]],[[128706,59939],[57,10],[-9,-37],[-48,-3]],[[383033,50942],[22,23],[148,25],[92,216],[26,102],[30,-17],[31,-68],[61,-17],[-44,-139],[-139,-171],[-39,-69],[-9,-175],[-52,-88],[-79,47],[-30,159],[35,79],[-53,93]],[[384201,53806],[18,70],[56,85],[22,-85],[-17,-37],[30,-63],[-9,-96],[-39,-46],[-61,172]],[[384746,55614],[44,68],[17,-25],[-35,-71],[-26,28]],[[384485,58543],[21,31],[5,-77],[-26,46]],[[384354,59393],[61,84],[0,93],[48,0],[0,-104],[-40,-21],[-43,-86],[-26,34]],[[384267,60694],[26,61],[48,-44],[-5,-80],[-35,-36],[-30,39],[-4,60]],[[384262,56279],[87,4],[13,-57],[-82,-13],[-18,66]],[[122,156],[87,108],[18,-31],[117,3],[18,-69],[-31,20],[-126,-47],[-35,-61]],[[383639,52173],[48,80],[92,55],[65,-14],[-9,-55],[-52,-20],[-35,-62],[-48,-9],[-22,36],[-39,-11]],[[113802,97593],[91,110],[48,-53],[113,-133],[-156,-185],[-5,88],[5,58],[-96,115]],[[126645,59224],[-48,-26],[-61,38],[-52,-30],[-31,21],[-74,37],[-96,-88],[-17,10],[-9,-2],[-65,-12],[-18,-38],[-65,47],[-4,27],[-92,12],[-61,-52],[-70,32],[-52,-19],[4,83],[44,49],[-48,19],[13,102],[22,24],[4,118],[31,49],[-40,132],[-47,55],[-57,119],[39,24],[96,74],[-9,115],[31,50],[48,16],[100,-7],[78,-39],[66,-9],[78,6],[87,-6],[70,-22],[105,40],[43,-17],[66,-6],[78,-24],[35,32],[109,0],[43,-21],[53,10],[87,-25],[48,-24],[39,35],[109,-41],[57,14],[104,-13],[92,-50],[43,-2],[53,-69],[100,-39],[52,44],[-9,-72],[14,-109],[56,-71],[-30,-67],[-48,29],[13,-44],[-39,4],[-35,-51],[-35,21],[-26,-32],[-44,-80],[-26,-110],[-39,-30],[-26,-75],[-74,-57],[-79,-24],[-52,19],[-31,-42],[-30,20],[-105,-67],[-43,14],[-31,-40],[-30,-3],[-27,57],[-91,58],[-57,-69],[-78,82],[-48,12],[-61,-26]],[[128105,59906],[48,-33],[6,2],[46,18],[39,-56],[-74,-57],[-11,7],[-41,23],[-13,96]],[[124954,59472],[87,19],[22,-68],[-65,-60],[-53,51],[9,58]],[[127817,59480],[214,85],[152,-51],[-78,-40],[-92,-11],[-48,-38],[-34,19],[-75,-27],[-39,63]],[[127795,59986],[31,-22],[0,-69],[-31,91]]],"transform":{"scale":[0.000823601132486181,0.000546229125192084],"translate":[-170.84530299432993,-14.373864584355845]},"objects":{"counties":{"type":"GeometryCollection","geometries":[{"arcs":[[[1]],[[2]]],"type":"MultiPolygon","properties":{"name":"Manu'a"},"id":"60020"},{"arcs":[[3,4]],"type":"Polygon","properties":{"name":"Western"},"id":"60050"},{"arcs":[[5,6]],"type":"Polygon","properties":{"name":"St. Thomas"},"id":"78030"},{"arcs":[[7]],"type":"Polygon","properties":{"name":"Saipan"},"id":"69110"},{"arcs":[[[8]],[[9,-6]]],"type":"MultiPolygon","properties":{"name":"St. John"},"id":"78020"},{"arcs":[[10]],"type":"Polygon","properties":{"name":"Guam"},"id":"66010"},{"arcs":[[11]],"type":"Polygon","properties":{"name":"Tinian"},"id":"69120"},{"arcs":[[[12]],[[13]],[[14]],[[15]],[[16]]],"type":"MultiPolygon","properties":{"name":"Northern Islands"},"id":"69085"},{"arcs":[[-4,17]],"type":"Polygon","properties":{"name":"Eastern"},"id":"60010"},{"arcs":[[18]],"type":"Polygon","properties":{"name":"Rota"},"id":"69100"},{"arcs":[[0]],"type":"Polygon","properties":{"name":"St. Croix"},"id":"78010"},{"arcs":[[0]],"type":"Polygon","properties":{"name":"District of Columbia"},"id":"11"}]},"states":{"type":"GeometryCollection","geometries":[{"arcs":[[[20]],[[21]],[[22]],[[23]],[[24]]],"type":"MultiPolygon","properties":{"name":"Puerto Rico"},"id":"72"},{"arcs":[[[1]],[[2]],[[4,17]]],"type":"MultiPolygon","properties":{"name":"American Samoa"},"id":"60"},{"arcs":[[[6,9]],[[0]],[[8]]],"type":"MultiPolygon","properties":{"name":"United States Virgin Islands"},"id":"78"},{"arcs":[[[7]],[[11]],[[12]],[[13]],[[14]],[[15]],[[16]],[[18]]],"type":"MultiPolygon","properties":{"name":"Commonwealth of the Northern Mariana Islands"},"id":"69"},{"arcs":[[10]],"type":"Polygon","properties":{"name":"Guam"},"id":"66"}]}}}

package/src/components/UsaMap/helpers/map.ts

@@ -0,0 +1,111 @@
+import { feature } from 'topojson-client'
+import usExtendedGeography from './../data/us-extended-geography.json'
+
+export const getCountyTopoURL = year => {
+  return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
+}
+
+export 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')
+      } else {
+        response = await response.json()
+      }
+
+      const counties = [response, usExtendedGeography].flatMap(topo => feature(topo, topo.objects.counties).features)
+      const states = [response, usExtendedGeography].flatMap(topo => feature(topo, topo.objects.states).features)
+
+      const topoData = {
+        year: year || 'default',
+        fulljson: response,
+        counties,
+        states
+      }
+
+      resolve(topoData)
+    }
+
+    const numericYear = parseInt(year)
+
+    if (isNaN(numericYear)) {
+      fetch(getCountyTopoURL(2019)).then(resolveWithTopo)
+    } else if (numericYear > 2022) {
+      fetch(getCountyTopoURL(2022)).then(resolveWithTopo)
+    } else if (numericYear < 2013) {
+      fetch(getCountyTopoURL(2013)).then(resolveWithTopo)
+    } else {
+      switch (numericYear) {
+        case 2022:
+          fetch(getCountyTopoURL(2022)).then(resolveWithTopo)
+          break
+        case 2021:
+          fetch(getCountyTopoURL(2021)).then(resolveWithTopo)
+          break
+        case 2020:
+          fetch(getCountyTopoURL(2020)).then(resolveWithTopo)
+          break
+        case 2018:
+        case 2017:
+        case 2016:
+        case 2015:
+          fetch(getCountyTopoURL(2015)).then(resolveWithTopo)
+          break
+        case 2014:
+          fetch(getCountyTopoURL(2014)).then(resolveWithTopo)
+          break
+        case 2013:
+          fetch(getCountyTopoURL(2013)).then(resolveWithTopo)
+          break
+        default:
+          fetch(getCountyTopoURL(2019)).then(resolveWithTopo)
+          break
+      }
+    }
+  })
+}
+
+export const getCurrentTopoYear = (state, runtimeFilters) => {
+  let currentYear = state.general.countyCensusYear
+
+  if (state.general.filterControlsCountyYear && runtimeFilters && runtimeFilters.length > 0) {
+    let yearFilter = runtimeFilters.filter(filter => filter.columnName === state.general.filterControlsCountyYear)
+    if (yearFilter.length > 0 && yearFilter[0].active) {
+      currentYear = yearFilter[0].active
+    }
+  }
+
+  return currentYear || 'default'
+}
+
+export const isTopoReady = (topoData, state, runtimeFilters) => {
+  let currentYear = getCurrentTopoYear(state, runtimeFilters)
+
+  return topoData.year && (!currentYear || currentYear === topoData.year)
+}
+
+export const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {
+  // Get all keys of the data object
+  const keys = Object.keys(data)
+
+  // Filter out the 'fromHash' key
+  const otherKeys = keys.filter(key => key !== 'fromHash')
+
+  // Check if there are any other keys left
+  return otherKeys.length > 0
+}
+
+export const getFilterControllingStatePicked = (state, runtimeData) => {
+  if (!state.general.filterControlsStatePicked || !runtimeData) {
+    const statePicked = state?.general?.statePicked?.stateName
+    return statePicked
+  } else {
+    if (hasMoreThanFromHash(runtimeData)) {
+      let statePickedFromFilter = Object.values(runtimeData)?.map(s => s[state.general.filterControlsStatePicked])?.[0]
+      const statePicked = statePickedFromFilter || state.general.statePicked.stateName || 'Alabama'
+      return statePicked
+    }
+    return null
+  }
+}

package/src/components/WorldMap/WorldMap.tsx

@@ -10,6 +10,7 @@ import Geo from '../Geo'
 import CityList from '../CityList'
 import BubbleList from '../BubbleList'
 import ConfigContext from '../../context'
+import ZoomControls from '../ZoomControls'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
@@ -34,7 +35,9 @@ const WorldMap = () => {
     state,
     supportedCountries,
     titleCase,
-    tooltipId
+    tooltipId,
+    setScale,
+    setTranslate
   } = useContext(ConfigContext)
 
   // TODO Refactor - state should be set together here to avoid rerenders
@@ -59,35 +62,6 @@ const WorldMap = () => {
     setPosition(pos => ({ ...pos, zoom: pos.zoom / 1.5 }))
   }
 
-  const ZoomControls = ({ position, setPosition, state, setState, setRuntimeData, generateRuntimeData }) => {
-    if (!state.general.allowMapZoom) return
-    return (
-      <div className='zoom-controls' data-html2canvas-ignore>
-        <button onClick={() => handleZoomIn(position, setPosition)} aria-label='Zoom In'>
-          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
-            <line x1='12' y1='5' x2='12' y2='19' />
-            <line x1='5' y1='12' x2='19' y2='12' />
-          </svg>
-        </button>
-        <button onClick={() => handleZoomOut(position, setPosition)} aria-label='Zoom Out'>
-          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
-            <line x1='5' y1='12' x2='19' y2='12' />
-          </svg>
-        </button>
-        {state.general.type === 'bubble' && (
-          <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
-            Reset Filters
-          </button>
-        )}
-        {state.general.type === 'world-geocode' && (
-          <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom'>
-            Reset Zoom
-          </button>
-        )}
-      </div>
-    )
-  }
-
   // TODO Refactor - state should be set together here to avoid rerenders
   const handleCircleClick = (country, state, setState, setRuntimeData, generateRuntimeData) => {
     if (!state.general.allowMapZoom) return
@@ -173,7 +147,7 @@ const WorldMap = () => {
       }
 
       // Default return state, just geo with no additional information
-      return <Geo additionalData={additionalData} geoData={geoData} state={state} key={i + '-geo'} stroke={geoStrokeColor} strokeWidth={strokeWidth} style={styles} path={path} />
+      return <Geo additionaldata={JSON.stringify(additionalData)} geodata={JSON.stringify(geoData)} state={state} key={i + '-geo'} stroke={geoStrokeColor} strokeWidth={strokeWidth} style={styles} path={path} />
     })
 
     // Cities
@@ -217,7 +191,18 @@ const WorldMap = () => {
         </svg>
       )}
       {(state.general.type === 'data' || (state.general.type === 'world-geocode' && hasZoom) || (state.general.type === 'bubble' && hasZoom)) && (
-        <ZoomControls position={position} setPosition={setPosition} setRuntimeData={setRuntimeData} state={state} setState={setState} generateRuntimeData={generateRuntimeData} />
+        <ZoomControls
+          // prettier-ignore
+          generateRuntimeData={generateRuntimeData}
+          handleZoomIn={handleZoomIn}
+          handleZoomOut={handleZoomOut}
+          position={position}
+          setPosition={setPosition}
+          setRuntimeData={setRuntimeData}
+          setState={setState}
+          state={state}
+          handleReset={handleReset}
+        />
       )}
     </ErrorBoundary>
   )

package/src/components/ZoomControls.tsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react'
+import { MapConfig } from '../types/MapConfig'
+import ConfigContext from '../context'
+
+type ZoomControlsProps = {
+  handleZoomIn: (coordinates: [Number, Number], setPosition: Function) => void
+  handleZoomOut: (coordinates: [Number, Number], setPosition: Function) => void
+  handleReset: (coordinates: [Number, Number], setPosition: Function) => void
+}
+
+const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleReset }) => {
+  const { state, setState, setRuntimeData, setPosition, position, generateRuntimeData } = useContext<MapContext>(ConfigContext)
+  if (!state.general.allowMapZoom) return
+  return (
+    <div className='zoom-controls' data-html2canvas-ignore>
+      <button onClick={() => handleZoomIn(position, setPosition)} aria-label='Zoom In'>
+        <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+          <line x1='12' y1='5' x2='12' y2='19' />
+          <line x1='5' y1='12' x2='19' y2='12' />
+        </svg>
+      </button>
+      <button onClick={() => handleZoomOut(position, setPosition)} aria-label='Zoom Out'>
+        <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+          <line x1='5' y1='12' x2='19' y2='12' />
+        </svg>
+      </button>
+      {state.general.type === 'bubble' && (
+        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
+          Reset Filters
+        </button>
+      )}
+      {(state.general.type === 'world-geocode' || state.general.geoType === 'single-state') && (
+        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom'>
+          Reset Zoom
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default ZoomControls

package/src/data/initial-state.js

@@ -1,5 +1,8 @@
 export default {
+  annotations: [],
   general: {
+    noStateFoundMessage: 'Map Unavailable',
+    annotationDropdownText: 'Annotations',
     geoBorderColor: 'darkGray',
     headerColor: 'theme-blue',
     title: '',
@@ -44,7 +47,8 @@ export default {
       prefix: '',
       suffix: '',
       name: '',
-      label: ''
+      label: '',
+      roundToPlace: 0
     },
     navigate: {
       name: ''
@@ -64,7 +68,12 @@ export default {
     type: 'equalnumber',
     numberOfItems: 3,
     position: 'side',
-    title: 'Legend'
+    title: '',
+    style: 'circles',
+    subStyle: 'linear blocks',
+    tickRotation: '',
+    singleColumnLegend: false,
+    hideBorder: false
   },
   filters: [],
   table: {