@cdc/map 4.23.2 → 4.23.3

package/src/components/CountyMap.jsx

@@ -1,70 +1,67 @@
-import React, { useState, useEffect, memo, useRef } from 'react'
-import Loading from '@cdc/core/components/Loading'
+import React, { useEffect, useState, memo, useRef } from 'react'
 
-import { jsx } from '@emotion/react'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { geoCentroid, geoPath } from 'd3-geo'
-import { feature, mesh } from 'topojson-client'
-import { CustomProjection } from '@visx/geo'
-import colorPalettes from '../../../core/data/colorPalettes'
+import { geoCentroid, geoPath, geoContains } from 'd3-geo'
+import { feature } from 'topojson-client'
 import { geoAlbersUsaTerritories } from 'd3-composite-projections'
-import testJSON from '../data/county-map.json'
-import { abbrs } from '../data/abbreviations'
-import CityList from './CityList'
-
-// Label lines for smaller states/geo labels
-const offsets = {
-  Vermont: [ 50, -8 ],
-  'New Hampshire': [ 34, 5 ],
-  Massachusetts: [ 30, -5 ],
-  'Rhode Island': [ 28, 4 ],
-  Connecticut: [ 35, 16 ],
-  'New Jersey': [ 42, 0 ],
-  Delaware: [ 33, 0 ],
-  Maryland: [ 47, 10 ],
-  'District of Columbia': [ 30, 20 ],
-  'Puerto Rico': [ 10, -20 ],
-  'Virgin Islands': [ 10, -10 ],
-  Guam: [ 10, -5 ],
-  'American Samoa': [ 10, 0 ]
-}
+import debounce from 'lodash.debounce'
+
+import Loading from '@cdc/core/components/Loading'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-// SVG ITEMS
-const WIDTH = 880
-const HEIGHT = 500
-const PADDING = 25
+import topoJSON from '../data/county-map.json'
+import { formatPrefix } from 'd3'
+
+const sortById = (a, b) => {
+  if (a.id < b.id) return -1
+  if (b.id < a.id) return 1
+  return 0
+}
 
 // DATA
-let { features: counties } = feature(testJSON, testJSON.objects.counties)
-let { features: states } = feature(testJSON, testJSON.objects.states)
+const { features: counties } = feature(topoJSON, topoJSON.objects.counties)
+const { features: states } = feature(topoJSON, topoJSON.objects.states)
+
+// Sort states/counties data to ensure that countyIndecies logic below works
+states.sort(sortById)
+counties.sort(sortById)
+const mapData = states.concat(counties).filter(geo => geo.id !== '51620') //Not sure why, but Franklin City, VA is very broken and messes up the rendering
+
+// For each state, find the beginning index and end index of the counties in that state in the mapData array
+// For use in hover logic (only check counties for hover in the state that is being hovered, instead of checking all counties)
+const countyIndecies = {}
+states.forEach(state => {
+  let minIndex = mapData.length - 1
+  let maxIndex = 0
+
+  for (let i = 0; i < mapData.length; i++) {
+    if (mapData[i].id.length > 2 && mapData[i].id.indexOf(state.id) === 0) {
+      if (i < minIndex) minIndex = i
+      if (i > maxIndex) maxIndex = i
+    }
+  }
 
-// CONSTANTS
-const STATE_BORDER = '#c0cad4'
-const STATE_INACTIVE_FILL = '#F4F7FA'
+  countyIndecies[state.id] = [minIndex, maxIndex]
+})
 
 // CREATE STATE LINES
-const projection = geoAlbersUsaTerritories().translate([ WIDTH / 2, HEIGHT / 2 ])
-const path = geoPath().projection(projection)
-const stateLines = path(mesh(testJSON, testJSON.objects.states))
-const countyLines = path(mesh(testJSON, testJSON.objects.counties))
+const projection = geoAlbersUsaTerritories()
 
