@cdc/map 4.22.10 → 4.23.1

package/src/components/BubbleList.js

@@ -1,244 +1,202 @@
-import React, {memo, useState, useEffect} from 'react'
-import { scaleLinear } from 'd3-scale';
-import { countryCoordinates } from '../data/country-coordinates';
-import stateCoordinates from '../data/state-coordinates';
+import React, { memo, useState, useEffect } from 'react'
+import { scaleLinear } from 'd3-scale'
+import { countryCoordinates } from '../data/country-coordinates'
+import stateCoordinates from '../data/state-coordinates'
 import ReactTooltip from 'react-tooltip'
 
-export const BubbleList = (
-	{
-		data: dataImport,
-		state,
-		projection,
-		applyLegendToRow,
-		applyTooltipsToGeo,
-		handleCircleClick,
-		runtimeData,
-		displayGeoName
-	}) => {
-
-	useEffect(() => {
-		ReactTooltip.hide()
-	}, [runtimeData]);
-
-	const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))
-	const hasBubblesWithZeroOnMap = state.visual.showBubbleZeros ? 0 : 1;
-	// sort runtime data. Smaller bubbles should appear on top.
-	const sortedRuntimeData = Object.values(runtimeData).sort((a, b) => a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1 )
-	if(!sortedRuntimeData) return;
-
-	const clickTolerance = 10;
-
-	// Set bubble sizes
-	var size = scaleLinear()
-		.domain([hasBubblesWithZeroOnMap, maxDataValue])
-		.range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
-
-	// Start looping through the countries to create the bubbles.
-	if(state.general.geoType === 'world') {
-		const countries = sortedRuntimeData && sortedRuntimeData.map( (country, index) => {
-
-			let coordinates = countryCoordinates[country.uid]
-
-			if(!coordinates) return true;
-
-			const countryName = displayGeoName(country[state.columns.geo.name]);
-			const toolTip = applyTooltipsToGeo(countryName, country);
-			const legendColors = applyLegendToRow(country);
-			
-			let primaryKey = state.columns.primary.name
-			if ((Math.floor(Number(size(country[primaryKey]))) === 0 || country[primaryKey] === "") && !state.visual.showBubbleZeros) return;
-
-			let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
-
-			let pointerX, pointerY;
-
-			if( !projection(coordinates) ) return true;
-
-			const circle = (
-				<>
-					<circle
-						key={`circle-${countryName.replace(' ', '')}`}
-						data-tip={toolTip}
-						data-for="tooltip"
-						className={`bubble country--${countryName}`}
-						cx={ Number(projection(coordinates[1], coordinates[0])[0]) || 0  } // || 0 handles error on loads where the data isn't ready
-						cy={ Number(projection(coordinates[1], coordinates[0])[1]) || 0 }
-						r={ Number(size(country[primaryKey])) }
-						fill={legendColors[0] }
-						stroke={legendColors[0]}
-						strokeWidth={1.25}
-						fillOpacity={.4}
-						onPointerDown={(e) => {
-							pointerX = e.clientX; 
-							pointerY = e.clientY;
-						}}
-						onPointerUp={(e) => {
-							if(pointerX && pointerY &&
-								e.clientX > (pointerX - clickTolerance) &&
-								e.clientX < (pointerX + clickTolerance) &&
-								e.clientY > (pointerY - clickTolerance) &&
-								e.clientY < (pointerY + clickTolerance)
-							){ 
-								handleCircleClick(country)
-								pointerX = undefined;
-								pointerY = undefined;
-							}
-						}}
-						transform={transform}
-						style={{ transition: 'all .25s ease-in-out', cursor: "pointer" }}
-					/>
-
-					{state.visual.extraBubbleBorder &&
-						<circle
-							key={`circle-${countryName.replace(' ', '')}`}
-							data-tip={toolTip}
-							data-for="tooltip"
-							className="bubble"
-							cx={ Number(projection(coordinates[1], coordinates[0])[0]) || 0  } // || 0 handles error on loads where the data isn't ready
-							cy={ Number(projection(coordinates[1], coordinates[0])[1]) || 0 }
-							r={ Number(size(country[primaryKey])) + 1 }
-							fill={ "transparent" }
-							stroke={ "white" }
-							strokeWidth={.5}
-							onPointerDown={(e) => {
-								pointerX = e.clientX; 
-								pointerY = e.clientY;
-							}}
-							onPointerUp={(e) => {
-								if(pointerX && pointerY &&
-									e.clientX > (pointerX - clickTolerance) &&
-									e.clientX < (pointerX + clickTolerance) &&
-									e.clientY > (pointerY - clickTolerance) &&
-									e.clientY < (pointerY + clickTolerance)
-								){ 
-									handleCircleClick(country)
-									pointerX = undefined;
-									pointerY = undefined;
-								}
-							}}
-							transform={transform}
-							style={{ transition: 'all .25s ease-in-out', cursor: "pointer" }}
-						/>
-					}
-				</>
-			);
-		
-
-			return (
-				<g key={`group-${countryName.replace(' ', '')}`}>
-					{circle}
-				</g>
-			)
-		})
-		return countries;
-	}
-
-	if(state.general.geoType === 'us') {
-		const bubbles = sortedRuntimeData && sortedRuntimeData.map( (item, index) => {
-			let stateData = stateCoordinates[item.uid]
-			let primaryKey = state?.columns?.primary?.name
-			if ( Number(size(item[primaryKey])) === 0) return;
-
-			if (item[primaryKey] === null) item[primaryKey] = ""
-
-			// Return if hiding zeros on the map
-			if( (Math.floor(Number(size(item[primaryKey]))) === 0 || item[primaryKey] === "" )&& !state.visual.showBubbleZeros ) return;
-
-			if(!stateData) return true;
-			let longitude = Number( stateData.Longitude);
-			let latitude = Number( stateData.Latitude);
-			let coordinates = [longitude, latitude]
-			//console.log('projection', projection([longitude, latitude]))
-			let stateName = stateData.Name;
-			if (!coordinates) return true;
-
-			stateName = displayGeoName(stateName);
-			const toolTip = applyTooltipsToGeo(stateName, item);
-			const legendColors = applyLegendToRow(item);
-
-
-			let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
-
-			if ( !projection(coordinates) ) return true;
-
-			let pointerX, pointerY;
-			const circle = (
-				<>
-					<circle
-						key={`circle-${stateName.replace(' ', '')}`}
-						data-tip={toolTip}
-						data-for="tooltip"
-						className="bubble"
-						cx={projection(coordinates)[0] || 0} // || 0 handles error on loads where the data isn't ready
-						cy={projection(coordinates)[1] || 0}
-						r={Number(size(item[primaryKey]))}
-						fill={legendColors[0]}
-						stroke={legendColors[0]}
-						strokeWidth={1.25}
-						fillOpacity={.4}
-						onPointerDown={(e) => {
-							pointerX = e.clientX;
-							pointerY = e.clientY;
-						}}
-						onPointerUp={(e) => {
-							if (pointerX && pointerY &&
-								e.clientX > (pointerX - clickTolerance) &&
-								e.clientX < (pointerX + clickTolerance) &&
-								e.clientY > (pointerY - clickTolerance) &&
-								e.clientY < (pointerY + clickTolerance)
-							) {
-								handleCircleClick(state)
-								pointerX = undefined;
-								pointerY = undefined;
-							}
-						}}
-						transform={transform}
-						style={{ transition: 'all .25s ease-in-out', cursor: "pointer" }}
-					/>
-					{ state.visual.extraBubbleBorder &&
-						<circle
-						key={`circle-${stateName.replace(' ', '')}`}
-						data-tip={toolTip}
-						data-for="tooltip"
-						className="bubble"
-						cx={ projection(coordinates)[0] || 0 } // || 0 handles error on loads where the data isn't ready
-						cy={ projection(coordinates)[1] || 0 }
-						r={ Number(size(item[primaryKey])) + 1 }
-						fill={"transparent"}
-						stroke={"white"}
-						strokeWidth={.5}
-						fillOpacity={.4}
-						onPointerDown={(e) => {
-							pointerX = e.clientX;
-							pointerY = e.clientY;
-						}}
-						onPointerUp={(e) => {
-							if (pointerX && pointerY &&
-								e.clientX > (pointerX - clickTolerance) &&
-								e.clientX < (pointerX + clickTolerance) &&
-								e.clientY > (pointerY - clickTolerance) &&
-								e.clientY < (pointerY + clickTolerance)
-							) {
-								handleCircleClick(state)
-								pointerX = undefined;
-								pointerY = undefined;
-							}
-						}}
-						transform={transform}
-						style={{ transition: 'all .25s ease-in-out', cursor: "pointer" }}
-						/>
-					}
-				</>
-			);
-
-
-			return (
-				<g key={`group-${stateName.replace(' ', '')}`}>
-					{circle}
-				</g>
-			)
-		})
-		return bubbles;
-	}
+export const BubbleList = ({ data: dataImport, state, projection, applyLegendToRow, applyTooltipsToGeo, handleCircleClick, runtimeData, displayGeoName }) => {
+  useEffect(() => {
+    ReactTooltip.hide()
+  }, [runtimeData])
+
+  const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))
+  const hasBubblesWithZeroOnMap = state.visual.showBubbleZeros ? 0 : 1
+  // sort runtime data. Smaller bubbles should appear on top.
+  const sortedRuntimeData = Object.values(runtimeData).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))
+  if (!sortedRuntimeData) return
+
+  const clickTolerance = 10
+  // Set bubble sizes
+  var size = scaleLinear().domain([hasBubblesWithZeroOnMap, maxDataValue]).range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
+
+  // Start looping through the countries to create the bubbles.
+  if (state.general.geoType === 'world') {
+    const countries =
+      sortedRuntimeData &&
+      sortedRuntimeData.map((country, index) => {
+        let coordinates = countryCoordinates[country.uid]
+
+        if (!coordinates) return true
+
+        const countryName = displayGeoName(country[state.columns.geo.name])
+        const toolTip = applyTooltipsToGeo(countryName, country)
+        const legendColors = applyLegendToRow(country)
+
+        let primaryKey = state.columns.primary.name
+        if ((Math.floor(Number(country[primaryKey])) === 0 || country[primaryKey] === '') && !state.visual.showBubbleZeros) return
+
+        let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
+
+        let pointerX, pointerY
+
+        if (!projection(coordinates)) return true
+
+        const circle = (
+          <>
+            <circle
+              key={`circle-${countryName.replace(' ', '')}`}
+              data-tip={toolTip}
+              data-for='tooltip'
+              className={`bubble country--${countryName}`}
+              cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0} // || 0 handles error on loads where the data isn't ready
+              cy={Number(projection(coordinates[1], coordinates[0])[1]) || 0}
+              r={Number(size(country[primaryKey]))}
+              fill={legendColors[0]}
+              stroke={legendColors[0]}
+              strokeWidth={1.25}
+              fillOpacity={0.4}
+              onPointerDown={e => {
+                pointerX = e.clientX
+                pointerY = e.clientY
+              }}
+              onPointerUp={e => {
+                if (pointerX && pointerY && e.clientX > pointerX - clickTolerance && e.clientX < pointerX + clickTolerance && e.clientY > pointerY - clickTolerance && e.clientY < pointerY + clickTolerance) {
+                  handleCircleClick(country)
+                  pointerX = undefined
+                  pointerY = undefined
+                }
+              }}
+              transform={transform}
+              style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
+            />
+
+            {state.visual.extraBubbleBorder && (
+              <circle
+                key={`circle-${countryName.replace(' ', '')}`}
+                data-tip={toolTip}
+                data-for='tooltip'
+                className='bubble'
+                cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0} // || 0 handles error on loads where the data isn't ready
+                cy={Number(projection(coordinates[1], coordinates[0])[1]) || 0}
+                r={Number(size(country[primaryKey])) + 1}
+                fill={'transparent'}
+                stroke={'white'}
+                strokeWidth={0.5}
+                onPointerDown={e => {
+                  pointerX = e.clientX
+                  pointerY = e.clientY
+                }}
+                onPointerUp={e => {
+                  if (pointerX && pointerY && e.clientX > pointerX - clickTolerance && e.clientX < pointerX + clickTolerance && e.clientY > pointerY - clickTolerance && e.clientY < pointerY + clickTolerance) {
+                    handleCircleClick(country)
+                    pointerX = undefined
+                    pointerY = undefined
+                  }
+                }}
+                transform={transform}
+                style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
+              />
+            )}
+          </>
+        )
+
+        return <g key={`group-${countryName.replace(' ', '')}`}>{circle}</g>
+      })
+    return countries
+  }
+
+  if (state.general.geoType === 'us') {
+    const bubbles =
+      sortedRuntimeData &&
+      sortedRuntimeData.map((item, index) => {
+        let stateData = stateCoordinates[item.uid]
+        let primaryKey = state?.columns?.primary?.name
+        if (Number(size(item[primaryKey])) === 0) return
+
+        if (item[primaryKey] === null) item[primaryKey] = ''
+
+        // Return if hiding zeros on the map
+        if ((Math.floor(Number(item[primaryKey])) === 0 || item[primaryKey] === '') && !state.visual.showBubbleZeros) return
+
+        if (!stateData) return true
+        let longitude = Number(stateData.Longitude)
+        let latitude = Number(stateData.Latitude)
+        let coordinates = [longitude, latitude]
+        //console.log('projection', projection([longitude, latitude]))
+        let stateName = stateData.Name
+        if (!coordinates) return true
+
+        stateName = displayGeoName(stateName)
+        const toolTip = applyTooltipsToGeo(stateName, item)
+        const legendColors = applyLegendToRow(item)
+
+        let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
+
+        if (!projection(coordinates)) return true
+
+        let pointerX, pointerY
+        const circle = (
+          <>
+            <circle
+              key={`circle-${stateName.replace(' ', '')}`}
+              data-tip={toolTip}
+              data-for='tooltip'
+              className='bubble'
+              cx={projection(coordinates)[0] || 0} // || 0 handles error on loads where the data isn't ready
+              cy={projection(coordinates)[1] || 0}
+              r={Number(size(item[primaryKey]))}
+              fill={legendColors[0]}
+              stroke={legendColors[0]}
+              strokeWidth={1.25}
+              fillOpacity={0.4}
+              onPointerDown={e => {
+                pointerX = e.clientX
+                pointerY = e.clientY
+              }}
+              onPointerUp={e => {
+                if (pointerX && pointerY && e.clientX > pointerX - clickTolerance && e.clientX < pointerX + clickTolerance && e.clientY > pointerY - clickTolerance && e.clientY < pointerY + clickTolerance) {
+                  handleCircleClick(state)
+                  pointerX = undefined
+                  pointerY = undefined
+                }
+              }}
+              transform={transform}
+              style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
+            />
+            {state.visual.extraBubbleBorder && (
+              <circle
+                key={`circle-${stateName.replace(' ', '')}`}
+                data-tip={toolTip}
+                data-for='tooltip'
+                className='bubble'
+                cx={projection(coordinates)[0] || 0} // || 0 handles error on loads where the data isn't ready
+                cy={projection(coordinates)[1] || 0}
+                r={Number(size(item[primaryKey])) + 1}
+                fill={'transparent'}
+                stroke={'white'}
+                strokeWidth={0.5}
+                fillOpacity={0.4}
+                onPointerDown={e => {
+                  pointerX = e.clientX
+                  pointerY = e.clientY
+                }}
+                onPointerUp={e => {
+                  if (pointerX && pointerY && e.clientX > pointerX - clickTolerance && e.clientX < pointerX + clickTolerance && e.clientY > pointerY - clickTolerance && e.clientY < pointerY + clickTolerance) {
+                    handleCircleClick(state)
+                    pointerX = undefined
+                    pointerY = undefined
+                  }
+                }}
+                transform={transform}
+                style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
+              />
+            )}
+          </>
+        )
+
+        return <g key={`group-${stateName.replace(' ', '')}`}>{circle}</g>
+      })
+    return bubbles
+  }
 }
 export default BubbleList

