@cdc/map 4.24.10 → 4.24.12

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

@@ -21,6 +21,7 @@ import {
   drawShape,
   createShapeProperties
 } from '../helpers/shapes'
+import { getGeoStrokeColor } from '../../../helpers/colors'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -131,22 +132,23 @@ const CountyMap = props => {
   const {
       applyLegendToRow,
       applyTooltipsToGeo,
+      container,
       containerEl,
       data,
       displayGeoName,
       geoClickHandler,
       handleMapAriaLabels,
+      runtimeFilters,
       runtimeLegend,
+      setState,
       state,
-      runtimeFilters,
       tooltipId,
       tooltipRef,
-      container,
-      setState
   } = useContext(ConfigContext)
 
   // CREATE STATE LINES
   const projection = geoAlbersUsaTerritories()
+  const geoStrokeColor = getGeoStrokeColor(state)
 
   const [focus, setFocus] = useState({})
   const [topoData, setTopoData] = useState({})
@@ -210,9 +212,7 @@ const CountyMap = props => {
   }
 
   const runtimeKeys = Object.keys(data)
-
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgb(90, 90, 90)' : 'rgb(255, 255, 255)'
-  const lineWidth = 0.3
+  const lineWidth = 1
 
   const onReset = () => {
     setState({
@@ -449,7 +449,7 @@ const CountyMap = props => {
     }
 
     if (focus.index !== -1) {
-      context.strokeStyle = 'black'
+      context.strokeStyle = geoStrokeColor
       context.lineWidth = 1
       context.beginPath()
       path(topoData.mapData[focus.index])
@@ -493,7 +493,6 @@ const CountyMap = props => {
 
       // Enforces stroke style of the county lines
       context.strokeStyle = geoStrokeColor
-      context.lineWidth = lineWidth
 
       // Iterates through each state/county topo and renders it
       topoData.mapData.forEach((geo, i) => {
@@ -518,7 +517,7 @@ const CountyMap = props => {
 
       // If the focused state is found in the geo data, render it with a thicker outline
       if (focus.index !== -1) {
-        context.strokeStyle = 'black'
+        context.strokeStyle = geoStrokeColor
         context.lineWidth = 2
         context.beginPath()
         path(topoData.mapData[focus.index])
@@ -531,8 +530,7 @@ const CountyMap = props => {
           context.beginPath()
           path(layer)
           context.fillStyle = layer.properties.fill
-          context.globalAlpha = layer.properties['fill-opacity']
-          context.strokeStyle = layer.properties['stroke']
+          context.strokeStyle = geoStrokeColor
           context.lineWidth = layer.properties['stroke-width']
           context.fill()
           context.stroke()
@@ -540,7 +538,7 @@ const CountyMap = props => {
       }
 
       if (state.general.type === 'us-geocode') {
-        context.strokeStyle = 'black'
+        context.strokeStyle = geoStrokeColor
         const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
         const { additionalCityStyles } = state.visual || []
         const cityStyles = Object.values(data)
@@ -604,7 +602,7 @@ const CountyMap = props => {
         className='county-map-canvas'
       ></canvas>
 
-      <button className={`btn btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
+      <button className={`btn btn--reset btn-primary`} onClick={onReset} ref={resetButton} tabIndex='0'>
         Reset Zoom
       </button>
     </ErrorBoundary>

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

@@ -11,6 +11,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
 import Annotation from '../../Annotation'
+import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
 
@@ -69,7 +70,8 @@ const UsaRegionMap = props => {
     setTerritoriesData(territoriesList)
   }, [data])
 
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+  const geoStrokeColor = getGeoStrokeColor(state)
+  const geoFillColor = getGeoFillColor(state)
 
   const territories = territoriesData.map(territory => {
     const Shape = Rect
@@ -79,7 +81,7 @@ const UsaRegionMap = props => {
     let toolTip
 
     let styles: React.CSSProperties = {
-      fill: '#E6E6E6',
+      fill: geoFillColor,
       color: '#202020'
     }
 
@@ -97,7 +99,10 @@ const UsaRegionMap = props => {
       let needsPointer = false
 
       // If we need to add a pointer cursor
-      if ((state.columns.navigate && territoryData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+      if (
+        (state.columns.navigate && territoryData[state.columns.navigate.name]) ||
+        state.tooltips.appearanceType === 'click'
+      ) {
         needsPointer = true
       }
 
@@ -113,7 +118,19 @@ const UsaRegionMap = props => {
         }
       }
 
-      return <Shape key={label} label={label} css={styles} text={styles.color} stroke={geoStrokeColor} strokeWidth={1.5} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip} />
+      return (
+        <Shape
+          key={label}
+          label={label}
+          css={styles}
+          text={styles.color}
+          stroke={geoStrokeColor}
+          strokeWidth={1}
+          onClick={() => geoClickHandler(territory, territoryData)}
+          data-tooltip-id={`tooltip__${tooltipId}`}
+          data-tooltip-html={toolTip}
+        />
+      )
     }
   })
 
@@ -130,8 +147,22 @@ const UsaRegionMap = props => {
 
     return (
       <g>
-        <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke='rgba(0,0,0,.5)' strokeWidth={1} />
-        <text x={4} strokeWidth='0' fontSize={13} style={{ fill: '#202020' }} alignmentBaseline='middle' transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
+        <line
+          x1={centroid[0]}
+          y1={centroid[1]}
+          x2={centroid[0] + dx}
+          y2={centroid[1] + dy}
+          stroke='rgba(0,0,0,.5)'
+          strokeWidth={1}
+        />
+        <text
+          x={4}
+          strokeWidth='0'
+          fontSize={13}
+          style={{ fill: '#202020' }}
+          alignmentBaseline='middle'
+          transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
+        >
           {abbr.substring(3)}
         </text>
       </g>
@@ -146,7 +177,7 @@ const UsaRegionMap = props => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
       let styles = {
-        fill: '#E6E6E6',
+        fill: geoFillColor,
         cursor: 'default'
       }
 
@@ -172,28 +203,32 @@ const UsaRegionMap = props => {
         const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
 
         styles = {
-          fill: state.general.type !== 'bubble' ? legendColors[0] : '#E6E6E6',
+          fill: state.general.type !== 'bubble' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: state.general.type !== 'bubble' ? legendColors[1] : '#e6e6e6'
+            fill: state.general.type !== 'bubble' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: state.general.type !== 'bubble' ? legendColors[2] : '#e6e6e6'
+            fill: state.general.type !== 'bubble' ? legendColors[2] : geoFillColor
           }
         }
 
         // When to add pointer cursor
-        if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+        if (
+          (state.columns.navigate && geoData[state.columns.navigate.name]) ||
+          state.tooltips.appearanceType === 'click'
+        ) {
           styles.cursor = 'pointer'
         }
 
         const TerratoryRect = props => {
           const { posX = 0, tName } = props
           const textColor = getContrastColor('#FFF', legendColors[0])
+          const geoStrokeColor = getGeoStrokeColor(state)
           return (
             <>
-              <rect x={posX} width='36' height='24' rx='6' stroke='#fff' strokeWidth='1' />
-              <text x={posX + 8} y='17' fill={textColor}>
+              <rect x={posX} width='36' height='24' rx='2' stroke={geoStrokeColor} strokeWidth='1' />
+              <text textAnchor='middle' x={36 / 2 + posX} y='17' fill={textColor}>
                 {tName}
               </text>
             </>
@@ -203,8 +238,16 @@ const UsaRegionMap = props => {
         const circleRadius = 15
 
         return (
-          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip} tabIndex={-1}>
-            <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
+          <g
+            key={key}
+            className='geo-group'
+            style={styles}
+            onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            data-tooltip-id={`tooltip__${tooltipId}`}
+            data-tooltip-html={toolTip}
+            tabIndex={-1}
+          >
+            <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
             <g id={`region-${index + 1}-label`}>
               <circle fill='#fff' stroke='#999' cx={circleRadius} cy={circleRadius} r={circleRadius} />
               <text fill='#333' x='15px' y='20px' textAnchor='middle'>
@@ -239,7 +282,7 @@ const UsaRegionMap = props => {
       // Default return state, just geo with no additional information
       return (
         <g key={key} className='geo-group' style={styles}>
-          <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
+          <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
           {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
         </g>
       )

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

@@ -14,6 +14,7 @@ import ZoomControls from '../../ZoomControls'
 import { MapContext } from '../../../types/MapContext'
 import useStateZoom from '../../../hooks/useStateZoom'
 import { Text } from '@visx/text'
+import { getGeoStrokeColor } from '../../../helpers/colors'
 
 // SVG ITEMS
 const WIDTH = 880
@@ -49,7 +50,7 @@ const SingleStateMap = props => {
   const cityListProjection = geoAlbersUsaTerritories()
     .translate([WIDTH / 2, HEIGHT / 2])
     .scale(1)
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+  const geoStrokeColor = getGeoStrokeColor(state)
   const path = geoPath().projection(projection)
 
   useEffect(() => {

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -19,11 +19,13 @@ import { patternSizes } from '../helpers/patternSizes'
 import Annotation from '../../Annotation'
 
 import Territory from './Territory'
+import { cityKeys } from '../../../data/supported-geos'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
 import { MapContext } from '../../../types/MapContext'
 import { checkColorContrast, getContrastColor, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
+import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -59,7 +61,6 @@ const UsaMap = () => {
       data,
       displayGeoName,
       geoClickHandler,
-      handleCircleClick,
       handleMapAriaLabels,
       setSharedFilterValue,
       state,
@@ -67,11 +68,12 @@ const UsaMap = () => {
       titleCase,
       tooltipId,
       handleDragStateChange,
-      setState,
-      mapId
+      mapId,
+      logo,
     } = useContext<MapContext>(ConfigContext)
 
   let isFilterValueSupported = false
+  const { general, columns, feature, tooltips, hexMap, map, annotations } = state
 
   if (setSharedFilterValue) {
     Object.keys(supportedStates).forEach(supportedState => {
@@ -101,16 +103,16 @@ const UsaMap = () => {
   useEffect(() => {
     setTranslate([455, 250])
     setExtent(null)
-  }, [state.general.geoType])
+  }, [general.geoType])
 
-  const isHex = state.general.displayAsHex
+  const isHex = general.displayAsHex
 
   const [territoriesData, setTerritoriesData] = useState([])
 
   const territoriesKeys = Object.keys(supportedTerritories) // data will have already mapped abbreviated territories to their full names
 
   useEffect(() => {
-    if (state.general.territoriesAlwaysShow) {
+    if (general.territoriesAlwaysShow) {
       // show all Territories whether in the data or not
       setTerritoriesData(territoriesKeys)
     } else {
@@ -118,17 +120,10 @@ const UsaMap = () => {
       const territoriesList = territoriesKeys.filter(key => data[key])
       setTerritoriesData(territoriesList)
     }
-  }, [data, state.general.territoriesAlwaysShow])
+  }, [data, general.territoriesAlwaysShow])
 
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
-
-  const getTerritoriesClasses = () => {
-    const screenWidth = window?.visualViewport?.width
-    let className = 'territories'
-    if (screenWidth < 700) return 'territories--mobile'
-    if (screenWidth < 900) return 'territories--tablet'
-    return className
-  }
+  const geoStrokeColor = getGeoStrokeColor(state)
+  const geoFillColor = getGeoFillColor(state)
 
   const territories = territoriesData.map((territory, territoryIndex) => {
     const Shape = isHex ? Territory.Hexagon : Territory.Rectangle
@@ -138,13 +133,24 @@ const UsaMap = () => {
     let toolTip
 
     let styles = {
-      fill: '#E6E6E6',
+      fill: geoFillColor,
+      stroke: geoStrokeColor,
       color: '#202020'
     }
 
     const label = supportedTerritories[territory][1]
 
-    if (!territoryData) return <Shape key={label} label={label} style={styles} text={styles.color} />
+    if (!territoryData)
+      return (
+        <Shape
+          key={label}
+          label={label}
+          style={styles}
+          text={styles.color}
+          territoryData={territoryData}
+          backgroundColor={styles.fill}
+        />
+      )
 
     toolTip = applyTooltipsToGeo(displayGeoName(territory), territoryData)
 
@@ -156,10 +162,7 @@ const UsaMap = () => {
       let needsPointer = false
 
       // If we need to add a pointer cursor
-      if (
-        (state.columns.navigate && territoryData[state.columns.navigate.name]) ||
-        state.tooltips.appearanceType === 'click'
-      ) {
+      if ((columns.navigate && territoryData[columns.navigate.name]) || tooltips.appearanceType === 'click') {
         needsPointer = true
       }
 
@@ -167,15 +170,11 @@ const UsaMap = () => {
         color: textColor,
         fill: legendColors[0],
         opacity:
-          setSharedFilterValue &&
-          isFilterValueSupported &&
-          setSharedFilterValue !== territoryData[state.columns.geo.name]
+          setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== territoryData[columns.geo.name]
             ? 0.5
             : 1,
         stroke:
-          setSharedFilterValue &&
-          isFilterValueSupported &&
-          setSharedFilterValue === territoryData[state.columns.geo.name]
+          setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === territoryData[columns.geo.name]
             ? 'rgba(0, 0, 0, 1)'
             : geoStrokeColor,
         cursor: needsPointer ? 'pointer' : 'default',
@@ -193,14 +192,15 @@ const UsaMap = () => {
           label={label}
           style={styles}
           text={styles.color}
-          strokeWidth={1.5}
+          strokeWidth={1}
           textColor={textColor}
-          onClick={() => geoClickHandler(territory, territoryData)}
-          data-tooltip-id={`tooltip__${tooltipId}`}
-          data-tooltip-html={toolTip}
+          handleShapeClick={() => geoClickHandler(territory, territoryData)}
+          dataTooltipId={`tooltip__${tooltipId}`}
+          dataTooltipHtml={toolTip}
           territory={territory}
           territoryData={territoryData}
           tabIndex={-1}
+          backgroundColor={styles.fill}
         />
       )
     }
@@ -213,7 +213,7 @@ const UsaMap = () => {
 
   // Constructs and displays markup for all geos on the map (except territories right now)
   const constructGeoJsx = (geographies, projection) => {
-    let showLabel = state.general.displayStateLabels
+    let showLabel = general.displayStateLabels
 
     // Order alphabetically. Important for accessibility if ever read out loud.
     geographies.map(state => {
@@ -239,7 +239,7 @@ const UsaMap = () => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
       let styles = {
-        fill: '#E6E6E6',
+        fill: geoFillColor,
         cursor: 'default'
       }
 
@@ -247,8 +247,6 @@ const UsaMap = () => {
       let geoKey = geo.properties.iso
       let geoName = geo.properties.name
 
-      // Manually add Washington D.C. in for Hex maps
-
       if (!geoKey) return
 
       const geoData = data[geoKey]
@@ -267,29 +265,26 @@ const UsaMap = () => {
         const tooltip = applyTooltipsToGeo(geoDisplayName, geoData)
 
         styles = {
-          fill: state.general.type !== 'bubble' ? legendColors[0] : '#E6E6E6',
+          fill: state.general.type !== 'bubble' ? legendColors[0] : geoFillColor,
           opacity:
-            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[state.columns.geo.name]
+            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[columns.geo.name]
               ? 0.5
               : 1,
           stroke:
-            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === geoData[state.columns.geo.name]
+            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === geoData[columns.geo.name]
               ? 'rgba(0, 0, 0, 1)'
               : geoStrokeColor,
           cursor: 'default',
           '&:hover': {
-            fill: state.general.type !== 'bubble' ? legendColors[1] : '#e6e6e6'
+            fill: state.general.type !== 'bubble' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: state.general.type !== 'bubble' ? legendColors[2] : '#e6e6e6'
+            fill: state.general.type !== 'bubble' ? legendColors[2] : geoFillColor
           }
         }
 
         // When to add pointer cursor
-        if (
-          (state.columns.navigate && geoData[state.columns.navigate.name]) ||
-          state.tooltips.appearanceType === 'click'
-        ) {
+        if ((columns.navigate && geoData[columns.navigate.name]) || tooltips.appearanceType === 'click') {
           styles.cursor = 'pointer'
         }
 
@@ -302,7 +297,7 @@ const UsaMap = () => {
 
           return (
             <>
-              {state.hexMap.shapeGroups.map((group, groupIndex) => {
+              {hexMap.shapeGroups.map((group, groupIndex) => {
                 return group.items.map((item, itemIndex) => {
                   switch (item.operator) {
                     case '=':
@@ -406,10 +401,10 @@ const UsaMap = () => {
               tabIndex={-1}
             >
               {/* state path */}
-              <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
+              <path tabIndex={-1} className='single-geo' strokeWidth={1} d={path} />
 
               {/* apply patterns on top of state path*/}
-              {state.map.patterns.map((patternData, patternIndex) => {
+              {map.patterns.map((patternData, patternIndex) => {
                 const { pattern, dataKey, size } = patternData
                 const currentFill = styles.fill
                 const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
@@ -422,7 +417,7 @@ const UsaMap = () => {
                   <>
                     {pattern === 'waves' && (
                       <PatternWaves
-                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        id={`${mapId}--${String(dataKey).replace(' ', '-')}--${geoIndex}`}
                         height={patternSizes[size] ?? 10}
                         width={patternSizes[size] ?? 10}
                         fill={patternColor}
@@ -430,7 +425,7 @@ const UsaMap = () => {
                     )}
                     {pattern === 'circles' && (
                       <PatternCircles
-                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        id={`${mapId}--${String(dataKey).replace(' ', '-')}--${geoIndex}`}
                         height={patternSizes[size] ?? 10}
                         width={patternSizes[size] ?? 10}
                         fill={patternColor}
@@ -438,7 +433,7 @@ const UsaMap = () => {
                     )}
                     {pattern === 'lines' && (
                       <PatternLines
-                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        id={`${mapId}--${String(dataKey).replace(' ', '-')}--${geoIndex}`}
                         height={patternSizes[size] ?? 6}
                         width={patternSizes[size] ?? 6}
                         stroke={patternColor}
@@ -451,13 +446,13 @@ const UsaMap = () => {
                       tabIndex={-1}
                       stroke='transparent'
                       d={path}
-                      fill={`url(#${mapId}--${dataKey}--${geoIndex})`}
+                      fill={`url(#${mapId}--${String(dataKey).replace(' ', '-')}--${geoIndex})`}
                     />
                   </>
                 )
               })}
               {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
-              {isHex && state.hexMap.type === 'shapes' && getArrowDirection(geoData, geo, legendColors[0])}
+              {isHex && hexMap.type === 'shapes' && getArrowDirection(geoData, geo, legendColors[0])}
             </g>
           </g>
         )
@@ -495,7 +490,7 @@ const UsaMap = () => {
     )
 
     // Bubbles
-    if (state.general.type === 'bubble') {
+    if (general.type === 'bubble') {
       geosJsx.push(
         <BubbleList
           key='bubbles'
@@ -529,12 +524,12 @@ const UsaMap = () => {
     let textColor = getContrastColor('#FFF', bgColor)
 
     // always make HI black since it is off to the side
-    if (abbr === 'US-HI' && !state.general.displayAsHex) {
+    if (abbr === 'US-HI' && !general.displayAsHex) {
       textColor = '#000'
     }
 
     let x = 0,
-      y = state.hexMap.type === 'shapes' && state.general.displayAsHex ? -10 : 5
+      y = hexMap.type === 'shapes' && general.displayAsHex ? -10 : 5
 
     // used to nudge/move some of the labels for better readability
     if (nudges[abbr] && false === isHex) {
@@ -581,7 +576,7 @@ const UsaMap = () => {
   return (
     <ErrorBoundary component='UsaMap'>
       <svg viewBox='0 0 880 500' role='img' aria-label={handleMapAriaLabels(state)}>
-        {state.general.displayAsHex ? (
+        {general.displayAsHex ? (
           <Mercator data={unitedStatesHex} scale={650} translate={[1600, 775]}>
             {({ features, projection }) => constructGeoJsx(features, projection)}
           </Mercator>
@@ -590,18 +585,21 @@ const UsaMap = () => {
             {({ features, projection }) => constructGeoJsx(features, projection)}
           </AlbersUsa>
         )}
-        {state.annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
+        {annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
       {territories.length > 0 && (
         <>
           {/* Temporarily make the max width fit the image width */}
-          <div className='two-col' style={{ maxWidth: 'calc(100% - 75px)' }}>
-            <div>
-              <span className='territories-label label'>{state.general.territoriesLabel}</span>
+          <div>
+            <div className='d-flex mt-2'>
+              <h5>{general.territoriesLabel}</h5>
+              {'data' === general.type && logo && (
+                <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
+              )}
             </div>
             <div>
-              <span className={getTerritoriesClasses()}>{territories}</span>
+              <span className='mt-1 mb-2 d-flex flex-wrap territories'>{territories}</span>
             </div>
           </div>
         </>

package/src/components/UsaMap/helpers/shapes.ts

@@ -2,7 +2,7 @@ export const drawCircle = (circle, context, state) => {
   const percentOfOriginalSize = 0.75
   const adjustedGeoRadius =
     state.mapPosition.zoom > 1 ? Number(circle.geoRadius) * percentOfOriginalSize : circle.geoRadius
-  context.lineWidth = 3
+  context.lineWidth = 1
   context.fillStyle = circle.color
   context.beginPath()
   context.arc(circle.x, circle.y, adjustedGeoRadius, 0, 2 * Math.PI)
@@ -145,7 +145,7 @@ export const drawPin = (pin, ctx) => {
   ctx.fillStyle = pin.color
   ctx.fill()
   ctx.strokeStyle = 'black'
-  ctx.lineWidth = 1.5
+  ctx.lineWidth = 1
   ctx.stroke()
   ctx.beginPath()
   ctx.arc(0, -21, 3, 0, Math.PI * 2)
@@ -178,12 +178,13 @@ export const createShapeProperties = (type, pixelCoords, legendValues, state, ge
     x: pixelCoords[0],
     y: pixelCoords[1],
     color: legendValues[0],
-    size: geoRadius
+    size: geoRadius,
+    lineWidth: 1
   }
 
   switch (type) {
     case 'circle':
-      return { ...baseProps, geoRadius: geoRadius / 2, type: 'circle' }
+      return { ...baseProps, geoRadius: geoRadius, type: 'circle' }
     case 'pin':
       return { ...baseProps, type: 'pin' }
     case 'square':