@cdc/map 4.24.12-2 → 4.25.1

package/src/CdcMap.tsx

@@ -1,47 +1,36 @@
+// Vendor
 import React, { useState, useEffect, useRef, useCallback, useId } from 'react'
 import * as d3 from 'd3'
-import Layout from '@cdc/core/components/Layout'
-import Waiting from '@cdc/core/components/Waiting'
-import Annotation from './components/Annotation'
-import Error from './components/EditorPanel/components/Error'
 import _ from 'lodash'
-import { applyColorToLegend } from './helpers/applyColorToLegend'
-
-// types
-import { type ViewportSize } from './types/MapConfig'
-import { type DimensionsType } from '@cdc/core/types/Dimensions'
-
-// IE11
 import 'whatwg-fetch'
-import ResizeObserver from 'resize-observer-polyfill'
-
-// Third party
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import Papa from 'papaparse'
 import parse from 'html-react-parser'
 import 'react-tooltip/dist/react-tooltip.css'
 
-// Helpers
-import { hashObj } from './helpers/hashObj'
-import { generateRuntimeLegendHash } from './helpers/generateRuntimeLegendHash'
-import { generateColorsArray } from './helpers/generateColorsArray'
-import { getUniqueValues } from './helpers/getUniqueValues'
-import { publish } from '@cdc/core/helpers/events'
-import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
-import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+// Core Components
+import DataTable from '@cdc/core/components/DataTable'
+import Filters, { useFilters } from '@cdc/core/components/Filters'
+import Layout from '@cdc/core/components/Layout'
+import MediaControls from '@cdc/core/components/MediaControls'
+import SkipTo from '@cdc/core/components/elements/SkipTo'
 import Title from '@cdc/core/components/ui/Title'
+import Waiting from '@cdc/core/components/Waiting'
+
+// types
+import { type Coordinate, type MapConfig } from './types/MapConfig'
 
 // Data
 import { countryCoordinates } from './data/country-coordinates'
 import {
-  supportedStates,
-  supportedTerritories,
-  supportedCountries,
-  supportedCounties,
+  stateFipsToTwoDigit,
   supportedCities,
+  supportedCounties,
+  supportedCountries,
+  supportedRegions,
+  supportedStates,
   supportedStatesFipsCodes,
-  stateFipsToTwoDigit,
-  supportedRegions
+  supportedTerritories
 } from './data/supported-geos'
 import colorPalettes from '@cdc/core/data/colorPalettes'
 import initialState from './data/initial-state'
@@ -51,34 +40,48 @@ import ExternalIcon from './images/external-link.svg'
 
 // Sass
 import './scss/main.scss'
-
-// TODO: combine in scss.
 import './scss/btn.scss'
 
-// Core
-import { DataTransform } from '@cdc/core/helpers/DataTransform'
-import MediaControls from '@cdc/core/components/MediaControls'
+// Core Helpers
+import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-import getViewport from '@cdc/core/helpers/getViewport'
 import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
 import numberFromString from '@cdc/core/helpers/numberFromString'
-import DataTable from '@cdc/core/components/DataTable' // Future: Lazy
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
+import { publish } from '@cdc/core/helpers/events'
+
+// Map Helpers
+import { applyColorToLegend } from './helpers/applyColorToLegend'
+import { closeModal } from './helpers/closeModal'
+import { generateColorsArray } from './helpers/generateColorsArray'
+import { generateRuntimeLegendHash } from './helpers/generateRuntimeLegendHash'
+import { getGeoFillColor } from './helpers/colors'
+import { getUniqueValues } from './helpers/getUniqueValues'
+import { hashObj } from './helpers/hashObj'
+import { navigationHandler } from './helpers/navigationHandler'
+import { validateFipsCodeLength } from './helpers/validateFipsCodeLength'
+import { titleCase } from './helpers/titleCase'
+import { indexOfIgnoreType } from './helpers/indexOfIgnoreType'
 
 // Child Components
+import Annotation from './components/Annotation'
 import ConfigContext from './context'
