@cdc/map 4.24.5 → 4.24.9-1

package/src/CdcMap.tsx

@@ -2,7 +2,13 @@ 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'
+
+// types
+import { type ViewportSize } from './types/MapConfig'
+import { type DimensionsType } from '@cdc/core/types/Dimensions'
 
 // IE11
 import 'whatwg-fetch'
@@ -16,14 +22,28 @@ 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'
 import Title from '@cdc/core/components/ui/Title'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // Data
 import { countryCoordinates } from './data/country-coordinates'
-import { supportedStates, supportedTerritories, supportedCountries, supportedCounties, supportedCities, supportedStatesFipsCodes, stateFipsToTwoDigit, supportedRegions } from './data/supported-geos'
+import {
+  supportedStates,
+  supportedTerritories,
+  supportedCountries,
+  supportedCounties,
+  supportedCities,
+  supportedStatesFipsCodes,
+  stateFipsToTwoDigit,
+  supportedRegions
+} from './data/supported-geos'
 import colorPalettes from '@cdc/core/data/colorPalettes'
 import initialState from './data/initial-state'
 
@@ -42,7 +62,6 @@ import MediaControls from '@cdc/core/components/MediaControls'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import getViewport from '@cdc/core/helpers/getViewport'
 import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
-import Loading from '@cdc/core/components/Loading'
 import numberFromString from '@cdc/core/helpers/numberFromString'
 import DataTable from '@cdc/core/components/DataTable' // Future: Lazy
 
@@ -68,34 +87,6 @@ const countryKeys = Object.keys(supportedCountries)
 const countyKeys = Object.keys(supportedCounties)
 const cityKeys = Object.keys(supportedCities)
 