package/src/components/CityList.js

@@ -1,76 +1,58 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext } from 'react'
 /** @jsx jsx */
 import { jsx } from '@emotion/react'
-import { supportedCities } from '../data/supported-geos';
-import { scaleLinear } from 'd3-scale';
-import ReactTooltip from 'react-tooltip';
-
-const CityList = (({
-  data,
-  state,
-  geoClickHandler,
-  applyTooltipsToGeo,
-  displayGeoName,
-  applyLegendToRow,
-  projection,
-  titleCase,
-  setSharedFilterValue,
-  isFilterValueSupported,
-  isGeoCodeMap
-}) => {
-
-  const [citiesData, setCitiesData] = useState({});
+import { supportedCities } from '../data/supported-geos'
+import { scaleLinear } from 'd3-scale'
+import ReactTooltip from 'react-tooltip'
+
+const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported, isGeoCodeMap }) => {
+  const [citiesData, setCitiesData] = useState({})
 
   useEffect(() => {
     ReactTooltip.rebuild()
-  });
+  })
 
   useEffect(() => {
-    if(!isGeoCodeMap) {
-      const citiesList = Object.keys(data).filter((item) => Object.keys(supportedCities).includes(item));
-  
-      const citiesDictionary = {};
-  
-      citiesList.map((city) => citiesDictionary[city] = data[city]);
-  
-      setCitiesData(citiesDictionary);
+    if (!isGeoCodeMap) {
+      const citiesList = Object.keys(data).filter(item => Object.keys(supportedCities).includes(item))
+
+      const citiesDictionary = {}
+
+      citiesList.map(city => (citiesDictionary[city] = data[city]))
+
+      setCitiesData(citiesDictionary)
     } else {
-      const citiesDictionary = {};
-      state.data.map(city => citiesDictionary[city[state.columns.geo.name]] = city)
-      setCitiesData(citiesDictionary);
+      const citiesDictionary = {}
+      state.data.map(city => (citiesDictionary[city[state.columns.geo.name]] = city))
+      setCitiesData(citiesDictionary)
     }
-  }, [data, state.data]);
+  }, [data, state.data])
 
   if (state.general.type === 'bubble') {
     const maxDataValue = Math.max(...state.data.map(d => d[state.columns.primary.name]))
-    const sortedRuntimeData = Object.values(data).sort((a, b) => a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1)
-    if (!sortedRuntimeData) return;
+    const sortedRuntimeData = Object.values(data).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))
+    if (!sortedRuntimeData) return
 
     // Set bubble sizes
