@cdc/map 4.24.5 → 4.24.9

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

@@ -1,4 +1,5 @@
 import { useEffect, useState, useRef, useContext } from 'react'
+import * as d3 from 'd3-geo'
 
 import { geoCentroid, geoPath, geoContains } from 'd3-geo'
 import { feature } from 'topojson-client'
@@ -10,6 +11,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 +131,9 @@ const CountyMap = props => {
       state,
       runtimeFilters,
       tooltipId,
-      isEditor
+      tooltipRef,
+      container,
+      setState
   } = useContext(ConfigContext)
 
   // CREATE STATE LINES
@@ -186,7 +190,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)) {
@@ -203,6 +206,10 @@ const CountyMap = props => {
   const lineWidth = 0.3
 
   const onReset = () => {
+    setState({
+      ...state,
+      mapPosition: { coordinates: [0, 30], zoom: 1 }
+    })
     setFocus({})
   }
 
@@ -224,10 +231,19 @@ const CountyMap = props => {
 
     // If the user clicked outside of all states, no behavior
     if (clickedState) {
+      setState({
+        ...state,
+        mapPosition: { coordinates: [0, 30], zoom: 3 }
+      })
+
       // If a county within the state was also clicked and has data, call parent click handler
       if (topoData.countyIndecies[clickedState.id]) {
         let county
-        for (let i = topoData.countyIndecies[clickedState.id][0]; i <= topoData.countyIndecies[clickedState.id][1]; i++) {
+        for (
+          let i = topoData.countyIndecies[clickedState.id][0];
+          i <= topoData.countyIndecies[clickedState.id][1];
+          i++
+        ) {
           if (geoContains(topoData.mapData[i], pointCoordinates)) {
             county = topoData.mapData[i]
             break
@@ -238,15 +254,26 @@ 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), feature: clickedState })
     }
 
     if (state.general.type === 'us-geocode') {
       const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
       let clickedGeo
       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]])
+        const pixelCoords = topoData.projection([
+          data[runtimeKeys[i]][state.columns.longitude.name],
+          data[runtimeKeys[i]][state.columns.latitude.name]
+        ])
         if (pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
           clickedGeo = data[runtimeKeys[i]]
           break
@@ -260,23 +287,32 @@ const CountyMap = props => {
   }
 
   const canvasHover = e => {
-    if (!tooltipRef.current || state.tooltips.appearanceType !== 'hover' || window.matchMedia('(any-hover: none)').matches) return
+    if (
+      !tooltipRef.current ||
+      state.tooltips.appearanceType !== 'hover' ||
+      window.matchMedia('(any-hover: none)').matches
+    )
+      return
 
     const canvas = e.target
     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 geoRadius = (state.visual.geoCodeCircleSize || 5) * 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 +359,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 {
@@ -335,7 +377,10 @@ const CountyMap = props => {
     } else {
       // Handle geo map hover
       if (!isNaN(currentTooltipIndex)) {
-        const pixelCoords = topoData.projection([data[runtimeKeys[currentTooltipIndex]][state.columns.longitude.name], data[runtimeKeys[currentTooltipIndex]][state.columns.latitude.name]])
+        const pixelCoords = topoData.projection([
+          data[runtimeKeys[currentTooltipIndex]][state.columns.longitude.name],
+          data[runtimeKeys[currentTooltipIndex]][state.columns.latitude.name]
+        ])
         if (pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
           // Who knew pythagorean theorum was useful
           return // The user is still hovering over the previous geo point, don't redraw tooltip
@@ -348,8 +393,16 @@ const CountyMap = props => {
       let hoveredGeo
       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) {
+        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 &&
+          applyLegendToRow(data[runtimeKeys[i]])
+        ) {
           hoveredGeo = data[runtimeKeys[i]]
           hoveredGeoIndex = i
           break
@@ -357,7 +410,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,17 +418,34 @@ 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.innerHTML = applyTooltipsToGeo(displayGeoName(hoveredGeo[state.columns.geo.name]), hoveredGeo)
+        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 {
         tooltipRef.current.style.display = 'none'
         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
@@ -398,10 +468,15 @@ const CountyMap = props => {
       }
 
       // Centers the projection on the paramter passed
-      if (focus.center) {
-        topoData.projection.scale(canvas.width * (focus.id === '72' ? 10 : 2.5))
-        let offset = topoData.projection(focus.center)
-        topoData.projection.translate([-offset[0] + canvas.width, -offset[1] + canvas.height])
+      // Centers the projection on the parameter passed
+      if (focus.feature) {
+        const PADDING = 10
+        // Fit the feature within the canvas dimensions with padding
+        const fitExtent = [
+          [PADDING, PADDING],
+          [canvas.width - 0, canvas.height - PADDING]
+        ]
+        topoData.projection.fitExtent(fitExtent, focus.feature)
       }
 
       // Erases previous renderings before redrawing map
@@ -411,7 +486,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 +498,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 +508,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,24 +550,34 @@ const CountyMap = props => {
       }
 
       const drawCircle = (circle, context) => {
+        const adjustedGeoRadius = Number(circle.geoRadius)
+        context.lineWidth = lineWidth
         context.fillStyle = circle.color
         context.beginPath()
-        context.arc(circle.x, circle.y, circle.geoRadius, 0, 2 * Math.PI)
+        context.arc(circle.x, circle.y, adjustedGeoRadius, 0, 2 * Math.PI)
         context.fill()
         context.stroke()
       }
 
       if (state.general.type === 'us-geocode') {
         context.strokeStyle = 'black'
-        const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
+        const geoRadius = state.visual.geoCodeCircleSize || 5
 
         runtimeKeys.forEach(key => {
-          const pixelCoords = topoData.projection([data[key][state.columns.longitude.name], data[key][state.columns.latitude.name]])
+          const pixelCoords = topoData.projection([
+            data[key][state.columns.longitude.name],
+            data[key][state.columns.latitude.name]
+          ])
 
           if (pixelCoords) {
             const legendValues = data[key] !== undefined ? applyLegendToRow(data[key]) : false
             if (legendValues && state.visual.cityStyle === 'circle') {
-              const circle = { x: pixelCoords[0], y: pixelCoords[1], color: legendValues[0], geoRadius }
+              const circle = {
+                x: pixelCoords[0],
+                y: pixelCoords[1],
+                color: legendValues[0],
+                geoRadius: geoRadius
+              }
               drawCircle(circle, context)
             }
             if (legendValues && state.visual.cityStyle === 'pin') {
@@ -524,7 +603,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'>