-const generateColorsArray = (color = '#000000', special = false) => {
-  let colorObj = chroma(color)
-  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
-
-  return [color, hoverColor, colorObj.darken(0.3).hex()]
-}
-
-const hashObj = row => {
-  try {
-    if (!row) throw new Error('No row supplied to hashObj')
-
-    let str = JSON.stringify(row)
-    let hash = 0
-
-    if (str.length === 0) return hash
-
-    for (let i = 0; i < str.length; i++) {
-      let char = str.charCodeAt(i)
-      hash = (hash << 5) - hash + char
-      hash = hash & hash
-    }
-
-    return hash
-  } catch (e) {
-    console.error('COVE: ', e) // eslint-disable-line
-  }
-}
-
 const indexOfIgnoreType = (arr, item) => {
   for (let i = 0; i < arr.length; i++) {
     if (item === arr[i]) {
@@ -105,32 +96,33 @@ const indexOfIgnoreType = (arr, item) => {
   return -1
 }
 
-// returns string[]
-const getUniqueValues = (data, columnName) => {
-  let result = {}
-
-  for (let i = 0; i < data.length; i++) {
-    let val = data[i][columnName]
-
-    if (undefined === val) continue
-
-    if (undefined === result[val]) {
-      result[val] = true
-    }
-  }
-
-  return Object.keys(result)
-}
-
-const CdcMap = ({ className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, isDebug = false, configUrl, logo = '', setConfig, setSharedFilter, setSharedFilterValue, link }) => {
+const CdcMap = ({
+  className,
+  config,
+  navigationHandler: customNavigationHandler,
+  isDashboard = false,
+  isEditor = false,
+  isDebug = false,
+  configUrl,
+  logo = '',
+  setConfig,
+  setSharedFilter,
+  setSharedFilterValue,
+  link
+}) => {
   const transform = new DataTransform()
+  const [translate, setTranslate] = useState([0, 0])
+  const [scale, setScale] = useState(1)
   const [state, setState] = useState({ ...initialState })
+  const [isDraggingAnnotation, setIsDraggingAnnotation] = useState(false)
   const [loading, setLoading] = useState(true)
   const [displayPanel, setDisplayPanel] = useState(true)
-  const [currentViewport, setCurrentViewport] = useState()
+  const [currentViewport, setCurrentViewport] = useState<ViewportSize>('lg')
+  const [topoData, setTopoData] = useState<Topology | {}>({})
   const [runtimeFilters, setRuntimeFilters] = useState([])
   const [runtimeLegend, setRuntimeLegend] = useState([])
   const [runtimeData, setRuntimeData] = useState({ init: true })
+  const [stateToShow, setStateToShow] = useState(null)
   const [modal, setModal] = useState(null)
   const [accessibleStatus, setAccessibleStatus] = useState('')
   const [filteredCountryCode, setFilteredCountryCode] = useState()
@@ -138,12 +130,16 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   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()
+  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 legendRef = useRef(null)
+  const tooltipRef = useRef(null)
   const legendId = useId()
-  const tooltipId = useId()
+  // create random tooltipId
+  const tooltipId = `${Math.random().toString(16).slice(-4)}`
+  const mapId = useId()
 
   const { changeFilterActive, handleSorting } = useFilters({ config: state, setConfig: setState })
   let legendMemo = useRef(new Map())
@@ -152,6 +148,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   if (isDebug) console.log('CdcMap state=', state) // <eslint-disable-line></eslint-disable-line>
 
+  const handleDragStateChange = isDragging => {
+    setIsDraggingAnnotation(isDragging)
+  }
+
   const columnsRequiredChecker = useCallback(() => {
     let columnList = []
 
@@ -166,15 +166,24 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
 
     // 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 || undefined === state.columns.navigate)
+    ) {
       columnList.push('Navigation')
     }
 
-    if (('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && '' === state.columns.latitude.name) {
+    if (
+      ('us-geocode' === state.general.type || 'world-geocode' === state.general.type) &&
+      '' === state.columns.latitude.name
+    ) {
       columnList.push('Latitude')
     }
 
-    if (('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && '' === state.columns.longitude.name) {
+    if (
+      ('us-geocode' === state.general.type || 'world-geocode' === state.general.type) &&
+      '' === state.columns.longitude.name
+    ) {
       columnList.push('Longitude')
     }
 
@@ -219,32 +228,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }, [state.mapPosition, setPosition])
 
-  const generateRuntimeLegendHash = () => {
-    return hashObj({
-      unified: state.legend.unified ?? false,
-      equalNumberOptIn: state.general.equalNumberOptIn ?? false,
-      specialClassesLast: state.legend.showSpecialClassesLast ?? false,
-      color: state.color,
-      customColors: state.customColors,
-      numberOfItems: state.legend.numberOfItems,
-      type: state.legend.type,
-      separateZero: state.legend.separateZero ?? false,
-      primary: state.columns.primary.name,
-      categoryValuesOrder: state.legend.categoryValuesOrder,
-      specialClasses: state.legend.specialClasses,
-      geoType: state.general.geoType,
-      data: state.data,
-      ...runtimeFilters,
-      filters: {
-        ...state.filters
-      }
-    })
-  }
-
   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)
@@ -260,7 +248,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   // 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 => {
+    obj.data.forEach((row, index) => {
       let uid = null
 
       if (row.uid) row.uid = null // Wipe existing UIDs
@@ -320,7 +308,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       }
 
       // County Check
-      if (('us-county' === obj.general.geoType || 'single-state' === obj.general.geoType) && 'us-geocode' !== obj.general.type) {
+      if (
+        ('us-county' === obj.general.geoType || 'single-state' === obj.general.geoType) &&
+        'us-geocode' !== obj.general.type
+      ) {
         const fips = row[obj.columns.geo.name]
         uid = countyKeys.find(key => key === fips)
       }
@@ -329,8 +320,14 @@ 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 &&
+        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) {
@@ -349,6 +346,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     const newLegendMemo = new Map() // Reset memoization
     const newLegendSpecialClassLastMemo = new Map() // Reset bin memoization
     let primaryCol = obj.columns.primary.name,
+      isSingleState = obj.general.geoType === 'single-state',
       isBubble = obj.general.type === 'bubble',
       categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
       type = obj.legend.type,
@@ -680,14 +678,32 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         let colors = colorPalettes[state.color]
         let colorRange = colors.slice(0, state.legend.numberOfItems)
 
+        const getDomain = () => {
+          // backwards compatibility
+          if (state?.columns?.primary?.roundToPlace !== undefined && state?.general?.equalNumberOptIn) {
+            return _.uniq(
+              dataSet.map(item =>
+                Number(item[state.columns.primary.name]).toFixed(Number(state?.columns?.primary?.roundToPlace))
+              )
+            )
+          }
+          return _.uniq(dataSet.map(item => Math.round(Number(item[state.columns.primary.name]))))
+        }
+
+        const getBreaks = scale => {
+          // backwards compatibility
+          if (state?.columns?.primary?.roundToPlace !== undefined && state?.general?.equalNumberOptIn) {
+            return scale.quantiles().map(b => Number(b)?.toFixed(Number(state?.columns?.primary?.roundToPlace)))
+          }
+          return scale.quantiles().map(item => Number(Math.round(item)))
+        }
+
         let scale = d3
           .scaleQuantile()
-          .domain([...new Set(dataSet.map(item => Math.round(item[state.columns.primary.name])))]) // min/max values
+          .domain(getDomain()) // min/max values
           .range(colorRange) // set range to our colors array
 
-        let breaks = scale.quantiles()
-
-        breaks = breaks.map(item => Math.round(item))
+        const breaks = getBreaks(scale)
 
         // if seperating zero force it into breaks
         if (breaks[0] !== 0) {
@@ -716,8 +732,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
             return min
           }
 
+          const getDecimalPlace = n => {
+            return Math.pow(10, -n)
+          }
+
           const setMax = (index, min) => {
-            let max = breaks[index + 1] - 1
+            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) {
@@ -845,57 +865,73 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     if (hash) filters.fromHash = hash
 
-    obj?.filters.forEach(({ columnName, label, labels, queryParameter, orderedValues, active, values, type, showDropdown, setByQueryParameter }, idx) => {
-      let newFilter = runtimeFilters[idx]
+    obj?.filters.forEach(
+      (
+        {
+          columnName,
+          label,
+          labels,
+          queryParameter,
+          orderedValues,
+          active,
+          values,
+          type,
+          showDropdown,
+          setByQueryParameter
+        },
+        idx
+      ) => {
+        let newFilter = runtimeFilters[idx]
+
+        const sortAsc = (a, b) => {
+          return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+        }
 
-      const sortAsc = (a, b) => {
-        return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-      }
+        const sortDesc = (a, b) => {
+          return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+        }
 
-      const sortDesc = (a, b) => {
-        return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-      }
+        if (type !== 'url') {
+          values = getUniqueValues(state.data, columnName)
 
-      if (type !== 'url') {
-        values = getUniqueValues(state.data, columnName)
+          if (obj.filters[idx].order === 'asc') {
+            values = values.sort(sortAsc)
+          }
 
-        if (obj.filters[idx].order === 'asc') {
-          values = values.sort(sortAsc)
-        }
+          if (obj.filters[idx].order === 'desc') {
+            values = values.sort(sortDesc)
+          }
 
-        if (obj.filters[idx].order === 'desc') {
-          values = values.sort(sortDesc)
+          if (obj.filters[idx].order === 'cust') {
+            if (obj.filters[idx]?.values.length > 0) {
+              values = obj.filters[idx].values
+            }
+          }
+        } else {
+          values = values
         }
 
-        if (obj.filters[idx].order === 'cust') {
-          if (obj.filters[idx]?.values.length > 0) {
-            values = obj.filters[idx].values
-          }
+        if (undefined === newFilter) {
+          newFilter = {}
         }
-      } else {
-        values = values
-      }
 
-      if (undefined === newFilter) {
-        newFilter = {}
+        newFilter.order = obj.filters[idx].order ? obj.filters[idx].order : 'asc'
+        newFilter.type = type
+        newFilter.label = label ?? ''
+        newFilter.columnName = columnName
+        newFilter.orderedValues = orderedValues
+        newFilter.queryParameter = queryParameter
+        newFilter.labels = labels
+        newFilter.values = values
+        newFilter.setByQueryParameter = setByQueryParameter
+        handleSorting(newFilter)
+        newFilter.active = active ?? values[0] // Default to first found value
+        newFilter.filterStyle = obj.filters[idx].filterStyle ? obj.filters[idx].filterStyle : 'dropdown'
+        newFilter.showDropdown = showDropdown
+
+        filters.push(newFilter)
       }
-
-      newFilter.order = obj.filters[idx].order ? obj.filters[idx].order : 'asc'
-      newFilter.type = type
-      newFilter.label = label ?? ''
-      newFilter.columnName = columnName
-      newFilter.orderedValues = orderedValues
-      newFilter.queryParameter = queryParameter
-      newFilter.labels = labels
-      newFilter.values = values
-      newFilter.setByQueryParameter = setByQueryParameter
-      handleSorting(newFilter)
-      newFilter.active = active ?? values[0] // Default to first found value
-      newFilter.filterStyle = obj.filters[idx].filterStyle ? obj.filters[idx].filterStyle : 'dropdown'
-      newFilter.showDropdown = showDropdown
-
-      filters.push(newFilter)
-    })
+    )
 
     return filters
   })
@@ -920,11 +956,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
         if (undefined === row.uid) return false // No UID for this row, we can't use for mapping
 
-        // When on a single state map filter runtime data by state
-        if (!(String(row[obj.columns.geo.name]).substring(0, 2) === obj.general?.statePicked?.fipsCode) && obj.general.geoType === 'single-state' && obj.general.type !== 'us-geocode') {
-          return false
-        }
-
         if (row[obj.columns.primary.name]) {
           row[obj.columns.primary.name] = numberFromString(row[obj.columns.primary.name], state)
         }
@@ -972,7 +1003,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const mapSvg = useRef(null)
 
   const closeModal = ({ target }) => {
-    if ('string' === typeof target.className && (target.className.includes('modal-close') || target.className.includes('modal-background')) && null !== modal) {
+    if (
+      'string' === typeof target.className &&
+      (target.className.includes('modal-close') || target.className.includes('modal-background')) &&
+      null !== modal
+    ) {
       setModal(null)
     }
   }
@@ -983,7 +1018,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
 
     // if string of letters like 'Home' then dont need to format as a number
-    if (typeof value === 'string' && value.length > 0 && state.legend.type === 'equalnumber') {
+    if (
+      typeof value === 'string' &&
+      value.length > 0 &&
+      /[a-zA-Z]/.test(value) &&
+      state.legend.type === 'equalnumber'
+    ) {
       return value
     }
 
@@ -1129,7 +1169,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const formatLegendLocation = key => {
     let value = key
     let formattedName = ''
-    let stateName = stateFipsToTwoDigit[key.substring(0, 2)]
+    let stateName = stateFipsToTwoDigit[key?.substring(0, 2)]
+      ? stateFipsToTwoDigit[key?.substring(0, 2)]
+      : key
+      ? runtimeData?.[key]?.[state.columns.geo.name]
+      : ''
 
     if (stateName) {
       formattedName += stateName
@@ -1245,9 +1289,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
 
     // If world-geocode map zoom to geo point
-    if ('world-geocode' === state.general.type) {
-      let lat = value[state.columns.latitude.name]
-      let long = value[state.columns.longitude.name]
+    if (['world-geocode'].includes(state.general.type)) {
+      const lat = value[state.columns.latitude.name]
+      const long = value[state.columns.longitude.name]
 
       setState({
         ...state,
@@ -1272,10 +1316,17 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
 
   const validateFipsCodeLength = newState => {
-    if (newState.general.geoType === 'us-county' || newState.general.geoType === 'single-state' || (newState.general.geoType === 'us' && newState?.data)) {
+    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) {
+          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()
@@ -1393,7 +1444,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       ...configObj
     }
 
-    const urlFilters = newState.filters ? (newState.filters.filter(filter => filter.type === 'url').length > 0 ? true : false) : false
+    const urlFilters = newState.filters
+      ? newState.filters.filter(filter => filter.type === 'url').length > 0
+        ? true
+        : false
+      : false
 
     if (newState.dataUrl && !urlFilters) {
       // handle urls with spaces in the name.
@@ -1437,10 +1492,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     validateFipsCodeLength(newState)
 
     // add ability to rename state properties over time.
-    const processedConfig = { ...(await coveUpdateWorker(newState)) }
+    const processedConfig = { ...coveUpdateWorker(newState) }
 
-    setState(processedConfig)
-    setLoading(false)
+    setTimeout(() => {
+      setState(processedConfig)
+      setLoading(false)
+    }, 10)
   }
 
   const init = async () => {
@@ -1474,13 +1531,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }, [state, container]) // eslint-disable-line
 
-  useEffect(() => {
-    if (state.data) {
-      let newData = generateRuntimeData(state)
-      setRuntimeData(newData)
-    }
-  }, [state.general.statePicked]) // eslint-disable-line
-
   useEffect(() => {
     // When geotype changes - add UID
     if (state.data && state.columns.geo.name) {
@@ -1531,7 +1581,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       }
     }
 
-    const hashLegend = generateRuntimeLegendHash()
+    const hashLegend = generateRuntimeLegendHash(state, runtimeFilters)
 
     const hashData = hashObj({
       data: state.data,
@@ -1541,6 +1591,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       geo: state.columns.geo.name,
       primary: state.columns.primary.name,
       mapPosition: state.mapPosition,
+      map: state.map,
       ...runtimeFilters
     })
 
@@ -1558,12 +1609,21 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }, [state]) // eslint-disable-line
 
   useEffect(() => {
-    const hashLegend = generateRuntimeLegendHash()
+    const hashLegend = generateRuntimeLegendHash(state, runtimeFilters)
 
     // Legend - Update when runtimeData does
     const legend = generateRuntimeLegend(state, runtimeData, hashLegend)
     setRuntimeLegend(legend)
-  }, [runtimeData, state.legend.unified, state.legend.showSpecialClassesLast, state.legend.separateZero, state.general.equalNumberOptIn, state.legend.numberOfItems, state.legend.specialClasses, state.legend.additionalCategories]) // eslint-disable-line
+  }, [
+    runtimeData,
+    state.legend.unified,
+    state.legend.showSpecialClassesLast,
+    state.legend.separateZero,
+    state.general.equalNumberOptIn,
+    state.legend.numberOfItems,
+    state.legend.specialClasses,
+    state.legend.additionalCategories
+  ]) // eslint-disable-line
 
   useEffect(() => {
     reloadURLData()
@@ -1587,7 +1647,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   if (!table.label || table.label === '') table.label = 'Data Table'
 
   // Map container classes
-  let mapContainerClasses = ['map-container', state.legend.position, state.general.type, state.general.geoType, 'outline-none']
+  let mapContainerClasses = [
+    'map-container',
+    state.legend?.position,
+    state.general.type,
+    state.general.geoType,
+    'outline-none'
+  ]
 
   if (modal) {
     mapContainerClasses.push('modal-background')
@@ -1599,14 +1665,26 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   // Props passed to all map types
   const mapProps = {
+    projection,
+    setProjection,
+    stateToShow,
+    setStateToShow,
+    setScale,
+    setTranslate,
+    scale,
+    translate,
+    isDraggingAnnotation,
+    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,
@@ -1625,6 +1703,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     resetLegendToggles,
     runtimeFilters,
     runtimeLegend,
+    runtimeData,
     setAccessibleStatus,
     setFilteredCountryCode,
     setParentConfig: setConfig,
@@ -1642,12 +1721,21 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     titleCase,
     type: general.type,
     viewport: currentViewport,
-    tooltipId
+    tooltipId,
+    tooltipRef,
+    topoData,
+    setTopoData,
+    getTextWidth,
+    mapId
   }
 
   if (!mapProps.data || !state.data) return <></>
 
-  const hasDataTable = state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading
+  const hasDataTable =
+    state.runtime.editorErrorMessage.length === 0 &&
+    true === table.forceDisplay &&
+    general.type !== 'navigation' &&
+    false === loading
 
   const handleMapTabbing = () => {
     let tabbingID
@@ -1680,18 +1768,29 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     </a>
   )
 
+  const sectionClassNames = () => {
+    const classes = ['cove-component__content', 'cdc-map-inner-container', `${currentViewport}`]
+    if (config?.runtime?.editorErrorMessage.length > 0) classes.push('type-map--has-error')
+    return classes.join(' ')
+  }
+
   return (
     <ConfigContext.Provider value={mapProps}>
-      <Layout.VisualizationWrapper config={state} isEditor={isEditor} ref={outerContainerRef} imageId={imageId} showEditorPanel={state.showEditorPanel}>
+      <Layout.VisualizationWrapper
+        config={state}
+        isEditor={isEditor}
+        ref={outerContainerRef}
+        imageId={imageId}
+        showEditorPanel={state.showEditorPanel}
+      >
         {isEditor && <EditorPanel columnsRequiredChecker={columnsRequiredChecker} />}
         <Layout.Responsive isEditor={isEditor}>
-          {state?.runtime?.editorErrorMessage.length > 0 && <Error state={state} />}
-          {requiredColumns && <Waiting requiredColumns={requiredColumns} className={displayPanel ? `waiting` : `waiting collapsed`} />}
+          {requiredColumns && (
+            <Waiting requiredColumns={requiredColumns} className={displayPanel ? `waiting` : `waiting collapsed`} />
+          )}
           {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
-            <section className={`cove-component__content cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
-              {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
-                <ReactTooltip id={`tooltip__${tooltipId}`} float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip tooltip-test' : 'tooltip tooltip-test'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
-              )}
+            <section className={sectionClassNames()} aria-label={'Map: ' + title} ref={innerContainerRef}>
+              {state?.runtime?.editorErrorMessage.length > 0 && <Error state={state} />}
               {/* prettier-ignore */}
               <Title
                 title={title}
@@ -1700,11 +1799,26 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                 classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${general.headerColor}`]}
               />
               <SkipTo skipId={tabId} skipMessage='Skip Over Map Container' />
+              {state?.annotations?.length > 0 && (
+                <SkipTo skipId={tabId} skipMessage={`Skip over annotations`} key={`skip-annotations`} />
+              )}
 
-              {general.introText && <section className='introText'>{parse(general.introText)}</section>}
+              {general.introText && (
+                <section className='introText' style={{ padding: '15px', margin: '0px' }}>
+                  {parse(general.introText)}
+                </section>
+              )}
 
-              {/* prettier-ignore */}
-              {state?.filters?.length > 0 && <Filters config={state} setConfig={setState} getUniqueValues={getUniqueValues} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
+              {state?.filters?.length > 0 && (
+                <Filters
+                  config={state}
+                  setConfig={setState}
+                  getUniqueValues={getUniqueValues}
+                  filteredData={runtimeFilters}
+                  setFilteredData={setRuntimeFilters}
+                  dimensions={dimensions}
+                />
+              )}
 
               <div
                 role='region'
@@ -1716,9 +1830,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                     closeModal(e)
                   }
                 }}
+                style={{ padding: '15px 25px', margin: '0px' }}
               >
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-                <section className='outline-none geography-container' ref={mapSvg} tabIndex='0' style={{ width: '100%' }}>
+                <section className='outline-none geography-container w-100' ref={mapSvg} tabIndex='0'>
                   {currentViewport && (
                     <>
                       {modal && <Modal />}
@@ -1732,10 +1847,21 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                   )}
                 </section>
 
-                {general.showSidebar && 'navigation' !== general.type && <Legend ref={legendRef} skipId={tabId} />}
+                {general.showSidebar && 'navigation' !== general.type && (
+                  <Legend dimensions={dimensions} currentViewport={currentViewport} ref={legendRef} skipId={tabId} />
+                )}
               </div>
 
-              {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
+              {'navigation' === general.type && (
+                <NavigationMenu
+                  mapTabbingID={tabId}
+                  displayGeoName={displayGeoName}
+                  data={runtimeData}
+                  options={general}
+                  columns={state.columns}
+                  navigationHandler={val => navigationHandler(val)}
+                />
+              )}
 
               {/* Link */}
               {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
@@ -1743,41 +1869,64 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
               {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
 
               <MediaControls.Section classes={['download-buttons']}>
-                {state.general.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
-                {state.general.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
+                {state.general.showDownloadImgButton && (
+                  <MediaControls.Button
+                    text='Download Image'
+                    title='Download Chart as Image'
+                    type='image'
+                    state={state}
+                    elementToCapture={imageId}
+                  />
+                )}
+                {state.general.showDownloadPdfButton && (
+                  <MediaControls.Button
+                    text='Download PDF'
+                    title='Download Chart as PDF'
+                    type='pdf'
+                    state={state}
+                    elementToCapture={imageId}
+                  />
+                )}
               </MediaControls.Section>
 
-              {state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading && (
-                <DataTable
-                  config={state}
-                  rawData={state.data}
-                  navigationHandler={navigationHandler}
-                  expandDataTable={table.expanded}
-                  headerColor={general.headerColor}
-                  columns={state.columns}
-                  showDownloadButton={general.showDownloadButton}
-                  showFullGeoNameInCSV={table.showFullGeoNameInCSV}
-                  runtimeLegend={runtimeLegend}
-                  runtimeData={runtimeData}
-                  displayDataAsText={displayDataAsText}
-                  displayGeoName={displayGeoName}
-                  applyLegendToRow={applyLegendToRow}
-                  tableTitle={table.label}
-                  indexTitle={table.indexLabel}
-                  vizTitle={general.title}
-                  viewport={currentViewport}
-                  formatLegendLocation={formatLegendLocation}
-                  setFilteredCountryCode={setFilteredCountryCode}
-                  tabbingId={tabId}
-                  showDownloadImgButton={state.general.showDownloadImgButton}
-                  showDownloadPdfButton={state.general.showDownloadPdfButton}
-                  innerContainerRef={innerContainerRef}
-                  outerContainerRef={outerContainerRef}
-                  imageRef={imageId}
-                  isDebug={isDebug}
-                  wrapColumns={table.wrapColumns}
-                />
-              )}
+              {state.runtime.editorErrorMessage.length === 0 &&
+                true === table.forceDisplay &&
+                general.type !== 'navigation' &&
+                false === loading && (
+                  <DataTable
+                    config={state}
+                    rawData={state.data}
+                    navigationHandler={navigationHandler}
+                    expandDataTable={table.expanded}
+                    headerColor={general.headerColor}
+                    columns={state.columns}
+                    showDownloadButton={general.showDownloadButton}
+                    showFullGeoNameInCSV={table.showFullGeoNameInCSV}
+                    runtimeLegend={runtimeLegend}
+                    runtimeData={runtimeData}
+                    displayDataAsText={displayDataAsText}
+                    displayGeoName={displayGeoName}
+                    applyLegendToRow={applyLegendToRow}
+                    tableTitle={table.label}
+                    indexTitle={table.indexLabel}
+                    vizTitle={general.title}
+                    viewport={currentViewport}
+                    formatLegendLocation={formatLegendLocation}
+                    setFilteredCountryCode={setFilteredCountryCode}
+                    tabbingId={tabId}
+                    showDownloadImgButton={state.general.showDownloadImgButton}
+                    showDownloadPdfButton={state.general.showDownloadPdfButton}
+                    innerContainerRef={innerContainerRef}
+                    outerContainerRef={outerContainerRef}
+                    imageRef={imageId}
+                    isDebug={isDebug}
+                    wrapColumns={table.wrapColumns}
+                  />
+                )}
+
+              {state.annotations.length > 0 && <Annotation.Dropdown />}
+
+              {state.annotations.length > 0 && <Annotation.Dropdown />}
 
               {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
             </section>
@@ -1786,6 +1935,28 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
           <div aria-live='assertive' className='cdcdataviz-sr-only'>
             {accessibleStatus}
           </div>
+
+          {!isDraggingAnnotation &&
+            !window.matchMedia('(any-hover: none)').matches &&
+            'hover' === tooltips.appearanceType && (
+              <ReactTooltip
+                id={`tooltip__${tooltipId}`}
+                float={true}
+                className={`${tooltips.capitalizeLabels ? 'capitalize tooltip tooltip-test' : 'tooltip tooltip-test'}`}
+                style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }}
+              />
+            )}
+          <div
+            ref={tooltipRef}
+            id={`tooltip__${tooltipId}-canvas`}
+            className='tooltip'
+            style={{
+              background: `rgba(255,255,255,${state.tooltips.opacity / 100})`,
+              position: 'absolute',
+              whiteSpace: 'nowrap',
+              display: 'none' // can't use d-none here
+            }}
+          ></div>
         </Layout.Responsive>
       </Layout.VisualizationWrapper>
     </ConfigContext.Provider>