-import Filters, { useFilters } from '@cdc/core/components/Filters'
-import Modal from './components/Modal'
+import EditorPanel from './components/EditorPanel'
+import Error from './components/EditorPanel/components/Error'
 import Legend from './components/Legend'
+import Modal from './components/Modal'
+import NavigationMenu from './components/NavigationMenu'
+import UsaMap from './components/UsaMap'
+import WorldMap from './components/WorldMap'
+import GoogleMap from './components/GoogleMap'
 
-import EditorPanel from './components/EditorPanel' // Future: Lazy
-import NavigationMenu from './components/NavigationMenu' // Future: Lazy
-import UsaMap from './components/UsaMap' // Future: Lazy
-import WorldMap from './components/WorldMap' // Future: Lazy
+// hooks
 import useTooltip from './hooks/useTooltip'
-import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
-import SkipTo from '@cdc/core/components/elements/SkipTo'
-import { getGeoFillColor } from './helpers/colors'
+import useResizeObserver from './hooks/useResizeObserver'
 import { SubGrouping } from '@cdc/core/types/VizFilter'
+import { ViewPort } from '@cdc/core/types/ViewPort'
 
 // Data props
 const stateKeys = Object.keys(supportedStates)
@@ -88,17 +91,7 @@ const countryKeys = Object.keys(supportedCountries)
 const countyKeys = Object.keys(supportedCounties)
 const cityKeys = Object.keys(supportedCities)
 
