@cdc/map 4.25.8 → 4.25.11

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

@@ -1,10 +1,14 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import ConfigContext from '../../../../context'
+import { useLegendMemoContext } from '../../../../context/LegendMemoContext'
 import { MapContext } from '../../../../types/MapContext'
 import { getGeoFillColor, displayGeoName } from '../../../../helpers'
 import useApplyTooltipsToGeo from '../../../../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../../../../helpers/applyLegendToRow'
 import useGeoClickHandler, { geoClickHandler } from '././../../../../hooks/useGeoClickHandler'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { useSynchronizedGeographies } from '../../../../hooks/useSynchronizedGeographies'
 
 interface CountyOutputProps {
   counties: any[]
@@ -15,14 +19,16 @@ interface CountyOutputProps {
 }
 
 const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
-  const { config, data, legendMemo, legendSpecialClassLastMemo, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { config, runtimeData, runtimeLegend, interactionLabel } = useContext<MapContext>(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
   const geoFillColor = getGeoFillColor(config)
   const { geoClickHandler } = useGeoClickHandler()
+  const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
 
   return (
     <>
-      {counties.map(county => {
+      {counties.map((county, countyIndex) => {
         // Map the name from the geo data with the appropriate key for the processed data
         const geoKey = county.id
 
@@ -30,7 +36,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
 
         const countyPath = path(county)
 
-        const geoData = data[county.id]
+        const geoData = runtimeData[county.id]
         let legendColors
 
         // Once we receive data for this geographic item, setup variables.
@@ -67,6 +73,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
 
           return (
             <g
+              {...getSyncProps(geoKey)}
               key={`key--${county.id}`}
               className={`county county--${geoDisplayName.split(' ').join('')} county--${
                 geoData[config.columns.geo.name]
@@ -75,6 +82,24 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
               onClick={() => geoClickHandler(geoDisplayName, geoData)}
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
+              onMouseEnter={e => {
+                // Track hover analytics event if this is a new location
+                const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `map_hover`,
+                  eventAction: 'hover',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  location: geoDisplayName,
+                  specifics: `location: ${locationName?.toLowerCase()}`
+                })
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
+              }}
             >
               <path
                 tabIndex={-1}
@@ -88,11 +113,18 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
         } else {
           return (
             <g
+              {...getSyncProps(geoKey)}
               key={`key--${county.id}`}
               className={`county county--${geoDisplayName.split(' ').join('')}`}
               style={{ fill: geoFillColor }}
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
+              onMouseEnter={e => {
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
+              }}
             >
               <path
                 tabIndex={-1}

package/src/components/UsaMap/components/TerritoriesSection.tsx

@@ -12,7 +12,7 @@ type TerritoriesSectionProps = {
 }
 
 const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config, territoriesData }) => {
-  const { currentViewport } = useContext<MapContext>(ConfigContext)
+  const { currentViewport, vizViewport } = useContext<MapContext>(ConfigContext)
 
   // filter territioriesData into the two groups below
   const freelyAssociatedKeys = territoriesData.filter(territory => {
@@ -38,7 +38,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
       return a.props.label.localeCompare(b.props.label)
     })
 
-  const isMobileViewport = isMobileTerritoryViewport(currentViewport)
+  const isMobileViewport = isMobileTerritoryViewport(vizViewport)
   const SVG_GAP = 9
   const SVG_WIDTH = isMobileViewport ? 30 : 45
 
@@ -55,10 +55,18 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
           <div className='d-flex flex-wrap' style={{ columnGap: '1.5rem' }}>
             {(usTerritories.length > 0 || config.general.territoriesAlwaysShow) && (
               <div>
-                <span className='territories-label'>U.S. territories</span>
+                <span className='territories-label' style={{ fontSize: isMobileViewport ? '0.8rem' : '1rem' }}>
+                  U.S. territories
+                </span>
                 <span
-                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
-                  style={{ minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px` }}
+                  className={`${isMobileViewport ? 'mt-1 mb-3' : 'mt-2 mb-4'} d-flex territories`}
+                  style={
+                    {
+                      minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px`,
+                      '--territory-svg-max-width': `${SVG_WIDTH}px`,
+                      '--territory-svg-min-width': `${SVG_WIDTH}px`
+                    } as React.CSSProperties
+                  }
                 >
                   {usTerritories}
                 </span>
@@ -66,14 +74,20 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
             )}
             {(freelyAssociatedStates.length > 0 || config.general.territoriesAlwaysShow) && (
               <div>
-                <span className='territories-label'>Freely associated states</span>
+                <span className='territories-label' style={{ fontSize: isMobileViewport ? '0.8rem' : '1rem' }}>
+                  Freely associated states
+                </span>
                 <span
-                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
-                  style={{
-                    minWidth: `${
-                      freelyAssociatedStates.length * SVG_WIDTH + (freelyAssociatedStates.length - 1) * SVG_GAP
-                    }px`
-                  }}
+                  className={`${isMobileViewport ? 'mt-1 mb-3' : 'mt-2 mb-4'} d-flex territories`}
+                  style={
+                    {
+                      minWidth: `${
+                        freelyAssociatedStates.length * SVG_WIDTH + (freelyAssociatedStates.length - 1) * SVG_GAP
+                      }px`,
+                      '--territory-svg-max-width': `${SVG_WIDTH}px`,
+                      '--territory-svg-min-width': `${SVG_WIDTH}px`
+                    } as React.CSSProperties
+                  }
                 >
                   {freelyAssociatedStates}
                 </span>

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

@@ -43,12 +43,17 @@ const TerritoryHexagon = ({
   territory,
   territoryData,
   textColor,
+  getSyncProps,
+  syncHandlers,
   ...props
 }) => {
   const { config } = useContext<MapContext>(ConfigContext)
 
   const isHex = config.general.displayAsHex
 
+  // Construct geography key: use territory prop if available, otherwise construct from label
+  const geoKey = territory || `US-${label}`
+
   // Labels
   const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
     let centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
@@ -133,7 +138,14 @@ const TerritoryHexagon = ({
             fontSize={14}
             x={'50%'}
             y={y}
-            style={{ fill: 'currentColor', stroke: strokeColor, fontWeight: 900, opacity: 1, fillOpacity: 1 }}
+            style={{
+              fill: 'currentColor',
+              stroke: strokeColor,
+              fontWeight: 900,
+              opacity: 1,
+              fillOpacity: 1,
+              pointerEvents: 'none'
+            }}
             paintOrder='stroke'
             textAnchor='middle'
             verticalAnchor='middle'
@@ -143,7 +155,9 @@ const TerritoryHexagon = ({
           >
             {abbr.substring(3)}
           </Text>
-          {config.general.displayAsHex && config.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
+          {config.general.displayAsHex &&
+            config.hexMap.type === 'shapes' &&
+            getArrowDirection(territoryData, geo, true)}
         </>
       )
     }
@@ -151,7 +165,7 @@ const TerritoryHexagon = ({
     let [dx, dy] = offsets[abbr]
 
     return (
-      <g>
+      <g style={{ pointerEvents: 'none' }}>
         <line
           x1={centroid[0]}
           y1={centroid[1]}
@@ -179,11 +193,23 @@ const TerritoryHexagon = ({
 
   return (
     <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
-      <g {...props} data-tooltip-html={dataTooltipHtml} data-tooltip-id={dataTooltipId} onClick={handleShapeClick}>
+      <g
+        {...(getSyncProps ? getSyncProps(geoKey) : {})}
+        {...props}
+        data-tooltip-html={dataTooltipHtml}
+        data-tooltip-id={dataTooltipId}
+        onClick={handleShapeClick}
+      >
         <polygon
           stroke={stroke}
           strokeWidth={strokeWidth}
           points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702'
+          onMouseEnter={e => {
+            syncHandlers?.onMouseEnter(geoKey, e.clientY)
+          }}
+          onMouseLeave={() => {
+            syncHandlers?.onMouseLeave()
+          }}
         />
         {config.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
       </g>

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

@@ -18,6 +18,9 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   territory,
   textColor,
   backgroundColor,
+  svgStyle,
+  getSyncProps,
+  syncHandlers,
   ...props
 }) => {
   const { config } = useContext<MapContext>(ConfigContext)
@@ -25,17 +28,32 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   const rectanglePath =
     'M42,0.5 C42.8284271,0.5 43.5,1.17157288 43.5,2 L43.5,2 L43.5,26 C43.5,26.8284271 42.8284271,27.5 42,27.5 L42,27.5 L3,27.5 C2.17157288,27.5 1.5,26.8284271 1.5,26 L1.5,26 L1.5,2 C1.5,1.17157288 2.17157288,0.5 3,0.5 L3,0.5 Z'
 
+  const geoKey = territory || `US-${label}`
+
   return (
-    <svg viewBox='0 0 45 29' key={territory} className={territory}>
+    <svg viewBox='0 0 45 29' key={geoKey} className={geoKey} style={svgStyle}>
       <g
+        {...(getSyncProps ? getSyncProps(geoKey) : {})}
         {...otherProps}
         strokeLinejoin='round'
         tabIndex={-1}
         onClick={handleShapeClick}
         data-tooltip-id={dataTooltipId}
         data-tooltip-html={dataTooltipHtml}
+        onMouseEnter={e => {
+          syncHandlers?.onMouseEnter(geoKey, e.clientY)
+        }}
+        onMouseLeave={() => {
+          syncHandlers?.onMouseLeave()
+        }}
       >
-        <path stroke={stroke} strokeWidth={strokeWidth} d={rectanglePath} {...otherProps} />
+        <path
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          d={rectanglePath}
+          style={{ pointerEvents: 'none' }}
+          {...otherProps}
+        />
         <text
           textAnchor='middle'
           dominantBaseline='middle'
@@ -45,7 +63,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           stroke={strokeColor}
           className='territory-text'
           paintOrder='stroke'
-          onClick={handleShapeClick}
+          style={{ pointerEvents: 'none' }}
           data-tooltip-id={dataTooltipId}
           data-tooltip-html={dataTooltipHtml}
         >
@@ -97,6 +115,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 strokeWidth={strokeWidth}
                 d={rectanglePath}
                 fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
+                style={{ pointerEvents: 'none' }}
                 className={[
                   `territory-pattern-${patternData?.dataKey}`,
                   `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
@@ -111,7 +130,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 stroke={strokeColor}
                 className='territory-text'
                 paintOrder='stroke'
-                onClick={handleShapeClick}
+                style={{ pointerEvents: 'none' }}
                 data-tooltip-id={dataTooltipId}
                 data-tooltip-html={dataTooltipHtml}
               >

package/src/components/UsaMap/components/Territory/TerritoryShape.ts

@@ -11,4 +11,10 @@ export type TerritoryShape = {
   territory: string
   territoryData: object
   textColor: string
+  svgStyle?: React.CSSProperties
+  getSyncProps?: (geoKey: string) => any
+  syncHandlers?: {
+    onMouseEnter: (geoKey: string, clientY: number) => void
+    onMouseLeave: () => void
+  }
 }

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -7,14 +7,17 @@ import Loading from '@cdc/core/components/Loading'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
+import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import { drawShape, createShapeProperties } from '../helpers/shapes'
-import { getGeoStrokeColor, handleMapAriaLabels, displayGeoName } from '../../../helpers'
+import { getGeoStrokeColor, handleMapAriaLabels, displayGeoName, isLegendItemDisabled } from '../../../helpers'
+import { supportedStatesFipsCodes } from '../../../data/supported-geos'
 import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
 import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
 import { MapConfig } from '../../../types/MapConfig'
 import { DEFAULT_MAP_BACKGROUND } from '../../../helpers/constants'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -131,18 +134,18 @@ const CountyMap = () => {
   const {
     container,
     containerEl,
-    data,
+    runtimeData,
     runtimeFilters,
     runtimeLegend,
     setConfig,
     config,
     tooltipId,
     tooltipRef,
-    legendMemo,
-    legendSpecialClassLastMemo,
-    configUrl
+    interactionLabel
   } = useContext(ConfigContext)
 
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
   // CREATE STATE LINES
   const geoStrokeColor = getGeoStrokeColor(config)
   const { geoClickHandler } = useGeoClickHandler()
@@ -200,7 +203,7 @@ const CountyMap = () => {
   const canvasRef = useRef()
 
   // If runtimeData is not defined, show loader
-  if (!data || !isTopoReady(topoData, config, runtimeFilters)) {
+  if (!runtimeData || !isTopoReady(topoData, config, runtimeFilters)) {
     return (
       <div style={{ height: 300 }}>
         <Loading />
@@ -208,11 +211,18 @@ const CountyMap = () => {
     )
   }
 
-  const runtimeKeys = Object.keys(data)
+  const runtimeKeys = Object.keys(runtimeData)
   const lineWidth = 1
 
   const onReset = () => {
-    publishAnalyticsEvent('map_reset_zoom_level', 'click', configUrl, 'map')
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_reset_zoom_level',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
     setConfig({
       ...config,
       mapPosition: { coordinates: [0, 30], zoom: 1 }
@@ -256,8 +266,8 @@ const CountyMap = () => {
             break
           }
         }
-        if (county && data[county.id]) {
-          geoClickHandler(displayGeoName(county.id), data[county.id])
+        if (county && runtimeData[county.id]) {
+          geoClickHandler(displayGeoName(county.id), runtimeData[county.id])
         }
       }
 
@@ -271,19 +281,36 @@ const CountyMap = () => {
 
       // Redraw with focus on state
       setFocus({ id: clickedState.id, index: focusIndex, center: geoCentroid(clickedState), feature: clickedState })
-      publishAnalyticsEvent('map_zoomed_in', 'click', `${configUrl}|zoom_level_3|${clickedState.properties.name}`, 'map')
-
+      publishAnalyticsEvent({
+        vizType: config.type,
+        vizSubType: getVizSubType(config),
+        eventType: `zoom_in`,
+        eventAction: 'click',
+        eventLabel: interactionLabel,
+        vizTitle: getVizTitle(config),
+        specifics: `zoom_level: 3, location: ${clickedState.properties.name}`
+      })
     }
     if (config.general.type === 'us-geocode') {
       const geoRadius = (config.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
       let clickedGeo
       for (let i = 0; i < runtimeKeys.length; i++) {
         const pixelCoords = topoData.projection([
-          data[runtimeKeys[i]][config.columns.longitude.name],
-          data[runtimeKeys[i]][config.columns.latitude.name]
+          runtimeData[runtimeKeys[i]][config.columns.longitude.name],
+          runtimeData[runtimeKeys[i]][config.columns.latitude.name]
         ])
-        if (pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
-          clickedGeo = data[runtimeKeys[i]]
+        if (
+          pixelCoords &&
+          Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius &&
+          !isLegendItemDisabled(
+            runtimeData[runtimeKeys[i]],
+            runtimeLegend,
+            legendMemo,
+            legendSpecialClassLastMemo,
+            config
+          )
+        ) {
+          clickedGeo = runtimeData[runtimeKeys[i]]
           break
         }
       }
@@ -324,7 +351,7 @@ const CountyMap = () => {
         if (
           !isNaN(currentTooltipIndex) &&
           applyLegendToRow(
-            data[topoData.mapData[currentTooltipIndex].id],
+            runtimeData[topoData.mapData[currentTooltipIndex].id],
             config,
             runtimeLegend,
             legendMemo,
@@ -332,7 +359,7 @@ const CountyMap = () => {
           )
         ) {
           context.fillStyle = applyLegendToRow(
-            data[topoData.mapData[currentTooltipIndex].id],
+            runtimeData[topoData.mapData[currentTooltipIndex].id],
             config,
             runtimeLegend,
             legendMemo,
@@ -369,10 +396,10 @@ const CountyMap = () => {
         }
 
         // If the hovered county is found, show the tooltip for that county, otherwise hide the tooltip
-        if (county && data[county.id]) {
-          if (applyLegendToRow(data[county.id], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)) {
+        if (county && runtimeData[county.id]) {
+          if (applyLegendToRow(runtimeData[county.id], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)) {
             let fillColor = applyLegendToRow(
-              data[county.id],
+              runtimeData[county.id],
               config,
               runtimeLegend,
               legendMemo,
@@ -389,6 +416,24 @@ const CountyMap = () => {
             context.stroke()
           }
 
+          // Track hover analytics event if this is a new location
+          if (isNaN(currentTooltipIndex) || currentTooltipIndex !== countyIndex) {
+            const countyName = displayGeoName(county.id).replace(/[^a-zA-Z0-9]/g, ' ')
+            const stateFips = county.id.slice(0, 2)
+            const stateName = supportedStatesFipsCodes[stateFips]?.replace(/[^a-zA-Z0-9]/g, '_') || 'unknown'
+            const locationName = `${countyName}, ${stateName}`
+            publishAnalyticsEvent({
+              vizType: config.type,
+              vizSubType: getVizSubType(config),
+              eventType: `map_hover`,
+              eventAction: 'hover',
+              eventLabel: interactionLabel,
+              vizTitle: getVizTitle(config),
+              location: displayGeoName(county.id),
+              specifics: `location: ${locationName?.toLowerCase()}`
+            })
+          }
+
           tooltipRef.current.style.display = 'block'
           tooltipRef.current.style.top = tooltipY + 'px'
           if (tooltipX > containerBounds.width / 2) {
@@ -398,7 +443,7 @@ const CountyMap = () => {
             tooltipRef.current.style.transform = 'translate(0, -50%)'
             tooltipRef.current.style.left = tooltipX + 5 + 'px'
           }
-          tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(county.id), data[county.id])
+          tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(county.id), runtimeData[county.id])
           tooltipRef.current.setAttribute('data-index', countyIndex)
         } else {
           tooltipRef.current.style.display = 'none'
@@ -409,8 +454,8 @@ const CountyMap = () => {
       // Handle geo map hover
       if (!isNaN(currentTooltipIndex)) {
         const pixelCoords = topoData.projection([
-          data[runtimeKeys[currentTooltipIndex]][config.columns.longitude.name],
-          data[runtimeKeys[currentTooltipIndex]][config.columns.latitude.name]
+          runtimeData[runtimeKeys[currentTooltipIndex]][config.columns.longitude.name],
+          runtimeData[runtimeKeys[currentTooltipIndex]][config.columns.latitude.name]
         ])
         if (pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
           return // The user is still hovering over the previous geo point, don't redraw tooltip
@@ -424,17 +469,30 @@ const CountyMap = () => {
       let hoveredGeoIndex
       for (let i = 0; i < runtimeKeys.length; i++) {
         const pixelCoords = topoData.projection([
-          data[runtimeKeys[i]][config.columns.longitude.name],
-          data[runtimeKeys[i]][config.columns.latitude.name]
+          runtimeData[runtimeKeys[i]][config.columns.longitude.name],
+          runtimeData[runtimeKeys[i]][config.columns.latitude.name]
         ])
         let includedShapes = ['circle', 'diamond', 'star', 'triangle', 'square'].includes(config.visual.cityStyle)
         if (
           includedShapes &&
           pixelCoords &&
           Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius &&
-          applyLegendToRow(data[runtimeKeys[i]], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+          applyLegendToRow(
+            runtimeData[runtimeKeys[i]],
+            config,
+            runtimeLegend,
+            legendMemo,
+            legendSpecialClassLastMemo
+          ) &&
+          !isLegendItemDisabled(
+            runtimeData[runtimeKeys[i]],
+            runtimeLegend,
+            legendMemo,
+            legendSpecialClassLastMemo,
+            config
+          )
         ) {
-          hoveredGeo = data[runtimeKeys[i]]
+          hoveredGeo = runtimeData[runtimeKeys[i]]
           hoveredGeoIndex = i
           break
         }
@@ -443,9 +501,22 @@ const CountyMap = () => {
           const distance = Math.hypot(pixelCoords[0] - x, pixelCoords[1] - y)
           if (
             distance < 15 &&
-            applyLegendToRow(data[runtimeKeys[i]], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+            applyLegendToRow(
+              runtimeData[runtimeKeys[i]],
+              config,
+              runtimeLegend,
+              legendMemo,
+              legendSpecialClassLastMemo
+            ) &&
+            !isLegendItemDisabled(
+              runtimeData[runtimeKeys[i]],
+              runtimeLegend,
+              legendMemo,
+              legendSpecialClassLastMemo,
+              config
+            )
           ) {
-            hoveredGeo = data[runtimeKeys[i]]
+            hoveredGeo = runtimeData[runtimeKeys[i]]
             hoveredGeoIndex = i
             break
           }
@@ -453,6 +524,21 @@ const CountyMap = () => {
       }
 
       if (hoveredGeo) {
+        // Track hover analytics event if this is a new location
+        if (isNaN(currentTooltipIndex) || currentTooltipIndex !== hoveredGeoIndex) {
+          const locationName = displayGeoName(hoveredGeo[config.columns.geo.name]).replace(/[^a-zA-Z0-9]/g, '_')
+          publishAnalyticsEvent({
+            vizType: config.type,
+            vizSubType: getVizSubType(config),
+            eventType: `map_hover`,
+            eventAction: 'hover',
+            eventLabel: interactionLabel,
+            vizTitle: getVizTitle(config),
+            location: displayGeoName(hoveredGeo[config.columns.geo.name]),
+            specifics: `location: ${locationName?.toLowerCase()}`
+          })
+        }
+
         tooltipRef.current.style.display = 'block'
         tooltipRef.current.style.top = tooltipY + 'px'
         if (tooltipX > containerBounds.width / 2) {
@@ -529,7 +615,7 @@ const CountyMap = () => {
         if (!focus.id && config.general.type === 'us-geocode' && geo.id.length > 2) return
 
         // Gets numeric data associated with the topo data for this state/county
-        const geoData = data[geo.id]
+        const geoData = runtimeData[geo.id]
 
         // Renders state/county
         const legendValues =
@@ -574,7 +660,7 @@ const CountyMap = () => {
         context.strokeStyle = geoStrokeColor
         const geoRadius = (config.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
         const { additionalCityStyles } = config.visual || []
-        const cityStyles = Object.values(data)
+        const cityStyles = Object.values(runtimeData)
           .filter(d => additionalCityStyles.some(style => String(d[style.column]) === String(style.value)))
           .map(d => {
             const conditionsMatched = additionalCityStyles.find(
@@ -592,7 +678,7 @@ const CountyMap = () => {
 
           if (cityPixelCoords) {
             const legendValues = applyLegendToRow(
-              data[city?.value],
+              runtimeData[city?.value],
               config,
               runtimeLegend,
               legendMemo,
@@ -613,13 +699,13 @@ const CountyMap = () => {
           const citiesList = new Set(cityStyles.map(item => item.value))
 
           const pixelCoords = topoData.projection([
-            data[key][config.columns.longitude.name],
-            data[key][config.columns.latitude.name]
+            runtimeData[key][config.columns.longitude.name],
+            runtimeData[key][config.columns.latitude.name]
           ])
           if (pixelCoords && !citiesList.has(key)) {
             const legendValues =
-              data[key] !== undefined
-                ? applyLegendToRow(data[key], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+              runtimeData[key] !== undefined
+                ? applyLegendToRow(runtimeData[key], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
                 : false
             if (legendValues) {
               if (legendValues?.[0] === '#000000' || legendValues?.[0] === DEFAULT_MAP_BACKGROUND) return