@cdc/map 4.25.10 → 4.26.1

package/src/helpers/tests/titleCase.test.ts

@@ -0,0 +1,76 @@
+import { titleCase } from '../titleCase'
+
+describe('titleCase', () => {
+  it('should return undefined for falsy input', () => {
+    expect(titleCase(undefined)).toBeUndefined()
+    expect(titleCase(null)).toBeUndefined()
+    expect(titleCase('')).toBeUndefined()
+  })
+
+  it('should convert simple strings to title case', () => {
+    expect(titleCase('hello world')).toBe('Hello World')
+    expect(titleCase('HELLO WORLD')).toBe('Hello World')
+    expect(titleCase('HeLLo WoRLd')).toBe('Hello World')
+  })
+
+  it('should keep "of", "the", and "and" lowercase in title case', () => {
+    expect(titleCase('DISTRICT OF COLUMBIA')).toBe('District of Columbia')
+    expect(titleCase('District Of Columbia')).toBe('District of Columbia')
+    expect(titleCase('district of columbia')).toBe('District of Columbia')
+  })
+
+  it('should handle "Federated States of Micronesia" correctly', () => {
+    expect(titleCase('FEDERATED STATES OF MICRONESIA')).toBe('Federated States of Micronesia')
+    expect(titleCase('Federated States Of Micronesia')).toBe('Federated States of Micronesia')
+  })
+
+  it('should handle "Republic of the Congo" correctly', () => {
+    expect(titleCase('REPUBLIC OF THE CONGO')).toBe('Republic of the Congo')
+    expect(titleCase('Republic Of The Congo')).toBe('Republic of the Congo')
+  })
+
+  it('should handle "and" in country names correctly', () => {
+    expect(titleCase('ANTIGUA AND BARBUDA')).toBe('Antigua and Barbuda')
+    expect(titleCase('TRINIDAD AND TOBAGO')).toBe('Trinidad and Tobago')
+    expect(titleCase('BOSNIA AND HERZEGOVINA')).toBe('Bosnia and Herzegovina')
+  })
+
+  it('should handle hyphenated strings correctly', () => {
+    expect(titleCase('INTER-TRIBAL INDIAN RESERVATION')).toBe('Inter-Tribal Indian Reservation')
+    expect(titleCase('inter-tribal indian reservation')).toBe('Inter-Tribal Indian Reservation')
+  })
+
+  it('should handle en dash strings correctly', () => {
+    expect(titleCase('PUERTO RICO–VIRGIN ISLANDS')).toBe('Puerto Rico–Virgin Islands')
+    expect(titleCase('puerto rico–virgin islands')).toBe('Puerto Rico–Virgin Islands')
+  })
+
+  it('should handle mixed case strings with "of"', () => {
+    expect(titleCase('UNIVERSITY OF WASHINGTON')).toBe('University of Washington')
+    expect(titleCase('STATE OF ALASKA')).toBe('State of Alaska')
+  })
+
+  it('should handle single words', () => {
+    expect(titleCase('CALIFORNIA')).toBe('California')
+    expect(titleCase('california')).toBe('California')
+  })
+
+  it('should handle strings with multiple "of" and "the" occurrences', () => {
+    expect(titleCase('OFFICE OF THE STATE OF CALIFORNIA')).toBe('Office of the State of California')
+    expect(titleCase('DEMOCRATIC REPUBLIC OF THE CONGO')).toBe('Democratic Republic of the Congo')
+  })
+
+  it('should handle hyphenated strings with "of", "the", and "and"', () => {
+    expect(titleCase('KINGDOM OF THE NETHERLANDS-ARUBA')).toBe('Kingdom of the Netherlands-Aruba')
+    expect(titleCase('SAINT VINCENT AND THE GRENADINES-ISLAND')).toBe('Saint Vincent and the Grenadines-Island')
+  })
+
+  it('should handle "Commonwealth of the Northern Mariana Islands"', () => {
+    expect(titleCase('COMMONWEALTH OF THE NORTHERN MARIANA ISLANDS')).toBe(
+      'Commonwealth of the Northern Mariana Islands'
+    )
+    expect(titleCase('commonwealth of the northern mariana islands')).toBe(
+      'Commonwealth of the Northern Mariana Islands'
+    )
+  })
+})

