@cdc/map 4.24.2 → 4.24.4

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

@@ -1,12 +1,14 @@
 import { useState, useEffect, memo, useContext } from 'react'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
-import { jsx } from '@emotion/react'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+// 3rd party
 import { geoCentroid } from 'd3-geo'
 import { feature } from 'topojson-client'
-import topoJSON from '../data/us-regions-topo-2.json'
 import { Mercator } from '@visx/geo'
-import chroma from 'chroma-js'
+
+// cdc
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
@@ -39,6 +41,7 @@ const UsaRegionMap = props => {
     handleMapAriaLabels,
     state,
     supportedTerritories,
+    tooltipId
   } = useContext(ConfigContext)
 
   // "Choose State" options
@@ -74,7 +77,7 @@ const UsaRegionMap = props => {
 
     let toolTip
 
-    let styles = {
+    let styles: React.CSSProperties = {
       fill: '#E6E6E6',
       color: '#202020'
     }
@@ -87,13 +90,8 @@ const UsaRegionMap = props => {
 
     const legendColors = applyLegendToRow(territoryData)
 
-    let textColor = '#FFF'
-
     if (legendColors) {
-      // Use white text if the background is dark, and dark grey if it's light
-      if (chroma.contrast(textColor, legendColors[0]) < 3.5) {
-        textColor = '#202020'
-      }
+      const textColor = getContrastColor('#FFF', legendColors[0])
 
       let needsPointer = false
 
@@ -114,7 +112,7 @@ 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' data-tooltip-html={toolTip} />
+      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} />
     }
   })
 
@@ -124,12 +122,7 @@ const UsaRegionMap = props => {
 
     if (undefined === abbr) return null
 
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020'
-    }
+    const textColor = getContrastColor('#FFF', bgColor)
 
     let x = 0,
       y = 5