-    var size = scaleLinear()
-      .domain([1, maxDataValue])
-      .range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
-
+    var size = scaleLinear().domain([1, maxDataValue]).range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
   }
-  let cityList = isGeoCodeMap ? Object.keys(citiesData).filter((c) => undefined !== c) : Object.keys(citiesData).filter((c) => undefined !== data[c]);
-  if(!cityList) return true;
+  let cityList = isGeoCodeMap ? Object.keys(citiesData).filter(c => undefined !== c) : Object.keys(citiesData).filter(c => undefined !== data[c])
+  if (!cityList) return true
 
   // Cities output
   const cities = cityList.map((city, i) => {
+    const geoData = isGeoCodeMap ? state.data.filter(item => city === item[state.columns.geo.name])[0] : data[city]
+    const cityDisplayName = isGeoCodeMap ? city : titleCase(displayGeoName(city))
 
-    const geoData = isGeoCodeMap ? state.data.filter(item => city === item[state.columns.geo.name])[0] : data[city];
-
-    const cityDisplayName = isGeoCodeMap ? city : titleCase( displayGeoName(city) );
-
-    const legendColors = (isGeoCodeMap && geoData) ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false;
+    const legendColors = isGeoCodeMap && geoData ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false
 
     if (legendColors === false) {
-      return true;
+      return true
     }
 
     const styles = {
       fill: legendColors[0],
-      opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? .5 : 1,
+      opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
       stroke: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
       '&:hover': {
         fill: legendColors[1],
@@ -80,54 +62,30 @@ const CityList = (({
         fill: legendColors[2],
         outline: 0
       }
-    };
-
-
+    }
 
-    const toolTip = applyTooltipsToGeo(cityDisplayName, data[city]);
+    const toolTip = applyTooltipsToGeo(cityDisplayName, data[city])
 
     // If we need to add a cursor pointer
-    if ((state.columns.navigate && (geoData?.[state.columns.navigate.name] && geoData[state.columns.navigate.name]) ) || state.tooltips.appearanceType === 'click') {
+    if ((state.columns.navigate && geoData?.[state.columns.navigate.name] && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
       styles.cursor = 'pointer'
     }
 
-    const radius = state.general.geoType === 'us' && !isGeoCodeMap ? 8 : isGeoCodeMap ? 2 : 4;
+    const radius = state.general.geoType === 'us' && !isGeoCodeMap ? 8 : isGeoCodeMap ? state.visual.geoCodeCircleSize : 4
 
     const additionalProps = {
-      fillOpacity: state.general.type === 'bubble' ? .4 : 1
+      fillOpacity: state.general.type === 'bubble' ? 0.4 : 1
     }
 
-    const circle = (
-      <circle
-        data-tip={toolTip}
-        data-for="tooltip"
-        cx={0}
-        cy={0}
-        r={ state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius}
-        title="Click for more information"
-        onClick={() => geoClickHandler(cityDisplayName, geoData)}
-       {...additionalProps}
-      />
-    );
+    const circle = <circle data-tip={toolTip} data-for='tooltip' cx={0} cy={0} r={state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius} title='Click for more information' onClick={() => geoClickHandler(cityDisplayName, geoData)} {...additionalProps} />
 
     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="Click for more information"
-        onClick={() => geoClickHandler(cityDisplayName, geoData)}
-        data-tip={toolTip}
-        data-for="tooltip"
-        strokeWidth={2}
-        stroke={'black'}
-        {...additionalProps}
-        >
-      </path>
-    );
-
-    let transform = '';
-
-    if (!isGeoCodeMap)  {
+      <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='Click for more information' onClick={() => geoClickHandler(cityDisplayName, geoData)} data-tip={toolTip} data-for='tooltip' strokeWidth={2} stroke={'black'} {...additionalProps}></path>
+    )
+
+    let transform = ''
+
+    if (!isGeoCodeMap) {
       transform = `translate(${projection(supportedCities[city])})`
     }
 
@@ -137,19 +95,14 @@ const CityList = (({
     }
 
     return (
-      <g
-        key={i}
-        transform={transform}
-        css={styles}
-        className="geo-point"
-      >
-        {state.visual.cityStyle === 'circle' && circle }
-        {state.visual.cityStyle === 'pin' && pin }
+      <g key={i} transform={transform} css={styles} className='geo-point'>
+        {state.visual.cityStyle === 'circle' && circle}
+        {state.visual.cityStyle === 'pin' && pin}
       </g>
-    );
-  });
+    )
+  })
 
-  return cities;
-});
+  return cities
+}
 
-export default CityList;
+export default CityList