package/src/helpers/titleCase.ts

@@ -5,25 +5,25 @@ export const titleCase = string => {
   // guard clause else error in editor
   if (!string) return
   if (string !== undefined) {
+    // Words that should remain lowercase in geographic names
+    const lowercaseWords = ['of', 'the', 'and']
+
+    const titleCaseWord = (word: string): string => {
+      const lowerWord = word.toLowerCase()
+      return lowercaseWords.includes(lowerWord)
+        ? lowerWord
+        : word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()
+    }
+
     // 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(' ')
+      let frontSplit = dashSplit[0].split(' ').map(titleCaseWord).join(' ')
+      let backSplit = dashSplit[1].split(' ').map(titleCaseWord).join(' ')
       return frontSplit + splitCharacter + backSplit
     } else {
-      // just return with each word uppercase
-      return string
-        .split(' ')
-        .map(word => (word === 'of' ? word : word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()))
-        .join(' ')
+      return string.split(' ').map(titleCaseWord).join(' ')
     }
   }
 }

package/src/helpers/toggleLegendActive.ts

@@ -1,20 +1,88 @@
 import _ from 'lodash'
 
-export const toggleLegendActive = (i: number, legendLabel: string, runtimeLegend, dispatch) => {
-  const runtimeLegendCopy = _.cloneDeep(runtimeLegend)
+export const toggleLegendActive = (i: number, legendLabel: string, runtimeLegend, dispatch, legendBehavior) => {
+  let runtimeLegendCopy = _.cloneDeep(runtimeLegend)
+  let items = runtimeLegendCopy.items || []
+  let disabledAmt = runtimeLegendCopy.disabledAmt || 0
+  const behavior = (legendBehavior || 'highlight').toLowerCase()
 
-  // Create and toggle the new value
-  const newValue = !runtimeLegendCopy.items?.[i].disabled
-  runtimeLegendCopy.items[i].disabled = newValue
+  // "Isolate" behavior that exclusively shows only the clicked item
 
-  const disabledAmt = runtimeLegend.disabledAmt ?? 0
+  // TODO: DEV-7271 Follow-up to implement option to isolate on legend click. For now, always highlight.
+  // if (behavior === 'isolate') {
+  if (false) {
+    // With an existing hidden item, just toggle the item clicked on
+    const hasExistingHidden = items.some(item => item.hidden === true)
+    if (hasExistingHidden) {
+      items = items.map((item, index) => {
+        if (index === i) {
+          return { ...item, hidden: !item.hidden }
+        }
+        return item
+      })
 
-  runtimeLegendCopy['disabledAmt'] = newValue ? disabledAmt + 1 : disabledAmt - 1
+      // When no existing hidden items, isolate to only the clicked item
+    } else {
+      items = items.map((item, index) => {
+        if (index !== i) {
+          return { ...item, hidden: true }
+        }
+        return { ...item, hidden: false }
+      })
+    }
+
+    // In any case, prevent all items from being hidden and have them all enabled instead
+    if (items.every(item => item.hidden === true)) {
+      items = items.map(item => ({ ...item, hidden: false }))
+    }
+
+    disabledAmt = items.filter(item => item.hidden).length
+
+    // Default "Highlight" behavior where other items are dimmed or grayed out
+  } else {
+    if (behavior !== 'highlight') {
+      console.warn(`Unknown legend behavior: ${legendBehavior}. Defaulting to 'highlight'.`)
+    }
+
+    // With an existing disabled item, just toggle the item clicked on
+    const hasExistingDisabled = items.some(item => item.disabled === true)
+    if (hasExistingDisabled) {
+      items = items.map((item, index) => {
+        if (index === i) {
+          return { ...item, disabled: !item.disabled }
+        }
+        return item
+      })
+
+      // When no existing disabled items, enable only (highlight) the clicked item
+    } else {
+      items = items.map((item, index) => {
+        if (index !== i) {
+          return { ...item, disabled: true }
+        }
+        return { ...item, disabled: false }
+      })
+    }
+
+    // In any case, prevent all items from being disabled and have them all enabled instead
+    if (items.every(item => item.disabled === true)) {
+      items = items.map(item => ({ ...item, disabled: false }))
+    }
+
+    disabledAmt = items.filter(item => item.disabled).length
+  }
+
+  // Set results
+
+  runtimeLegendCopy.items = items
+  runtimeLegendCopy['disabledAmt'] = disabledAmt
 
   dispatch({ type: 'SET_RUNTIME_LEGEND', payload: runtimeLegendCopy })
 
   dispatch({
     type: 'SET_ACCESSIBLE_STATUS',
-    payload: `Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`
+    payload: `${behavior === 'highlight' ? 'Highlighted' : 'Isolated'} legend item ${
+      legendLabel ?? ''
+    }. Please reference the data table to see updated values.`
   })
 }

package/src/helpers/urlDataHelpers.ts

@@ -6,7 +6,7 @@ import { MapConfig } from '../types/MapConfig'
 import { CSV_PARSE_CONFIG } from './constants'
 import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
-export const buildQueryString = (params: Record<string, string>): string =>
+const buildQueryString = (params: Record<string, string>): string =>
   Object.keys(params)
     .map((param, i) => {
       let qs = i === 0 ? '?' : '&'

package/src/hooks/useCountryZoom.tsx

@@ -0,0 +1,241 @@
+import { useContext, useEffect, useMemo, useCallback, useRef } from 'react'
+import ConfigContext, { MapDispatchContext } from '../context'
+import { geoMercator } from 'd3-geo'
+import { MapContext } from '../types/MapContext'
+import { geoPath, GeoPath } from 'd3-geo'
+import { getCountriesPicked } from '../helpers/getCountriesPicked'
+import { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING } from '../helpers'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+
+interface CountryData {
+  geometry: { type: 'Polygon' | 'MultiPolygon'; coordinates: number[][][][] | number[][][] }
+  // ISO code of country
+  id: string
+  // Country properties
+  properties: { name: string; iso: string }
+  type: 'Feature'
+}
+
+const useCountryZoom = (worldData: CountryData[]) => {
+  const { config, interactionLabel } = useContext<MapContext>(ConfigContext)
+  const dispatch = useContext(MapDispatchContext)
+
+  // Ref to track last centered countries to prevent unnecessary re-centering
+  const lastCenteredCountries = useRef<string>('')
+
+  // Get countriesPicked with memoization
+  const countriesPicked = useMemo(() => {
+    const result = getCountriesPicked(config)
+
+    if (!result) return []
+    if (!Array.isArray(result)) return [result]
+    const isoList = result.map(country => country.iso)
+    return isoList
+  }, [config.general.countriesPicked])
+
+  // Memoize expensive computations for country centering
+  const projectionData = useMemo(() => {
+    if (!worldData || !countriesPicked.length) {
+      return {
+        projection: geoMercator(),
+        countryCenter: [0, 30] as [number, number], // Default world center
+        countryZoom: 1
+      }
+    }
+
+    const baseProjection = geoMercator()
+      .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
+      .scale(1)
+
+    // List of ISO codes for small/uninhabited territories that should be excluded from zoom calculations
+    // These tiny islands can distort the bounding box and cause excessive zoom out
+    const excludedTerritories = [
+      'ATF', // French Southern and Antarctic Lands (Kerguelen, Crozet, etc.)
+      'HMD', // Heard Island and McDonald Islands
+      'SGS', // South Georgia and South Sandwich Islands
+      'BVT' // Bouvet Island
+    ]
+
+    // List of specific territory names that should be excluded even if they share an ISO with a main country
+    const excludedTerritoryNames = [
+      'Saint Paul and Amsterdam Islands', // French territory in Indian Ocean
+      'Kerguelen Islands',
+      'Crozet Islands'
+    ]
+
+    // Filter world data to selected countries, excluding small territories from zoom calculation
+    const selectedCountriesData = worldData.filter(country => {
+      // Match by ISO code OR by name (to handle cases where config uses name instead of ISO)
+      const matchesSelectedCountry = countriesPicked.some(
+        iso => iso === country.properties.iso || iso === country.properties.name
+      )
+      const isExcludedByISO = excludedTerritories.includes(country.properties.iso)
+      const isExcludedByName = excludedTerritoryNames.some(
+        name => country.properties.name && country.properties.name.includes(name)
+      )
+
+      return matchesSelectedCountry && !isExcludedByISO && !isExcludedByName
+    })
+
+    if (!selectedCountriesData.length) {
+      return {
+        projection: baseProjection,
+        countryCenter: [0, 30] as [number, number], // Default world center
+        countryZoom: 1
+      }
+    }
+
+    // Create a feature collection for selected countries
+    const combinedData = {
+      type: 'FeatureCollection',
+      features: selectedCountriesData
+    }
+
+    // Fit projection to selected countries - this calculates the optimal scale and translate
+    const fittedProjection = baseProjection.fitExtent(
+      [
+        [SVG_PADDING, SVG_PADDING],
+        [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
+      ],
+      combinedData as any
+    )
+
+    // Calculate zoom level from the fitted projection
+    // The fitExtent method automatically calculates the scale needed to fit the features
+    const fittedScale = fittedProjection.scale()
+
+    // Use the default geoMercator scale (around 153) as base reference
+    const defaultMercatorScale = 153 // Standard geoMercator scale for world view
+    let calculatedZoom = fittedScale / defaultMercatorScale
+
+    // Clamp zoom to reasonable bounds
+    // Allow zoom out to 0.5x for large multi-country spans (e.g., Argentina + Canada)
+    // Max zoom of 10x for small countries
+    const clampedZoom = Math.max(0.5, Math.min(10, calculatedZoom))
+
+    // Calculate the center point using BOUNDING BOX CENTER (not area-weighted centroid)
+    // This ensures equal geographic treatment regardless of country size
+    const path: GeoPath = geoPath().projection(fittedProjection)
+    const bounds = path.bounds(combinedData as any)
+
+    // Calculate geographic bounds
+    const geoBounds = {
+      topLeft: fittedProjection.invert([bounds[0][0], bounds[0][1]]),
+      bottomRight: fittedProjection.invert([bounds[1][0], bounds[1][1]])
+    }
+
+    // Use bounding box midpoint as center (NOT area-weighted centroid which favors larger countries)
+    const countryCenter: [number, number] = [
+      (geoBounds.topLeft[0] + geoBounds.bottomRight[0]) / 2,
+      (geoBounds.topLeft[1] + geoBounds.bottomRight[1]) / 2
+    ]
+
+    const result = {
+      projection: fittedProjection,
+      countryCenter,
+      countryZoom: clampedZoom
+    }
+
+    return result
+  }, [worldData, countriesPicked.join(',')]) // Use string key for more stable memoization
+
+  const centerOnCountries = useCallback(
+    (zoomFunction: string = '') => {
+      if (!countriesPicked.length) {
+        return
+      }
+
+      const _prevPosition = config.mapPosition || { coordinates: [0, 30], zoom: 1 }
+      let newZoom = projectionData.countryZoom
+      let newCoordinates = projectionData.countryCenter
+
+      if (zoomFunction === 'zoomIn' && projectionData.countryZoom < 4) {
+        newZoom = Math.min(4, projectionData.countryZoom * 1.5)
+        newCoordinates = projectionData.countryCenter
+        publishAnalyticsEvent({
+          vizType: 'map',
+          vizSubType: getVizSubType(config),
+          eventType: 'zoom_in',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config),
+          specifics: `zoom_level: ${Math.floor(newZoom)}`
+        })
+      } else if (zoomFunction === 'zoomOut' && projectionData.countryZoom > 1) {
+        newZoom = Math.max(1, projectionData.countryZoom / 1.5)
+        newCoordinates = projectionData.countryCenter
+      } else if (zoomFunction === 'reset') {
+        newZoom = projectionData.countryZoom
+        newCoordinates = projectionData.countryCenter
+      } else if (zoomFunction === 'center' || zoomFunction === '') {
+        // Auto-center with calculated zoom - this is the main centering logic
+        newZoom = projectionData.countryZoom
+        newCoordinates = projectionData.countryCenter
+      }
+
+      const payload = { coordinates: newCoordinates, zoom: newZoom }
+      dispatch({ type: 'SET_POSITION', payload })
+
+      if (zoomFunction === 'reset') {
+        publishAnalyticsEvent({
+          vizType: 'map',
+          vizSubType: getVizSubType(config),
+          eventType: 'map_reset_zoom_level',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config)
+        })
+      }
+    },
+    [
+      config.mapPosition,
+      projectionData.countryCenter,
+      projectionData.countryZoom,
+      interactionLabel,
+      dispatch,
+      countriesPicked
+    ]
+  )
+
+  // Auto-center when countries are selected/changed
+  useEffect(() => {
+    const countriesKey = countriesPicked.sort().join(',')
+
+    if (!worldData || !countriesPicked.length) {
+      lastCenteredCountries.current = ''
+      return
+    }
+
+    // Only re-center if countries have actually changed
+    if (lastCenteredCountries.current === countriesKey) {
+      return
+    }
+
+    lastCenteredCountries.current = countriesKey
+
+    // Immediately center on the selected countries with calculated zoom
+    const payload = {
+      coordinates: projectionData.countryCenter,
+      zoom: projectionData.countryZoom
+    }
+
+    // Additional validation before dispatch
+    const [lng, lat] = payload.coordinates
+    const coordsValid = lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
+    const zoomValid = payload.zoom >= 0.1 && payload.zoom <= 10
+
+    if (coordsValid && zoomValid) {
+      dispatch({ type: 'SET_POSITION', payload })
+    }
+  }, [worldData, countriesPicked, projectionData.countryCenter, projectionData.countryZoom, dispatch])
+
+  return {
+    centerOnCountries,
+    countriesPicked,
+    countryCenter: projectionData.countryCenter,
+    countryZoom: projectionData.countryZoom
+  }
+}
+
+export default useCountryZoom

package/src/hooks/useGeoClickHandler.ts

@@ -31,7 +31,7 @@ const useGeoClickHandler = () => {
     }
 
     // If modals are set, or we are on a mobile viewport, display modal
-    if (window.matchMedia('(any-hover: none)').matches || 'click' === state.tooltips.appearanceType) {
+    if ('click' === state.tooltips.appearanceType) {
       const modalData = {
         geoName: geoDisplayName,
         keyedData: geoData

package/src/hooks/useProgrammaticMapTooltip.ts

@@ -0,0 +1,110 @@
+import { useRef, useImperativeHandle, ForwardedRef } from 'react'
+
+/**
+ * Interface for geography element refs exposed to parent components
+ * Follows chart package pattern for consistency
+ */
+export interface MapRefInterface {
+  /**
+   * Programmatically trigger tooltip at a specific geography (data-centric approach)
+   * @param geoId - Geography identifier (FIPS code, name, ISO code, etc.)
+   * @param yCoordinate - Y coordinate for tooltip positioning (from source event)
+   */
+  triggerTooltipAtGeo: (geoId: string, yCoordinate: number) => void
+
+  /**
+   * Hide all tooltips for this map tile
+   */
+  hideTooltip: () => void
+}
+
+interface UseProgrammaticMapTooltipProps {
+  mapRef: ForwardedRef<MapRefInterface>
+  tooltipId: string
+}
+
+/**
+ * Custom hook to provide programmatic tooltip control for small multiples synchronization
+ *
+ * This hook enables tooltips to be triggered programmatically on geography elements
+ * using synthetic mouse events. It's designed to work with react-tooltip v5.
+ *
+ */
+export const useProgrammaticMapTooltip = ({ mapRef, tooltipId }: UseProgrammaticMapTooltipProps) => {
+  // Store refs to all geography elements in this map
+  const geoElementRefs = useRef<Record<string, SVGElement>>({})
+
+  /**
+   * Register a geography element so it can be programmatically controlled
+   * Call this in the ref callback of each geography element
+   */
+  const registerGeoElement = (geoId: string, element: SVGElement | null) => {
+    geoElementRefs.current[geoId] = element
+  }
+
+  const unregisterGeoElement = (geoId: string) => {
+    delete geoElementRefs.current[geoId]
+  }
+
+  // Expose programmatic tooltip methods via ref
+  useImperativeHandle(
+    mapRef,
+    () => ({
+      /**
+       * Trigger tooltip at specific geography
+       */
+      triggerTooltipAtGeo: (geoId: string, yCoordinate: number) => {
+        const geoElement = geoElementRefs.current[geoId]
+        if (!geoElement) {
+          return
+        }
+
+        // Get the horizontal center of the geography element
+        const rect = geoElement.getBoundingClientRect()
+        const centerX = rect.left + rect.width / 2
+
+        // Create synthetic mouseenter event with coordinates
+        const syntheticEvent = new MouseEvent('mouseenter', {
+          bubbles: true,
+          cancelable: true,
+          clientX: centerX,
+          clientY: yCoordinate,
+          screenX: window.screenX + centerX,
+          screenY: window.screenY + yCoordinate,
+          view: window
+        })
+
+        Object.defineProperty(syntheticEvent, 'currentTarget', {
+          value: geoElement,
+          writable: false
+        })
+
+        Object.defineProperty(syntheticEvent, 'target', {
+          value: geoElement,
+          writable: false
+        })
+
+        geoElement.dispatchEvent(syntheticEvent)
+      },
+
+      hideTooltip: () => {
+        Object.values(geoElementRefs.current).forEach(element => {
+          const syntheticEvent = new MouseEvent('mouseleave', {
+            bubbles: true,
+            cancelable: true,
+            view: window
+          })
+
+          element.dispatchEvent(syntheticEvent)
+        })
+      }
+    }),
+    [tooltipId]
+  )
+
+  return {
+    registerGeoElement,
+    unregisterGeoElement,
+    geoElementRefs
+  }
+}

package/src/hooks/useResizeObserver.ts

@@ -8,17 +8,23 @@ import ResizeObserver from 'resize-observer-polyfill'
 export const useResizeObserver = (isEditor: boolean) => {
   const [dimensions, setDimensions] = useState<DimensionsType>([0, 0])
   const [currentViewport, setCurrentViewport] = useState<ViewPort>(null)
+  const [vizViewport, setVizViewport] = useState<ViewPort>(null)
   const [container, setContainer] = useState<HTMLElement | null>(null)
 
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
 
-      width = isEditor ? width - EDITOR_WIDTH : width
+      const editorIsOpen = isEditor && !!document.querySelector('.editor-panel:not(.hidden)')
+      width = editorIsOpen ? width - EDITOR_WIDTH : width
+
+      // Account for 1rem padding in editor mode
+      width = width - (isEditor ? 36 : 0)
 
       const newViewport = getViewport(width)
 
       setCurrentViewport(newViewport)
+      setVizViewport(newViewport)
 
       setDimensions([width, height])
     }
@@ -35,7 +41,7 @@ export const useResizeObserver = (isEditor: boolean) => {
     }
   }, [])
 
-  return { resizeObserver, dimensions, currentViewport, outerContainerRef, container }
+  return { resizeObserver, dimensions, currentViewport, vizViewport, outerContainerRef, container }
 }
 
 export default useResizeObserver

package/src/hooks/useStateZoom.tsx

@@ -67,12 +67,14 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
     const featureCenter = combinedData ? path.centroid(combinedData as any) : [0, 0]
     const stateCenter = newProjection.invert(featureCenter)
 
-    return { projection, newProjection, stateCenter }
+    const bounds = combinedData ? path.bounds(combinedData as any) : null
+
+    return { projection, newProjection, stateCenter, bounds }
   }, [topoData, statesPicked])
 
   const setScaleAndTranslate = useCallback(
     (zoomFunction: string = '') => {
-      const _prevPosition = config.mapPosition
+      const _prevPosition = position
       let newZoom = _prevPosition.zoom
       let newCoordinates = _prevPosition.coordinates
       if (zoomFunction === 'zoomIn' && _prevPosition.zoom < 4) {
@@ -116,7 +118,7 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
         })
       }
     },
-    [config.mapPosition, projectionData.stateCenter, interactionLabel, dispatch]
+    [position, projectionData.stateCenter, interactionLabel, dispatch]
   )
 
   // Essential fix: Remove config from dependencies to prevent infinite loops
@@ -176,7 +178,8 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
     handleZoomOut,
     handleMoveEnd,
     handleZoomReset,
-    projection: projectionData.projection
+    projection: projectionData.projection,
+    bounds: projectionData.bounds
   }
 }