@cdc/map 4.25.11 → 4.26.1

package/src/components/CityList.tsx

@@ -4,8 +4,7 @@ import { GlyphCircle, GlyphDiamond, GlyphSquare, GlyphStar, GlyphTriangle } from
 import ConfigContext from '../context'
 import { useLegendMemoContext } from '../context/LegendMemoContext'
 import { supportedCities } from '../data/supported-geos'
-import { getFilterControllingStatesPicked } from './UsaMap/helpers/map'
-import { displayGeoName, getGeoStrokeColor, SVG_HEIGHT, SVG_PADDING, SVG_WIDTH, isLegendItemDisabled } from '../helpers'
+import { displayGeoName, getGeoStrokeColor, isLegendItemDisabled } from '../helpers'
 import useGeoClickHandler from '../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../helpers/applyLegendToRow'
@@ -19,7 +18,7 @@ type CityListProps = {
 }
 
 const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValueSupported, tooltipId, projection }) => {
-  const { config, topoData, runtimeData, position, runtimeLegend } = useContext(ConfigContext)
+  const { config, runtimeData, position, runtimeLegend } = useContext(ConfigContext)
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
@@ -146,20 +145,12 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
     }
 
     if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName] && config.general.geoType === 'single-state') {
-      const statesPicked = getFilterControllingStatesPicked(config, runtimeData)
-      const _statesPickedData = (topoData as any)?.states?.find(s => statesPicked.includes(s.properties.name))
-
-      const newProjection = projection.fitExtent(
-        [
-          [SVG_PADDING, SVG_PADDING],
-          [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
-        ],
-        _statesPickedData
-      )
-      let coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
-      transform = `translate(${newProjection(coords)}) scale(${
-        config.visual.geoCodeCircleSize / ((position as any).zoom > 1 ? (position as any).zoom : 1)
-      })`
+      // For single-state maps, the projection passed in is already fitted from CustomProjection
+      // We just need to project the coordinates and apply zoom adjustment
+      const coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
+      const projectedCoords = projection(coords)
+      const zoomScale = (position as any).zoom > 1 ? 1 / (position as any).zoom : 1
+      transform = `translate(${projectedCoords}) scale(${zoomScale})`
       needsPointer = true
     }
 
@@ -216,10 +207,25 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
       triangle: <GlyphTriangle {...shapeProps} />
     }
 
+    // Check if this city matches any additionalCityStyles
+    let shapeToUse = config.visual.cityStyle?.toLowerCase() || 'circle'
+    if (config.visual.additionalCityStyles && config.visual.additionalCityStyles.length > 0) {
+      for (const style of config.visual.additionalCityStyles) {
+        if (style.column && style.value && style.shape) {
+          const columnValue = geoData[style.column]
+          // Convert both to strings for comparison to handle different data types
+          if (String(columnValue) === String(style.value)) {
+            shapeToUse = style.shape.toLowerCase()
+            break
+          }
+        }
+      }
+    }
+
     // Render the city marker
     return (
       <g key={i} transform={transform} style={styles} className='geo-point' tabIndex={-1}>
-        {cityStyleShapes[config.visual.cityStyle?.toLowerCase() || 'circle']}
+        {cityStyleShapes[shapeToUse]}
       </g>
     )
   })