@cdc/map 4.24.4 → 4.24.7

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -0,0 +1,358 @@
+import React, { useContext } from 'react'
+
+// CDC Core
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+import Accordion from '@cdc/core/components/ui/Accordion'
+import Button from '@cdc/core/components/elements/Button'
+import { MapContext } from '../../../../types/MapContext'
+import ConfigContext from '../../../../context'
+
+// types
+// styles
+
+const PanelAnnotate: React.FC = props => {
+  const { state: config, setState: updateConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const getColumns = (filter = true) => {
+    const columns = {}
+    config.data.forEach(row => {
+      Object.keys(row).forEach(columnName => (columns[columnName] = true))
+    })
+
+    if (filter) {
+      Object.keys(columns).forEach(key => {
+        if ((config.series && config.series.filter(series => series.dataKey === key).length > 0) || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))) {
+          delete columns[key]
+        }
+      })
+    }
+
+    return Object.keys(columns)
+  }
+
+  const handleAnnotationUpdate = (value, property, index) => {
+    const annotations = [...config?.annotations]
+    annotations[index][property] = value
+    annotations[index].savedDimensions = [dimensions[0] * 0.73, dimensions[1]]
+
+    updateConfig({
+      ...config,
+      annotations
+    })
+  }
+
+  const handleAddAnnotation = () => {
+    const svgContainer = document.querySelector('.map-container > section > svg, .map-container > section > canvas')?.getBoundingClientRect()
+    const newSvgDims = [svgContainer.width, svgContainer.height]
+
+    const newAnnotation = {
+      text: 'New Annotation',
+      snapToNearestPoint: false,
+      fontSize: 16,
+      show: {
+        desktop: true,
+        tablet: true,
+        mobile: true
+      },
+      markerType: 'arrow',
+      connectorType: 'line',
+      colors: {
+        label: 'black',
+        connector: 'black',
+        marker: 'black'
+      },
+      selected: true,
+      anchor: {
+        vertical: false,
+        horizontal: false
+      },
+      connectionType: 'line',
+      marker: 'arrow',
+      edit: {
+        subject: true,
+        label: true
+      },
+      seriesKey: '',
+      x: Number(newSvgDims?.[0]) / 2,
+      y: Number(newSvgDims?.[1] / 2),
+      xKey: null,
+      yKey: null,
+      dx: 0,
+      dy: 0,
+      opacity: '100',
+      savedDimensions: [dimensions[0] * 0.73, dimensions[1]]
+    }
+
+    const annotations = Array.isArray(config.annotations) ? config.annotations : []
+
+    updateConfig({
+      ...config,
+      annotations: [...annotations, newAnnotation]
+    })
+  }
+
+  const handleRemoveAnnotation = (annotationIndex: number) => {
+    const updated = config.annotations.filter((_, index) => index !== annotationIndex)
+    updateConfig({
+      ...config,
+      annotations: updated
+    })
+  }
+
+  return (
+    <Accordion>
+      <Accordion.Section title={props.name}>
+        <p>Dragging state: {isDraggingAnnotation ? 'Dragging' : 'Not dragging'}</p>
+
+        <label>
+          Show Annotation Dropdown
+          <input
+            type='checkbox'
+            checked={config?.general?.showAnnotationDropdown}
+            onClick={e => {
+              updateConfig({
+                ...config,
+                general: {
+                  ...config.general,
+                  showAnnotationDropdown: e.target.checked
+                }
+              })
+            }}
+          />
+        </label>
+
+        <label>
+          Annotation Dropdown Title:
+          <input
+            type='text'
+            style={{ marginBottom: '10px' }}
+            value={config?.general?.annotationDropdownText}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                general: {
+                  ...config.general,
+                  annotationDropdownText: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        {config?.annotations &&
+          config?.annotations.map((annotation, index) => (
+            <Accordion>
+              <Accordion.Section title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}>
+                <div className='annotation-group'>
+                  <label>
+                    Annotation Text:
+                    <textarea rows={5} value={annotation.text} onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)} />
+                  </label>
+                  {/* <label>
+                      Vertical Anchor
+                      <input
+                        type='checkbox'
+                        checked={config?.annotations[index].anchor.vertical}
+                        onClick={e => {
+                          const updatedAnnotations = [...config?.annotations]
+                          updatedAnnotations[index].anchor.vertical = e.target.checked
+                          updateConfig({
+                            ...config,
+                            annotations: updatedAnnotations
+                          })
+                        }}
+                      />
+                    </label>
+                    <label>
+                      Horizontal Anchor
+                      <input
+                        type='checkbox'
+                        checked={config?.annotations[index].anchor.horizontal}
+                        onClick={e => {
+                          const updatedAnnotations = [...config?.annotations]
+                          updatedAnnotations[index].anchor.horizontal = e.target.checked
+                          updateConfig({
+                            ...config,
+                            annotations: updatedAnnotations
+                          })
+                        }}
+                      />
+                    </label> */}
+
+                  <label>
+                    Opacity
+                    <br />
+                    <input
+                      type='range'
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].opacity = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                      value={config?.annotations?.[index]?.opacity || '100'}
+                    />
+                  </label>
+
+                  <label>
+                    Edit Subject
+                    <input
+                      type='checkbox'
+                      checked={config?.annotations[index]?.edit?.subject}
+                      onClick={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].edit.subject = e.target.checked
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  </label>
+                  <label>
+                    Edit Label
+                    <input
+                      type='checkbox'
+                      checked={config?.annotations[index]?.edit?.label}
+                      onClick={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].edit.label = e.target.checked
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  </label>
+                  <label>
+                    Associated Series:
+                    <select
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].seriesKey = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      <option key='none' value='none'>
+                        None
+                      </option>
+                      {getColumns(false).map((column, columnIndex) => {
+                        return <option>{column}</option>
+                      })}
+                    </select>
+                  </label>
+
+                  <label>
+                    Connection Type:
+                    <select
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].connectionType = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      {['curve', 'line', 'elbow', 'none'].map((side, index) => (
+                        <option key={side} value={side}>
+                          {side}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+
+                  {annotation.connectionType === 'curve' && (
+                    <label>
+                      Line Type:
+                      <select
+                        onChange={e => {
+                          const updatedAnnotations = [...config?.annotations]
+                          updatedAnnotations[index].lineType = e.target.value
+                          updateConfig({
+                            ...config,
+                            annotations: updatedAnnotations
+                          })
+                        }}
+                      >
+                        {Object.entries(approvedCurveTypes).map(([value, key]) => (
+                          <option key={key} value={key}>
+                            {value}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  )}
+
+                  {/* <label>
+                    Connection Location:
+                    <select
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].connectionLocation = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      {['auto', 'left', 'top', 'bottom', 'right'].map((side, index) => (
+                        <option key={side} value={side}>
+                          {side}
+                        </option>
+                      ))}
+                    </select>
+                  </label> */}
+
+                  <label>
+                    Marker
+                    <select
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].marker = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      {['circle', 'arrow'].map((column, columnIndex) => {
+                        return <option>{column}</option>
+                      })}
+                    </select>
+                  </label>
+
+                  {/* <label>
+                    Snap to Nearest Point
+                    <input
+                      type='checkbox'
+                      checked={config?.annotations[index]?.snapToNearestPoint}
+                      onClick={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].snapToNearestPoint = e.target.checked
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  </label> */}
+
+                  <Button className='warn btn-warn btn btn-remove delete' onClick={() => handleRemoveAnnotation(index)}>
+                    Delete Annotation
+                  </Button>
+                </div>
+              </Accordion.Section>
+            </Accordion>
+          ))}
+        {config?.annotations?.length < 3 && <Button onClick={handleAddAnnotation}>Add Annotation</Button>}
+      </Accordion.Section>
+    </Accordion>
+  )
+}
+
+export default PanelAnnotate

