@cdc/map 4.24.12 → 4.25.2-25

package/src/components/GoogleMap/components/GoogleMap.tsx

@@ -0,0 +1,67 @@
+import React, { useContext, useEffect, useRef } from 'react'
+import { Loader } from '@googlemaps/js-api-loader'
+import { MarkerClusterer } from '@googlemaps/markerclusterer'
+import ConfigContext from '../../../context'
+
+// center on USA
+const center = {
+  lat: 37.09024,
+  lng: -95.712891
+}
+
+type GoogleMapComponentProps = {
+  apiKey?: string
+}
+
+const GoogleMapComponent: React.FC<GoogleMapComponentProps> = ({ apiKey = '' }) => {
+  const mapRef = useRef(null)
+  const { state } = useContext(ConfigContext)
+
+  useEffect(() => {
+    const loader = new Loader({
+      apiKey: apiKey,
+      version: 'weekly'
+    })
+
+    loader
+      .load()
+      .then(() => {
+        if (mapRef.current) {
+          const map = new window.google.maps.Map(mapRef.current, {
+            center: center,
+            zoom: 4
+          })
+
+          const markers = state.data.map(d => {
+            const markerContent = document.createElement('div')
+            markerContent.style.backgroundColor = 'orange' // Set the background color
+            markerContent.style.width = '25px'
+            markerContent.style.height = '25px'
+            markerContent.style.borderRadius = '50%'
+            markerContent.style.display = 'flex'
+            markerContent.style.alignItems = 'center'
+            markerContent.style.justifyContent = 'center'
+            markerContent.style.color = 'white'
+            markerContent.innerText = d[state.columns.geo.name]
+
+            const marker = new google.maps.Marker({
+              position: { lat: Number(d[state.columns.latitude.name]), lng: Number(d[state.columns.longitude.name]) },
+              title: d[state.columns.geo.name],
+              map: map
+            })
+
+            return marker
+          })
+
+          new MarkerClusterer({ markers, map })
+        }
+      })
+      .catch(e => {
+        console.error('Error loading Google Maps API:', e)
+      })
+  }, [apiKey, state])
+
+  return <div ref={mapRef} style={{ height: '500px', width: '100%' }} />
+}
+
+export default GoogleMapComponent

package/src/components/GoogleMap/index.tsx

@@ -0,0 +1,3 @@
+import GoogleMap from './components/GoogleMap'
+
+export default GoogleMap

package/src/components/Legend/components/Legend.tsx

@@ -1,5 +1,5 @@
 //TODO: Move legends to core
-import { forwardRef, useContext, useId } from 'react'
+import { forwardRef, useContext } from 'react'
 import parse from 'html-react-parser'
 
 //types
@@ -17,8 +17,9 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 import { Group } from '@visx/group'
 import './index.scss'
-import { ViewportSize } from '@cdc/chart/src/types/ChartConfig'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 
 const LEGEND_PADDING = 30
 
@@ -26,22 +27,22 @@ type LegendProps = {
   skipId: string
   dimensions: DimensionsType
   containerWidthPadding: number
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
 }
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
-  const { skipId, dimensions, containerWidthPadding, currentViewport } = props
+  const { skipId, containerWidthPadding } = props
+  const { isEditor, dimensions, currentViewport } = useContext(ConfigContext)
 
   const {
     // prettier-ignore
-    displayDataAsText,
     resetLegendToggles,
     runtimeFilters,
     runtimeLegend,
     setAccessibleStatus,
     setRuntimeLegend,
     state,
-    viewport,
+    currentViewport: viewport,
     mapId
   } = useContext(ConfigContext)
 
