@cdc/map 4.25.8 → 4.25.10

package/src/_stories/_mock/us-bubble-cities.json

@@ -0,0 +1,306 @@
+{
+  "annotations": [],
+  "general": {
+    "title": "US Cities Bubble Map - CityList Test",
+    "subtext": "This bubble map uses CityList component to render bubble sizes based on data values",
+    "type": "bubble",
+    "geoType": "us",
+    "headerColor": "theme-green",
+    "showSidebar": true,
+    "showTitle": true,
+    "showDownloadButton": true,
+    "expandDataTable": false,
+    "backgroundColor": "#ffffff",
+    "geoBorderColor": "darkGray",
+    "territoriesLabel": "Territories",
+    "language": "en",
+    "hasRegions": false,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "fullBorder": false,
+    "palette": {
+      "isReversed": false
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "territoriesAlwaysShow": false,
+    "geoLabelOverride": "",
+    "noDataFoundMessage": "No data found",
+    "convertFipsCodes": false
+  },
+  "type": "map",
+  "color": "orangered",
+  "columns": {
+    "geo": {
+      "name": "city",
+      "label": "City",
+      "tooltip": true,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": " cases",
+      "name": "covid_cases",
+      "label": "COVID-19 Cases"
+    },
+    "latitude": {
+      "name": "latitude",
+      "label": "Latitude"
+    },
+    "longitude": {
+      "name": "longitude", 
+      "label": "Longitude"
+    },
+    "navigate": {
+      "name": ""
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": true,
+    "dynamicDescription": false,
+    "type": "equalinterval",
+    "numberOfItems": 5,
+    "position": "side",
+    "title": "COVID-19 Cases",
+    "showTitle": true,
+    "reversedOrder": false,
+    "singleColumnLegend": false,
+    "hideBorder": false
+  },
+  "filters": [],
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": "",
+    "wrapColumns": false,
+    "showDownloadLinkBelow": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "runtime": {
+    "editorErrorMessage": []
+  },
+  "visual": {
+    "minBubbleSize": 5,
+    "maxBubbleSize": 40,
+    "extraBubbleBorder": true,
+    "cityStyle": "circle",
+    "geoCodeCircleSize": 12,
+    "showBubbleZeros": true,
+    "cityStyleLabel": "City Bubbles",
+    "additionalCityStyles": []
+  },
+  "mapPosition": {
+    "coordinates": [0, 39],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": []
+  },
+  "data": [
+    {
+      "city": "New York",
+      "latitude": 40.7128,
+      "longitude": -74.0060,
+      "covid_cases": 2845
+    },
+    {
+      "city": "Los Angeles", 
+      "latitude": 34.0522,
+      "longitude": -118.2437,
+      "covid_cases": 2234
+    },
+    {
+      "city": "Chicago",
+      "latitude": 41.8781,
+      "longitude": -87.6298,
+      "covid_cases": 1567
+    },
+    {
+      "city": "Houston",
+      "latitude": 29.7604,
+      "longitude": -95.3698,
+      "covid_cases": 1890
+    },
+    {
+      "city": "Phoenix",
+      "latitude": 33.4484,
+      "longitude": -112.0740,
+      "covid_cases": 1234
+    },
+    {
+      "city": "Philadelphia",
+      "latitude": 39.9526,
+      "longitude": -75.1652,
+      "covid_cases": 1678
+    },
+    {
+      "city": "San Antonio",
+      "latitude": 29.4241,
+      "longitude": -98.4936,
+      "covid_cases": 987
+    },
+    {
+      "city": "San Diego",
+      "latitude": 32.7157,
+      "longitude": -117.1611,
+      "covid_cases": 1456
+    },
+    {
+      "city": "Dallas",
+      "latitude": 32.7767,
+      "longitude": -96.7970,
+      "covid_cases": 1789
+    },
+    {
+      "city": "San Jose",
+      "latitude": 37.3382,
+      "longitude": -121.8863,
+      "covid_cases": 934
+    },
+    {
+      "city": "Austin",
+      "latitude": 30.2672,
+      "longitude": -97.7431,
+      "covid_cases": 876
+    },
+    {
+      "city": "Jacksonville",
+      "latitude": 30.3322,
+      "longitude": -81.6557,
+      "covid_cases": 743
+    },
+    {
+      "city": "Fort Worth",
+      "latitude": 32.7555,
+      "longitude": -97.3308,
+      "covid_cases": 654
+    },
+    {
+      "city": "Columbus",
+      "latitude": 39.9612,
+      "longitude": -82.9988,
+      "covid_cases": 567
+    },
+    {
+      "city": "Charlotte",
+      "latitude": 35.2271,
+      "longitude": -80.8431,
+      "covid_cases": 789
+    },
+    {
+      "city": "San Francisco",
+      "latitude": 37.7749,
+      "longitude": -122.4194,
+      "covid_cases": 1123
+    },
+    {
+      "city": "Indianapolis",
+      "latitude": 39.7684,
+      "longitude": -86.1581,
+      "covid_cases": 445
+    },
+    {
+      "city": "Seattle",
+      "latitude": 47.6062,
+      "longitude": -122.3321,
+      "covid_cases": 823
+    },
+    {
+      "city": "Denver",
+      "latitude": 39.7392,
+      "longitude": -104.9903,
+      "covid_cases": 634
+    },
+    {
+      "city": "Boston",
+      "latitude": 42.3601,
+      "longitude": -71.0589,
+      "covid_cases": 976
+    },
+    {
+      "city": "El Paso",
+      "latitude": 31.7619,
+      "longitude": -106.4850,
+      "covid_cases": 312
+    },
+    {
+      "city": "Nashville",
+      "latitude": 36.1627,
+      "longitude": -86.7816,
+      "covid_cases": 456
+    },
+    {
+      "city": "Detroit",
+      "latitude": 42.3314,
+      "longitude": -83.0458,
+      "covid_cases": 578
+    },
+    {
+      "city": "Oklahoma City",
+      "latitude": 35.4676,
+      "longitude": -97.5164,
+      "covid_cases": 289
+    },
+    {
+      "city": "Portland",
+      "latitude": 45.5152,
+      "longitude": -122.6784,
+      "covid_cases": 387
+    },
+    {
+      "city": "Las Vegas",
+      "latitude": 36.1699,
+      "longitude": -115.1398,
+      "covid_cases": 534
+    },
+    {
+      "city": "Memphis",
+      "latitude": 35.1495,
+      "longitude": -90.0490,
+      "covid_cases": 267
+    },
+    {
+      "city": "Louisville",
+      "latitude": 38.2527,
+      "longitude": -85.7585,
+      "covid_cases": 189
+    },
+    {
+      "city": "Baltimore",
+      "latitude": 39.2904,
+      "longitude": -76.6122,
+      "covid_cases": 445
+    },
+    {
+      "city": "Milwaukee",
+      "latitude": 43.0389,
+      "longitude": -87.9065,
+      "covid_cases": 334
+    }
+  ]
+}

package/src/components/BubbleList.tsx

@@ -3,6 +3,7 @@ import { scaleLinear } from 'd3-scale'
 import { countryCoordinates } from '../data/country-coordinates'
 import stateCoordinates from '../data/state-coordinates'
 import ConfigContext, { MapDispatchContext } from '../context'
+import { useLegendMemoContext } from '../context/LegendMemoContext'
 import { type Coordinate, DataRow } from '../types/MapConfig'
 import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../helpers/applyLegendToRow'
@@ -17,8 +18,8 @@ type BubbleListProps = {
 }
 
 export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
-  const { config, tooltipId, legendMemo, legendSpecialClassLastMemo, setRuntimeData, runtimeData, runtimeLegend } =
-    useContext<MapContext>(ConfigContext)
+  const { config, tooltipId, runtimeData, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { columns, data, general, visual } = config
   const { geoType, allowMapZoom } = general
   const { minBubbleSize, maxBubbleSize, showBubbleZeros, extraBubbleBorder } = visual
@@ -65,7 +66,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
     dispatch({ type: 'SET_POSITION', payload: { coordinates: reversedCoordinates, zoom: 3 } })
 
     // ...and show the data for the clicked country
-    setRuntimeData(_tempRuntimeData)
+    dispatch({ type: 'SET_RUNTIME_DATA', payload: _tempRuntimeData })
   }
 
   const sortedRuntimeData: DataRow = Object.values(runtimeData).sort((a, b) =>
@@ -77,7 +78,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
   if (geoType === 'world') {
     return (
       sortedRuntimeData &&
-      sortedRuntimeData.map(country => {
+      sortedRuntimeData.map((country, index) => {
         let coordinates = countryCoordinates[country.uid]
 
         if (!coordinates) return true
@@ -99,10 +100,9 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
         if (!projection(coordinates)) return true
 
         const circle = (
-          <>
+          <React.Fragment key={`circle-fragment-${countryName.replace(' ', '')}`}>
             <circle
               tabIndex={-1}
-              key={`circle-${countryName.replace(' ', '')}`}
               className={`bubble country--${countryName}`}
               cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0}
               cy={Number(projection(coordinates[1], coordinates[0])[1]) || 0}
@@ -111,6 +111,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
               stroke={legendColors[0]}
               strokeWidth={1.25}
               fillOpacity={0.4}
+              onMouseEnter={() => {}}
               onPointerDown={e => {
                 pointerX = e.clientX
                 pointerY = e.clientY
@@ -138,7 +139,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
             {extraBubbleBorder && (
               <circle
                 tabIndex={-1}
-                key={`circle-${countryName.replace(' ', '')}`}
+                key={`circle-border-${countryName.replace(' ', '')}`}
                 className='bubble'
                 cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0}
                 cy={Number(projection(coordinates[1], coordinates[0])[1]) || 0}
@@ -146,6 +147,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
                 fill={'transparent'}
                 stroke={'white'}
                 strokeWidth={0.5}
+                onMouseEnter={() => {}}
                 onPointerDown={e => {
                   pointerX = e.clientX
                   pointerY = e.clientY
@@ -170,11 +172,11 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
                 data-tooltip-html={toolTip}
               />
             )}
-          </>
+          </React.Fragment>
         )
 
         return (
-          <g key={`group-${countryName.replace(' ', '')}`} tabIndex={-1}>
+          <g key={`group-${index}-${countryName.replace(' ', '')}`} tabIndex={-1}>
             {circle}
           </g>
         )
@@ -185,7 +187,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
   if (geoType === 'us') {
     return (
       sortedRuntimeData &&
-      sortedRuntimeData.map(item => {
+      sortedRuntimeData.map((item, index) => {
         let stateData = stateCoordinates[item.uid]
         if (Number(size(item[primaryColumnName])) === 0) return
 
@@ -223,6 +225,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
               stroke={legendColors[0]}
               strokeWidth={1.25}
               fillOpacity={0.4}
+              onMouseEnter={() => {}}
               onPointerDown={e => {
                 pointerX = e.clientX
                 pointerY = e.clientY
@@ -249,7 +252,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
             {extraBubbleBorder && (
               <circle
                 tabIndex={-1}
-                key={`circle-${stateName.replace(' ', '')}`}
+                key={`circle-border-${stateName.replace(' ', '')}`}
                 className='bubble'
                 cx={projection(coordinates)[0] || 0}
                 cy={projection(coordinates)[1] || 0}
@@ -258,6 +261,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
                 stroke={'white'}
                 strokeWidth={0.5}
                 fillOpacity={0.4}
+                onMouseEnter={() => {}}
                 onPointerDown={e => {
                   pointerX = e.clientX
                   pointerY = e.clientY
@@ -285,7 +289,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
           </>
         )
 
-        return <g key={`group-${stateName.replace(' ', '')}`}>{circle}</g>
+        return <g key={`group-${index}-${stateName.replace(' ', '')}`}>{circle}</g>
       })
     )
   }

package/src/components/CityList.tsx

@@ -1,10 +1,11 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useMemo } from 'react'
 import { scaleLinear } from 'd3-scale'
 import { GlyphCircle, GlyphDiamond, GlyphSquare, GlyphStar, GlyphTriangle } from '@visx/glyph'
 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, titleCase } from '../helpers'
+import { displayGeoName, getGeoStrokeColor, SVG_HEIGHT, SVG_PADDING, SVG_WIDTH, isLegendItemDisabled } from '../helpers'
 import useGeoClickHandler from '../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../helpers/applyLegendToRow'
@@ -18,72 +19,86 @@ type CityListProps = {
 }
 
 const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValueSupported, tooltipId, projection }) => {
-  const {
-    config,
-    topoData,
-    data: runtimeData,
-    position,
-    legendMemo,
-    legendSpecialClassLastMemo,
-    runtimeLegend
-  } = useContext(ConfigContext)
+  const { config, topoData, runtimeData, position, runtimeLegend } = useContext(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
 
-  const { geoColumnName, latitudeColumnName, longitudeColumnName, primaryColumnName } = getColumnNames(config.columns)
-  const { additionalCityStyles } = config.visual || []
+  const { geoColumnName, latitudeColumnName, longitudeColumnName, primaryColumnName } =
+    getColumnNames(config.columns) || {}
 
-  if (!projection) return
+  // Memoize expensive city data creation
+  const citiesData = useMemo(() => {
+    if (!runtimeData) return {}
 
-  const citiesData = runtimeData
-    ? Object.keys(runtimeData).reduce((acc, key) => {
-        const city = runtimeData[key]
+    return Object.keys(runtimeData).reduce((acc, key) => {
+      const city = runtimeData[key]
+      if (city && city[geoColumnName]) {
         acc[city[geoColumnName]] = city
-        return acc
-      }, {})
-    : {}
+      }
+      return acc
+    }, {})
+  }, [runtimeData, geoColumnName])
+
+  // Memoize bubble size calculation
+  const size = useMemo(() => {
+    if (config.general.type !== 'bubble' || !runtimeData) {
+      return null
+    }
 
-  if (config.general.type === 'bubble') {
-    const maxDataValue = Math.max(
-      ...(runtimeData ? Object.keys(runtimeData).map(key => runtimeData[key][config.columns.primary.name]) : [0])
-    )
-    const sortedRuntimeData = Object.values(runtimeData).sort((a, b) =>
-      a[primaryColumnName] < b[primaryColumnName] ? 1 : -1
-    )
-    if (!sortedRuntimeData) return
+    const maxVal = Math.max(...Object.keys(runtimeData).map(key => runtimeData[key][config.columns.primary.name]))
+
+    if (maxVal <= 0) {
+      return null
+    }
+
+    return scaleLinear().domain([1, maxVal]).range([config.visual.minBubbleSize, config.visual.maxBubbleSize])
+  }, [
+    config.general.type,
+    config.columns.primary.name,
+    config.visual.minBubbleSize,
+    config.visual.maxBubbleSize,
+    runtimeData
+  ])
+
+  // Get the list of cities to render
+  const cityList = useMemo(() => {
+    return Object.keys(citiesData).filter(cityName => cityName && citiesData[cityName])
+  }, [citiesData])
+
+  // Early exit for map types that don't use city rendering
+  if (!projection) {
+    return null
+  }
 
-    // Set bubble sizes
-    var size = scaleLinear().domain([1, maxDataValue]).range([config.visual.minBubbleSize, config.visual.maxBubbleSize])
+  // Early exit if no cities to render
+  if (!cityList.length) {
+    return null
   }
-  const cityList = Object.keys(citiesData).filter(c => undefined !== c || undefined !== runtimeData[c])
-  if (!cityList) return true
 
   // Cities output
   return cityList.map((city, i) => {
-    let geoData: Object
-    if (runtimeData) {
-      Object.keys(runtimeData).forEach(key => {
-        if (city === runtimeData[key][config.columns.geo.name]) {
-          geoData = runtimeData[key]
-        }
-      })
-    }
+    // Get the city data directly from our memoized citiesData
+    const geoData = citiesData[city]
+
     if (!geoData) {
-      geoData = runtimeData ? runtimeData[city] : undefined
+      return null
     }
-    const cityDisplayName = titleCase(displayGeoName(city))
 
-    const legendColors = geoData
-      ? applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
-      : runtimeData[city]
-      ? applyLegendToRow(runtimeData[city], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
-      : false
+    const cityDisplayName = displayGeoName(city)
 
-    if (legendColors === false) {
-      return true
+    const legendColors = applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+
+    if (!legendColors || legendColors.length === 0) {
+      return null
+    }
+
+    // Don't render if legend item is disabled
+    if (isLegendItemDisabled(geoData, runtimeLegend, legendMemo, legendSpecialClassLastMemo, config)) {
+      return null
     }
 
-    const toolTip = applyTooltipsToGeo(cityDisplayName, geoData || runtimeData[city])
+    const toolTip = applyTooltipsToGeo(cityDisplayName, geoData)
 
     const radius = config.visual.geoCodeCircleSize || 8
 
@@ -94,19 +109,21 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
     const geoStrokeColor = getGeoStrokeColor(config)
 
     const pin = (
-      <path
-        className='marker'
-        d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
-        title='Select for more information'
-        onClick={() => geoClickHandler(cityDisplayName, geoData)}
-        data-tooltip-id={`tooltip__${tooltipId}`}
-        data-tooltip-html={toolTip}
-        transform={`scale(${radius / 7.5})`}
-        stroke={geoStrokeColor}
-        strokeWidth={'2px'}
-        tabIndex='-1'
-        {...additionalProps}
-      />
+      <g>
+        <title>Select for more information</title>
+        <path
+          className='marker'
+          d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
+          onClick={() => geoClickHandler(cityDisplayName, geoData)}
+          data-tooltip-id={`tooltip__${tooltipId}`}
+          data-tooltip-html={toolTip}
+          transform={`scale(${radius / 7.5})`}
+          stroke={geoStrokeColor}
+          strokeWidth={'2px'}
+          tabIndex={-1}
+          {...additionalProps}
+        />
+      </g>
     )
 
     let transform = ''
@@ -130,7 +147,7 @@ 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?.states?.find(s => statesPicked.includes(s.properties.name))
+      const _statesPickedData = (topoData as any)?.states?.find(s => statesPicked.includes(s.properties.name))
 
       const newProjection = projection.fitExtent(
         [
@@ -141,7 +158,7 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
       )
       let coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
       transform = `translate(${newProjection(coords)}) scale(${
-        config.visual.geoCodeCircleSize / (position.zoom > 1 ? position.zoom : 1)
+        config.visual.geoCodeCircleSize / ((position as any).zoom > 1 ? (position as any).zoom : 1)
       })`
       needsPointer = true
     }
@@ -181,8 +198,7 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
 
     const shapeProps = {
       onClick: () => geoClickHandler(cityDisplayName, geoData),
-      size: config.general.type === 'bubble' ? size(geoData[primaryColumnName]) : radius * 30,
-      title: 'Select for more information',
+      size: config.general.type === 'bubble' && size ? size(geoData[primaryColumnName]) : radius * 30,
       'data-tooltip-id': `tooltip__${tooltipId}`,
       'data-tooltip-html': toolTip,
       stroke: geoStrokeColor,
@@ -200,48 +216,10 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
       triangle: <GlyphTriangle {...shapeProps} />
     }
 
-    const cityStyle = Object.values(runtimeData)
-      .filter(d => additionalCityStyles?.some(style => String(d[style.column]) === String(style.value)))
-      .map(d => {
-        const conditionsMatched = additionalCityStyles.find(style => String(d[style.column]) === String(style.value))
-        return { ...conditionsMatched, ...d }
-      })
-      .find(item => {
-        return Object.keys(item).find(key => item[key] === city)
-      })
-
-    if (cityStyle !== undefined && cityStyle.shape) {
-      if (
-        !geoData?.[longitudeColumnName] &&
-        !geoData?.[latitudeColumnName] &&
-        city &&
-        supportedCities[city.toUpperCase()]
-      ) {
-        let translate = `translate(${projection(supportedCities[city.toUpperCase()])})`
-
-        return (
-          <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
-            {cityStyleShapes[cityStyle.shape.toLowerCase()]}
-          </g>
-        )
-      }
-
-      if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName]) {
-        const coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
-        let translate = `translate(${projection(coords)})`
-
-        return (
-          <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
-            {cityStyleShapes[cityStyle.shape.toLowerCase()]}
-          </g>
-        )
-      }
-    }
-    if (legendColors?.[0] === '#000000') return
-
+    // Render the city marker
     return (
       <g key={i} transform={transform} style={styles} className='geo-point' tabIndex={-1}>
-        {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
+        {cityStyleShapes[config.visual.cityStyle?.toLowerCase() || 'circle']}
       </g>
     )
   })