+// Ensures county map is only rerendered when it needs to (when one of the variables below is updated)
 function CountyMapChecks(prevState, nextState) {
   const equalNumberOptIn = prevState.state.general.equalNumberOptIn && nextState.state.general.equalNumberOptIn
   const equalColumnName = prevState.state.general.type && nextState.state.general.type
   const equalNavColumn = prevState.state.columns.navigate && nextState.state.columns.navigate
   const equalLegend = prevState.runtimeLegend === nextState.runtimeLegend
   const equalBorderColors = prevState.state.general.geoBorderColor === nextState.state.general.geoBorderColor // update when geoborder color changes
-  const equalMapColors = prevState.state.color === nextState.state.color // update when map colors change
   const equalData = prevState.data === nextState.data // update when data changes
-  return equalMapColors && equalData && equalBorderColors && equalLegend && equalColumnName && equalNavColumn && equalNumberOptIn ? true : false
+  const equalTooltipBehavior = prevState.state.tooltips.appearanceType === nextState.state.tooltips.appearanceType
+  return equalData && equalBorderColors && equalLegend && equalColumnName && equalNavColumn && equalNumberOptIn && equalTooltipBehavior ? true : false
 }
 
 const CountyMap = props => {
-  let mapData = states.concat(counties)
-
-  const { state, applyTooltipsToGeo, data, geoClickHandler, applyLegendToRow, displayGeoName, containerEl, handleMapAriaLabels, titleCase, setSharedFilterValue, isFilterValueSupported } = props
+  const { state, runtimeLegend, applyTooltipsToGeo, data, geoClickHandler, applyLegendToRow, displayGeoName, containerEl, handleMapAriaLabels } = props
 
-  console.log(data)
+  const [focus, setFocus] = useState({})
 
   useEffect(() => {
     if (containerEl) {
@@ -74,448 +71,289 @@ const CountyMap = props => {
     }
   })
 
-  // Use State
-  const [ scale, setScale ] = useState(0.85)
-  const [ startingLineWidth, setStartingLineWidth ] = useState(1.3)
-  const [ translate, setTranslate ] = useState([ 0, 0 ])
-  const [ mapColorPalette, setMapColorPalette ] = useState(colorPalettes[state.color] || '#fff')
-  const [ focusedState, setFocusedState ] = useState(null)
-  const [ showLabel, setShowLabels ] = useState(true)
-
   const resetButton = useRef()
-  const focusedBorderPath = useRef()
-  const stateLinesPath = useRef()
-  const mapGroup = useRef()
-
-  let focusedBorderColor = mapColorPalette[3]
-  let geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
-
-  const geoLabel = (geo, projection) => {
-    let [ x, y ] = projection(geoCentroid(geo))
-    let abbr = abbrs[geo.properties.name]
-    if (abbr === 'NJ') x += 3
-    if (undefined === abbr) return null
-    let [ dx, dy ] = offsets[geo.properties.name]
-
-    return (
-      <>
-        <line className="abbrLine" x1={x} y1={y} x2={x + dx} y2={y + dy} stroke="black" strokeWidth={0.85}/>
-        <text className="abbrText" x={4} strokeWidth="0" fontSize={13} style={{ fill: '#202020' }} alignmentBaseline="middle" transform={`translate(${x + dx}, ${y + dy})`}>
-          {abbr}
-        </text>
-      </>
-    )
-  }
-
-  const focusGeo = (geoKey, geo) => {
-    if (!geoKey) {
-      console.log('County Map: no geoKey provided to focusGeo')
-      return
-    }
-
-    // 1) Get the state the county is in.
-    let myState = states.find(s => s.id === geoKey)
-
-    // 2) Set projections translation & scale to the geographic center of the passed geo.
-    const projection = geoAlbersUsaTerritories().translate([ WIDTH / 2, HEIGHT / 2 ])
-    const newProjection = projection.fitExtent(
-      [
-        [ PADDING, PADDING ],
-        [ WIDTH - PADDING, HEIGHT - PADDING ]
-      ],
-      myState
-    )
-
-    // 3) Gets the new scale
-    const newScale = newProjection.scale()
-    const hypot = Math.hypot(880, 500)
-    const newScaleWithHypot = newScale / 1070
-
-    // 4) Pull the x & y out, divide by half the viewport for some reason
-    let [ x, y ] = newProjection.translate()
-    x = x - WIDTH / 2
-    y = y - HEIGHT / 2
-
-    // 5) Debug if needed
-    const debug = {
-      width: WIDTH,
-      height: HEIGHT,
-      beginX: 0,
-      beginY: 0,
-      hypot: hypot,
-      x: x,
-      y: y,
-      newScale: newScale,
-      newScaleWithHypot: newScaleWithHypot,
-      geoKey: geoKey,
-      geo: geo
-    }
-    //console.table(debug)
-
-    mapGroup.current.setAttribute('transform', `translate(${[ x, y ]}) scale(${newScaleWithHypot})`)
-    resetButton.current.style.display = 'block'
+  const canvasRef = useRef()
+  const tooltipRef = useRef()
 
-    // set the states border
-    let allStates = document.querySelectorAll('.state path')
-    let allCounties = document.querySelectorAll('.county path')
-    let currentState = document.querySelector(`.state--${myState.id}`)
-    let otherStates = document.querySelectorAll(`.state:not(.state--${myState.id})`)
-    let svgContainer = document.querySelector('.svg-container')
-    svgContainer.setAttribute('data-scaleZoom', newScaleWithHypot)
+  const runtimeKeys = Object.keys(data)
 
-    const state = testJSON.objects.states.geometries.filter((el, index) => {
-      return el.id === myState.id
-    })
+  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgb(90, 90, 90)' : 'rgb(255, 255, 255)'
+  const lineWidth = 0.3
 
-    const focusedStateLine = path(mesh(testJSON, state[0]))
-
-    currentState.style.display = 'none'
-
-    allStates.forEach(state => (state.style.strokeWidth = 0.75 / newScaleWithHypot))
-    allCounties.forEach(county => (county.style.strokeWidth = 0.75 / newScaleWithHypot))
-    otherStates.forEach(el => (el.style.display = 'block'))
-
-    // State Line Updates
-    stateLinesPath.current.setAttribute('stroke-width', 0.75 / newScaleWithHypot)
-    stateLinesPath.current.setAttribute('stroke', geoStrokeColor)
-
-    // Set Focus Border
-    focusedBorderPath.current.style.display = 'block'
-    focusedBorderPath.current.setAttribute('d', focusedStateLine)
-    //focusedBorderPath.current.setAttribute('stroke-width', 0.75 / newScaleWithHypot);
-    //focusedBorderPath.current.setAttribute('stroke', focusedBorderColor)
+  const onReset = () => {
+    setFocus({})
   }
 
-  const onReset = e => {
-    if (state.general.type !== 'us-geocode') {
-      e.preventDefault()
-      const svg = document.querySelector('.svg-container')
-
-      svg.setAttribute('data-scaleZoom', 0)
-
-      const allStates = document.querySelectorAll('.state path')
-      const allCounties = document.querySelectorAll('.county path')
-
-      stateLinesPath.current.setAttribute('stroke', geoStrokeColor)
-      stateLinesPath.current.setAttribute('stroke-width', startingLineWidth)
-
-      let otherStates = document.querySelectorAll(`.state--inactive`)
-      otherStates.forEach(el => (el.style.display = 'none'))
-      allCounties.forEach(el => (el.style.strokeWidth = 0.85))
-      allStates.forEach(state => state.setAttribute('stroke-width', 0.75 / 0.85))
-
-      mapGroup.current.setAttribute('transform', `translate(${[ 0, 0 ]}) scale(${0.85})`)
-
-      // reset button
-      resetButton.current.style.display = 'none'
-    } else {
-      const svg = document.querySelector('.svg-container')
-      const allStates = document.querySelectorAll('.state')
-      document.querySelector('#focusedBorder path').style.stroke = 'none'
-      allStates.forEach(item => item.classList.remove('state--inactive'))
-      //document.querySelectorAll('.state path').forEach(item => item.style.fill = 'rgb(244, 247, 250)')
-      document.querySelectorAll('.state').forEach(item => (item.style.display = 'block'))
-      stateLinesPath.current.setAttribute('stroke', geoStrokeColor)
-      stateLinesPath.current.setAttribute('stroke-width', startingLineWidth)
-      svg.setAttribute('data-scaleZoom', 0)
-      mapGroup.current.setAttribute('transform', `translate(${[ 0, 0 ]}) scale(${0.85})`)
-      resetButton.current.style.display = 'none'
+  const canvasClick = e => {
+    const canvas = e.target
+    const canvasBounds = canvas.getBoundingClientRect()
+    const x = e.clientX - canvasBounds.left
+    const y = e.clientY - canvasBounds.top
+    const pointCoordinates = projection.invert([x, y])
+
+    // Use d3 geoContains method to find the state geo data that the user clicked inside
+    let clickedState
+    for (let i = 0; i < states.length; i++) {
+      if (geoContains(states[i], pointCoordinates)) {
+        clickedState = states[i]
+        break
+      }
     }
-  }
-
-  function setStateLeave() {
-    focusedBorderPath.current.setAttribute('d', '')
-    focusedBorderPath.current.setAttribute('stroke', '')
-    focusedBorderPath.current.setAttribute('stroke-width', 0.75 / scale)
-  }
-
-  function setStateEnter(id) {
-    const svg = document.querySelector('.svg-container')
-    const scale = svg.getAttribute('data-scaleZoom')
 
-    let myState = id.substring(0, 2)
-    const allStates = document.querySelectorAll('.state path')
+    // If the user clicked outside of all states, no behavior
+    if (clickedState) {
+      // If a county within the state was also clicked and has data, call parent click handler
+      if (countyIndecies[clickedState.id]) {
+        let county
+        for (let i = countyIndecies[clickedState.id][0]; i <= countyIndecies[clickedState.id][1]; i++) {
+          if (geoContains(mapData[i], pointCoordinates)) {
+            county = mapData[i]
+            break
+          }
+        }
+        if (county && data[county.id]) {
+          geoClickHandler(displayGeoName(county.id), data[county.id])
+        }
+      }
 
-    let state = testJSON.objects.states.geometries.filter((el, index) => {
-      return el.id === myState
-    })
+      // Redraw with focus on state
+      setFocus({ id: clickedState.id, center: geoCentroid(clickedState) })
+    }
 
-    let focusedStateLine = path(mesh(testJSON, state[0]))
-    focusedBorderPath.current.style.display = 'block'
-    focusedBorderPath.current.setAttribute('d', focusedStateLine)
-    focusedBorderPath.current.setAttribute('stroke', '#000')
+    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 = 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
+        }
+      }
 
-    if (scale) {
-      allStates.forEach(state => state.setAttribute('stroke-width', 0.75 / scale))
-      focusedBorderPath.current.setAttribute('stroke-width', 0.75 / scale)
+      if (clickedGeo) {
+        geoClickHandler(displayGeoName(clickedGeo[state.columns.geo.name]), clickedGeo)
+      }
     }
   }
 
-  const StateLines = memo(({ stateLines, lineWidth, geoStrokeColor }) => {
-    return (
-      <g className="stateLines" key="state-line">
-        <path id="stateLinesPath" ref={stateLinesPath} d={stateLines} strokeWidth={lineWidth} stroke={geoStrokeColor} fill="none" fillOpacity="1"/>
-      </g>
-    )
-  })
+  const canvasHover = e => {
+    if (!tooltipRef.current || state.tooltips.appearanceType !== 'hover' || window.matchMedia('(any-hover: none)').matches) return
 
-  const FocusedStateBorder = memo(() => {
-    return (
-      <g id="focusedBorder" key="focusedStateBorder">
-        <path ref={focusedBorderPath} d="" strokeWidth="" stroke={focusedBorderColor} fill="none" fillOpacity="1"/>
-      </g>
-    )
-  })
+    const canvas = e.target
+    const canvasBounds = canvas.getBoundingClientRect()
+    const x = e.clientX - canvasBounds.left
+    const y = e.clientY - canvasBounds.top
+    let pointCoordinates = projection.invert([x, y])
+
+    const currentTooltipIndex = parseInt(tooltipRef.current.getAttribute('data-index'))
+    const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
 
-  const CountyOutput = memo(({ geographies, counties }) => {
-    let output = []
-    output.push(
-      counties.map(({ feature: geo, path = '' }) => {
-        const key = geo.id + '-group'
-
-        // COUNTY GROUPS
-        let styles = {
-          fillOpacity: '1',
-          fill: '#E6E6E6',
-          cursor: 'default'
+    // 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(mapData[currentTooltipIndex], pointCoordinates)) {
+        const context = canvas.getContext('2d')
+        const path = geoPath(projection, context)
+        if (!isNaN(currentTooltipIndex)) {
+          context.fillStyle = applyLegendToRow(data[mapData[currentTooltipIndex].id])[0]
+          context.strokeStyle = geoStrokeColor
+          context.lineWidth = lineWidth
+          context.beginPath()
+          path(mapData[currentTooltipIndex])
+          context.fill()
+          context.stroke()
         }
 
-        // Map the name from the geo data with the appropriate key for the processed data
-        let geoKey = geo.id
+        let hoveredState
+        let county
+        let countyIndex
+        // First find the state that is hovered
+        for (let i = 0; i < states.length; i++) {
+          if (geoContains(states[i], pointCoordinates)) {
+            hoveredState = states[i].id
+            break
+          }
+        }
+        // If a state is hovered and it is not an unfocused state, search only the counties within that state for the county hovered
+        if (hoveredState && (!focus.id || focus.id === hoveredState) && countyIndecies[hoveredState]) {
+          for (let i = countyIndecies[hoveredState][0]; i <= countyIndecies[hoveredState][1]; i++) {
+            if (geoContains(mapData[i], pointCoordinates)) {
+              county = mapData[i]
+              countyIndex = i
+              break
+            }
+          }
+        }
 
-        if (!geoKey) return null
+        // If the hovered county is found, show the tooltip for that county, otherwise hide the tooltip
+        if (county && data[county.id]) {
+          context.fillStyle = applyLegendToRow(data[county.id])[1]
+          context.strokeStyle = geoStrokeColor
+          context.lineWidth = lineWidth
+          context.beginPath()
+          path(mapData[countyIndex])
+          context.fill()
+          context.stroke()
+
+          tooltipRef.current.style.display = 'block'
+          tooltipRef.current.style.top = e.clientY + 'px'
+          tooltipRef.current.style.left = e.clientX + 'px'
+          tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(county.id), data[county.id])
+          tooltipRef.current.setAttribute('data-index', countyIndex)
+        } else {
+          tooltipRef.current.style.display = 'none'
+          tooltipRef.current.setAttribute('data-index', null)
+        }
+      }
+    } else {
+      // Handle geo map hover
+      if (!isNaN(currentTooltipIndex)) {
+        const pixelCoords = 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
+        }
+      }
 
-        const geoData = data[geoKey]
+      let hoveredGeo
+      let hoveredGeoIndex
+      for (let i = 0; i < runtimeKeys.length; i++) {
+        const pixelCoords = 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) {
+          hoveredGeo = data[runtimeKeys[i]]
+          hoveredGeoIndex = i
+          break
+        }
+      }
 
-        let legendColors
+      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.setAttribute('data-index', hoveredGeoIndex)
+      } else {
+        tooltipRef.current.style.display = 'none'
+        tooltipRef.current.setAttribute('data-index', null)
+      }
+    }
+  }
 
-        // Once we receive data for this geographic item, setup variables.
-        if (geoData !== undefined) {
-          legendColors = applyLegendToRow(geoData)
-        }
+  // Redraws canvas. Takes as parameters the fips id of a state to center on and the [lat,long] center of that state
+  const drawCanvas = () => {
+    if (canvasRef.current && runtimeLegend.length > 0) {
+      const canvas = canvasRef.current
+      const context = canvas.getContext('2d')
+      const path = geoPath(projection, context)
 
-        const geoDisplayName = displayGeoName(geoKey)
+      canvas.width = canvas.clientWidth
+      canvas.height = canvas.width * 0.6
 
-        // For some reason, these two geos are breaking the display.
-        if (geoDisplayName === 'Franklin City' || geoDisplayName === 'Waynesboro') return null
+      projection.scale(canvas.width * 1.25).translate([canvas.width / 2, canvas.height / 2])
 
-        // If a legend applies, return it with appropriate information.
-        if (legendColors && legendColors[0] !== '#000000') {
-          const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
+      // If we are rendering the map without a zoom on a state, hide the reset button
+      if (!focus.id) {
+        if (resetButton.current) resetButton.current.style.display = 'none'
+      } else {
+        if (resetButton.current) resetButton.current.style.display = 'block'
+      }
 
-          styles = {
-            fill: legendColors[0],
-            cursor: 'default',
-            '&:hover': {
-              fill: legendColors[1]
-            },
-            '&:active': {
-              fill: legendColors[2]
-            }
-          }
+      // Centers the projection on the paramter passed
+      if (focus.center) {
+        projection.scale(canvas.width * 2.5)
+        let offset = projection(focus.center)
+        projection.translate([-offset[0] + canvas.width, -offset[1] + canvas.height])
+      }
 
-          // When to add pointer cursor
-          if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'hover') {
-            styles.cursor = 'pointer'
-          }
-          let stateFipsCode = geoData[state.columns.geo.name].substring(0, 2)
-
-          return (
-            <g
-              tabIndex="-1"
-              key={`county--${key}`}
-              className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`}
-              css={styles}
-              onMouseEnter={() => {
-                setStateEnter(geo.id)
-              }}
-              onMouseLeave={() => {
-                setStateLeave()
-              }}
-              onClick={
-                // default
-                e => {
-                  e.stopPropagation()
-                  e.nativeEvent.stopImmediatePropagation()
-                  geoClickHandler(geoDisplayName, geoData)
-                  focusGeo(stateFipsCode, geo)
-                }
-              }
-              data-tooltip-id="tooltip"
-              data-tooltip-html={toolTip}
-            >
-              <path tabIndex={-1} className={`county county--${geoDisplayName}`} stroke={geoStrokeColor} d={path} strokeWidth=".5"/>
-            </g>
-          )
+      // Erases previous renderings before redrawing map
+      context.clearRect(0, 0, canvas.width, canvas.height)
+
+      // Enforces stroke style of the county lines
+      context.strokeStyle = geoStrokeColor
+      context.lineWidth = lineWidth
+
+      let focusIndex = -1
+      // Iterates through each state/county topo and renders it
+      mapData.forEach((geo, i) => {
+        // If invalid geo item, don't render
+        if (!geo.id) return
+        // If the map is focused on one state, don't render counties that are not in that state
+        if (focus.id && geo.id.length > 2 && geo.id.indexOf(focus.id) !== 0) return
+        // If rendering a geocode map without a focus, don't render counties
+        if (!focus.id && state.general.type === 'us-geocode' && geo.id.length > 2) return
+
+        // 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
         }
 
-        // default county
-        return (
-          <g
-            key={`county--default-${key}`}
-            className={`county county--${geoDisplayName}`}
-            css={styles}
-            strokeWidth=""
-            onMouseEnter={() => {
-              setStateEnter(geo.id)
-            }}
-            onMouseLeave={() => {
-              setStateLeave()
-            }}
-            onClick={
-              // default
-              e => {
-                e.stopPropagation()
-                e.nativeEvent.stopImmediatePropagation()
-                let countyFipsCode = geo.id
-                let stateFipsCode = countyFipsCode.substring(0, 2)
-                focusGeo(stateFipsCode, geo)
-              }
-            }
-          >
-            <path tabIndex={-1} className="single-geo" stroke={geoStrokeColor} d={path} strokeWidth=".85"/>
-          </g>
-        )
+        // Renders state/county
+        const legendValues = geoData !== undefined ? applyLegendToRow(geoData) : false
+        context.fillStyle = legendValues ? legendValues[0] : '#EEE'
+        context.beginPath()
+        path(geo)
+        context.fill()
+        context.stroke()
       })
-    )
-    return output
-  })
-
-  const GeoCodeCountyLines = memo(() => {
-    return <path d={countyLines} className="county-borders" style={{ stroke: geoStrokeColor }}/>
-  })
-
-  const StateOutput = memo(({ geographies, states }) => {
-    let output = []
-    output.push(
-      states.map(({ feature: geo, path = '' }) => {
-        const key = geo.id + '-group'
-
-        // Map the name from the geo data with the appropriate key for the processed data
-        let geoKey = geo.id
 
-        if (!geoKey) return
+      // If the focused state is found in the geo data, render it with a thicker outline
+      if (focusIndex !== -1) {
+        context.strokeStyle = 'black'
+        context.lineWidth = 2
+        context.beginPath()
+        path(mapData[focusIndex])
+        context.stroke()
+      }
 
-        const geoData = data[geoKey]
+      if (state.general.type === 'us-geocode') {
+        context.strokeStyle = 'black'
+        const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
 
-        let legendColors
+        runtimeKeys.forEach(key => {
+          const pixelCoords = projection([data[key][state.columns.longitude.name], data[key][state.columns.latitude.name]])
 
-        // Once we receive data for this geographic item, setup variables.
-        if (geoData !== undefined) {
-          legendColors = applyLegendToRow(geoData)
-        }
+          if (pixelCoords) {
+            context.fillStyle = data[key] !== undefined ? applyLegendToRow(data[key])[0] : '#EEE'
+            context.beginPath()
+            context.arc(pixelCoords[0], pixelCoords[1], geoRadius, 0, 2 * Math.PI)
+            context.fill()
+            context.stroke()
+          }
+        })
+      }
+    }
+  }
 
-        const geoDisplayName = displayGeoName(geoKey)
+  // Whenever the memo at the top is triggered and the map is called to re-render, call drawCanvas and update
+  // The resize function so it includes the latest state variables
+  useEffect(() => {
+    drawCanvas()
 
-        let stateStyles = {}
+    const onResize = () => {
+      if (canvasRef.current) {
+        drawCanvas()
+      }
+    }
 
-        if (state.general.type !== 'us-geocode') {
-          stateStyles = {
-            cursor: 'default',
-            stroke: STATE_BORDER,
-            strokeWidth: 0.75 / scale,
-            display: !focusedState ? 'none' : focusedState && focusedState !== geo.id ? 'block' : 'none',
-            fill: focusedState && focusedState !== geo.id ? STATE_INACTIVE_FILL : 'none'
-          }
-        } else {
-          stateStyles = {
-            cursor: 'default',
-            stroke: STATE_BORDER,
-            strokeWidth: 0.75 / scale,
-            display: 'block',
-            fill: '#f4f7fa'
-          }
-        }
+    const debounceOnResize = debounce(onResize, 300)
 
-        let stateSelectedStyles = {
-          fillOpacity: 1,
-          cursor: 'default'
-        }
+    window.addEventListener('resize', debounceOnResize)
 
-        let stateClasses = [ 'state', `state--${geo.properties.name}`, `state--${geo.id}` ]
-        focusedState === geo.id ? stateClasses.push('state--focused') : stateClasses.push('state--inactive')
-
-        return (
-          <React.Fragment key={`state--${key}`}>
-            <g key={`state--${key}`} className={stateClasses.join(' ')} style={stateStyles} tabIndex="-1">
-              <>
-                <path
-                  tabIndex={-1}
-                  className="state-path"
-                  d={path}
-                  fillOpacity={`${focusedState !== geo.id ? '1' : '0'}`}
-                  fill={STATE_INACTIVE_FILL}
-                  css={stateSelectedStyles}
-                  onClick={e => {
-                    e.stopPropagation()
-                    e.nativeEvent.stopImmediatePropagation()
-                    focusGeo(geo.id, geo)
-                  }}
-                  onMouseEnter={e => {
-                    e.target.attributes.fill.value = colorPalettes[state.color][3]
-                  }}
-                  onMouseLeave={e => {
-                    e.target.attributes.fill.value = STATE_INACTIVE_FILL
-                  }}
-                />
-              </>
-            </g>
-            <g key={`label--${key}`}>{offsets[geo.properties.name] && geoLabel(geo, geoAlbersUsaTerritories().translate([ WIDTH / 2, HEIGHT / 2 ]))}</g>
-          </React.Fragment>
-        )
-      })
-    )
-    return output
+    return () => window.removeEventListener('resize', debounceOnResize)
   })
 
-  // Constructs and displays markup for all geos on the map (except territories right now)
-  const constructGeoJsx = (geographies, projection) => {
-    const states = geographies.slice(0, 56)
-    const counties = geographies.slice(56)
-    let geosJsx = []
-
-    'us-geocode' !== state.general.type && geosJsx.push(<CountyOutput geographies={geographies} counties={counties} key="county-key"/>)
-    'us-geocode' === state.general.type && geosJsx.push(<GeoCodeCountyLines/>)
-
-    geosJsx.push(<StateOutput geographies={geographies} states={states} key="state-key"/>)
-    geosJsx.push(<StateLines key="stateLines" lineWidth={startingLineWidth} geoStrokeColor={geoStrokeColor} stateLines={stateLines}/>)
-    geosJsx.push(<FocusedStateBorder key="focused-border-key"/>)
-    geosJsx.push(
-      <CityList
-        projection={projection}
-        key="cities"
-        data={data}
-        state={state}
-        geoClickHandler={geoClickHandler}
-        applyTooltipsToGeo={applyTooltipsToGeo}
-        displayGeoName={displayGeoName}
-        applyLegendToRow={applyLegendToRow}
-        titleCase={titleCase}
-        setSharedFilterValue={setSharedFilterValue}
-        isFilterValueSupported={isFilterValueSupported}
-        isGeoCodeMap={state.general.type === 'us-geocode'}
-      />
-    )
-    return geosJsx
-  }
-  if (!data) <Loading/>
+  // If runtimeData is not defined, show loader
+  if (!data) <Loading />
+
   return (
-    <ErrorBoundary component="CountyMap">
-      <svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio="xMinYMin" className="svg-container" data-scale={scale ? scale : ''} data-translate={translate ? translate : ''} role="img" aria-label={handleMapAriaLabels(state)}>
-        <rect className="background center-container ocean" width={WIDTH} height={HEIGHT} fillOpacity={1} fill="white" onClick={e => onReset(e)} tabIndex="0"></rect>
-        <CustomProjection data={mapData} translate={[ WIDTH / 2, HEIGHT / 2 ]} projection={geoAlbersUsaTerritories}>
-          {({ features, projection }) => {
-            return (
-              <g ref={mapGroup} className="countyMapGroup" transform={`translate(${translate}) scale(${scale})`} key="countyMapGroup">
-                {constructGeoJsx(features, projection)}
-              </g>
-            )
-          }}
-        </CustomProjection>
-      </svg>
-
-      {/* TODO: Refactor to COVE button */}
-      <button className={`btn btn--reset`} onClick={onReset} ref={resetButton} style={{ display: 'none' }} tabIndex="0">
+    <ErrorBoundary component='CountyMap'>
+      <canvas ref={canvasRef} aria-label={handleMapAriaLabels(state)} onMouseMove={canvasHover} onClick={canvasClick}></canvas>
+      <div ref={tooltipRef} id='canvas-tooltip' className='tooltip'></div>
+      <button className={`btn btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
         Reset Zoom
       </button>
     </ErrorBoundary>