@@ -75,9 +76,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   }
   const getFormattedLegendItems = () => {
     return runtimeLegend.map((entry, idx) => {
-      const entryMax = displayDataAsText(entry.max, 'primary')
+      const entryMax = displayDataAsText(entry.max, 'primary', state)
 
-      const entryMin = displayDataAsText(entry.min, 'primary')
+      const entryMin = displayDataAsText(entry.min, 'primary', state)
       let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
 
       // If interval, add some formatting
@@ -86,7 +87,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
       }
 
       if (legend.type === 'category') {
-        formattedText = displayDataAsText(entry.value, 'primary')
+        formattedText = displayDataAsText(entry.value, 'primary', state)
       }
 
       if (entry.max === 0 && entry.min === 0) {
@@ -116,12 +117,14 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   const legendList = (patternsOnly = false) => {
     const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
     const patternsOnlyFont = isMobileHeightViewport(currentViewport) ? '12px' : '14px'
+    const hasDisabledItems = formattedItems.some(item => item.disabled)
     let legendItems
 
     legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
         let classes = ['legend-container__li', 'd-flex', 'align-items-center']
         if (item.disabled) classes.push('legend-container__li--disabled')
+        else if (hasDisabledItems) classes.push('legend-container__li--not-disabled')
         if (item.special) classes.push('legend-container__li--special-class')
         return classes.join(' ')
       }
@@ -264,26 +267,33 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           ref={ref}
         >
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
-            {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
-            {legend.dynamicDescription === false && legend.description && (
-              <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+            {(legend.title || legend.description || legend.dynamicDescription) && (
+              <div className='mb-3'>
+                {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
+                {legend.dynamicDescription === false && legend.description && (
+                  <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+                )}
+                {legend.dynamicDescription === true &&
+                  runtimeFilters.map((filter, idx) => {
+                    const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
+
+                    // Do we have a custom description for this?
+                    const desc = legend.descriptions[lookupStr] || ''
+
+                    if (desc.length > 0) {
+                      return (
+                        <p
+                          key={`dynamic-description-${lookupStr}`}
+                          className={`dynamic-legend-description-${lookupStr} mt-2`}
+                        >
+                          {desc}
+                        </p>
+                      )
+                    }
+                    return true
+                  })}
+              </div>
             )}
-            {legend.dynamicDescription === true &&
-              runtimeFilters.map((filter, idx) => {
-                const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
-
-                // Do we have a custom description for this?
-                const desc = legend.descriptions[lookupStr] || ''
-
-                if (desc.length > 0) {
-                  return (
-                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
-                      {desc}
-                    </p>
-                  )
-                }
-                return true
-              })}
 
             <LegendGradient
               labels={getFormattedLegendItems().map(item => item?.label) ?? []}
@@ -334,8 +344,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
               </>
             )}
             {runtimeLegend.disabledAmt > 0 && (
-              <Button className={legendClasses.resetButton.join(' ')} onClick={handleReset}>
-                Reset
+              <Button className={legendClasses.showAllButton.join(' ')} onClick={handleReset}>
+                Show All
               </Button>
             )}
           </section>

package/src/components/Legend/components/LegendItem.Hex.tsx

@@ -3,7 +3,7 @@ import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react
 import parse from 'html-react-parser'
 
 const LegendItemHex = props => {
-  const { state, viewport } = props
+  const { state, currentViewport: viewport } = props
 
   const getItemShape = shape => {
     switch (shape) {
@@ -27,8 +27,12 @@ const LegendItemHex = props => {
       return (
         <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex={0}>
           <section className={legendClasses.section.join(' ')} aria-label='Map Legend'>
-            {shapeGroup.legendTitle && <h3 className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</h3>}
-            {shapeGroup.legendDescription && <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>}
+            {shapeGroup.legendTitle && (
+              <h3 className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</h3>
+            )}
+            {shapeGroup.legendDescription && (
+              <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>
+            )}
 
             <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>
               {shapeGroup.items.map((item, itemIndex) => {

package/src/components/Legend/components/index.scss

@@ -16,11 +16,9 @@
     background-color: #fff;
     z-index: 6;
     border-top: var(--cool-gray-10) 1px solid;
+    border-radius: 6px;
 
     @include breakpointClass(md) {
-      .legend-container.legend-padding {
-        padding: 15px;
-      }
       &.bottom,
       &.top {
         border: var(--cool-gray-10) 1px solid;
@@ -70,21 +68,21 @@
     }
 
     .legend-container {
-      --space-between-legend-items: 0.6em;
       position: relative;
-      &.legend-padding {
-        padding-top: 15px;
+
+      .tspan {
+        font-size: var(--legend-item-font-size) !important;
       }
+
       .legend-container__title {
-        font-size: 1.3em;
+        font-size: var(--legend-title-font-size);
+        font-weight: var(--legend-title-font-weight);
         padding-bottom: 0;
         display: inline-block;
+        color: black;
       }
-      .legend-container__title + p,
-      .legend-container__title + ul,
-      p + ul,
-      p + p {
-        padding-top: 1em;
+      .legend-container__description {
+        font-size: var(--legend-description-font-size);
       }
       .legend-container__reset-button {
         margin-top: 1em;
@@ -92,11 +90,17 @@
       p {
         line-height: 1.4em;
       }
+
+      .legend-container__ul {
+        line-height: 1;
+        row-gap: var(--space-between-legend-item-rows);
+        column-gap: var(--space-between-legend-item-columns);
+      }
       .legend-container__ul:not(.single-row) {
         list-style: none;
-        padding-top: 1em;
         display: grid;
         grid-template-columns: 1fr;
+
         @include breakpoint(md) {
           grid-template-columns: 1fr 1fr;
         }
@@ -117,7 +121,6 @@
           flex-shrink: 0;
           display: inline-block;
           padding-right: 1em;
-          margin-bottom: var(--space-between-legend-items);
           vertical-align: middle;
           transition: 0.1s opacity;
           display: flex;
@@ -134,6 +137,11 @@
           &.legend-container__li--disabled {
             opacity: 0.4;
           }
+          &.legend-container__li--not-disabled {
+            outline: 1px solid #005ea2;
+            outline-offset: 5px;
+            border-radius: 1px;
+          }
         }
       }
       .legend-container__ul.single-row {
@@ -145,10 +153,8 @@
         align-items: center;
         justify-content: flex-start;
         flex-wrap: wrap;
-        row-gap: var(--space-between-legend-items);
 
         & > li {
-          margin-right: 1em;
           white-space: wrap;
           display: flex;
           justify-content: center;

package/src/components/Modal.tsx

@@ -4,18 +4,19 @@ import ConfigContext from '../context'
 import Icon from '@cdc/core/components/ui/Icon'
 
 const Modal = () => {
-  const { applyTooltipsToGeo, capitalize, applyLegendToRow, viewport, type, content } = useContext(ConfigContext)
-
+  const { applyTooltipsToGeo, applyLegendToRow, content, state, currentViewport: viewport } = useContext(ConfigContext)
+  const { capitalizeLabels } = state.tooltips
   const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
-
+  const type = state.general.type
   const legendColors = applyLegendToRow(content.keyedData)
 
   return (
     <section
-      className={capitalize ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport}
+      className={
+        capitalizeLabels ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport
+      }
       aria-hidden='true'
     >
-      {type === 'data' && <LegendShape fill={legendColors[0]} />}
       <div className='content'>{tooltip}</div>
       <Icon display='close' alt='Close Modal' size={20} color='#000' className='modal-close' />
     </section>

package/src/components/NavigationMenu.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import ConfigContext from '../context'
 
 const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoName, mapTabbingID }) => {
+  const { state } = useContext(ConfigContext)
   const [activeGeo, setActiveGeo] = useState('')
-
   const [dropdownItems, setDropdownItems] = useState({})
 
   const handleSubmit = event => {
@@ -55,7 +56,7 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
         <label htmlFor={mapTabbingID.replace('#', '')}>
           <div className='select-heading'>{navSelect}</div>
           <select value={activeGeo} id={mapTabbingID.replace('#', '')} onChange={e => setActiveGeo(e.target.value)}>
-            {Object.keys(dropdownItems).map((key, i) => (
+            {Object.keys(dropdownItems).map(key => (
               <option key={key} value={key}>
                 {key}
               </option>

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

@@ -0,0 +1,66 @@
+import React from 'react'
+
+type TerritoriesSectionProps = {
+  territories: JSX.Element[]
+  // Keys of the territories to display
+  territoresData: string[]
+  logo: string
+  config: any
+}
+
+const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config, territoriesData }) => {
+  // filter territioriesData into the two groups below
+  const freelyAssociatedKeys = territoriesData.filter(territory => {
+    return ['US-FM', 'US-MH', 'US-PW'].includes(territory)
+  })
+  const usTerritoriesKeys = territoriesData.filter(territory => {
+    return ['US-AS', 'US-GU', 'US-MP', 'US-PR', 'US-VI'].includes(territory)
+  })
+
+  const usTerritories = territories
+    .filter(territory => {
+      return usTerritoriesKeys.includes(`US-${territory?.props?.label}`)
+    })
+    .sort((a, b) => {
+      return a.props.label.localeCompare(b.props.label)
+    })
+
+  const freelyAssociatedStates = territories
+    .filter(territory => {
+      return freelyAssociatedKeys.includes(`US-${territory?.props?.label}`)
+    })
+    .sort((a, b) => {
+      return a.props.label.localeCompare(b.props.label)
+    })
+
+  return (
+    territoriesData.length > 0 && (
+      <>
+        {/* Temporarily make the max width fit the image width */}
+        <div>
+          <div className='d-flex mt-4'>
+            {'data' === config.general.type && logo && (
+              <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
+            )}
+          </div>
+          <div>
+            {(usTerritories.length > 0 || config.general.territoriesAlwaysShow) && (
+              <>
+                <h5 className='territories-label'>U.S. Territories</h5>
+                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{usTerritories}</span>
+              </>
+            )}
+            {(freelyAssociatedStates.length > 0 || config.general.territoriesAlwaysShow) && (
+              <>
+                <h5 className='territories-label'>Freely Associated States</h5>
+                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{freelyAssociatedStates}</span>
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  )
+}
+
+export default TerritoriesSection

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

@@ -52,7 +52,7 @@ const TerritoryHexagon = ({
   const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
     let centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
 
-    let abbr = geo?.properties?.iso ? geo.properties.iso : geo.uid
+    let abbr = geo?.properties?.iso ? geo.properties.iso : geo?.uid ? geo.uid : `US-${label}`
 
     const getArrowDirection = (geoData, geo, isTerritory = false) => {
       if (!isTerritory) {
@@ -63,19 +63,20 @@ const TerritoryHexagon = ({
         <>
           {state.hexMap.shapeGroups.map((group, groupIndex) => {
             return group.items.map((item, itemIndex) => {
+              if (!geoData) return
               switch (item.operator) {
                 case '=':
-                  if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
+                  if (geoData?.[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
                     return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
                   }
                   break
                 case '≠':
-                  if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
+                  if (geoData?.[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
                     return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
                   }
                   break
                 case '<':
-                  if (Number(geoData[item.key]) < Number(item.value)) {
+                  if (Number(geoData?.[item.key]) < Number(item.value)) {
                     return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
                   }
                   break
@@ -175,18 +176,16 @@ const TerritoryHexagon = ({
   }
 
   return (
-    territoryData && (
-      <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
-        <g {...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'
-          />
-          {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
-        </g>
-      </svg>
-    )
+    <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
+      <g {...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'
+        />
+        {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
+      </g>
+    </svg>
   )
 }
 

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

@@ -54,7 +54,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
 
         {state.map.patterns.map((patternData, patternIndex) => {
           const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
-          const hasMatchingValues = patternData.dataValue === territoryData[patternData.dataKey]
+          const hasMatchingValues = patternData.dataValue === territoryData?.[patternData.dataKey]
 
           if (!hasMatchingValues) return null
           if (!patternData.pattern) return null
@@ -96,8 +96,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
                 color={patternData ? 'white' : textColor}
                 className={[
-                  `territory-pattern-${patternData.dataKey}`,
-                  `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`
+                  `territory-pattern-${patternData?.dataKey}`,
+                  `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
                 ].join(' ')}
               />
               <text

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

@@ -22,6 +22,7 @@ import {
   createShapeProperties
 } from '../helpers/shapes'
 import { getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -137,7 +138,6 @@ const CountyMap = props => {
       data,
       displayGeoName,
       geoClickHandler,
-      handleMapAriaLabels,
       runtimeFilters,
       runtimeLegend,
       setState,

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -1,17 +1,23 @@
 import { useState, useEffect, memo, useContext } from 'react'
-import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 // 3rd party
 import { geoCentroid } from 'd3-geo'
 import { feature } from 'topojson-client'
 import { Mercator } from '@visx/geo'
 
-// cdc
+// Cdc Components
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
 import Annotation from '../../Annotation'
+
+// Data
+import topoJSON from '../data/us-regions-topo-2.json'
+import { supportedTerritories } from '../../../data/supported-geos'
+
+// Helpers
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
 
@@ -40,9 +46,7 @@ const UsaRegionMap = props => {
     data,
     displayGeoName,
     geoClickHandler,
-    handleMapAriaLabels,
     state,
-    supportedTerritories,
     tooltipId
   } = useContext(ConfigContext)
 
@@ -150,8 +154,8 @@ const UsaRegionMap = props => {
         <line
           x1={centroid[0]}
           y1={centroid[1]}
-          x2={centroid[0] + dx}
-          y2={centroid[1] + dy}
+          x2={centroid[0] + x}
+          y2={centroid[1] + y}
           stroke='rgba(0,0,0,.5)'
           strokeWidth={1}
         />
@@ -161,7 +165,7 @@ const UsaRegionMap = props => {
           fontSize={13}
           style={{ fill: '#202020' }}
           alignmentBaseline='middle'
-          transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
+          transform={`translate(${centroid[0] + x}, ${centroid[1] + y})`}
         >
           {abbr.substring(3)}
         </text>

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

@@ -15,6 +15,8 @@ import { MapContext } from '../../../types/MapContext'
 import useStateZoom from '../../../hooks/useStateZoom'
 import { Text } from '@visx/text'
 import { getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../../helpers/titleCase'
 
 // SVG ITEMS
 const WIDTH = 880
@@ -29,8 +31,6 @@ const SingleStateMap = props => {
     geoClickHandler,
     applyLegendToRow,
     displayGeoName,
-    handleMapAriaLabels,
-    titleCase,
     setSharedFilterValue,
     isFilterValueSupported,
     runtimeFilters,