@@ -195,11 +188,7 @@ const UsaRegionMap = props => {
 
         const TerratoryRect = props => {
           const { posX = 0, tName } = props
-          let textColor = '#fff'
-
-          if (chroma.contrast(textColor, legendColors[0]) < 4.5) {
-            textColor = '#202020'
-          }
+          const textColor = getContrastColor('#FFF', legendColors[0])
           return (
             <>
               <rect x={posX} width='36' height='24' rx='6' stroke='#fff' strokeWidth='1' />
@@ -212,28 +201,14 @@ const UsaRegionMap = props => {
 
         const circleRadius = 15
 
-        // SIDE CHART EXPERIMENT
-        // const height = state.data[index].Change;
-        // const barHeight = Math.abs(height * 20 );
-        // const barPositive = height > 0;
-        // const barY = barPositive ? -barHeight + 15 : 15;
-        // const baseY = 14;
-        // const barFill = barPositive ? "#fff" : "#fff";
-
         return (
-          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip}>
+          <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 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'>
                 {index + 1}
               </text>
-              {/* SIDE CHART EXPERIMENT */}
-              {/*<g y={barY*20}>*/}
-              {/*  <rect x="-20" y={barY} width="10" height={barHeight} fill={barFill} stroke="#333"/>*/}
-              {/*  <rect x="-23" y={baseY} width="16" height="2" fill="#000" />*/}
-              {/*</g>*/}
-              {/* / SIDE CHART EXPERIMENT */}
             </g>
             {geoKey === 'region 2' && (
               <g id='region-2-territories'>

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

@@ -112,7 +112,8 @@ const SingleStateMap = props => {
     titleCase,
     setSharedFilterValue,
     isFilterValueSupported,
-    runtimeFilters
+    runtimeFilters,
+    tooltipId
   } = useContext(ConfigContext)
 
   const projection = geoAlbersUsaTerritories().translate([WIDTH / 2, HEIGHT / 2])
@@ -236,13 +237,13 @@ const SingleStateMap = props => {
         }
 
         return (
-          <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip}>
+          <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
             <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
           </g>
         )
       } else {
         return (
-          <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id='tooltip' data-tooltip-html={toolTip}>
+          <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
             <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
           </g>
         )
@@ -264,6 +265,7 @@ const SingleStateMap = props => {
         titleCase={titleCase}
         setSharedFilterValue={setSharedFilterValue}
         isFilterValueSupported={isFilterValueSupported}
+        tooltipId={tooltipId}
       />
     )
 

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

@@ -9,21 +9,20 @@ import hexTopoJSON from '../data/us-hex-topo.json'
 import { geoCentroid, geoPath } from 'd3-geo'
 import { feature } from 'topojson-client'
 import { AlbersUsa, Mercator } from '@visx/geo'
-import chroma from 'chroma-js'
 import CityList from '../../CityList'
 import BubbleList from '../../BubbleList'
 import { supportedCities, supportedStates } from '../../../data/supported-geos'
 import { geoAlbersUsa } from 'd3-composite-projections'
-import { Group } from '@visx/group'
-import { Text } from '@visx/text'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
-import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
+import HexIcon from './HexIcon'
+import { patternSizes } from '../helpers/patternSizes'
 
 import Territory from './Territory'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
 import { MapContext } from '../../../types/MapContext'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -65,6 +64,7 @@ const UsaMap = () => {
       state,
       supportedTerritories,
       titleCase,
+      tooltipId
     } = useContext<MapContext>(ConfigContext)
 
   let isFilterValueSupported = false
@@ -132,19 +132,14 @@ const UsaMap = () => {
 
     const label = supportedTerritories[territory][1]
 
-    if (!territoryData) return <Shape key={label} label={label} css={styles} text={styles.color} />
+    if (!territoryData) return <Shape key={label} label={label} style={styles} text={styles.color} />
 
     toolTip = applyTooltipsToGeo(displayGeoName(territory), territoryData)
 
     const legendColors = applyLegendToRow(territoryData)
 
-    let textColor = '#FFF'
-
     if (legendColors) {
-      // Use white text if the background is dark, and dark grey if it's light
-      if (chroma.contrast(textColor, legendColors[0]) < 3.5) {
-        textColor = '#202020'
-      }
+      const textColor = getContrastColor('#FFF', legendColors[0])
 
       let needsPointer = false
 
@@ -169,7 +164,20 @@ const UsaMap = () => {
 
       return (
         <>
-          <Shape key={label} label={label} style={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} territory={territory} territoryData={territoryData} />
+          <Shape
+            key={label}
+            label={label}
+            style={styles}
+            text={styles.color}
+            strokeWidth={1.5}
+            textColor={textColor}
+            onClick={() => geoClickHandler(territory, territoryData)}
+            data-tooltip-id={`tooltip__${tooltipId}`}
+            data-tooltip-html={toolTip}
+            territory={territory}
+            territoryData={territoryData}
+            tabIndex={-1}
+          />
         </>
       )
     }
@@ -178,7 +186,7 @@ const UsaMap = () => {
   let pathGenerator = geoPath().projection(geoAlbersUsa().translate(translate))
 
   // Note: Layers are different than patterns
-  const { pathArray } = useMapLayers(state, '', pathGenerator)
+  const { pathArray } = useMapLayers(state, '', pathGenerator, tooltipId)
 
   // Constructs and displays markup for all geos on the map (except territories right now)
   const constructGeoJsx = (geographies, projection) => {
@@ -204,7 +212,7 @@ const UsaMap = () => {
       return 0
     })
 
-    const geosJsx = geographies.map(({ feature: geo, path = '' }) => {
+    const geosJsx = geographies.map(({ feature: geo, path = '' }, geoIndex) => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
       let styles = {
@@ -254,31 +262,51 @@ const UsaMap = () => {
         }
 
         const getArrowDirection = (geoData, geo, bgColor) => {
-          let centroid = projection(geoCentroid(geo))
+          const centroid = projection(geoCentroid(geo))
 
           const iconSize = 8
 
-          let textColor = '#FFF'
-
-          // Dynamic text color
-          if (chroma.contrast(textColor, bgColor) < 3.5) {
-            textColor = '#202020' // dark gray
-          }
+          const textColor = getContrastColor('#FFF', bgColor)
 
           return (
             <>
               {state.hexMap.shapeGroups.map((group, groupIndex) => {
                 return group.items.map((item, itemIndex) => {
-                  if (item.operator === '=') {
-                    if (geoData[item.key] === item.value || Number(geoData[item.key]) == Number(item.value)) {
-                      return (
-                        <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${itemIndex}`}>
-                          {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
-                          {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
-                          {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}
-                        </Group>
-                      )
-                    }
+                  switch (item.operator) {
+                    case '=':
+                      if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '≠':
+                      if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '<':
+                      if (Number(geoData[item.key]) < Number(item.value)) {
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '>':
+                      if (Number(geoData[item.key]) > Number(item.value)) {
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '<=':
+                      if (Number(geoData[item.key]) <= Number(item.value)) {
+                        return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '>=':
+                      if (item.operator === '>=') {
+                        if (Number(geoData[item.key]) >= Number(item.value)) {
+                          return <HexIcon textColor={textColor} item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        }
+                      }
+                      break
+                    default:
+                      break
                   }
                 })
               })}
@@ -286,33 +314,26 @@ const UsaMap = () => {
           )
         }
 
-        const sizes = {
-          small: '8',
-          medium: '10',
-          large: '12'
-        }
-
         return (
-          <g data-name={geoName} key={key}>
-            <g className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id='tooltip' data-tooltip-html={tooltip}>
+          <g data-name={geoName} key={key} tabIndex={-1}>
+            <g className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={tooltip} tabIndex={-1}>
+              {/* state path */}
               <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
-              {state.map.patterns.map((patternData, patternIndex) => {
-                let { pattern, dataKey, size } = patternData
-                let defaultPatternColor = 'black'
 
+              {/* apply patterns on top of state path*/}
+              {state.map.patterns.map((patternData, patternIndex) => {
+                const { pattern, dataKey, size } = patternData
+                const currentFill = styles.fill
                 const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
-
-                if (chroma.contrast(defaultPatternColor, legendColors[0]) < 3.5) {
-                  defaultPatternColor = 'white'
-                }
+                const patternColor = patternData.color || getContrastColor('#000', currentFill)
 
                 return (
                   hasMatchingValues && (
                     <>
-                      {pattern === 'waves' && <PatternWaves id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
-                      {pattern === 'circles' && <PatternCircles id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
-                      {pattern === 'lines' && <PatternLines id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 6} width={sizes[size] ?? 6} stroke={defaultPatternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
-                      <path className={`pattern-geoKey--${dataKey}`} tabIndex={-1} stroke='transparent' d={path} fill={`url(#${dataKey}--${patternIndex})`} />
+                      {pattern === 'waves' && <PatternWaves id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 10} width={patternSizes[size] ?? 10} fill={patternColor} />}
+                      {pattern === 'circles' && <PatternCircles id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 10} width={patternSizes[size] ?? 10} fill={patternColor} />}
+                      {pattern === 'lines' && <PatternLines id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 6} width={patternSizes[size] ?? 6} stroke={patternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
+                      <path className={`pattern-geoKey--${dataKey}`} tabIndex={-1} stroke='transparent' d={path} fill={`url(#${dataKey}--${geoIndex})`} />
                     </>
                   )
                 )
@@ -326,8 +347,8 @@ const UsaMap = () => {
 
       // Default return state, just geo with no additional information
       return (
-        <g data-name={geoName} key={key}>
-          <g className='geo-group' style={styles}>
+        <g data-name={geoName} key={key} tabIndex={-1}>
+          <g className='geo-group' style={styles} tabIndex={-1}>
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
             {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
           </g>
@@ -351,6 +372,7 @@ const UsaMap = () => {
         setSharedFilterValue={setSharedFilterValue}
         state={state}
         titleCase={titleCase}
+        tooltipId={tooltipId}
       />
     )
 
@@ -375,12 +397,7 @@ const UsaMap = () => {
 
     if (undefined === abbr) return null
 
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020' // dark gray
-    }
+    let textColor = getContrastColor('#FFF', bgColor)
 
     // always make HI black since it is off to the side
     if (abbr === 'US-HI' && !state.general.displayAsHex) {
@@ -398,7 +415,7 @@ const UsaMap = () => {
 
     if (undefined === offsets[abbr] || isHex) {
       return (
-        <g transform={`translate(${centroid})`}>
+        <g transform={`translate(${centroid})`} tabIndex={-1}>
           <text x={x} y={y} fontSize={14} strokeWidth='0' style={{ fill: textColor }} textAnchor='middle'>
             {abbr.substring(3)}
           </text>
@@ -409,7 +426,7 @@ const UsaMap = () => {
     let [dx, dy] = offsets[abbr]
 
     return (
-      <g>
+      <g tabIndex={-1}>
         <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)}

package/src/components/UsaMap/helpers/patternSizes.tsx

@@ -0,0 +1,5 @@
+export const patternSizes = {
+  small: 8,
+  medium: 10,
+  large: 12
+}

package/src/components/WorldMap/components/WorldMap.jsx

@@ -34,7 +34,8 @@ const WorldMap = props => {
     setState,
     state,
     supportedCountries,
-    titleCase
+    titleCase,
+    tooltipId
   } = useContext(ConfigContext)
 
   // TODO Refactor - state should be set together here to avoid rerenders
@@ -154,7 +155,22 @@ const WorldMap = props => {
           styles.cursor = 'pointer'
         }
 
-        return <Geo additionalData={additionalData} geoData={geoData} state={state} key={i + '-geo'} style={styles} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
+        return (
+          <Geo
+            additionalData={additionalData}
+            geoData={geoData}
+            state={state}
+            key={i + '-geo'}
+            style={styles}
+            path={path}
+            stroke={geoStrokeColor}
+            strokeWidth={strokeWidth}
+            onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            data-tooltip-id={`tooltip__${tooltipId}`}
+            data-tooltip-html={toolTip}
+            tabIndex={-1}
+          />
+        )
       }
 
       // Default return state, just geo with no additional information
@@ -162,7 +178,7 @@ const WorldMap = props => {
     })
 
     // Cities
-    geosJsx.push(<CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} key='cities' projection={projection} state={state} titleCase={titleCase} />)
+    geosJsx.push(<CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} key='cities' projection={projection} state={state} titleCase={titleCase} tooltipId={tooltipId} />)
 
     // Bubbles
     if (state.general.type === 'bubble') {
@@ -176,6 +192,7 @@ const WorldMap = props => {
           applyLegendToRow={applyLegendToRow}
           applyTooltipsToGeo={applyTooltipsToGeo}
           displayGeoName={displayGeoName}
+          tooltipId={tooltipId}
           handleCircleClick={country => handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData)}
         />
       )

package/src/data/initial-state.js

@@ -95,6 +95,9 @@ export default {
     maxBubbleSize: 20,
     extraBubbleBorder: false,
     cityStyle: 'circle',
+    cityStyleLabel: '',
+    showBubbleZeros: false,
+    additionalCityStyles: [],
     geoCodeCircleSize: 8,
     showBubbleZeros: false
   },

package/src/data/supported-geos.js

@@ -499,7 +499,7 @@ export const supportedCountries = {
   ATA: ['Antarctica'],
   'Madeira Islands': ['Madeira Islands'],
   'Gaza/West Bank': ['Gaza/West Bank'],
-  'Saint Paul and Amsterdamn Islands': ['Saint Paul and Amsterdamn Islands'],
+  'Saint Paul and Amsterdam Islands': ['Saint Paul and Amsterdam Islands'],
   'Sovereign Base Areas of Akrotiri and Dhekelia': ['Sovereign Base Areas of Akrotiri and Dhekelia'],
   'Plazas de Soberania': ['Plazas de Soberania'],
   Akrotiri: ['Akrotiri'],
@@ -684,6 +684,7 @@ export const supportedCities = {
   'VIRGINIA BEACH': [-75.977982, 36.852924],
   'WARREN': [-80.8184, 41.2376],
   'WASHINGTON D.C.': [-77.036873, 38.907192],
+  'DC': [-77.036873, 38.907192],
   'WASHINGTON DC.': [-77.036873, 38.907192],
   'WASHINGTON DC': [-77.036873, 38.907192],
   'WICHITA': [-97.330055, 37.687176],

package/src/hooks/useMapLayers.tsx

@@ -16,7 +16,7 @@ import { MapConfig } from '../types/MapConfig'
  * 3) Clean (ie. mapshaper -clean) and edit the shape as needed and export the new layer as geoJSON
  * 4) Save the geoJSON somewhere external.
  */
-export default function useMapLayers(config: MapConfig, setConfig, pathGenerator) {
+export default function useMapLayers(config: MapConfig, setConfig, pathGenerator, tooltipId) {
   const [fetchedTopoJSON, setFetchedTopoJSON] = useState([])
   const geoId = useId()
 
@@ -158,7 +158,7 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
               key={geoId} data-id={geoId}
               stroke={config.map.layers[index].stroke ? config.map.layers[index].stroke : item.properties.stroke ? item.properties.stroke : 'transparent'}
               strokeWidth={config.map.layers[index].strokeWidth ? config.map.layers[index].strokeWidth : item.properties['stroke-width']}
-              data-tooltip-id='tooltip'
+              data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={config.map.layers[index].tooltip ? config.map.layers[index].tooltip : ''}
             />
           </Group>

package/src/scss/editor-panel.scss

@@ -82,7 +82,7 @@
     color: #000;
     font-size: 1em;
     border: 0;
-    position: absolute;
+    position: fixed;
     z-index: 100;
     transition: 0.1s background;
     cursor: pointer;
@@ -110,17 +110,6 @@
   }
 
   .editor-panel {
-    background: #fff;
-    width: $editorWidth;
-    overflow-y: overlay;
-    position: absolute;
-    z-index: 7;
-    display: flex;
-    flex-direction: column;
-    left: 0;
-    top: 0;
-    bottom: 0;
-
     //TODO: Remove after COVE refactor
     &.cove {
       @import '@cdc/core/styles/v2/layout/tooltip.scss';
@@ -280,6 +269,9 @@
       span.h5 {
         font-size: 0.8em;
       }
+      & p.layer-purpose-details {
+        margin-top: 1em;
+      }
     }
 
     .advanced {

package/src/scss/main.scss

@@ -40,6 +40,7 @@
   border: 0;
   text-align: left;
   max-width: 100%;
+  background-color: white;
   .btn {
     padding: 0.375em 0.75em;
     border-radius: 0.3em;
@@ -121,7 +122,7 @@
           cursor: pointer;
           width: 1em;
         }
-        span.navigation-link {
+        a.navigation-link {
           text-decoration: underline;
           cursor: pointer;
           color: #075290;
@@ -129,6 +130,7 @@
           svg {
             display: inline-block;
             max-width: 13px;
+            margin-left: 0.5em;
           }
         }
         &.capitalize p {

package/src/scss/map.scss

@@ -365,7 +365,7 @@ canvas {
   width: 100%;
 }
 
-#canvas-tooltip {
+.county-map-canvas + .tooltip {
   position: fixed;
   background-color: white;
   pointer-events: none;

package/src/types/MapConfig.ts

@@ -11,10 +11,15 @@ export type MapVisualSettings = {
   extraBubbleBorder: boolean
   /** cityStyle - visual indicator of cities on state maps */
   cityStyle: 'circle' | 'pin'
+  /** cityStyle - optional visual indicator of label on the Legend */
+  cityStyleLabel: string
   /** geoCodeCircleSize - controls the size of the city style option (circle or pin) */
+
   geoCodeCircleSize: number
   /** showBubbleZeros - shows circles on maps when the data is provided even if its a zero value */
   showBubbleZeros: boolean
+  /** additionalCityStyles - shows Circle, Square, Triangle, Rhombus/Diamond, Star, Map Pin on maps when the additionalCityStyles is added */
+  additionalCityStyles: [] | [{ label: string; column: string; value: string; shape: string }]
 }
 
 type PatternSelection = {
@@ -26,6 +31,8 @@ type PatternSelection = {
   pattern: 'lines' | 'circles' | 'waves'
   // optional legend update
   label: string
+  // size of pattern
+  size: 'small' | 'medium' | 'large'
 }
 
 export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label' | 'tooltip' | 'dataTable'>