-const indexOfIgnoreType = (arr, item) => {
-  for (let i = 0; i < arr.length; i++) {
-    if (item === arr[i]) {
-      return i
-    }
-  }
-  return -1
-}
-
 const CdcMap = ({
-  className,
   config,
   navigationHandler: customNavigationHandler,
   isDashboard = false,
@@ -114,11 +107,10 @@ const CdcMap = ({
   const transform = new DataTransform()
   const [translate, setTranslate] = useState([0, 0])
   const [scale, setScale] = useState(1)
-  const [state, setState] = useState({ ...initialState })
+  const [state, setState] = useState<MapConfig>({ ...initialState })
   const [isDraggingAnnotation, setIsDraggingAnnotation] = useState(false)
   const [loading, setLoading] = useState(true)
   const [displayPanel, setDisplayPanel] = useState(true)
-  const [currentViewport, setCurrentViewport] = useState<ViewportSize>('lg')
   const [topoData, setTopoData] = useState<{}>({})
   const [runtimeFilters, setRuntimeFilters] = useState([])
   const [runtimeData, setRuntimeData] = useState({ init: true })
@@ -136,11 +128,10 @@ const CdcMap = ({
   const [filteredCountryCode, setFilteredCountryCode] = useState()
   const [position, setPosition] = useState(state.mapPosition)
   const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
-  const [container, setContainer] = useState()
   const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`) // eslint-disable-line
-  const [dimensions, setDimensions] = useState<DimensionsType>([0, 0])
   const [requiredColumns, setRequiredColumns] = useState(null) // Simple state so we know if we need more information before parsing the map
   const [projection, setProjection] = useState(null)
+  const { currentViewport, dimensions, container, outerContainerRef } = useResizeObserver(isEditor)
 
   const legendRef = useRef(null)
   const tooltipRef = useRef(null)
@@ -149,7 +140,7 @@ const CdcMap = ({
   const tooltipId = `${Math.random().toString(16).slice(-4)}`
   const mapId = useId()
 
-  const { changeFilterActive, handleSorting } = useFilters({ config: state, setConfig: setState })
+  const { handleSorting } = useFilters({ config: state, setConfig: setState })
   let legendMemo = useRef(new Map())
   let legendSpecialClassLastMemo = useRef(new Map())
   let innerContainerRef = useRef()
@@ -174,10 +165,7 @@ const CdcMap = ({
     }
 
     // Navigate is required for navigation maps
-    if (
-      'navigation' === state.general.type &&
-      ('' === state.columns.navigate.name || undefined === state.columns.navigate)
-    ) {
+    if ('navigation' === state.general.type && '' === state.columns.navigate.name) {
       columnList.push('Navigation')
     }
 
@@ -206,7 +194,7 @@ const CdcMap = ({
         const coordinates = countryCoordinates[filteredCountryCode]
         const long = coordinates[1]
         const lat = coordinates[0]
-        const reversedCoordinates = [long, lat]
+        const reversedCoordinates: Coordinate = [long, lat]
 
         setState({
           ...state,
@@ -236,27 +224,11 @@ const CdcMap = ({
     }
   }, [state.mapPosition, setPosition])
 
-  const resizeObserver = new ResizeObserver(entries => {
-    for (let entry of entries) {
-      let { width, height } = entry.contentRect
-      let newViewport = getViewport(entry.contentRect.width)
-
-      let editorWidth = 350
-
-      setCurrentViewport(newViewport)
-
-      if (isEditor) {
-        width = width - editorWidth
-      }
-      setDimensions([width, height])
-    }
-  })
-
   // Tag each row with a UID. Helps with filtering/placing geos. Not enumerable so doesn't show up in loops/console logs except when directly addressed ex row.uid
   // We are mutating state in place here (depending on where called) - but it's okay, this isn't used for rerender
   // eslint-disable-next-line
   const addUIDs = useCallback((obj, fromColumn) => {
-    obj.data.forEach((row, index) => {
+    obj.data.forEach(row => {
       let uid = null
 
       if (row.uid) row.uid = null // Wipe existing UIDs
@@ -383,22 +355,8 @@ const CdcMap = ({
 
     result.runtimeDataHash = runtimeFilters?.fromHash
 
-    // Unified will based the legend off ALL of the data maps received. Otherwise, it will use
+    // Unified will base the legend off ALL of the data maps received. Otherwise, it will use
     let dataSet = obj.legend.unified ? obj.data : Object.values(runtimeData)
-
-    const colorDistributions = {
-      1: [1],
-      2: [1, 3],
-      3: [1, 3, 5],
-      4: [0, 2, 4, 6],
-      5: [0, 2, 4, 6, 7],
-      6: [0, 2, 3, 4, 5, 7],
-      7: [0, 2, 3, 4, 5, 6, 7],
-      8: [0, 2, 3, 4, 5, 6, 7, 8],
-      9: [0, 1, 2, 3, 4, 5, 6, 7, 8],
-      10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-    }
-
     let specialClasses = 0
     let specialClassesHash = {}
 
@@ -424,7 +382,7 @@ const CdcMap = ({
                 specialClasses += 1
               }
 
-              let specialColor = ''
+              let specialColor: number
 
               // color the state if val is in row
               specialColor = result.findIndex(p => p.value === val)
@@ -656,7 +614,6 @@ const CdcMap = ({
         }
       } else {
         // get nums
-        let hasZeroInData = dataSet.filter(obj => obj[state.columns.primary.name] === 0).length > 0
         let domainNums = new Set(dataSet.map(item => item[state.columns.primary.name]))
 
         domainNums = d3.extent(domainNums)
@@ -691,7 +648,7 @@ const CdcMap = ({
 
         const breaks = getBreaks(scale)
 
-        // if seperating zero force it into breaks
+        // if separating zero force it into breaks
         if (breaks[0] !== 0) {
           breaks.unshift(0)
         }
@@ -706,7 +663,7 @@ const CdcMap = ({
               min = 0
             }
 
-            // if we're on the second break, and seperating out zero, increment min to 1.
+            // if we're on the second break, and separating out zero, increment min to 1.
             if (index === 1 && state.legend.separateZero) {
               min = 1
             }
@@ -722,20 +679,12 @@ const CdcMap = ({
             return Math.pow(10, -n)
           }
 
-          const setMax = (index, min) => {
+          const setMax = index => {
             let max = Number(breaks[index + 1]) - getDecimalPlace(Number(state?.columns?.primary?.roundToPlace))
 
-            // check if min and max range are the same
-            // if (min === max + 1) {
-            //     max = breaks[index + 1]
-            // }
-
             if (index === 0 && state.legend.separateZero) {
               max = 0
             }
-            // if ((index === state.legend.specialClasses.length && state.legend.specialClasses.length !== 0) && !state.legend.separateZero && hasZeroInData) {
-            //     max = 0;
-            // }
 
             if (index + 1 === breaks.length) {
               max = domainNums[1]
@@ -753,7 +702,7 @@ const CdcMap = ({
             color: scale(item)
           })
 
-          dataSet.forEach((row, dataIndex) => {
+          dataSet.forEach(row => {
             let number = row[state.columns.primary.name]
             let updated = result.length - 1
 
@@ -958,7 +907,7 @@ const CdcMap = ({
             // Strip hidden characters before we check length
             navigateUrl = navigateUrl.replace(/(\r\n|\n|\r)/gm, '')
           }
-          if (0 === navigateUrl.length) {
+          if (0 === navigateUrl?.length) {
             return false
           }
         }
@@ -989,86 +938,8 @@ const CdcMap = ({
     }
   })
 
-  const outerContainerRef = useCallback(node => {
-    if (node !== null) {
-      resizeObserver.observe(node)
-    }
-    setContainer(node)
-  }, []) // eslint-disable-line
-
   const mapSvg = useRef(null)
 
-  const closeModal = ({ target }) => {
-    if (
-      'string' === typeof target.className &&
-      (target.className.includes('modal-close') || target.className.includes('modal-background')) &&
-      null !== modal
-    ) {
-      setModal(null)
-    }
-  }
-
-  const displayDataAsText = (value, columnName) => {
-    if (value === null || value === '' || value === undefined) {
-      return ''
-    }
-
-    // if string of letters like 'Home' then dont need to format as a number
-    if (
-      typeof value === 'string' &&
-      value.length > 0 &&
-      /[a-zA-Z]/.test(value) &&
-      state.legend.type === 'equalnumber'
-    ) {
-      return value
-    }
-
-    let formattedValue = value
-
-    let columnObj = state.columns[columnName]
-
-    if (columnObj === undefined) {
-      // then use left axis config
-      columnObj = state.columns.primary
-      // NOTE: Left Value Axis uses different names
-      // so map them below so the code below works
-      // - copy commas to useCommas to work below
-      columnObj['useCommas'] = columnObj.commas
-      // - copy roundTo to roundToPlace to work below
-      columnObj['roundToPlace'] = columnObj.roundTo ? columnObj.roundTo : ''
-    }
-
-    if (columnObj) {
-      // If value is a number, apply specific formattings
-      if (Number(value)) {
-        const hasDecimal = columnObj.roundToPlace && (columnObj.roundToPlace !== '' || columnObj.roundToPlace !== null)
-        const decimalPoint = columnObj.roundToPlace ? Number(columnObj.roundToPlace) : 0
-
-        // Rounding
-        if (columnObj.hasOwnProperty('roundToPlace') && hasDecimal) {
-          formattedValue = Number(value).toFixed(decimalPoint)
-        }
-
-        if (columnObj.hasOwnProperty('useCommas') && columnObj.useCommas === true) {
-          // Formats number to string with commas - allows up to 5 decimal places, if rounding is not defined.
-          // Otherwise, uses the rounding value set at 'columnObj.roundToPlace'.
-          formattedValue = Number(value).toLocaleString('en-US', {
-            style: 'decimal',
-            minimumFractionDigits: hasDecimal ? decimalPoint : 0,
-            maximumFractionDigits: hasDecimal ? decimalPoint : 5
-          })
-        }
-      }
-
-      // Check if it's a special value. If it is not, apply the designated prefix and suffix
-      if (false === state.legend.specialClasses.includes(String(value))) {
-        formattedValue = (columnObj.prefix || '') + formattedValue + (columnObj.suffix || '')
-      }
-    }
-
-    return formattedValue
-  }
-
   // this is passed DOWN into the various components
   // then they do a lookup based on the bin number as index into here
   const applyLegendToRow = rowObj => {
@@ -1105,50 +976,6 @@ const CdcMap = ({
     }
   }
 
-  // if city has a hyphen then in tooltip it ends up UPPER CASE instead of just regular Upper Case
-  // - this function is used to prevent that and instead give the formatting that is wanted
-  // Example:  Desired city display in tooltip on map: "Inter-Tribal Indian Reservation"
-  const titleCase = string => {
-    // guard clause else error in editor
-    if (!string) return
-    if (string !== undefined) {
-      const toTitleCase = word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()
-
-      if (string.toUpperCase().includes('U.S.') || string.toUpperCase().includes('US')) {
-        return string
-          .split(' ')
-          .map(word => {
-            if (word.toUpperCase() === 'U.S.' || word.toUpperCase() === 'US') {
-              return word.toUpperCase()
-            } else {
-              return toTitleCase(word)
-            }
-          })
-          .join(' ')
-      }
-      // if hyphen found, then split, uppercase each word, and put back together
-      if (string.includes('–') || string.includes('-')) {
-        let dashSplit = string.includes('–') ? string.split('–') : string.split('-') // determine hyphen or en dash to split on
-        let splitCharacter = string.includes('–') ? '–' : '-' // print hyphen or en dash later on.
-        let frontSplit = dashSplit[0]
-          .split(' ')
-          .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
-          .join(' ')
-        let backSplit = dashSplit[1]
-          .split(' ')
-          .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
-          .join(' ')
-        return frontSplit + splitCharacter + backSplit
-      } else {
-        // just return with each word uppercase
-        return string
-          .split(' ')
-          .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
-          .join(' ')
-      }
-    }
-  }
-
   // This resets all active legend toggles.
   const resetLegendToggles = async () => {
     let newLegend = [...runtimeLegend]
@@ -1221,7 +1048,7 @@ const CdcMap = ({
       value = dict[value]
     }
 
-    // if you get here and it's 2 letters then DONT titleCase state abbreviations like "AL"
+    // if you get here and it's 2 letters then dont titleCase state abbreviations like "AL"
     if (value.length === 2) {
       return value
     } else {
@@ -1230,7 +1057,7 @@ const CdcMap = ({
   }
 
   // todo: convert to store or context eventually.
-  const { buildTooltip } = useTooltip({ state, displayGeoName, displayDataAsText, supportedStatesFipsCodes })
+  const { buildTooltip } = useTooltip({ state, displayGeoName, supportedStatesFipsCodes })
 
   const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
     let toolTipText = buildTooltip(row, geoName, '')
@@ -1248,11 +1075,15 @@ const CdcMap = ({
             key='modal-navigation-link'
             onClick={e => {
               e.preventDefault()
-              navigationHandler(row[state.columns.navigate.name])
+              navigationHandler(
+                state.general.navigationTarget,
+                row[state.columns.navigate.name],
+                customNavigationHandler
+              )
             }}
           >
             {state.tooltips.linkLabel}
-            {isDomainExternal(row[state.columns.navigate.name]) && <ExternalIcon className='inline-icon ml-1' />}
+            {isDomainExternal(row[state.columns.navigate.name]) && <ExternalIcon className='inline-icon ms-1' />}
           </a>
         )
       }
@@ -1261,24 +1092,6 @@ const CdcMap = ({
     return toolTipText
   }
 
-  const navigationHandler = urlString => {
-    // Call custom navigation method if passed
-    if (customNavigationHandler) {
-      customNavigationHandler(urlString)
-      return
-    }
-
-    // Abort if value is blank
-    if (0 === urlString.length) {
-      throw Error('Blank string passed as URL. Navigation aborted.')
-    }
-
-    const urlObj = new URL(urlString, window.location.origin)
-
-    // Open constructed link in new tab/window
-    window.open(urlObj.toString(), '_blank')
-  }
-
   const geoClickHandler = (key, value) => {
     if (setSharedFilter) {
       setSharedFilter(state.uid, value)
@@ -1295,7 +1108,7 @@ const CdcMap = ({
       })
     }
 
-    // If modals are set or we are on a mobile viewport, display modal
+    // If modals are set, or we are on a mobile viewport, display modal
     if (window.matchMedia('(any-hover: none)').matches || 'click' === state.tooltips.appearanceType) {
       setModal({
         geoName: key,
@@ -1307,64 +1120,7 @@ const CdcMap = ({
 
     // Otherwise if this item has a link specified for it, do regular navigation.
     if (state.columns.navigate && value[state.columns.navigate.name]) {
-      navigationHandler(value[state.columns.navigate.name])
-    }
-  }
-
-  const validateFipsCodeLength = newState => {
-    if (
-      newState.general.geoType === 'us-county' ||
-      newState.general.geoType === 'single-state' ||
-      (newState.general.geoType === 'us' && newState?.data)
-    ) {
-      newState?.data.forEach(dataPiece => {
-        if (dataPiece[newState.columns.geo.name]) {
-          if (
-            !isNaN(parseInt(dataPiece[newState.columns.geo.name])) &&
-            dataPiece[newState.columns.geo.name].length === 4
-          ) {
-            dataPiece[newState.columns.geo.name] = 0 + dataPiece[newState.columns.geo.name]
-          }
-          dataPiece[newState.columns.geo.name] = dataPiece[newState.columns.geo.name].toString()
-        }
-      })
-    }
-    return newState
-  }
-
-  const handleMapAriaLabels = (state = '', testing = false) => {
-    if (testing) console.log(`handleMapAriaLabels Testing On: ${state}`) // eslint-disable-line
-    try {
-      if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
-      let ariaLabel = ''
-      switch (state.general.geoType) {
-        case 'world':
-          ariaLabel += 'World map'
-          break
-        case 'us':
-          ariaLabel += 'United States map'
-          break
-        case 'us-county':
-          ariaLabel += `United States county map`
-          break
-        case 'single-state':
-          ariaLabel += `${state.general.statePicked.stateName} county map`
-          break
-        case 'us-region':
-          ariaLabel += `United States HHS Region map`
-          break
-        default:
-          ariaLabel = 'Data visualization container'
-          break
-      }
-
-      if (state.general.title) {
-        ariaLabel += ` with the title: ${state.general.title}`
-      }
-
-      return ariaLabel
-    } catch (e) {
-      console.error('COVE: ', e.message) // eslint-disable-line
+      navigationHandler(state.general.navigationTarget, value[state.columns.navigate.name], customNavigationHandler)
     }
   }
 
@@ -1468,7 +1224,7 @@ const CdcMap = ({
 
     // This code goes through and adds the defaults for every property declaring in the initial state at the top.
     // This allows you to easily add new properties to the config without having to worry about accounting for backwards compatibility.
-    // Right now this does not work recursively -- only on first and second level properties. So state -> prop1 -> childprop1
+    // Right now this does not work recursively -- only on first and second level properties. So state -> prop1 -> childPropOne
     Object.keys(newState).forEach(key => {
       if ('object' === typeof newState[key] && false === Array.isArray(newState[key])) {
         if (initialState[key]) {
@@ -1539,25 +1295,6 @@ const CdcMap = ({
     }
   }, [state]) // eslint-disable-line
 
-  // DEV-769 make "Data Table" both a required field and default value
-  useEffect(() => {
-    if (state.table?.label === '' || state.table?.label === undefined) {
-      setState({
-        ...state,
-        table: {
-          ...state.table,
-          title: 'Data Table'
-        }
-      })
-    }
-  }, [state.table]) // eslint-disable-line
-
-  // When geo label override changes
-  // - redo the tooltips
-  useEffect(() => {
-    applyTooltipsToGeo()
-  }, [state.general.geoLabelOverride]) // eslint-disable-line
-
   useEffect(() => {
     // UID
     if (state.data && state.columns.geo.name && state.columns.geo.name !== state.data.fromColumn) {
@@ -1678,21 +1415,14 @@ const CdcMap = ({
     handleDragStateChange,
     applyLegendToRow,
     applyTooltipsToGeo,
-    capitalize: state.tooltips?.capitalizeLabels,
-    closeModal,
-    columnsInData: state?.data?.[0] ? Object.keys(state.data[0]) : [],
     container,
     content: modal,
-    currentViewport,
     data: runtimeData,
-    dimensions,
-    displayDataAsText,
     displayGeoName,
     filteredCountryCode,
     generateColorsArray,
     generateRuntimeData,
     geoClickHandler,
-    handleMapAriaLabels,
     hasZoom: state.general.allowMapZoom,
     innerContainerRef,
     isDashboard,
@@ -1700,7 +1430,6 @@ const CdcMap = ({
     isEditor,
     loadConfig,
     logo,
-    navigationHandler,
     position,
     resetLegendToggles,
     runtimeFilters,
@@ -1716,18 +1445,14 @@ const CdcMap = ({
     setSharedFilterValue,
     setState,
     state,
-    supportedCities,
-    supportedCounties,
-    supportedCountries,
-    supportedTerritories,
-    titleCase,
-    type: general.type,
-    viewport: currentViewport,
     tooltipId,
     tooltipRef,
     topoData,
     setTopoData,
-    mapId
+    mapId,
+    outerContainerRef,
+    dimensions,
+    currentViewport
   }
 
   if (!mapProps.data || !state.data) return <></>
@@ -1809,11 +1534,7 @@ const CdcMap = ({
                 <SkipTo skipId={tabId} skipMessage={`Skip over annotations`} key={`skip-annotations`} />
               )}
 
-              {general.introText && (
-                <section className='introText' style={{ padding: '15px', margin: '0px' }}>
-                  {parse(general.introText)}
-                </section>
-              )}
+              {general.introText && <section className='introText mb-4'>{parse(general.introText)}</section>}
 
               {state?.filters?.length > 0 && (
                 <Filters
@@ -1830,10 +1551,10 @@ const CdcMap = ({
                 role='region'
                 tabIndex='0'
                 className={mapContainerClasses.join(' ')}
-                onClick={e => closeModal(e)}
+                onClick={e => closeModal(e, modal, setModal)}
                 onKeyDown={e => {
-                  if (e.keyCode === 13) {
-                    closeModal(e)
+                  if (e.key === 'Enter') {
+                    closeModal(e, modal, setModal)
                   }
                 }}
                 style={{ padding: '15px 0px', margin: '0px' }}
@@ -1849,6 +1570,7 @@ const CdcMap = ({
                       {'us-county' === geoType && <UsaMap.County />}
                       {'world' === geoType && <WorldMap />}
                       {/* logo is handled in UsaMap.State when applicable */}
+                      {'google-map' === geoType && <GoogleMap />}
                       {'data' === general.type && logo && ('us' !== geoType || 'us-geocode' === state.general.type) && (
                         <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
                       )}
@@ -1874,14 +1596,16 @@ const CdcMap = ({
                   data={runtimeData}
                   options={general}
                   columns={state.columns}
-                  navigationHandler={val => navigationHandler(val)}
+                  navigationHandler={val =>
+                    navigationHandler(state.general.navigationBehavior, val, customNavigationHandler)
+                  }
                 />
               )}
 
               {/* Link */}
               {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
 
-              {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
+              {subtext.length > 0 && <p className='subtext mt-4'>{parse(subtext)}</p>}
 
               <MediaControls.Section classes={['download-buttons']}>
                 {state.general.showDownloadImgButton && (
@@ -1919,7 +1643,6 @@ const CdcMap = ({
                     showFullGeoNameInCSV={table.showFullGeoNameInCSV}
                     runtimeLegend={runtimeLegend}
                     runtimeData={runtimeData}
-                    displayDataAsText={displayDataAsText}
                     displayGeoName={displayGeoName}
                     applyLegendToRow={applyLegendToRow}
                     tableTitle={table.label}
@@ -1941,7 +1664,7 @@ const CdcMap = ({
 
               {state.annotations.length > 0 && <Annotation.Dropdown />}
 
-              {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
+              {general.footnotes && <section className='footnotes pt-2 mt-4'>{parse(general.footnotes)}</section>}
             </section>
           )}