package/src/components/EditorPanel/components/{Panel.PatternSettings.tsx → Panels/Panel.PatternSettings.tsx}

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
-import ConfigContext from '../../../context'
-import { type MapContext } from '../../../types/MapContext'
+import ConfigContext from '../../../../context'
+import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'

package/src/components/EditorPanel/components/{Panels.tsx → Panels/index.tsx}

@@ -1,6 +1,9 @@
+import React from 'react'
+import Annotate from './Panel.Annotate'
 import PatternSettings from './Panel.PatternSettings'
 
 const Panels = {
+  Annotate,
   PatternSettings
 }
 

package/src/components/Legend/components/Legend.tsx

@@ -34,7 +34,6 @@ const Legend = forwardRef((props, ref) => {
   } = useContext(ConfigContext)
 
   const { legend } = state
-  const fontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? { fontSize: '11px' } : null
 
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
@@ -96,7 +95,6 @@ const Legend = forwardRef((props, ref) => {
       return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
         <li
-          style={fontSize}
           className={handleListItemClass().join(' ')}
           key={idx}
           title={`Legend item ${legendLabel} - Click to disable`}
@@ -181,11 +179,7 @@ const Legend = forwardRef((props, ref) => {
         <aside id={skipId || 'legend'} className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend' tabIndex={0} ref={ref}>
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
             {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
-            {legend.dynamicDescription === false && legend.description && (
-              <p style={fontSize} className={legendClasses.description.join(' ') || ''}>
-                {parse(legend.description)}
-              </p>
-            )}
+            {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>}
             {legend.dynamicDescription === true &&
               runtimeFilters.map((filter, idx) => {
                 const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
@@ -195,7 +189,7 @@ const Legend = forwardRef((props, ref) => {
 
                 if (desc.length > 0) {
                   return (
-                    <p style={fontSize} key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
+                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
                       {desc}
                     </p>
                   )
@@ -229,7 +223,7 @@ const Legend = forwardRef((props, ref) => {
                               {cityStyleShapes[shape.toLowerCase()]}
                             </Group>
                           </svg>
-                          <p style={fontSize}>{label}</p>
+                          <p>{label}</p>
                         </div>
                       )
                   )}

package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -7,15 +7,16 @@ import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPattern, territory, ...props }) => {
   const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
+  const { territoryData, ...otherProps } = props
 
   return (
-    <svg viewBox='0 0 45 28'>
-      <g {...props} strokeLinejoin='round' tabIndex={-1}>
+    <svg viewBox='0 0 45 28' key={territory} className={territory}>
+      <g {...otherProps} strokeLinejoin='round' tabIndex={-1}>
         <path
           stroke={stroke}
           strokeWidth={strokeWidth}
           d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
-          {...props}
+          {...otherProps}
         />
         <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: textColor, strokeWidth: 1 }} className='territory-text' paintOrder='stroke'>
           {label}

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

@@ -10,6 +10,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
+import Annotation from '../../Annotation'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -129,7 +130,8 @@ const CountyMap = props => {
       state,
       runtimeFilters,
       tooltipId,
-      isEditor
+      tooltipRef,
+      container
   } = useContext(ConfigContext)
 
   // CREATE STATE LINES
@@ -186,7 +188,6 @@ const CountyMap = props => {
 
   const resetButton = useRef()
   const canvasRef = useRef()
-  const tooltipRef = useRef()
 
   // If runtimeData is not defined, show loader
   if (!data || !isTopoReady(topoData, state, runtimeFilters)) {
@@ -238,8 +239,16 @@ const CountyMap = props => {
         }
       }
 
+      let focusIndex = -1;
+      for(let i = 0; i < topoData.mapData.length; i++){
+        if(topoData.mapData[i].id === clickedState.id){
+          focusIndex = i;
+          break;
+        }
+      }
+
       // Redraw with focus on state
-      setFocus({ id: clickedState.id, center: geoCentroid(clickedState) })
+      setFocus({ id: clickedState.id, index: focusIndex, center: geoCentroid(clickedState) })
     }
 
     if (state.general.type === 'us-geocode') {
@@ -266,17 +275,21 @@ const CountyMap = props => {
     const canvasBounds = canvas.getBoundingClientRect()
     const x = e.clientX - canvasBounds.left
     const y = e.clientY - canvasBounds.top
+    const containerBounds = container?.getBoundingClientRect()
+    const tooltipX = e.clientX - (containerBounds?.left || 0)
+    const tooltipY = e.clientY - (containerBounds?.top || 0)
     let pointCoordinates = topoData.projection.invert([x, y])
 
     const currentTooltipIndex = parseInt(tooltipRef.current.getAttribute('data-index'))
     const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
 
+    const context = canvas.getContext('2d')
+    const path = geoPath(topoData.projection, context)
+
     // Handle standard county map hover
     if (state.general.type !== 'us-geocode') {
       //If no tooltip is shown, or if the current geo associated with the tooltip shown is no longer containing the mouse, then rerender the tooltip
       if (isNaN(currentTooltipIndex) || !geoContains(topoData.mapData[currentTooltipIndex], pointCoordinates)) {
-        const context = canvas.getContext('2d')
-        const path = geoPath(topoData.projection, context)
         if (!isNaN(currentTooltipIndex) && applyLegendToRow(data[topoData.mapData[currentTooltipIndex].id])) {
           context.fillStyle = applyLegendToRow(data[topoData.mapData[currentTooltipIndex].id])[0]
           context.strokeStyle = geoStrokeColor
@@ -323,8 +336,14 @@ const CountyMap = props => {
           }
 
           tooltipRef.current.style.display = 'block'
-          tooltipRef.current.style.top = e.clientY + 'px'
-          tooltipRef.current.style.left = isEditor ? Number(e.clientX - 350) + 'px' : e.clientX + 'px'
+          tooltipRef.current.style.top = tooltipY + 'px'
+        if(tooltipX > containerBounds.width / 2) {
+          tooltipRef.current.style.transform = 'translate(-100%, -50%)'
+          tooltipRef.current.style.left = (tooltipX - 5) + 'px'
+        } else {
+          tooltipRef.current.style.transform = 'translate(0, -50%)'
+          tooltipRef.current.style.left = (tooltipX + 5) + 'px'
+        }
           tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(county.id), data[county.id])
           tooltipRef.current.setAttribute('data-index', countyIndex)
         } else {
@@ -349,7 +368,7 @@ const CountyMap = props => {
       let hoveredGeoIndex
       for (let i = 0; i < runtimeKeys.length; i++) {
         const pixelCoords = topoData.projection([data[runtimeKeys[i]][state.columns.longitude.name], data[runtimeKeys[i]][state.columns.latitude.name]])
-        if (state.visual.cityStyle === 'circle' && pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
+        if (state.visual.cityStyle === 'circle' && pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius && applyLegendToRow(data[runtimeKeys[i]])) {
           hoveredGeo = data[runtimeKeys[i]]
           hoveredGeoIndex = i
           break
@@ -357,7 +376,7 @@ const CountyMap = props => {
 
         if (state.visual.cityStyle === 'pin' && pixelCoords) {
           const distance = Math.hypot(pixelCoords[0] - x, pixelCoords[1] - y)
-          if (distance < 15) {
+          if (distance < 15 && applyLegendToRow(data[runtimeKeys[i]])) {
             hoveredGeo = data[runtimeKeys[i]]
             hoveredGeoIndex = i
             break
@@ -365,10 +384,16 @@ const CountyMap = props => {
         }
       }
 
-      if (hoveredGeo && applyLegendToRow(hoveredGeo)) {
+      if (hoveredGeo) {
         tooltipRef.current.style.display = 'block'
-        tooltipRef.current.style.top = e.clientY + 'px'
-        tooltipRef.current.style.left = e.clientX + 'px'
+        tooltipRef.current.style.top = tooltipY + 'px'
+        if(tooltipX > containerBounds.width / 2) {
+          tooltipRef.current.style.transform = 'translate(-100%, -50%)'
+          tooltipRef.current.style.left = (tooltipX - 5) + 'px'
+        } else {
+          tooltipRef.current.style.transform = 'translate(0, -50%)'
+          tooltipRef.current.style.left = (tooltipX + 5) + 'px'
+        }
         tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(hoveredGeo[state.columns.geo.name]), hoveredGeo)
         tooltipRef.current.setAttribute('data-index', hoveredGeoIndex)
       } else {
@@ -376,6 +401,14 @@ const CountyMap = props => {
         tooltipRef.current.setAttribute('data-index', null)
       }
     }
+
+    if (focus.index !== -1) {
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.beginPath()
+      path(topoData.mapData[focus.index])
+      context.stroke()
+    }
   }
 
   // Redraws canvas. Takes as parameters the fips id of a state to center on and the [lat,long] center of that state
@@ -411,7 +444,6 @@ const CountyMap = props => {
       context.strokeStyle = geoStrokeColor
       context.lineWidth = lineWidth
 
-      let focusIndex = -1
       // Iterates through each state/county topo and renders it
       topoData.mapData.forEach((geo, i) => {
         // If invalid geo item, don't render
@@ -424,11 +456,6 @@ const CountyMap = props => {
         // Gets numeric data associated with the topo data for this state/county
         const geoData = data[geo.id]
 
-        // Marks that the focused state was found for the logic below
-        if (geo.id === focus.id) {
-          focusIndex = i
-        }
-
         // Renders state/county
         const legendValues = geoData !== undefined ? applyLegendToRow(geoData) : false
         context.fillStyle = legendValues && state.general.type !== 'us-geocode' ? legendValues[0] : '#EEE'
@@ -439,11 +466,11 @@ const CountyMap = props => {
       })
 
       // If the focused state is found in the geo data, render it with a thicker outline
-      if (focusIndex !== -1) {
+      if (focus.index !== -1) {
         context.strokeStyle = 'black'
         context.lineWidth = 2
         context.beginPath()
-        path(topoData.mapData[focusIndex])
+        path(topoData.mapData[focus.index])
         context.stroke()
       }
 
@@ -481,6 +508,7 @@ const CountyMap = props => {
       }
 
       const drawCircle = (circle, context) => {
+        context.lineWidth = lineWidth
         context.fillStyle = circle.color
         context.beginPath()
         context.arc(circle.x, circle.y, circle.geoRadius, 0, 2 * Math.PI)
@@ -524,7 +552,6 @@ const CountyMap = props => {
         onClick={canvasClick}
         className='county-map-canvas'
       ></canvas>
-      <div ref={tooltipRef} id={`tooltip__${tooltipId}`} className='tooltip' style={{ background: `rgba(255,255,255,${state.tooltips.opacity / 100})` }}></div>
       <button className={`btn btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
         Reset Zoom
       </button>

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

@@ -10,6 +10,7 @@ import { Mercator } from '@visx/geo'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
+import Annotation from '../../Annotation'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
 
@@ -252,6 +253,7 @@ const UsaRegionMap = props => {
         <Mercator data={focusedStates} scale={620} translate={[1500, 735]}>
           {({ features, projection }) => constructGeoJsx(features, projection)}
         </Mercator>
+        {state.annotations.length > 0 && <Annotation.Draggable />}
       </svg>
       {territories.length > 0 && (
         <section className='territories'>

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

@@ -10,6 +10,7 @@ import colorPalettes from '@cdc/core/data/colorPalettes'
 import { geoAlbersUsaTerritories } from 'd3-composite-projections'
 import CityList from '../../CityList'
 import ConfigContext from '../../../context'
+import Annotation from '../../Annotation'
 
 // SVG ITEMS
 const WIDTH = 880
@@ -296,6 +297,7 @@ const SingleStateMap = props => {
               )
             }}
           </CustomProjection>
+          {state.annotations.length > 0 && <Annotation.Draggable />}
         </svg>
       )}
       {!state.general.statePicked && 'No State Picked'}