From 06b06fe4acc4976defdbb8def5bd593ba2baff53 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Thu, 24 Dec 2020 11:20:43 -0800
Subject: [PATCH 01/47] chore: Add LTC map

---
 package.json                                  |   1 +
 src/components/layout/index.js                |   7 +-
 .../long-term-care/map/facility-details.js    |  48 +++
 .../map/facility-details.module.scss          |  33 ++
 .../pages/data/long-term-care/map/index.js    | 313 ++++++++++++++++++
 .../pages/data/long-term-care/map/infobox.js  |  67 ++++
 .../long-term-care/map/infobox.module.scss    |  27 ++
 .../pages/data/long-term-care/map/legend.js   |  41 +++
 .../long-term-care/map/legend.module.scss     |  26 ++
 .../data/long-term-care/map/map.module.scss   | 170 ++++++++++
 src/pages/data/long-term-care/map.js          |  13 +
 yarn.lock                                     | 184 +++++++++-
 12 files changed, 927 insertions(+), 3 deletions(-)
 create mode 100644 src/components/pages/data/long-term-care/map/facility-details.js
 create mode 100644 src/components/pages/data/long-term-care/map/facility-details.module.scss
 create mode 100644 src/components/pages/data/long-term-care/map/index.js
 create mode 100644 src/components/pages/data/long-term-care/map/infobox.js
 create mode 100644 src/components/pages/data/long-term-care/map/infobox.module.scss
 create mode 100644 src/components/pages/data/long-term-care/map/legend.js
 create mode 100644 src/components/pages/data/long-term-care/map/legend.module.scss
 create mode 100644 src/components/pages/data/long-term-care/map/map.module.scss
 create mode 100644 src/pages/data/long-term-care/map.js

diff --git a/package.json b/package.json
index a4836692c..cf9f513f2 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "json2csv": "^5.0.1",
     "lodash": "^4.17.19",
     "luxon": "^1.22.0",
+    "mapbox-gl": "^2.0.1",
     "marked": "^0.8.2",
     "mkdirp": "^1.0.4",
     "mockdate": "^3.0.2",
diff --git a/src/components/layout/index.js b/src/components/layout/index.js
index 4e66138e6..d2f4ae779 100644
--- a/src/components/layout/index.js
+++ b/src/components/layout/index.js
@@ -25,6 +25,7 @@ const Layout = ({
   hero,
   centerTitle,
   showWarning = false,
+  noContainer = false,
 }) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
@@ -55,7 +56,11 @@ const Layout = ({
       />
       <main id="main">
         <SkipNavContent />
-        <Container centered={centered}>{children}</Container>
+        {noContainer ? (
+          <>{children}</>
+        ) : (
+          <Container centered={centered}>{children}</Container>
+        )}
       </main>
       <Footer />
     </>
diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
new file mode 100644
index 000000000..586a55b96
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import facilityDetailsStyle from './facility-details.module.scss'
+
+const fields = [
+  {
+    title: 'Resident positives',
+    field: 'resident_positives',
+  },
+  {
+    title: 'Resident deaths',
+    field: 'resident_deaths',
+  },
+  {
+    title: 'Outbreak resident positives',
+    field: 'outbreak_resident_positives',
+  },
+  {
+    title: 'Outbreak resident deaths',
+    field: 'outbreak_resident_deaths',
+  },
+  {
+    title: 'Staff cases',
+    field: 'staff_positives',
+  },
+  {
+    title: 'Staff deaths',
+    field: 'staff_deaths',
+  },
+]
+
+const FacilityDetails = ({ facility }) => (
+  <>
+    <h2>{facility.facility_name}</h2>
+
+    <dl className={facilityDetailsStyle.details}>
+      {Object.keys(fields).map(key => (
+        <div key={key}>
+          <dt>{fields[key].title}</dt>
+          <dd>{facility[fields[key].field] || <>N/A</>}</dd>
+        </div>
+      ))}
+    </dl>
+  </>
+)
+
+export default FacilityDetails
+
+export { fields }
diff --git a/src/components/pages/data/long-term-care/map/facility-details.module.scss b/src/components/pages/data/long-term-care/map/facility-details.module.scss
new file mode 100644
index 000000000..504bbb13d
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/facility-details.module.scss
@@ -0,0 +1,33 @@
+.details {
+  line-height: 1rem;
+  border-collapse: collapse;
+  > div {
+    display: flex;
+    border-bottom: 1px solid $color-slate-400;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  dt {
+    max-width: 80%;
+    flex-basis: 80%;
+    font-weight: bold;
+    @include padding(16, top bottom left);
+  }
+  dd {
+    border-left: 1px solid $color-slate-400;
+    text-align: right;
+    max-width: 20%;
+    flex-basis: 20%;
+    @include padding(16, top bottom right);
+  }
+}
+
+.sharing {
+  display: inline-block;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  @include margin(16, left);
+  @include type-size(100);
+}
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
new file mode 100644
index 000000000..27b5d8c92
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -0,0 +1,313 @@
+/* eslint-disable no-underscore-dangle,max-len,jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/click-events-have-key-events */
+import React, { useEffect, useState, useRef } from 'react'
+import mapboxgl from 'mapbox-gl'
+import { Form, Input } from '~components/common/form'
+import { Row, Col } from '~components/common/grid'
+import { Table, Th, Td } from '~components/common/table'
+import FacilityDetails from './facility-details'
+import Legend from './legend'
+import Infobox from './infobox'
+import facilitiesMapStyles from './map.module.scss'
+import 'mapbox-gl/dist/mapbox-gl.css'
+
+const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
+  mapboxgl.accessToken = process.env.GATSBY_MAPBOX_API_TOKEN
+  const [activeFacility, setActiveFacility] = useState(false)
+  const [query, setQuery] = useState(false)
+  const [facilities, setFacilities] = useState(false)
+  const [tooltip, setTooltip] = useState({ x: 0, y: 0 })
+  const [highlightedFacility, setHighlightedFacility] = useState(false)
+  const [revealedFacility, setRevealedFacility] = useState(false)
+  const [currentZoom, setCurrentZoom] = useState(0)
+  const [highlighedMarker, setHighlightedMarker] = useState(false)
+  const layers = ['cases']
+
+  const mapNode = useRef(null)
+  const mapRef = useRef(null)
+
+  const selectFacility = (event, show) => {
+    const bbox = [
+      [event.point.x - 5, event.point.y - 5],
+      [event.point.x + 5, event.point.y + 5],
+    ]
+    const features = mapRef.current.queryRenderedFeatures(bbox, {
+      layers,
+    })
+    if (!features || !features.length) {
+      setActiveFacility(false)
+      return
+    }
+    setActiveFacility(features[0].properties)
+    setTooltip(event.point)
+    if (show) {
+      setRevealedFacility(true)
+    }
+  }
+
+  const mapBoundChanged = event => {
+    if (typeof window !== 'undefined') {
+      window.location.hash = [
+        ...event.target.getCenter().toArray(),
+        event.target.getZoom(),
+      ].join(',')
+    }
+    if (event.target.getZoom() < 4) {
+      setFacilities(false)
+      return
+    }
+    const features = mapRef.current.queryRenderedFeatures({
+      layers,
+    })
+    setCurrentZoom(event.target.getZoom())
+    setFacilities(
+      features.sort((a, b) =>
+        a.properties.hospital_name > b.properties.hospital_name ? 1 : -1,
+      ),
+    )
+  }
+
+  useEffect(() => {
+    if (!highlightedFacility || !highlightedFacility.geometry) {
+      return
+    }
+    if (highlighedMarker) {
+      highlighedMarker.remove()
+    }
+    const { coordinates } = highlightedFacility.geometry
+    const marker = new mapboxgl.Marker()
+      .setLngLat(coordinates)
+      .addTo(mapRef.current)
+    setHighlightedMarker(marker)
+  }, [highlightedFacility])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+    document.addEventListener('keydown', event => {
+      if (event.key === 'Escape') {
+        setRevealedFacility(false)
+      }
+    })
+
+    const hash = window.location.hash.replace('#', '').split(',')
+
+    const map = new mapboxgl.Map({
+      container: mapNode.current,
+      style: 'mapbox://styles/covidtrackingproject/ckfeoswng0hc219o24blw5utn',
+      center: hash.length > 2 ? [hash[0], hash[1]] : center,
+      zoom: hash.length > 2 ? hash[2] : zoom,
+    })
+
+    map.addControl(new mapboxgl.NavigationControl(), 'top-left')
+
+    map.on('load', () => {
+      if (state) {
+        map.setFilter('hospitals', ['==', ['get', 'state'], state])
+      }
+
+      if (window.location.hash && hash.length > 2) {
+        const features = map.queryRenderedFeatures({
+          layers,
+        })
+        setFacilities(
+          features.sort((a, b) =>
+            a.properties.hospital_name > b.properties.hospital_name ? 1 : -1,
+          ),
+        )
+        if (hash.length === 4 && hash[3].search('id:') > -1) {
+          const id = hash[3].replace('id:', '')
+          const linkedFeature = features.find(
+            feature => feature.properties.hospital_pk === id,
+          )
+          if (linkedFeature) {
+            setActiveFacility({ ...linkedFeature.properties })
+            setRevealedFacility(true)
+          }
+        }
+      }
+    })
+
+    map.on('moveend', event => {
+      mapBoundChanged(event)
+    })
+
+    map.on('dragend', event => {
+      mapBoundChanged(event)
+    })
+
+    map.on('zoomend', event => {
+      mapBoundChanged(event)
+    })
+
+    map.on('mousemove', event => {
+      selectFacility(event)
+    })
+
+    map.on('click', event => {
+      selectFacility(event, true)
+    })
+
+    mapRef.current = map
+  }, [])
+
+  return (
+    <>
+      <Legend />
+      <div className={facilitiesMapStyles.container} aria-hidden>
+        <div className={facilitiesMapStyles.sidebar}>
+          <Form
+            onSubmit={event => {
+              event.preventDefault()
+              if (
+                typeof window === 'undefined' ||
+                typeof window.fetch === 'undefined'
+              ) {
+                return
+              }
+              window
+                .fetch(
+                  `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
+                    query,
+                  )}.json?limit=1&access_token=${
+                    process.env.GATSBY_MAPBOX_API_TOKEN
+                  }`,
+                )
+                .then(response => response.json())
+                .then(response => {
+                  if (response.features.length === 0) {
+                    return
+                  }
+                  const feature = response.features.pop()
+                  mapRef.current.easeTo({
+                    center: feature.center,
+                    zoom: 7,
+                  })
+                })
+            }}
+            noMargin
+          >
+            <Row>
+              <Col width={[4, 6, 8]}>
+                <Input
+                  type="text"
+                  label="Search facilities"
+                  placeholder="Enter a city or zip code"
+                  hideLabel
+                  onChange={event => {
+                    setQuery(event.target.value)
+                  }}
+                />
+              </Col>
+              <Col width={[4, 6, 4]} paddingLeft={[0, 0, 8]}>
+                <button
+                  type="submit"
+                  className={facilitiesMapStyles.searchButton}
+                >
+                  Search
+                </button>
+              </Col>
+            </Row>
+          </Form>
+          <Table ariaHidden>
+            <thead>
+              <tr>
+                <Th alignLeft>Name</Th>
+                <Th>Resident cases</Th>
+              </tr>
+            </thead>
+          </Table>
+          {facilities && facilities.length > 0 ? (
+            <div className={facilitiesMapStyles.tableScroll}>
+              <Table>
+                <thead className="a11y-only">
+                  <tr>
+                    <Th alignLeft>Name</Th>
+                    <Th>Resident cases</Th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {facilities.map(facility => (
+                    <tr
+                      onMouseEnter={() => {
+                        setHighlightedFacility(facility)
+                      }}
+                      onMouseLeave={() => {
+                        setHighlightedFacility(false)
+                      }}
+                      onFocus={() => {
+                        setHighlightedFacility(facility)
+                      }}
+                      onBlur={() => {
+                        setHighlightedFacility(false)
+                      }}
+                    >
+                      <Td alignLeft>
+                        <button
+                          type="button"
+                          onClick={event => {
+                            event.preventDefault()
+                            setActiveFacility({ ...facility.properties })
+                            setRevealedFacility(true)
+                          }}
+                        >
+                          {facility.properties.facility_name}
+                        </button>
+                      </Td>
+                      <Td>{facility.properties.resident_positives}</Td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            </div>
+          ) : (
+            <p>
+              {currentZoom < 4 ? (
+                <>Zoom in to get facility details.</>
+              ) : (
+                <>No facilities in the current map.</>
+              )}
+            </p>
+          )}
+        </div>
+        <div className={facilitiesMapStyles.mapWrapper} role="img">
+          <div className={facilitiesMapStyles.mapInset}>
+            {revealedFacility && (
+              <>
+                <div
+                  role="dialog"
+                  className={facilitiesMapStyles.facilityCardOverlay}
+                  onClick={() => setRevealedFacility(false)}
+                />
+                <div className={facilitiesMapStyles.facilityCard} role="dialog">
+                  <button
+                    className={facilitiesMapStyles.close}
+                    type="button"
+                    onClick={event => {
+                      event.preventDefault()
+                      setRevealedFacility(false)
+                    }}
+                  >
+                    &times;
+                  </button>
+                  <FacilityDetails facility={activeFacility} />
+                </div>
+              </>
+            )}
+
+            {activeFacility && (
+              <Infobox facility={activeFacility} x={tooltip.x} y={tooltip.y} />
+            )}
+            <div
+              ref={mapNode}
+              className={facilitiesMapStyles.map}
+              style={{ width: '100%', height: '100%' }}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default LTCFacilitiesMap
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
new file mode 100644
index 000000000..10dca31e2
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -0,0 +1,67 @@
+/* eslint-disable max-len */
+import React from 'react'
+import infoboxStyle from './infobox.module.scss'
+
+const Item = ({ title, value }) => (
+  <p>
+    <strong>{title}</strong> {value ? <>{value}</> : <>N/A</>}
+  </p>
+)
+
+const Infobox = ({ facility, x, y }) => {
+  const hasResidentData =
+    facility.outbreak_resident_positives ||
+    facility.outbreak_resident_deaths ||
+    facility.resident_positives ||
+    facility.resident_deaths
+  return (
+    <div
+      className={infoboxStyle.infobox}
+      style={{
+        left: Math.max(10, x - 175),
+        top: y + 15,
+      }}
+    >
+      <h3>{facility.facility_name}</h3>
+      {hasResidentData ? (
+        <>
+          <Item
+            title="Resident positives"
+            value={facility.resident_positives}
+          />
+          <Item title="Resident deaths" value={facility.resident_deaths} />
+          <Item
+            title="Outbreak resident positives"
+            value={facility.outbreak_resident_positives}
+          />
+          <Item
+            title="OUtbreak resident positives"
+            value={facility.outbreak_resident_deaths}
+          />
+        </>
+      ) : (
+        <>
+          <Item
+            title="Resident &amp; staff positives"
+            value={facility.resident_staff_positives}
+          />
+          <Item
+            title="Resident &amp; staff deaths"
+            value={facility.resident_staff_deaths}
+          />
+          <Item
+            title="Outbreak resident &amp; staff positives"
+            value={facility.outbreak_resident_staff_positives}
+          />
+          <Item
+            title="OUtbreak resident&amp; staff positives"
+            value={facility.outbreak_resident_staff_deaths}
+          />
+        </>
+      )}
+      <p>Click to view more information</p>
+    </div>
+  )
+}
+
+export default Infobox
diff --git a/src/components/pages/data/long-term-care/map/infobox.module.scss b/src/components/pages/data/long-term-care/map/infobox.module.scss
new file mode 100644
index 000000000..273f97415
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/infobox.module.scss
@@ -0,0 +1,27 @@
+.infobox {
+  display: none;
+  @media (hover: hover) {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    width: 350px;
+    border: 1px solid $color-slate-700;
+    background: white;
+    @include padding(16);
+    @include type-size(100);
+    h3 {
+      @include type-size(200);
+      font-weight: bold;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
new file mode 100644
index 000000000..ee49b3c0f
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import classnames from 'classnames'
+import Container from '~components/common/container'
+import legendStyles from './legend.module.scss'
+
+const Legend = () => (
+  <Container>
+    <div className={legendStyles.legend} aria-hidden>
+      <div>
+        Long-term care facilities{' '}
+        <span
+          className={classnames(
+            legendStyles.item,
+            legendStyles.notExperiencing,
+          )}
+        >
+          not experiencing
+        </span>{' '}
+        and{' '}
+        <span
+          className={classnames(legendStyles.item, legendStyles.experiencing)}
+        >
+          experiencing
+        </span>{' '}
+        an outbreak.
+      </div>
+      <div>
+        {' '}
+        Some states{' '}
+        <span
+          className={classnames(legendStyles.item, legendStyles.outbreakOnly)}
+        >
+          only report outbreaks
+        </span>
+        .
+      </div>
+    </div>
+  </Container>
+)
+
+export default Legend
diff --git a/src/components/pages/data/long-term-care/map/legend.module.scss b/src/components/pages/data/long-term-care/map/legend.module.scss
new file mode 100644
index 000000000..953619e05
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/legend.module.scss
@@ -0,0 +1,26 @@
+.legend {
+  @include margin(32, top);
+  @include padding(8);
+  text-align: right;
+  div {
+    @include margin(8, bottom);
+  }
+}
+
+.item {
+  border-bottom: 3px solid;
+  display: inline-block;
+  padding-bottom: 3px; // ignore-style-rule
+}
+
+.experiencing {
+  border-color: $color-honey-500;
+}
+
+.not-experiencing {
+  border-color: $color-plum-600;
+}
+
+.outbreak-only {
+  border-color: $color-slate-400;
+}
diff --git a/src/components/pages/data/long-term-care/map/map.module.scss b/src/components/pages/data/long-term-care/map/map.module.scss
new file mode 100644
index 000000000..db1bff809
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/map.module.scss
@@ -0,0 +1,170 @@
+.container {
+  @include row();
+}
+
+.sidebar,
+.map-wrapper {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.sidebar {
+  order: 1;
+  input[type='text'] {
+    margin-bottom: 0;
+  }
+  p {
+    @include margin(16, left);
+  }
+  table {
+    overflow-y: scroll;
+    &[aria-hidden] {
+      margin-bottom: 0;
+    }
+    th {
+      padding-top: 0;
+    }
+    button {
+      @include remove-button-style();
+      text-align: left;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+  form {
+    background: $color-slate-100;
+    @include padding(16, top left right);
+  }
+  @media (min-width: $viewport-md) {
+    order: 0;
+    max-width: 25%;
+    flex-basis: 25%;
+  }
+  @media (min-width: $viewport-lg) {
+    max-width: 30%;
+    flex-basis: 30%;
+  }
+}
+
+.map-wrapper {
+  order: 0;
+  @media (min-width: $viewport-md) {
+    order: 1;
+
+    max-width: 75%;
+    flex-basis: 75%;
+  }
+  @media (min-width: $viewport-lg) {
+    max-width: 70%;
+    flex-basis: 70%;
+  }
+}
+
+.map-inset {
+  position: relative;
+  flex: 1 0 auto;
+  width: 100%;
+  height: 80vh;
+}
+
+.map::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  z-index: 10;
+  pointer-events: none;
+  box-shadow: inset 3px 0px 6px -2px rgba(0, 0, 0, 0.4);
+}
+
+.search-button {
+  @media (min-width: $viewport-lg) {
+    @include margin(4, top);
+  }
+}
+
+.toggle {
+  align-self: flex-start;
+  cursor: pointer;
+  display: flex;
+  width: fit-content;
+  button {
+    @include remove-button-style();
+    color: $color-slate-600;
+    border: solid $color-slate-200 2px;
+    font-weight: initial;
+    &:before {
+      display: block;
+      content: attr(title);
+      font-weight: 700;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
+    @include type-size(100);
+    margin: -1px; // ignore-style-rule
+    padding: 2px 15px; // ignore-style-rule
+    white-space: nowrap;
+
+    &.active {
+      color: black;
+      border: solid black 2px;
+      font-weight: 700;
+      z-index: 1;
+    }
+  }
+}
+
+.table-scroll {
+  overflow-y: scroll;
+  height: calc(80vh - 150px);
+  table {
+    margin-top: 0;
+  }
+}
+
+.facility-card-overlay {
+  width: 0;
+  position: absolute;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.4);
+  box-shadow: inset 3px 0px 6px -2px rgba(0, 0, 0, 0.8);
+  @media (min-width: $viewport-md) {
+    width: 10%;
+  }
+}
+
+.facility-card {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  overflow-y: scroll;
+  background: white;
+  border-left: 1px solid $color-slate-100;
+  @include padding(16);
+
+  @media (min-width: $viewport-md) {
+    width: 90%;
+  }
+  h2 {
+    margin-top: 0;
+  }
+  .close {
+    @include remove-button-style();
+    float: right;
+    @include type-size(600);
+  }
+}
diff --git a/src/pages/data/long-term-care/map.js b/src/pages/data/long-term-care/map.js
new file mode 100644
index 000000000..9157fff95
--- /dev/null
+++ b/src/pages/data/long-term-care/map.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import Layout from '~components/layout'
+import LTCMap from '~components/pages/data/long-term-care/map'
+import Container from '~components/common/container'
+
+const LTCContactPage = () => (
+  <Layout title="Long term care: Facility map" noContainer>
+    <Container centered>This is a piece of content above the map!</Container>
+    <LTCMap center={[-97, 38]} zoom={3.5} />
+  </Layout>
+)
+
+export default LTCContactPage
diff --git a/yarn.lock b/yarn.lock
index 7794b9915..c104df8c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2067,6 +2067,56 @@
     hoist-non-react-statics "^3.3.1"
     react-is "^16.12.0"
 
+"@mapbox/geojson-rewind@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.0.tgz#91f0ad56008c120caa19414b644d741249f4f560"
+  integrity sha512-73l/qJQgj/T/zO1JXVfuVvvKDgikD/7D/rHAD28S9BG1OTstgmftrmqfCx4U+zQAmtsB6HcDA3a7ymdnJZAQgg==
+  dependencies:
+    concat-stream "~2.0.0"
+    minimist "^1.2.5"
+
+"@mapbox/geojson-types@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz#9aecf642cb00eab1080a57c4f949a65b4a5846d6"
+  integrity sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==
+
+"@mapbox/jsonlint-lines-primitives@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
+  integrity sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=
+
+"@mapbox/mapbox-gl-supported@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.0.tgz#bb133cd91e562c006713fbc83f21e4b6f711a388"
+  integrity sha512-zu4udqYiBrKMQKwpKJ4hhPON7tz0QR/JZ3iGpHnNWFmH3Sv/ysxlICATUtGCFpsyJf2v1WpFhlzaZ3GhhKmPMA==
+
+"@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
+  integrity sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=
+
+"@mapbox/tiny-sdf@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-1.1.1.tgz#16a20c470741bfe9191deb336f46e194da4a91ff"
+  integrity sha512-Ihn1nZcGIswJ5XGbgFAvVumOgWpvIjBX9jiRlIl46uQG9vJOF51ViBYHF95rEZupuyQbEmhLaDPLQlU7fUTsBg==
+
+"@mapbox/unitbezier@^0.0.0":
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz#15651bd553a67b8581fb398810c98ad86a34524e"
+  integrity sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=
+
+"@mapbox/vector-tile@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz#d3a74c90402d06e89ec66de49ec817ff53409666"
+  integrity sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==
+  dependencies:
+    "@mapbox/point-geometry" "~0.1.0"
+
+"@mapbox/whoots-js@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
+  integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
+
 "@mdx-js/loader@^1.5.1":
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.18.tgz#8d63fcc029573b3a33968c78d1c5e927ad8e497d"
@@ -6460,6 +6510,16 @@ concat-stream@^1.5.0, concat-stream@^1.6.2:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-stream@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
+  integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.0.2"
+    typedarray "^0.0.6"
+
 config-chain@^1.1.11:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -6983,6 +7043,11 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39"
   integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==
 
+csscolorparser@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/csscolorparser/-/csscolorparser-1.0.3.tgz#b34f391eea4da8f3e98231e2ccd8df9c041f171b"
+  integrity sha1-s085HupNqPPpgjHizNjfnAQfFxs=
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -7955,6 +8020,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+earcut@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.2.tgz#41b0bc35f63e0fe80da7cddff28511e7e2e80d11"
+  integrity sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -10462,6 +10532,11 @@ gensync@^1.0.0-beta.1:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
   integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
 
+geojson-vt@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
+  integrity sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==
+
 get-caller-file@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
@@ -10621,6 +10696,11 @@ gitlab@^10.0.1:
     query-string "^6.8.2"
     universal-url "^2.0.0"
 
+gl-matrix@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.3.0.tgz#232eef60b1c8b30a28cbbe75b2caf6c48fd6358b"
+  integrity sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA==
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -10996,6 +11076,11 @@ gray-matter@^4.0.2:
     section-matter "^1.0.0"
     strip-bom-string "^1.0.0"
 
+grid-index@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
+  integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -11704,7 +11789,7 @@ identity-obj-proxy@^3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
-ieee754@^1.1.13:
+ieee754@^1.1.12, ieee754@^1.1.13:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
@@ -13603,6 +13688,11 @@ jws@^3.2.2:
     jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
+kdbush@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
+  integrity sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==
+
 kebab-hash@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/kebab-hash/-/kebab-hash-0.1.2.tgz#dfb7949ba34d8e70114ea7d83e266e5e2a4abaac"
@@ -14322,6 +14412,35 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+mapbox-gl@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-2.0.1.tgz#e081c075fca2473fbc0e3a28f57c1b68ced3d997"
+  integrity sha512-4sWRh4FztQakCPO/WN2JsMSDOVLKXPSQvHjJgXwIEQtnrxjyFB7Et0VX+h9rDxOA4EB6BRCG8mNgw648/dXNTg==
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.5.0"
+    "@mapbox/geojson-types" "^1.0.2"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/mapbox-gl-supported" "^2.0.0"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^1.1.1"
+    "@mapbox/unitbezier" "^0.0.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    csscolorparser "~1.0.3"
+    earcut "^2.2.2"
+    geojson-vt "^3.2.1"
+    gl-matrix "^3.2.1"
+    grid-index "^1.1.0"
+    minimist "^1.2.5"
+    murmurhash-js "^1.0.0"
+    pbf "^3.2.1"
+    potpack "^1.0.1"
+    quickselect "^2.0.0"
+    rw "^1.3.3"
+    supercluster "^7.1.0"
+    tinyqueue "^2.0.3"
+    vt-pbf "^3.1.1"
+
 markdown-escapes@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
@@ -14924,6 +15043,11 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
+murmurhash-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51"
+  integrity sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=
+
 mustache@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.0.1.tgz#d99beb031701ad433338e7ea65e0489416c854a2"
@@ -16208,6 +16332,14 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pbf@^3.0.5, pbf@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.1.tgz#b4c1b9e72af966cd82c6531691115cc0409ffe2a"
+  integrity sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
 pbkdf2@^3.0.3:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
@@ -16810,6 +16942,11 @@ postcss@^7.0.17, postcss@^7.0.18:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+potpack@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/potpack/-/potpack-1.0.1.tgz#d1b1afd89e4c8f7762865ec30bd112ab767e2ebf"
+  integrity sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw==
+
 potrace@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/potrace/-/potrace-2.1.8.tgz#50f6fba92e1e39ddef6f979b0a0f841809e0acf2"
@@ -17052,6 +17189,11 @@ proto-list@~1.2.1:
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
   integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
 
+protocol-buffers-schema@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz#2f0ea31ca96627d680bf2fefae7ebfa2b6453eae"
+  integrity sha512-G/2kcamPF2S49W5yaMGdIpkG6+5wZF0fzBteLKgEHjbNzqjZQ85aAs1iJGto31EJaSTkNvHs5IXuHSaTLWBAiA==
+
 protocols@^1.1.0, protocols@^1.4.0:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.8.tgz#48eea2d8f58d9644a4a32caae5d5db290a075ce8"
@@ -17333,6 +17475,11 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
+quickselect@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018"
+  integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -17857,7 +18004,7 @@ read@^1.0.7:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+readable-stream@^3.0.2, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -18459,6 +18606,13 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-protobuf-schema@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz#9ca9a9e69cf192bbdaf1006ec1973948aa4a3758"
+  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
+  dependencies:
+    protocol-buffers-schema "^3.3.1"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -18643,6 +18797,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rw@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
+
 rx-lite-aggregates@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
@@ -19966,6 +20125,13 @@ sudo-prompt@^8.2.0:
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"
   integrity sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw==
 
+supercluster@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-7.1.0.tgz#f0a457426ec0ab95d69c5f03b51e049774b94479"
+  integrity sha512-LDasImUAFMhTqhK+cUXfy9C2KTUqJ3gucLjmNLNFmKWOnDUBxLFLH9oKuXOTCLveecmxh8fbk8kgh6Q0gsfe2w==
+  dependencies:
+    kdbush "^3.0.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -20310,6 +20476,11 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
+tinyqueue@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
+  integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -21306,6 +21477,15 @@ void-elements@^3.1.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
 
+vt-pbf@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/vt-pbf/-/vt-pbf-3.1.1.tgz#b0f627e39a10ce91d943b898ed2363d21899fb82"
+  integrity sha512-pHjWdrIoxurpmTcbfBWXaPwSmtPAHS105253P1qyEfSTV2HJddqjM+kIHquaT/L6lVJIk9ltTGc0IxR/G47hYA==
+  dependencies:
+    "@mapbox/point-geometry" "0.1.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    pbf "^3.0.5"
+
 vue-docgen-api@^4.1.0:
   version "4.32.4"
   resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.32.4.tgz#a74f4dfce99a078a4a87dcb779c6cdd480eeab01"

From 7870a10bacffdcf00a8a7ae759c109be98d451e6 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 25 Dec 2020 12:17:41 -0800
Subject: [PATCH 02/47] chore: Move to build step

---
 gatsby-node.js                                   |  4 ++++
 .../pages/data/long-term-care/map/index.js       | 16 +++-------------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 2bd845294..b8a3dace1 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -276,6 +276,10 @@ exports.onCreateWebpackConfig = ({ stage, actions, loaders, getConfig }) => {
             test: /react-scrollama/,
             use: loaders.null(),
           },
+          {
+            test: /mapbox-gl/,
+            use: loaders.null(),
+          },
         ],
       },
     })
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 27b5d8c92..1d4dbaf1e 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -99,11 +99,11 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
       zoom: hash.length > 2 ? hash[2] : zoom,
     })
 
-    map.addControl(new mapboxgl.NavigationControl(), 'top-left')
+    map.addControl(new mapboxgl.NavigationControl(), 'top-right')
 
     map.on('load', () => {
       if (state) {
-        map.setFilter('hospitals', ['==', ['get', 'state'], state])
+        map.setFilter('cases', ['==', ['get', 'state_abbreviation'], state])
       }
 
       if (window.location.hash && hash.length > 2) {
@@ -112,19 +112,9 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
         })
         setFacilities(
           features.sort((a, b) =>
-            a.properties.hospital_name > b.properties.hospital_name ? 1 : -1,
+            a.properties.facility_name > b.properties.facility_name ? 1 : -1,
           ),
         )
-        if (hash.length === 4 && hash[3].search('id:') > -1) {
-          const id = hash[3].replace('id:', '')
-          const linkedFeature = features.find(
-            feature => feature.properties.hospital_pk === id,
-          )
-          if (linkedFeature) {
-            setActiveFacility({ ...linkedFeature.properties })
-            setRevealedFacility(true)
-          }
-        }
       }
     })
 

From 71e0defa686776ee007c133f40e2a5fa144721a3 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 25 Dec 2020 12:43:23 -0800
Subject: [PATCH 03/47] chore: Add electron dep

---
 package.json |   1 +
 yarn.lock    | 145 +++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 141 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index cf9f513f2..4fb5e0595 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "d3-time": "^1.1.0",
     "d3-time-format": "^2.2.3",
     "dotenv": "^8.2.0",
+    "electron": "^11.1.1",
     "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-loader": "^3.0.2",
diff --git a/yarn.lock b/yarn.lock
index c104df8c3..d2e689657 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1228,6 +1228,22 @@
   resolved "https://registry.yarnpkg.com/@egoist/vue-to-react/-/vue-to-react-1.1.0.tgz#83c884b8608e8ee62e76c03e91ce9c26063a91ad"
   integrity sha512-MwfwXHDh6ptZGLEtNLPXp2Wghteav7mzpT2Mcwl3NZWKF814i5hhHnNkVrcQQEuxUroSWQqzxLkMKSb+nhPang==
 
+"@electron/get@^1.0.1":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@electron/get/-/get-1.12.2.tgz#6442066afb99be08cefb9a281e4b4692b33764f3"
+  integrity sha512-vAuHUbfvBQpYTJ5wB7uVIDq5c/Ry0fiTBMs7lnEYAo/qXXppIVcWdfBr57u6eRnKdVso7KSiH6p/LbQAG6Izrg==
+  dependencies:
+    debug "^4.1.1"
+    env-paths "^2.2.0"
+    fs-extra "^8.1.0"
+    got "^9.6.0"
+    progress "^2.0.3"
+    sanitize-filename "^1.6.2"
+    sumchecker "^3.0.1"
+  optionalDependencies:
+    global-agent "^2.0.2"
+    global-tunnel-ng "^2.7.1"
+
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -3555,6 +3571,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.2.tgz#2de1ed6670439387da1c9f549a2ade2b0a799256"
   integrity sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA==
 
+"@types/node@^12.0.12":
+  version "12.19.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.11.tgz#9220ab4b20d91169eb78f456dbfcbabee89dfb50"
+  integrity sha512-bwVfNTFZOrGXyiQ6t4B9sZerMSShWNsGRw8tC5DY1qImUNczS9SjT4G6PnzjCnxsu5Ubj6xjL2lgwddkxtQl5w==
+
 "@types/node@^8.5.7":
   version "8.10.64"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.64.tgz#0dddc4c53ca4819a32b7478232d8b446ca90e1c6"
@@ -5477,6 +5498,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+boolean@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.0.2.tgz#df1baa18b6a2b0e70840475e1d93ec8fe75b2570"
+  integrity sha512-RwywHlpCRc3/Wh81MiCKun4ydaIFyW5Ea6JbL6sRCVx5q5irDw7pMXBUFYF/jArQ6YrG36q0kpovc9P/Kd3I4g==
+
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -8055,6 +8081,15 @@ electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.571:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.574.tgz#bdd87f62fe70165e5c862a0acf0cee9889e23aa3"
   integrity sha512-kF8Bfe1h8X1pPwlw6oRoIXj0DevowviP6fl0wcljm+nZjy/7+Fos4THo1N/7dVGEJlyEqK9C8qNnbheH+Eazfw==
 
+electron@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-11.1.1.tgz#188f036f8282798398dca9513e9bb3b10213e3aa"
+  integrity sha512-tlbex3xosJgfileN6BAQRotevPRXB/wQIq48QeQ08tUJJrXwE72c8smsM/hbHx5eDgnbfJ2G3a60PmRjHU2NhA==
+  dependencies:
+    "@electron/get" "^1.0.1"
+    "@types/node" "^12.0.12"
+    extract-zip "^1.0.3"
+
 element-resize-detector@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.1.tgz#b0305194447a4863155e58f13323a0aef30851d1"
@@ -8119,7 +8154,7 @@ emotion-theming@^10.0.19:
     "@emotion/weak-memoize" "0.2.5"
     hoist-non-react-statics "^3.3.0"
 
-encodeurl@~1.0.2:
+encodeurl@^1.0.2, encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
@@ -8197,6 +8232,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
   integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
 
+env-paths@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
+  integrity sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==
+
 envify@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
@@ -8380,6 +8420,11 @@ es5-shim@^4.5.13:
   resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.5.14.tgz#90009e1019d0ea327447cb523deaff8fe45697ef"
   integrity sha512-7SwlpL+2JpymWTt8sNLuC2zdhhc+wrfe5cMPI2j0o6WsPdfAiPwmFy2f0AocPB4RQVBOZ9kNTgi5YF7TdhkvEg==
 
+es6-error@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
+  integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
+
 es6-iterator@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
@@ -9055,7 +9100,7 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-zip@^1.6.6:
+extract-zip@^1.0.3, extract-zip@^1.6.6:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
   integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
@@ -10748,6 +10793,19 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, gl
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global-agent@^2.0.2:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/global-agent/-/global-agent-2.1.12.tgz#e4ae3812b731a9e81cbf825f9377ef450a8e4195"
+  integrity sha512-caAljRMS/qcDo69X9BfkgrihGUgGx44Fb4QQToNQjsiWh+YlQ66uqYVAdA8Olqit+5Ng0nkz09je3ZzANMZcjg==
+  dependencies:
+    boolean "^3.0.1"
+    core-js "^3.6.5"
+    es6-error "^4.1.1"
+    matcher "^3.0.0"
+    roarr "^2.15.3"
+    semver "^7.3.2"
+    serialize-error "^7.0.1"
+
 global-dirs@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -10798,6 +10856,16 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global-tunnel-ng@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/global-tunnel-ng/-/global-tunnel-ng-2.7.1.tgz#d03b5102dfde3a69914f5ee7d86761ca35d57d8f"
+  integrity sha512-4s+DyciWBV0eK148wqXxcmVAbFVPqtc3sEtUE/GTQfuU80rySLcMhUmHKSHI7/LDj8q0gDYI1lIhRRB7ieRAqg==
+  dependencies:
+    encodeurl "^1.0.2"
+    lodash "^4.17.10"
+    npm-conf "^1.1.3"
+    tunnel "^0.0.6"
+
 global@^4.3.0, global@^4.3.2, global@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
@@ -10826,7 +10894,7 @@ globals@^12.1.0:
   dependencies:
     type-fest "^0.8.1"
 
-globalthis@^1.0.0:
+globalthis@^1.0.0, globalthis@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.1.tgz#40116f5d9c071f9e8fb0037654df1ab3a83b7ef9"
   integrity sha512-mJPRTc/P39NH/iNG4mXa9aIhNymaQikTrnspeCa2ZuJ+mH2QN/rXwtX3XwKrHqWgUQFbNZKtHM105aHzJalElw==
@@ -14485,6 +14553,13 @@ marksy@^8.0.0:
     he "^1.2.0"
     marked "^0.3.12"
 
+matcher@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"
+  integrity sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==
+  dependencies:
+    escape-string-regexp "^4.0.0"
+
 md5-file@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-5.0.0.tgz#e519f631feca9c39e7f9ea1780b63c4745012e20"
@@ -15397,7 +15472,7 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
-npm-conf@^1.1.0:
+npm-conf@^1.1.0, npm-conf@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"
   integrity sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==
@@ -18759,6 +18834,18 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+roarr@^2.15.3:
+  version "2.15.4"
+  resolved "https://registry.yarnpkg.com/roarr/-/roarr-2.15.4.tgz#f5fe795b7b838ccfe35dc608e0282b9eba2e7afd"
+  integrity sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==
+  dependencies:
+    boolean "^3.0.1"
+    detect-node "^2.0.4"
+    globalthis "^1.0.1"
+    json-stringify-safe "^5.0.1"
+    semver-compare "^1.0.0"
+    sprintf-js "^1.1.2"
+
 rss@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/rss/-/rss-1.2.2.tgz#50a1698876138133a74f9a05d2bdc8db8d27a921"
@@ -18863,6 +18950,13 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
+sanitize-filename@^1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/sanitize-filename/-/sanitize-filename-1.6.3.tgz#755ebd752045931977e30b2025d340d7c9090378"
+  integrity sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==
+  dependencies:
+    truncate-utf8-bytes "^1.0.0"
+
 sanitize-html@^1.27.5:
   version "1.27.5"
   resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-1.27.5.tgz#6c8149462adb23e360e1bb71cc0bae7f08c823c7"
@@ -18980,6 +19074,11 @@ selfsigned@^1.10.7:
   dependencies:
     node-forge "^0.10.0"
 
+semver-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -19050,6 +19149,13 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+serialize-error@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-7.0.1.tgz#f1360b0447f61ffb483ec4157c737fab7d778e18"
+  integrity sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==
+  dependencies:
+    type-fest "^0.13.1"
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -19619,7 +19725,7 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-sprintf-js@^1.0.3:
+sprintf-js@^1.0.3, sprintf-js@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
   integrity sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==
@@ -20125,6 +20231,13 @@ sudo-prompt@^8.2.0:
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"
   integrity sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw==
 
+sumchecker@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
+  integrity sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==
+  dependencies:
+    debug "^4.1.0"
+
 supercluster@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-7.1.0.tgz#f0a457426ec0ab95d69c5f03b51e049774b94479"
@@ -20653,6 +20766,13 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-2.2.1.tgz#c5bf04a5bbec3fd118be4084461b3a27c4d796bf"
   integrity sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==
 
+truncate-utf8-bytes@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz#405923909592d56f78a5818434b0b78489ca5f2b"
+  integrity sha1-QFkjkJWS1W94pYGENLC3hInKXys=
+  dependencies:
+    utf8-byte-length "^1.0.1"
+
 ts-dedent@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.2.0.tgz#6aa2229d837159bb6d635b6b233002423b91e0b0"
@@ -20723,6 +20843,11 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tunnel@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/tunnel/-/tunnel-0.0.6.tgz#72f1314b34a5b192db012324df2cc587ca47f92c"
+  integrity sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -20755,6 +20880,11 @@ type-fest@^0.11.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
   integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
 
+type-fest@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
+  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
+
 type-fest@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
@@ -21296,6 +21426,11 @@ utf-8-validate@^5.0.2:
   dependencies:
     node-gyp-build "^4.2.0"
 
+utf8-byte-length@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"
+  integrity sha1-9F8VDExm7uloGGUFq5P8u4rWv2E=
+
 utif@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/utif/-/utif-2.0.1.tgz#9e1582d9bbd20011a6588548ed3266298e711759"

From 8e2b5fdb4767eb77c10e8f54802aebfc1e3474aa Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 25 Dec 2020 13:41:58 -0800
Subject: [PATCH 04/47] chore: Fix mapbox version

---
 package.json                                   |  2 +-
 .../pages/data/long-term-care/map/index.js     |  2 ++
 yarn.lock                                      | 18 +++++++++---------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 4fb5e0595..6226d853c 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "json2csv": "^5.0.1",
     "lodash": "^4.17.19",
     "luxon": "^1.22.0",
-    "mapbox-gl": "^2.0.1",
+    "mapbox-gl": "1.12.0",
     "marked": "^0.8.2",
     "mkdirp": "^1.0.4",
     "mockdate": "^3.0.2",
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 1d4dbaf1e..2cd1e3e73 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -98,10 +98,12 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
       center: hash.length > 2 ? [hash[0], hash[1]] : center,
       zoom: hash.length > 2 ? hash[2] : zoom,
     })
+    console.log('map')
 
     map.addControl(new mapboxgl.NavigationControl(), 'top-right')
 
     map.on('load', () => {
+      console.log('map loaded')
       if (state) {
         map.setFilter('cases', ['==', ['get', 'state_abbreviation'], state])
       }
diff --git a/yarn.lock b/yarn.lock
index d2e689657..91735e38c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2101,10 +2101,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
   integrity sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=
 
-"@mapbox/mapbox-gl-supported@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.0.tgz#bb133cd91e562c006713fbc83f21e4b6f711a388"
-  integrity sha512-zu4udqYiBrKMQKwpKJ4hhPON7tz0QR/JZ3iGpHnNWFmH3Sv/ysxlICATUtGCFpsyJf2v1WpFhlzaZ3GhhKmPMA==
+"@mapbox/mapbox-gl-supported@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz#f60b6a55a5d8e5ee908347d2ce4250b15103dc8e"
+  integrity sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==
 
 "@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
   version "0.1.0"
@@ -14480,15 +14480,15 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-mapbox-gl@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-2.0.1.tgz#e081c075fca2473fbc0e3a28f57c1b68ced3d997"
-  integrity sha512-4sWRh4FztQakCPO/WN2JsMSDOVLKXPSQvHjJgXwIEQtnrxjyFB7Et0VX+h9rDxOA4EB6BRCG8mNgw648/dXNTg==
+mapbox-gl@1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-1.12.0.tgz#7d1c73b1153d7ee219d30d80728d7df079bc7c05"
+  integrity sha512-B3URR4qY9R/Bx+DKqP8qmGCai8IOZYMSZF7ZSvcCZaYTaOYhQQi8ErTEDZtFMOR0ZPj7HFWOkkhl5SqvDfpJpA==
   dependencies:
     "@mapbox/geojson-rewind" "^0.5.0"
     "@mapbox/geojson-types" "^1.0.2"
     "@mapbox/jsonlint-lines-primitives" "^2.0.2"
-    "@mapbox/mapbox-gl-supported" "^2.0.0"
+    "@mapbox/mapbox-gl-supported" "^1.5.0"
     "@mapbox/point-geometry" "^0.1.0"
     "@mapbox/tiny-sdf" "^1.1.1"
     "@mapbox/unitbezier" "^0.0.0"

From 0ad18d827e1e8d04639a51b0a24741d59d26b1c1 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 25 Dec 2020 15:05:55 -0800
Subject: [PATCH 05/47] chore: Set zoom level to 6

---
 src/components/pages/data/long-term-care/map/index.js       | 6 ++----
 src/components/pages/data/long-term-care/map/legend.js      | 4 ++++
 .../pages/data/long-term-care/map/legend.module.scss        | 6 ++++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 2cd1e3e73..53cabc39d 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -51,7 +51,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
         event.target.getZoom(),
       ].join(',')
     }
-    if (event.target.getZoom() < 4) {
+    if (event.target.getZoom() < 6) {
       setFacilities(false)
       return
     }
@@ -98,12 +98,10 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
       center: hash.length > 2 ? [hash[0], hash[1]] : center,
       zoom: hash.length > 2 ? hash[2] : zoom,
     })
-    console.log('map')
 
     map.addControl(new mapboxgl.NavigationControl(), 'top-right')
 
     map.on('load', () => {
-      console.log('map loaded')
       if (state) {
         map.setFilter('cases', ['==', ['get', 'state_abbreviation'], state])
       }
@@ -254,7 +252,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
             </div>
           ) : (
             <p>
-              {currentZoom < 4 ? (
+              {currentZoom < 6 ? (
                 <>Zoom in to get facility details.</>
               ) : (
                 <>No facilities in the current map.</>
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index ee49b3c0f..cb27af4b9 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -32,6 +32,10 @@ const Legend = () => (
         >
           only report outbreaks
         </span>
+        , and some states{' '}
+        <span className={legendStyles.noData}>
+          don&apos;t report any LTC data
+        </span>
         .
       </div>
     </div>
diff --git a/src/components/pages/data/long-term-care/map/legend.module.scss b/src/components/pages/data/long-term-care/map/legend.module.scss
index 953619e05..f76c1e17d 100644
--- a/src/components/pages/data/long-term-care/map/legend.module.scss
+++ b/src/components/pages/data/long-term-care/map/legend.module.scss
@@ -24,3 +24,9 @@
 .outbreak-only {
   border-color: $color-slate-400;
 }
+
+.no-data {
+  display: inline-block;
+  background: $color-slate-100;
+  @include padding(8);
+}

From e05a9b4b1af2d647d353241d45ebf78b56e1c8a5 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 25 Dec 2020 15:45:31 -0800
Subject: [PATCH 06/47] chore: Add layer toggle

---
 .../pages/data/long-term-care/map/index.js    |  16 ++-
 .../pages/data/long-term-care/map/legend.js   | 105 ++++++++++++------
 .../long-term-care/map/legend.module.scss     |  35 +++++-
 3 files changed, 120 insertions(+), 36 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 53cabc39d..1018f0a5b 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -20,6 +20,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   const [revealedFacility, setRevealedFacility] = useState(false)
   const [currentZoom, setCurrentZoom] = useState(0)
   const [highlighedMarker, setHighlightedMarker] = useState(false)
+  const [mapLayer, setMapLayer] = useState('cases')
   const layers = ['cases']
 
   const mapNode = useRef(null)
@@ -141,9 +142,22 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
     mapRef.current = map
   }, [])
 
+  useEffect(() => {
+    if (!mapRef.current || !mapRef.current.isStyleLoaded()) {
+      return
+    }
+    layers.forEach(layer => {
+      mapRef.current.setLayoutProperty(
+        layer,
+        'visibility',
+        layer === mapLayer ? 'visible' : 'none',
+      )
+    })
+  }, [mapLayer])
+
   return (
     <>
-      <Legend />
+      <Legend mapLayer={mapLayer} setLayer={layer => setMapLayer(layer)} />
       <div className={facilitiesMapStyles.container} aria-hidden>
         <div className={facilitiesMapStyles.sidebar}>
           <Form
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index cb27af4b9..91f5205a9 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -2,43 +2,80 @@ import React from 'react'
 import classnames from 'classnames'
 import Container from '~components/common/container'
 import legendStyles from './legend.module.scss'
+import { Col, Row } from '~components/common/grid'
 
-const Legend = () => (
+const Legend = ({ mapLayer, setLayer }) => (
   <Container>
-    <div className={legendStyles.legend} aria-hidden>
-      <div>
-        Long-term care facilities{' '}
-        <span
-          className={classnames(
-            legendStyles.item,
-            legendStyles.notExperiencing,
-          )}
+    <Row className={legendStyles.wrapper}>
+      <Col width={[4, 6, 4]}>
+        <div
+          className={legendStyles.toggle}
+          role="group"
+          aria-label="Toggle map layers"
         >
-          not experiencing
-        </span>{' '}
-        and{' '}
-        <span
-          className={classnames(legendStyles.item, legendStyles.experiencing)}
-        >
-          experiencing
-        </span>{' '}
-        an outbreak.
-      </div>
-      <div>
-        {' '}
-        Some states{' '}
-        <span
-          className={classnames(legendStyles.item, legendStyles.outbreakOnly)}
-        >
-          only report outbreaks
-        </span>
-        , and some states{' '}
-        <span className={legendStyles.noData}>
-          don&apos;t report any LTC data
-        </span>
-        .
-      </div>
-    </div>
+          <button
+            className={mapLayer === 'cases' && legendStyles.active}
+            type="button"
+            onClick={() => {
+              setLayer('cases')
+            }}
+          >
+            Cases
+          </button>
+          <button
+            className={mapLayer === 'deaths' && legendStyles.active}
+            type="button"
+            onClick={() => {
+              setLayer('deaths')
+            }}
+          >
+            Deaths
+          </button>
+        </div>
+      </Col>
+      <Col width={[4, 6, 8]}>
+        <div className={legendStyles.legend} aria-hidden>
+          <div>
+            Long-term care facilities{' '}
+            <span
+              className={classnames(
+                legendStyles.item,
+                legendStyles.notExperiencing,
+              )}
+            >
+              not experiencing
+            </span>{' '}
+            and{' '}
+            <span
+              className={classnames(
+                legendStyles.item,
+                legendStyles.experiencing,
+              )}
+            >
+              experiencing
+            </span>{' '}
+            an outbreak.
+          </div>
+          <div>
+            {' '}
+            Some states{' '}
+            <span
+              className={classnames(
+                legendStyles.item,
+                legendStyles.outbreakOnly,
+              )}
+            >
+              only report outbreaks
+            </span>
+            , and some states{' '}
+            <span className={legendStyles.noData}>
+              don&apos;t report any LTC data
+            </span>
+            .
+          </div>
+        </div>
+      </Col>
+    </Row>
   </Container>
 )
 
diff --git a/src/components/pages/data/long-term-care/map/legend.module.scss b/src/components/pages/data/long-term-care/map/legend.module.scss
index f76c1e17d..6c4bf487f 100644
--- a/src/components/pages/data/long-term-care/map/legend.module.scss
+++ b/src/components/pages/data/long-term-care/map/legend.module.scss
@@ -1,5 +1,7 @@
-.legend {
+.wrapper {
   @include margin(32, top);
+}
+.legend {
   @include padding(8);
   text-align: right;
   div {
@@ -30,3 +32,34 @@
   background: $color-slate-100;
   @include padding(8);
 }
+
+.toggle {
+  cursor: pointer;
+  display: flex;
+  width: fit-content;
+  button {
+    @include remove-button-style();
+    color: $color-slate-600;
+    border: solid $color-slate-200 2px;
+    font-weight: initial;
+    &:before {
+      display: block;
+      content: attr(title);
+      font-weight: 700;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
+    @include type-size(100);
+    margin: -1px; // ignore-style-rule
+    padding: 2px 15px; // ignore-style-rule
+    white-space: nowrap;
+
+    &.active {
+      color: black;
+      border: solid black 2px;
+      font-weight: 700;
+      z-index: 1;
+    }
+  }
+}

From c814da71ca297a6ee8b13d11647093abecbc82b4 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 25 Dec 2020 15:52:02 -0800
Subject: [PATCH 07/47] chore: Set facilities regardless of layer

---
 src/components/pages/data/long-term-care/map/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 1018f0a5b..ade72cbff 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -21,7 +21,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   const [currentZoom, setCurrentZoom] = useState(0)
   const [highlighedMarker, setHighlightedMarker] = useState(false)
   const [mapLayer, setMapLayer] = useState('cases')
-  const layers = ['cases']
+  const layers = ['cases', 'deaths']
 
   const mapNode = useRef(null)
   const mapRef = useRef(null)

From 89e0fd1e3d56880781a5937cb7dd5b46685bef9f Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 6 Jan 2021 11:27:01 -0800
Subject: [PATCH 08/47] chore: Change no-data background

---
 src/components/pages/data/long-term-care/map/legend.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/data/long-term-care/map/legend.module.scss b/src/components/pages/data/long-term-care/map/legend.module.scss
index 6c4bf487f..3a09f1c9b 100644
--- a/src/components/pages/data/long-term-care/map/legend.module.scss
+++ b/src/components/pages/data/long-term-care/map/legend.module.scss
@@ -29,7 +29,7 @@
 
 .no-data {
   display: inline-block;
-  background: $color-slate-100;
+  background: $color-honey-100;
   @include padding(8);
 }
 

From 26686cf2cb1142bf3bfff51419c1bf99b5669519 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 6 Jan 2021 11:27:25 -0800
Subject: [PATCH 09/47] chore: Darken legend

---
 src/components/pages/data/long-term-care/map/legend.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/data/long-term-care/map/legend.module.scss b/src/components/pages/data/long-term-care/map/legend.module.scss
index 3a09f1c9b..8d05cca9a 100644
--- a/src/components/pages/data/long-term-care/map/legend.module.scss
+++ b/src/components/pages/data/long-term-care/map/legend.module.scss
@@ -29,7 +29,7 @@
 
 .no-data {
   display: inline-block;
-  background: $color-honey-100;
+  background: $color-honey-300;
   @include padding(8);
 }
 

From 51fc2ab02707fc9f815feae6c9301d2aa4c6fd66 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 6 Jan 2021 14:20:03 -0800
Subject: [PATCH 10/47] chore: Merge map components between LTC and HHS

---
 src/components/common/map/infobox.js          |  21 +++
 .../map/infobox.module.scss                   |   0
 src/components/common/map/layer-toggle.js     |  28 ++++
 .../common/map/layer-toggle.module.scss       |  30 ++++
 src/components/common/map/map-context.js      |   5 +
 src/components/common/map/overlay.js          |  29 ++++
 src/components/common/map/overlay.module.scss |  41 +++++
 src/components/common/map/sidebar.js          |  66 ++++++++
 src/components/common/map/sidebar.module.scss |  40 +++++
 src/components/common/map/wrapper.js          |  10 ++
 src/components/common/map/wrapper.module.scss |  22 +++
 .../pages/data/hhs-facilities/map/index.js    | 156 ++++++------------
 .../pages/data/hhs-facilities/map/infobox.js  |  16 +-
 .../hhs-facilities/map/infobox.module.scss    |  27 ---
 .../pages/data/hhs-facilities/map/legend.js   | 150 +++++++++--------
 .../hhs-facilities/map/legend.module.scss     |  32 ----
 .../data/hhs-facilities/map/map.module.scss   |  66 --------
 .../pages/data/long-term-care/map/index.js    | 127 ++++----------
 .../pages/data/long-term-care/map/infobox.js  |  16 +-
 .../pages/data/long-term-care/map/legend.js   |  39 ++---
 .../long-term-care/map/legend.module.scss     |  33 +---
 .../data/long-term-care/map/map.module.scss   | 108 ------------
 22 files changed, 470 insertions(+), 592 deletions(-)
 create mode 100644 src/components/common/map/infobox.js
 rename src/components/{pages/data/long-term-care => common}/map/infobox.module.scss (100%)
 create mode 100644 src/components/common/map/layer-toggle.js
 create mode 100644 src/components/common/map/layer-toggle.module.scss
 create mode 100644 src/components/common/map/map-context.js
 create mode 100644 src/components/common/map/overlay.js
 create mode 100644 src/components/common/map/overlay.module.scss
 create mode 100644 src/components/common/map/sidebar.js
 create mode 100644 src/components/common/map/sidebar.module.scss
 create mode 100644 src/components/common/map/wrapper.js
 create mode 100644 src/components/common/map/wrapper.module.scss
 delete mode 100644 src/components/pages/data/hhs-facilities/map/infobox.module.scss

diff --git a/src/components/common/map/infobox.js b/src/components/common/map/infobox.js
new file mode 100644
index 000000000..ee9935596
--- /dev/null
+++ b/src/components/common/map/infobox.js
@@ -0,0 +1,21 @@
+import React, { useContext } from 'react'
+import MapContext from './map-context'
+import infoboxStyle from './infobox.module.scss'
+
+const Infobox = ({ children }) => {
+  const mapContext = useContext(MapContext)
+
+  return (
+    <div
+      className={infoboxStyle.infobox}
+      style={{
+        left: Math.max(10, mapContext.infoboxPosition.x - 175),
+        top: mapContext.infoboxPosition.y + 15,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Infobox
diff --git a/src/components/pages/data/long-term-care/map/infobox.module.scss b/src/components/common/map/infobox.module.scss
similarity index 100%
rename from src/components/pages/data/long-term-care/map/infobox.module.scss
rename to src/components/common/map/infobox.module.scss
diff --git a/src/components/common/map/layer-toggle.js b/src/components/common/map/layer-toggle.js
new file mode 100644
index 000000000..1404410f8
--- /dev/null
+++ b/src/components/common/map/layer-toggle.js
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import MapContext from './map-context'
+import toggleStyle from './layer-toggle.module.scss'
+
+const LayerToggle = ({ layers }) => {
+  const mapContext = useContext(MapContext)
+  return (
+    <div
+      className={toggleStyle.toggle}
+      role="group"
+      aria-label="Toggle map layers"
+    >
+      {layers.map(layer => (
+        <button
+          className={mapContext.mapLayer === layer.id && toggleStyle.active}
+          type="button"
+          onClick={() => {
+            mapContext.setMapLayer(layer.id)
+          }}
+        >
+          {layer.name}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default LayerToggle
diff --git a/src/components/common/map/layer-toggle.module.scss b/src/components/common/map/layer-toggle.module.scss
new file mode 100644
index 000000000..3924a75ea
--- /dev/null
+++ b/src/components/common/map/layer-toggle.module.scss
@@ -0,0 +1,30 @@
+.toggle {
+  cursor: pointer;
+  display: flex;
+  width: fit-content;
+  button {
+    @include remove-button-style();
+    color: $color-slate-600;
+    border: solid $color-slate-200 2px;
+    font-weight: initial;
+    &:before {
+      display: block;
+      content: attr(title);
+      font-weight: 700;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
+    @include type-size(100);
+    margin: -1px; // ignore-style-rule
+    padding: 2px 15px; // ignore-style-rule
+    white-space: nowrap;
+
+    &.active {
+      color: black;
+      border: solid black 2px;
+      font-weight: 700;
+      z-index: 1;
+    }
+  }
+}
diff --git a/src/components/common/map/map-context.js b/src/components/common/map/map-context.js
new file mode 100644
index 000000000..f1b91aa54
--- /dev/null
+++ b/src/components/common/map/map-context.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const MapContext = createContext()
+
+export default MapContext
diff --git a/src/components/common/map/overlay.js b/src/components/common/map/overlay.js
new file mode 100644
index 000000000..bfcd95c13
--- /dev/null
+++ b/src/components/common/map/overlay.js
@@ -0,0 +1,29 @@
+import React from 'react'
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import overlayStyles from './overlay.module.scss'
+
+const Overlay = ({ children, close }) => (
+  <>
+    <div
+      role="dialog"
+      className={overlayStyles.overlay}
+      onClick={() => close()}
+      onKeyDown={() => close()}
+    />
+    <div className={overlayStyles.card} role="dialog">
+      <button
+        className={overlayStyles.close}
+        type="button"
+        onClick={event => {
+          event.preventDefault()
+          close()
+        }}
+      >
+        &times;
+      </button>
+      <div>{children}</div>
+    </div>
+  </>
+)
+
+export default Overlay
diff --git a/src/components/common/map/overlay.module.scss b/src/components/common/map/overlay.module.scss
new file mode 100644
index 000000000..ab85c8ac5
--- /dev/null
+++ b/src/components/common/map/overlay.module.scss
@@ -0,0 +1,41 @@
+.overlay {
+  width: 0;
+  position: absolute;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.4);
+  box-shadow: inset 3px 0px 6px -2px rgba(0, 0, 0, 0.8);
+  @media (min-width: $viewport-md) {
+    width: 10%;
+  }
+}
+
+.card {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  overflow-y: scroll;
+  background: white;
+  border-left: 1px solid $color-slate-100;
+  @include padding(16);
+
+  @media (min-width: $viewport-md) {
+    width: 90%;
+  }
+  h2 {
+    margin-top: 0;
+  }
+  .close {
+    @include remove-button-style();
+    float: right;
+    @include type-size(600);
+  }
+}
diff --git a/src/components/common/map/sidebar.js b/src/components/common/map/sidebar.js
new file mode 100644
index 000000000..0a22a5079
--- /dev/null
+++ b/src/components/common/map/sidebar.js
@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import { Form, Input } from '~components/common/form'
+import { Row, Col } from '~components/common/grid'
+import sidebarStyle from './sidebar.module.scss'
+
+const Sidebar = ({ children, map }) => {
+  const [query, setQuery] = useState(false)
+
+  return (
+    <div className={sidebarStyle.sidebar}>
+      <Form
+        onSubmit={event => {
+          event.preventDefault()
+          if (
+            typeof window === 'undefined' ||
+            typeof window.fetch === 'undefined'
+          ) {
+            return
+          }
+          window
+            .fetch(
+              `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
+                query,
+              )}.json?limit=1&access_token=${
+                process.env.GATSBY_MAPBOX_API_TOKEN
+              }`,
+            )
+            .then(response => response.json())
+            .then(response => {
+              if (response.features.length === 0) {
+                return
+              }
+              const feature = response.features.pop()
+              map.easeTo({
+                center: feature.center,
+                zoom: 7,
+              })
+            })
+        }}
+        noMargin
+      >
+        <Row>
+          <Col width={[4, 6, 8]}>
+            <Input
+              type="text"
+              label="Search facilities"
+              placeholder="Enter a city or zip code"
+              hideLabel
+              onChange={event => {
+                setQuery(event.target.value)
+              }}
+            />
+          </Col>
+          <Col width={[4, 6, 4]} paddingLeft={[0, 0, 8]}>
+            <button type="submit" className={sidebarStyle.searchButton}>
+              Search
+            </button>
+          </Col>
+        </Row>
+      </Form>
+      {children}
+    </div>
+  )
+}
+
+export default Sidebar
diff --git a/src/components/common/map/sidebar.module.scss b/src/components/common/map/sidebar.module.scss
new file mode 100644
index 000000000..486b55d59
--- /dev/null
+++ b/src/components/common/map/sidebar.module.scss
@@ -0,0 +1,40 @@
+.sidebar {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  width: 100%;
+  order: 1;
+  input[type='text'] {
+    margin-bottom: 0;
+  }
+  p {
+    @include margin(16, left);
+  }
+  table {
+    overflow-y: scroll;
+    &[aria-hidden] {
+      margin-bottom: 0;
+    }
+    th {
+      padding-top: 0;
+    }
+    button {
+      @include remove-button-style();
+      text-align: left;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+  form {
+    background: $color-slate-100;
+    @include padding(16, top left right);
+  }
+  @media (min-width: $viewport-md) {
+    order: 0;
+    max-width: 25%;
+    flex-basis: 25%;
+  }
+  @media (min-width: $viewport-lg) {
+    max-width: 30%;
+    flex-basis: 30%;
+  }
+}
diff --git a/src/components/common/map/wrapper.js b/src/components/common/map/wrapper.js
new file mode 100644
index 000000000..d8e8756b9
--- /dev/null
+++ b/src/components/common/map/wrapper.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import wrapperStyle from './wrapper.module.scss'
+
+const Wrapper = ({ children }) => (
+  <div className={wrapperStyle.wrapper} role="img">
+    <div className={wrapperStyle.inset}>{children}</div>
+  </div>
+)
+
+export default Wrapper
diff --git a/src/components/common/map/wrapper.module.scss b/src/components/common/map/wrapper.module.scss
new file mode 100644
index 000000000..e8c01042b
--- /dev/null
+++ b/src/components/common/map/wrapper.module.scss
@@ -0,0 +1,22 @@
+.wrapper {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  width: 100%;
+  order: 0;
+  @media (min-width: $viewport-md) {
+    order: 1;
+    max-width: 75%;
+    flex-basis: 75%;
+  }
+  @media (min-width: $viewport-lg) {
+    max-width: 70%;
+    flex-basis: 70%;
+  }
+}
+
+.inset {
+  position: relative;
+  flex: 1 0 auto;
+  width: 100%;
+  height: 80vh;
+}
diff --git a/src/components/pages/data/hhs-facilities/map/index.js b/src/components/pages/data/hhs-facilities/map/index.js
index c65e25fd1..9f3d482ed 100644
--- a/src/components/pages/data/hhs-facilities/map/index.js
+++ b/src/components/pages/data/hhs-facilities/map/index.js
@@ -3,13 +3,15 @@ import React, { useEffect, useState, useRef } from 'react'
 import mapboxgl from 'mapbox-gl'
 import url from 'url'
 import Container from '~components/common/container'
-import { Form, Input } from '~components/common/form'
-import { Row, Col } from '~components/common/grid'
 import { Table, Th, Td } from '~components/common/table'
 import FacilityDetails from '../facility-details'
 import Legend from './legend'
 import FieldValue from '../field-value'
 import Infobox from './infobox'
+import Sidebar from '~components/common/map/sidebar'
+import Overlay from '~components/common/map/overlay'
+import Wrapper from '~components/common/map/wrapper'
+import MapContext from '~components/common/map/map-context'
 import Definitions from '../definitions'
 import stateCenters from '~data/visualization/state-centers.json'
 import facilitiesMapStyles from './map.module.scss'
@@ -17,9 +19,8 @@ import 'mapbox-gl/dist/mapbox-gl.css'
 
 const HHSFacilitiesMap = ({ center, zoom }) => {
   mapboxgl.accessToken = process.env.GATSBY_MAPBOX_API_TOKEN
-  const [layer, setLayer] = useState('patients')
+  const [mapLayer, setMapLayer] = useState('patients')
   const [activeFacility, setActiveFacility] = useState(false)
-  const [query, setQuery] = useState(false)
   const [facilities, setFacilities] = useState(false)
   const [tooltip, setTooltip] = useState({ x: 0, y: 0 })
   const [highlightedFacility, setHighlightedFacility] = useState(false)
@@ -207,80 +208,29 @@ const HHSFacilitiesMap = ({ center, zoom }) => {
         mapRef.current.setLayoutProperty(
           subLayer,
           'visibility',
-          layer === key ? 'visible' : 'none',
+          mapLayer === key ? 'visible' : 'none',
         )
       })
     })
-  }, [layer])
+  }, [mapLayer])
 
   return (
-    <>
-      <Legend
-        mapLayer={layer}
-        setLayer={newLayer => setLayer(newLayer)}
-        date={mapDate}
-      />
+    <MapContext.Provider
+      value={{
+        mapLayer,
+        setMapLayer,
+        infoboxPosition: tooltip,
+      }}
+    >
+      <Legend date={mapDate} />
       <div className={facilitiesMapStyles.container} aria-hidden>
-        <div className={facilitiesMapStyles.sidebar}>
-          <Form
-            onSubmit={event => {
-              event.preventDefault()
-              if (
-                typeof window === 'undefined' ||
-                typeof window.fetch === 'undefined'
-              ) {
-                return
-              }
-              window
-                .fetch(
-                  `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
-                    query,
-                  )}.json?limit=1&access_token=${
-                    process.env.GATSBY_MAPBOX_API_TOKEN
-                  }`,
-                )
-                .then(response => response.json())
-                .then(response => {
-                  if (response.features.length === 0) {
-                    return
-                  }
-                  const feature = response.features.pop()
-                  mapRef.current.easeTo({
-                    center: feature.center,
-                    zoom: 11,
-                  })
-                })
-            }}
-            noMargin
-          >
-            <Row>
-              <Col width={[4, 6, 8]}>
-                <Input
-                  type="text"
-                  label="Search facilities"
-                  placeholder="Enter a city or zip code"
-                  hideLabel
-                  onChange={event => {
-                    setQuery(event.target.value)
-                  }}
-                />
-              </Col>
-              <Col width={[4, 6, 4]} paddingLeft={[0, 0, 8]}>
-                <button
-                  type="submit"
-                  className={facilitiesMapStyles.searchButton}
-                >
-                  Search
-                </button>
-              </Col>
-            </Row>
-          </Form>
+        <Sidebar map={mapRef.current}>
           <Table ariaHidden>
             <thead>
               <tr>
                 <Th alignLeft>Name</Th>
                 <Th>
-                  7-day average COVID {layer === 'icu' && <>ICU</>} patients
+                  7-day average COVID {mapLayer === 'icu' && <>ICU</>} patients
                 </Th>
               </tr>
             </thead>
@@ -292,7 +242,8 @@ const HHSFacilitiesMap = ({ center, zoom }) => {
                   <tr>
                     <Th alignLeft>Name</Th>
                     <Th>
-                      7-day average COVID {layer === 'icu' && <>ICU</>} patients
+                      7-day average COVID {mapLayer === 'icu' && <>ICU</>}{' '}
+                      patients
                     </Th>
                   </tr>
                 </thead>
@@ -325,7 +276,7 @@ const HHSFacilitiesMap = ({ center, zoom }) => {
                         </button>
                       </Td>
                       <Td>
-                        {layer === 'patients' && (
+                        {mapLayer === 'patients' && (
                           <FieldValue
                             field={
                               facility.properties
@@ -334,7 +285,7 @@ const HHSFacilitiesMap = ({ center, zoom }) => {
                           />
                         )}
 
-                        {layer === 'icu' && (
+                        {mapLayer === 'icu' && (
                           <FieldValue
                             field={
                               facility.properties
@@ -357,52 +308,37 @@ const HHSFacilitiesMap = ({ center, zoom }) => {
               )}
             </p>
           )}
-        </div>
-        <div className={facilitiesMapStyles.mapWrapper} role="img">
-          <div className={facilitiesMapStyles.mapInset}>
-            {revealedFacility && (
-              <>
-                <div
-                  role="dialog"
-                  className={facilitiesMapStyles.facilityCardOverlay}
-                  onClick={() => setRevealedFacility(false)}
-                />
-                <div className={facilitiesMapStyles.facilityCard} role="dialog">
-                  <button
-                    className={facilitiesMapStyles.close}
-                    type="button"
-                    onClick={event => {
-                      event.preventDefault()
-                      setRevealedFacility(false)
-                    }}
-                  >
-                    &times;
-                  </button>
-                  <FacilityDetails facility={activeFacility} />
-                </div>
-              </>
-            )}
+        </Sidebar>
+        <Wrapper>
+          {revealedFacility && (
+            <Overlay
+              close={() => {
+                setRevealedFacility(false)
+              }}
+            >
+              <FacilityDetails facility={activeFacility} />
+            </Overlay>
+          )}
 
-            {activeFacility && (
-              <Infobox
-                layer={layer}
-                facility={activeFacility}
-                x={tooltip.x}
-                y={tooltip.y}
-              />
-            )}
-            <div
-              ref={mapNode}
-              className={facilitiesMapStyles.map}
-              style={{ width: '100%', height: '100%' }}
+          {activeFacility && (
+            <Infobox
+              layer={mapLayer}
+              facility={activeFacility}
+              x={tooltip.x}
+              y={tooltip.y}
             />
-          </div>
-        </div>
+          )}
+          <div
+            ref={mapNode}
+            className={facilitiesMapStyles.map}
+            style={{ width: '100%', height: '100%' }}
+          />
+        </Wrapper>
       </div>
       <Container>
         <Definitions />
       </Container>
-    </>
+    </MapContext.Provider>
   )
 }
 
diff --git a/src/components/pages/data/hhs-facilities/map/infobox.js b/src/components/pages/data/hhs-facilities/map/infobox.js
index 7a58f0c68..f0e63876c 100644
--- a/src/components/pages/data/hhs-facilities/map/infobox.js
+++ b/src/components/pages/data/hhs-facilities/map/infobox.js
@@ -1,16 +1,10 @@
 /* eslint-disable max-len */
 import React from 'react'
 import FieldValue from '../field-value'
-import infoboxStyle from './infobox.module.scss'
+import Infobox from '~components/common/map/infobox'
 
-const Infobox = ({ layer, facility, x, y }) => (
-  <div
-    className={infoboxStyle.infobox}
-    style={{
-      left: Math.max(10, x - 175),
-      top: y + 15,
-    }}
-  >
+const HhsInfobox = ({ layer, facility, x, y }) => (
+  <Infobox x={x} y={y}>
     <h3>{facility.hospital_name}</h3>
     {layer === 'patients' && (
       <>
@@ -51,7 +45,7 @@ const Infobox = ({ layer, facility, x, y }) => (
       </>
     )}
     <p>Click to view more information</p>
-  </div>
+  </Infobox>
 )
 
-export default Infobox
+export default HhsInfobox
diff --git a/src/components/pages/data/hhs-facilities/map/infobox.module.scss b/src/components/pages/data/hhs-facilities/map/infobox.module.scss
deleted file mode 100644
index 4858c477a..000000000
--- a/src/components/pages/data/hhs-facilities/map/infobox.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.infobox {
-  display: none;
-  @media (hover: hover) {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    width: 350px;
-    border: 1px solid $color-slate-700;
-    background: white;
-    @include padding(16);
-    @include type-size(100);
-    h3 {
-      @include type-size(100);
-      font-weight: bold;
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-  }
-  p {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
diff --git a/src/components/pages/data/hhs-facilities/map/legend.js b/src/components/pages/data/hhs-facilities/map/legend.js
index 9d8aabdcd..9a5a6e1d3 100644
--- a/src/components/pages/data/hhs-facilities/map/legend.js
+++ b/src/components/pages/data/hhs-facilities/map/legend.js
@@ -1,90 +1,88 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { DateTime } from 'luxon'
 import { FormatDate } from '~components/utils/format'
 import Container from '~components/common/container'
 import { Row, Col } from '~components/common/grid'
+import LayerToggle from '~components/common/map/layer-toggle'
+import MapContext from '~components/common/map/map-context'
 import legendStyles from './legend.module.scss'
 
-const Legend = ({ mapLayer, setLayer, date }) => (
-  <Container>
-    <Row className={legendStyles.wrapper}>
-      <Col width={[4, 6, 6]} paddingRight={[0, 0, 0]}>
-        <div
-          className={legendStyles.toggle}
-          role="group"
-          aria-label="Toggle map layers"
-        >
-          <button
-            className={mapLayer === 'patients' && legendStyles.active}
-            type="button"
-            onClick={() => {
-              setLayer('patients')
-            }}
-          >
-            All inpatients
-          </button>
-          <button
-            className={mapLayer === 'icu' && legendStyles.active}
-            type="button"
-            onClick={() => {
-              setLayer('icu')
-            }}
-          >
-            ICU patients
-          </button>
-        </div>
-        <p className={legendStyles.dates}>
-          Data for <FormatDate date={date} format="LLLL d, yyyy" /> to{' '}
-          <FormatDate
-            date={DateTime.fromISO(date)
-              .plus({ days: 6 })
-              .toISO()}
-            format="LLLL d, yyyy"
+const Legend = ({ date }) => {
+  const mapContext = useContext(MapContext)
+  return (
+    <Container>
+      <Row className={legendStyles.wrapper}>
+        <Col width={[4, 6, 6]} paddingRight={[0, 0, 0]}>
+          <LayerToggle
+            layers={[
+              {
+                id: 'patients',
+                name: 'All inpatients',
+              },
+              {
+                id: 'icu',
+                name: 'ICU patients',
+              },
+            ]}
           />
-        </p>
-      </Col>
-      <Col width={[4, 6, 6]} paddingLeft={[0, 0, 16]}>
-        <div className={legendStyles.legend} aria-hidden>
-          <div>
-            <div className={legendStyles.label}>
-              % of {mapLayer === 'patients' ? <>hospital</> : <>ICU</>} beds
-              with COVID patients
-            </div>
-            <div className={legendStyles.scale}>
-              <div>
-                <div />
-                N/A
-              </div>
-              <div>
-                <div />
-                0%
-              </div>
-              <div>
-                <div />
-                {'<'}15%
+          <p className={legendStyles.dates}>
+            Data for <FormatDate date={date} format="LLLL d, yyyy" /> to{' '}
+            <FormatDate
+              date={DateTime.fromISO(date)
+                .plus({ days: 6 })
+                .toISO()}
+              format="LLLL d, yyyy"
+            />
+          </p>
+        </Col>
+        <Col width={[4, 6, 6]} paddingLeft={[0, 0, 16]}>
+          <div className={legendStyles.legend} aria-hidden>
+            <div>
+              <div className={legendStyles.label}>
+                % of{' '}
+                {mapContext.mapLayer === 'patients' ? <>hospital</> : <>ICU</>}{' '}
+                beds with COVID patients
               </div>
-              <div>
-                <div />
-                15-30%
+              <div className={legendStyles.scale}>
+                <div>
+                  <div />
+                  N/A
+                </div>
+                <div>
+                  <div />
+                  0%
+                </div>
+                <div>
+                  <div />
+                  {'<'}15%
+                </div>
+                <div>
+                  <div />
+                  15-30%
+                </div>
+                <div>
+                  <div />
+                  30-45%
+                </div>
+                <div>
+                  <div />
+                  {'>'}45%
+                </div>
               </div>
-              <div>
-                <div />
-                30-45%
+              <div className={legendStyles.label}>
+                Circle size indicates total COVID{' '}
+                {mapContext.mapLayer === 'patients' ? (
+                  <>inpatients</>
+                ) : (
+                  <>ICU patients</>
+                )}
               </div>
-              <div>
-                <div />
-                {'>'}45%
-              </div>
-            </div>
-            <div className={legendStyles.label}>
-              Circle size indicates total COVID{' '}
-              {mapLayer === 'patients' ? <>inpatients</> : <>ICU patients</>}
             </div>
           </div>
-        </div>
-      </Col>
-    </Row>
-  </Container>
-)
+        </Col>
+      </Row>
+    </Container>
+  )
+}
 
 export default Legend
diff --git a/src/components/pages/data/hhs-facilities/map/legend.module.scss b/src/components/pages/data/hhs-facilities/map/legend.module.scss
index c98a4863f..0e92c709c 100644
--- a/src/components/pages/data/hhs-facilities/map/legend.module.scss
+++ b/src/components/pages/data/hhs-facilities/map/legend.module.scss
@@ -68,35 +68,3 @@
   @include type-size(100);
   @include margin(8, bottom top);
 }
-
-.toggle {
-  cursor: pointer;
-  @include margin(8, bottom);
-  display: flex;
-  width: fit-content;
-  button {
-    @include remove-button-style();
-    color: $color-slate-600;
-    border: solid $color-slate-200 2px;
-    font-weight: initial;
-    &:before {
-      display: block;
-      content: attr(title);
-      font-weight: 700;
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-    }
-    @include type-size(100);
-    margin: -1px; // ignore-style-rule
-    padding: 2px 15px; // ignore-style-rule
-    white-space: nowrap;
-
-    &.active {
-      color: black;
-      border: solid black 2px;
-      font-weight: 700;
-      z-index: 1;
-    }
-  }
-}
diff --git a/src/components/pages/data/hhs-facilities/map/map.module.scss b/src/components/pages/data/hhs-facilities/map/map.module.scss
index db1bff809..3751291a9 100644
--- a/src/components/pages/data/hhs-facilities/map/map.module.scss
+++ b/src/components/pages/data/hhs-facilities/map/map.module.scss
@@ -2,72 +2,6 @@
   @include row();
 }
 
-.sidebar,
-.map-wrapper {
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  width: 100%;
-}
-
-.sidebar {
-  order: 1;
-  input[type='text'] {
-    margin-bottom: 0;
-  }
-  p {
-    @include margin(16, left);
-  }
-  table {
-    overflow-y: scroll;
-    &[aria-hidden] {
-      margin-bottom: 0;
-    }
-    th {
-      padding-top: 0;
-    }
-    button {
-      @include remove-button-style();
-      text-align: left;
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-  form {
-    background: $color-slate-100;
-    @include padding(16, top left right);
-  }
-  @media (min-width: $viewport-md) {
-    order: 0;
-    max-width: 25%;
-    flex-basis: 25%;
-  }
-  @media (min-width: $viewport-lg) {
-    max-width: 30%;
-    flex-basis: 30%;
-  }
-}
-
-.map-wrapper {
-  order: 0;
-  @media (min-width: $viewport-md) {
-    order: 1;
-
-    max-width: 75%;
-    flex-basis: 75%;
-  }
-  @media (min-width: $viewport-lg) {
-    max-width: 70%;
-    flex-basis: 70%;
-  }
-}
-
-.map-inset {
-  position: relative;
-  flex: 1 0 auto;
-  width: 100%;
-  height: 80vh;
-}
-
 .map::before {
   content: '';
   position: absolute;
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index ade72cbff..d045db7cf 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -1,19 +1,20 @@
 /* eslint-disable no-underscore-dangle,max-len,jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/click-events-have-key-events */
 import React, { useEffect, useState, useRef } from 'react'
 import mapboxgl from 'mapbox-gl'
-import { Form, Input } from '~components/common/form'
-import { Row, Col } from '~components/common/grid'
+import Sidebar from '~components/common/map/sidebar'
 import { Table, Th, Td } from '~components/common/table'
+import MapContext from '~components/common/map/map-context'
+import Overlay from '~components/common/map/overlay'
 import FacilityDetails from './facility-details'
 import Legend from './legend'
 import Infobox from './infobox'
+import Wrapper from '~components/common/map/wrapper'
 import facilitiesMapStyles from './map.module.scss'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
 const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   mapboxgl.accessToken = process.env.GATSBY_MAPBOX_API_TOKEN
   const [activeFacility, setActiveFacility] = useState(false)
-  const [query, setQuery] = useState(false)
   const [facilities, setFacilities] = useState(false)
   const [tooltip, setTooltip] = useState({ x: 0, y: 0 })
   const [highlightedFacility, setHighlightedFacility] = useState(false)
@@ -156,63 +157,16 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   }, [mapLayer])
 
   return (
-    <>
+    <MapContext.Provider
+      value={{
+        setMapLayer,
+        mapLayer,
+        infoboxPosition: tooltip,
+      }}
+    >
       <Legend mapLayer={mapLayer} setLayer={layer => setMapLayer(layer)} />
       <div className={facilitiesMapStyles.container} aria-hidden>
-        <div className={facilitiesMapStyles.sidebar}>
-          <Form
-            onSubmit={event => {
-              event.preventDefault()
-              if (
-                typeof window === 'undefined' ||
-                typeof window.fetch === 'undefined'
-              ) {
-                return
-              }
-              window
-                .fetch(
-                  `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
-                    query,
-                  )}.json?limit=1&access_token=${
-                    process.env.GATSBY_MAPBOX_API_TOKEN
-                  }`,
-                )
-                .then(response => response.json())
-                .then(response => {
-                  if (response.features.length === 0) {
-                    return
-                  }
-                  const feature = response.features.pop()
-                  mapRef.current.easeTo({
-                    center: feature.center,
-                    zoom: 7,
-                  })
-                })
-            }}
-            noMargin
-          >
-            <Row>
-              <Col width={[4, 6, 8]}>
-                <Input
-                  type="text"
-                  label="Search facilities"
-                  placeholder="Enter a city or zip code"
-                  hideLabel
-                  onChange={event => {
-                    setQuery(event.target.value)
-                  }}
-                />
-              </Col>
-              <Col width={[4, 6, 4]} paddingLeft={[0, 0, 8]}>
-                <button
-                  type="submit"
-                  className={facilitiesMapStyles.searchButton}
-                >
-                  Search
-                </button>
-              </Col>
-            </Row>
-          </Form>
+        <Sidebar map={mapRef.current}>
           <Table ariaHidden>
             <thead>
               <tr>
@@ -273,44 +227,29 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
               )}
             </p>
           )}
-        </div>
-        <div className={facilitiesMapStyles.mapWrapper} role="img">
-          <div className={facilitiesMapStyles.mapInset}>
-            {revealedFacility && (
-              <>
-                <div
-                  role="dialog"
-                  className={facilitiesMapStyles.facilityCardOverlay}
-                  onClick={() => setRevealedFacility(false)}
-                />
-                <div className={facilitiesMapStyles.facilityCard} role="dialog">
-                  <button
-                    className={facilitiesMapStyles.close}
-                    type="button"
-                    onClick={event => {
-                      event.preventDefault()
-                      setRevealedFacility(false)
-                    }}
-                  >
-                    &times;
-                  </button>
-                  <FacilityDetails facility={activeFacility} />
-                </div>
-              </>
-            )}
+        </Sidebar>
+        <Wrapper>
+          {revealedFacility && (
+            <Overlay
+              close={() => {
+                setRevealedFacility(false)
+              }}
+            >
+              <FacilityDetails facility={activeFacility} />
+            </Overlay>
+          )}
 
-            {activeFacility && (
-              <Infobox facility={activeFacility} x={tooltip.x} y={tooltip.y} />
-            )}
-            <div
-              ref={mapNode}
-              className={facilitiesMapStyles.map}
-              style={{ width: '100%', height: '100%' }}
-            />
-          </div>
-        </div>
+          {activeFacility && (
+            <Infobox facility={activeFacility} x={tooltip.x} y={tooltip.y} />
+          )}
+          <div
+            ref={mapNode}
+            className={facilitiesMapStyles.map}
+            style={{ width: '100%', height: '100%' }}
+          />
+        </Wrapper>
       </div>
-    </>
+    </MapContext.Provider>
   )
 }
 
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 10dca31e2..5c73fd865 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import React from 'react'
-import infoboxStyle from './infobox.module.scss'
+import Infobox from '~components/common/map/infobox'
 
 const Item = ({ title, value }) => (
   <p>
@@ -8,20 +8,14 @@ const Item = ({ title, value }) => (
   </p>
 )
 
-const Infobox = ({ facility, x, y }) => {
+const LtcInfobox = ({ facility, x, y }) => {
   const hasResidentData =
     facility.outbreak_resident_positives ||
     facility.outbreak_resident_deaths ||
     facility.resident_positives ||
     facility.resident_deaths
   return (
-    <div
-      className={infoboxStyle.infobox}
-      style={{
-        left: Math.max(10, x - 175),
-        top: y + 15,
-      }}
-    >
+    <Infobox x={x} y={y}>
       <h3>{facility.facility_name}</h3>
       {hasResidentData ? (
         <>
@@ -60,8 +54,8 @@ const Infobox = ({ facility, x, y }) => {
         </>
       )}
       <p>Click to view more information</p>
-    </div>
+    </Infobox>
   )
 }
 
-export default Infobox
+export default LtcInfobox
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 91f5205a9..13381687a 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -1,37 +1,26 @@
 import React from 'react'
 import classnames from 'classnames'
 import Container from '~components/common/container'
+import LayerToggle from '~components/common/map/layer-toggle'
 import legendStyles from './legend.module.scss'
 import { Col, Row } from '~components/common/grid'
 
-const Legend = ({ mapLayer, setLayer }) => (
+const Legend = () => (
   <Container>
     <Row className={legendStyles.wrapper}>
       <Col width={[4, 6, 4]}>
-        <div
-          className={legendStyles.toggle}
-          role="group"
-          aria-label="Toggle map layers"
-        >
-          <button
-            className={mapLayer === 'cases' && legendStyles.active}
-            type="button"
-            onClick={() => {
-              setLayer('cases')
-            }}
-          >
-            Cases
-          </button>
-          <button
-            className={mapLayer === 'deaths' && legendStyles.active}
-            type="button"
-            onClick={() => {
-              setLayer('deaths')
-            }}
-          >
-            Deaths
-          </button>
-        </div>
+        <LayerToggle
+          layers={[
+            {
+              id: 'cases',
+              name: 'Cases',
+            },
+            {
+              id: 'deaths',
+              name: 'Deaths',
+            },
+          ]}
+        />
       </Col>
       <Col width={[4, 6, 8]}>
         <div className={legendStyles.legend} aria-hidden>
diff --git a/src/components/pages/data/long-term-care/map/legend.module.scss b/src/components/pages/data/long-term-care/map/legend.module.scss
index 8d05cca9a..26d11820f 100644
--- a/src/components/pages/data/long-term-care/map/legend.module.scss
+++ b/src/components/pages/data/long-term-care/map/legend.module.scss
@@ -29,37 +29,6 @@
 
 .no-data {
   display: inline-block;
-  background: $color-honey-300;
+  background: #ffdbc7; // ignore-style-rule
   @include padding(8);
 }
-
-.toggle {
-  cursor: pointer;
-  display: flex;
-  width: fit-content;
-  button {
-    @include remove-button-style();
-    color: $color-slate-600;
-    border: solid $color-slate-200 2px;
-    font-weight: initial;
-    &:before {
-      display: block;
-      content: attr(title);
-      font-weight: 700;
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-    }
-    @include type-size(100);
-    margin: -1px; // ignore-style-rule
-    padding: 2px 15px; // ignore-style-rule
-    white-space: nowrap;
-
-    &.active {
-      color: black;
-      border: solid black 2px;
-      font-weight: 700;
-      z-index: 1;
-    }
-  }
-}
diff --git a/src/components/pages/data/long-term-care/map/map.module.scss b/src/components/pages/data/long-term-care/map/map.module.scss
index db1bff809..69757cc32 100644
--- a/src/components/pages/data/long-term-care/map/map.module.scss
+++ b/src/components/pages/data/long-term-care/map/map.module.scss
@@ -2,72 +2,6 @@
   @include row();
 }
 
-.sidebar,
-.map-wrapper {
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  width: 100%;
-}
-
-.sidebar {
-  order: 1;
-  input[type='text'] {
-    margin-bottom: 0;
-  }
-  p {
-    @include margin(16, left);
-  }
-  table {
-    overflow-y: scroll;
-    &[aria-hidden] {
-      margin-bottom: 0;
-    }
-    th {
-      padding-top: 0;
-    }
-    button {
-      @include remove-button-style();
-      text-align: left;
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-  form {
-    background: $color-slate-100;
-    @include padding(16, top left right);
-  }
-  @media (min-width: $viewport-md) {
-    order: 0;
-    max-width: 25%;
-    flex-basis: 25%;
-  }
-  @media (min-width: $viewport-lg) {
-    max-width: 30%;
-    flex-basis: 30%;
-  }
-}
-
-.map-wrapper {
-  order: 0;
-  @media (min-width: $viewport-md) {
-    order: 1;
-
-    max-width: 75%;
-    flex-basis: 75%;
-  }
-  @media (min-width: $viewport-lg) {
-    max-width: 70%;
-    flex-basis: 70%;
-  }
-}
-
-.map-inset {
-  position: relative;
-  flex: 1 0 auto;
-  width: 100%;
-  height: 80vh;
-}
-
 .map::before {
   content: '';
   position: absolute;
@@ -126,45 +60,3 @@
     margin-top: 0;
   }
 }
-
-.facility-card-overlay {
-  width: 0;
-  position: absolute;
-  height: 100%;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.4);
-  box-shadow: inset 3px 0px 6px -2px rgba(0, 0, 0, 0.8);
-  @media (min-width: $viewport-md) {
-    width: 10%;
-  }
-}
-
-.facility-card {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  overflow-y: scroll;
-  background: white;
-  border-left: 1px solid $color-slate-100;
-  @include padding(16);
-
-  @media (min-width: $viewport-md) {
-    width: 90%;
-  }
-  h2 {
-    margin-top: 0;
-  }
-  .close {
-    @include remove-button-style();
-    float: right;
-    @include type-size(600);
-  }
-}

From 52e1c701c646d7735315ed45aadad1047815ecc8 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Tue, 2 Feb 2021 10:01:40 -0800
Subject: [PATCH 11/47] chore: Sync up legend

---
 .../pages/data/hhs-facilities/map/infobox.js  |   2 +-
 .../pages/data/hhs-facilities/map/legend.js   | 156 +++++++++---------
 2 files changed, 76 insertions(+), 82 deletions(-)

diff --git a/src/components/pages/data/hhs-facilities/map/infobox.js b/src/components/pages/data/hhs-facilities/map/infobox.js
index 23dd5c776..570f2a977 100644
--- a/src/components/pages/data/hhs-facilities/map/infobox.js
+++ b/src/components/pages/data/hhs-facilities/map/infobox.js
@@ -2,7 +2,7 @@
 import React from 'react'
 import FieldValue from '../field-value'
 import Infobox from '~components/common/map/infobox'
-import infoboxStyle from '.~components/common/map/infobox.module.scss'
+import infoboxStyle from '~components/common/map/infobox.module.scss'
 import alertBang from '~images/alert/alert-bang.svg'
 
 const HhsInfobox = ({ layer, facility, x, y }) => (
diff --git a/src/components/pages/data/hhs-facilities/map/legend.js b/src/components/pages/data/hhs-facilities/map/legend.js
index b4d55b212..70a6a9ba5 100644
--- a/src/components/pages/data/hhs-facilities/map/legend.js
+++ b/src/components/pages/data/hhs-facilities/map/legend.js
@@ -1,87 +1,81 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { DateTime } from 'luxon'
 import { FormatDate } from '~components/utils/format'
 import Container from '~components/common/container'
 import { Row, Col } from '~components/common/grid'
-import LayerToggle from '~components/common/map/layer-toggle'
-import MapContext from '~components/common/map/map-context'
 import legendStyles from './legend.module.scss'
 
-const Legend = ({ date }) => {
-  const mapContext = useContext(MapContext)
-  return (
-    <Container>
-      <Row className={legendStyles.wrapper}>
-        <Col width={[4, 6, 6]} paddingRight={[0, 0, 0]}>
-          <LayerToggle
-            layers={[
-              {
-                id: 'patients',
-                name: 'All inpatients',
-              },
-              {
-                id: 'icu',
-                name: 'ICU patients',
-              },
-            ]}
-          />
-          <p className={legendStyles.dates}>
-            {date ? (
-              <>
-                Data for <FormatDate date={date} format="LLLL d, yyyy" /> to{' '}
-                <FormatDate
-                  date={DateTime.fromISO(date)
-                    .plus({ days: 6 })
-                    .toISO()}
-                  format="LLLL d, yyyy"
-                />
-              </>
-            ) : (
-              <>&nbsp;</>
-            )}
-          </p>
-        </Col>
-        <Col width={[4, 6, 6]} paddingLeft={[0, 0, 16]}>
-          <div className={legendStyles.legend} aria-hidden>
-            <div>
-              <div className={legendStyles.label}>
-                % of{' '}
-                {mapContext.mapLayer === 'patients' ? <>hospital</> : <>ICU</>}{' '}
-                beds with COVID patients
+const Legend = ({ mapLayer, setLayer, date }) => (
+  <Container>
+    <Row className={legendStyles.wrapper}>
+      <Col width={[4, 6, 6]} paddingRight={[0, 0, 0]}>
+        <div
+          className={legendStyles.toggle}
+          role="group"
+          aria-label="Toggle map layers"
+        >
+          <button
+            className={mapLayer === 'patients' && legendStyles.active}
+            type="button"
+            onClick={() => {
+              setLayer('patients')
+            }}
+          >
+            All inpatients
+          </button>
+          <button
+            className={mapLayer === 'icu' && legendStyles.active}
+            type="button"
+            onClick={() => {
+              setLayer('icu')
+            }}
+          >
+            ICU patients
+          </button>
+        </div>
+        <p className={legendStyles.dates}>
+          {date ? (
+            <>
+              Data for <FormatDate date={date} format="LLLL d, yyyy" /> to{' '}
+              <FormatDate
+                date={DateTime.fromISO(date)
+                  .plus({ days: 6 })
+                  .toISO()}
+                format="LLLL d, yyyy"
+              />
+            </>
+          ) : (
+            <>&nbsp;</>
+          )}
+        </p>
+      </Col>
+      <Col width={[4, 6, 6]} paddingLeft={[0, 0, 16]}>
+        <div className={legendStyles.legend} aria-hidden>
+          <div>
+            <div className={legendStyles.label}>
+              % of {mapLayer === 'patients' ? <>hospital</> : <>ICU</>} beds
+              with COVID patients
+            </div>
+            <div className={legendStyles.scale}>
+              <div>
+                <div />
+                N/A
+              </div>
+              <div>
+                <div />
+                0%
               </div>
-              <div className={legendStyles.scale}>
-                <div>
-                  <div />
-                  N/A
-                </div>
-                <div>
-                  <div />
-                  0%
-                </div>
-                <div>
-                  <div />
-                  {'<'}15%
-                </div>
-                <div>
-                  <div />
-                  15-30%
-                </div>
-                <div>
-                  <div />
-                  30-45%
-                </div>
-                <div>
-                  <div />
-                  {'>'}45%
-                </div>
+              <div>
+                <div />
+                {'<'}15%
               </div>
-              <div className={legendStyles.label}>
-                Circle size indicates total COVID{' '}
-                {mapContext.mapLayer === 'patients' ? (
-                  <>inpatients</>
-                ) : (
-                  <>ICU patients</>
-                )}
+              <div>
+                <div />
+                15-30%
+              </div>
+              <div>
+                <div />
+                30-45%
               </div>
               <div>
                 <div />
@@ -97,10 +91,10 @@ const Legend = ({ date }) => {
               {mapLayer === 'patients' ? <>inpatients</> : <>ICU patients</>}
             </div>
           </div>
-        </Col>
-      </Row>
-    </Container>
-  )
-}
+        </div>
+      </Col>
+    </Row>
+  </Container>
+)
 
 export default Legend

From b456e4d9dcb08335fb00fc5fd25c4f4ee9a38156 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Thu, 4 Feb 2021 20:00:37 -0800
Subject: [PATCH 12/47] chore: Add cms layer

---
 .../pages/data/long-term-care/map/index.js    | 24 ++++-
 .../pages/data/long-term-care/map/infobox.js  | 70 +++++++++------
 .../pages/data/long-term-care/map/legend.js   | 88 +++++++++++--------
 3 files changed, 110 insertions(+), 72 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index d045db7cf..fe7e2dd22 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -22,7 +22,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   const [currentZoom, setCurrentZoom] = useState(0)
   const [highlighedMarker, setHighlightedMarker] = useState(false)
   const [mapLayer, setMapLayer] = useState('cases')
-  const layers = ['cases', 'deaths']
+  const layers = ['cases', 'deaths', 'cms-cases']
 
   const mapNode = useRef(null)
   const mapRef = useRef(null)
@@ -209,10 +209,21 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
                             setRevealedFacility(true)
                           }}
                         >
-                          {facility.properties.facility_name}
+                          {mapLayer === 'cms-cases'
+                            ? facility.properties.name
+                            : facility.properties.facility_name}
                         </button>
                       </Td>
-                      <Td>{facility.properties.resident_positives}</Td>
+                      <Td>
+                        {mapLayer === 'cms-cases'
+                          ? facility.properties[
+                              'residents-total-confirmed-covid-19'
+                            ] +
+                            facility.properties[
+                              'residents-total-suspected-covid-19'
+                            ]
+                          : facility.properties.resident_positives}
+                      </Td>
                     </tr>
                   ))}
                 </tbody>
@@ -240,7 +251,12 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
           )}
 
           {activeFacility && (
-            <Infobox facility={activeFacility} x={tooltip.x} y={tooltip.y} />
+            <Infobox
+              layer={mapLayer}
+              facility={activeFacility}
+              x={tooltip.x}
+              y={tooltip.y}
+            />
           )}
           <div
             ref={mapNode}
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 5c73fd865..30b44ec56 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -8,7 +8,7 @@ const Item = ({ title, value }) => (
   </p>
 )
 
-const LtcInfobox = ({ facility, x, y }) => {
+const LtcInfobox = ({ layer, facility, x, y }) => {
   const hasResidentData =
     facility.outbreak_resident_positives ||
     facility.outbreak_resident_deaths ||
@@ -16,41 +16,53 @@ const LtcInfobox = ({ facility, x, y }) => {
     facility.resident_deaths
   return (
     <Infobox x={x} y={y}>
-      <h3>{facility.facility_name}</h3>
-      {hasResidentData ? (
+      {layer === 'cms-cases' ? (
         <>
+          <h3>{facility.name}</h3>
           <Item
             title="Resident positives"
-            value={facility.resident_positives}
-          />
-          <Item title="Resident deaths" value={facility.resident_deaths} />
-          <Item
-            title="Outbreak resident positives"
-            value={facility.outbreak_resident_positives}
-          />
-          <Item
-            title="OUtbreak resident positives"
-            value={facility.outbreak_resident_deaths}
+            value={facility['Residents Total Confirmed COVID-19']}
           />
         </>
       ) : (
         <>
-          <Item
-            title="Resident &amp; staff positives"
-            value={facility.resident_staff_positives}
-          />
-          <Item
-            title="Resident &amp; staff deaths"
-            value={facility.resident_staff_deaths}
-          />
-          <Item
-            title="Outbreak resident &amp; staff positives"
-            value={facility.outbreak_resident_staff_positives}
-          />
-          <Item
-            title="OUtbreak resident&amp; staff positives"
-            value={facility.outbreak_resident_staff_deaths}
-          />
+          <h3>{facility.facility_name}</h3>
+          {hasResidentData ? (
+            <>
+              <Item
+                title="Resident positives"
+                value={facility.resident_positives}
+              />
+              <Item title="Resident deaths" value={facility.resident_deaths} />
+              <Item
+                title="Outbreak resident positives"
+                value={facility.outbreak_resident_positives}
+              />
+              <Item
+                title="OUtbreak resident positives"
+                value={facility.outbreak_resident_deaths}
+              />
+            </>
+          ) : (
+            <>
+              <Item
+                title="Resident &amp; staff positives"
+                value={facility.resident_staff_positives}
+              />
+              <Item
+                title="Resident &amp; staff deaths"
+                value={facility.resident_staff_deaths}
+              />
+              <Item
+                title="Outbreak resident &amp; staff positives"
+                value={facility.outbreak_resident_staff_positives}
+              />
+              <Item
+                title="OUtbreak resident&amp; staff positives"
+                value={facility.outbreak_resident_staff_deaths}
+              />
+            </>
+          )}
         </>
       )}
       <p>Click to view more information</p>
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 13381687a..21e6c91be 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -5,7 +5,7 @@ import LayerToggle from '~components/common/map/layer-toggle'
 import legendStyles from './legend.module.scss'
 import { Col, Row } from '~components/common/grid'
 
-const Legend = () => (
+const Legend = ({ mapLayer }) => (
   <Container>
     <Row className={legendStyles.wrapper}>
       <Col width={[4, 6, 4]}>
@@ -19,49 +19,59 @@ const Legend = () => (
               id: 'deaths',
               name: 'Deaths',
             },
+            {
+              id: 'cms-cases',
+              name: 'Federal data',
+            },
           ]}
         />
       </Col>
       <Col width={[4, 6, 8]}>
         <div className={legendStyles.legend} aria-hidden>
-          <div>
-            Long-term care facilities{' '}
-            <span
-              className={classnames(
-                legendStyles.item,
-                legendStyles.notExperiencing,
-              )}
-            >
-              not experiencing
-            </span>{' '}
-            and{' '}
-            <span
-              className={classnames(
-                legendStyles.item,
-                legendStyles.experiencing,
-              )}
-            >
-              experiencing
-            </span>{' '}
-            an outbreak.
-          </div>
-          <div>
-            {' '}
-            Some states{' '}
-            <span
-              className={classnames(
-                legendStyles.item,
-                legendStyles.outbreakOnly,
-              )}
-            >
-              only report outbreaks
-            </span>
-            , and some states{' '}
-            <span className={legendStyles.noData}>
-              don&apos;t report any LTC data
-            </span>
-            .
-          </div>
+          {mapLayer === 'cms-cases' ? (
+            <p>All facilities that report to the federal government.</p>
+          ) : (
+            <>
+              <div>
+                Long-term care facilities{' '}
+                <span
+                  className={classnames(
+                    legendStyles.item,
+                    legendStyles.notExperiencing,
+                  )}
+                >
+                  not experiencing
+                </span>{' '}
+                and{' '}
+                <span
+                  className={classnames(
+                    legendStyles.item,
+                    legendStyles.experiencing,
+                  )}
+                >
+                  experiencing
+                </span>{' '}
+                an outbreak.
+              </div>
+              <div>
+                {' '}
+                Some states{' '}
+                <span
+                  className={classnames(
+                    legendStyles.item,
+                    legendStyles.outbreakOnly,
+                  )}
+                >
+                  only report outbreaks
+                </span>
+                , and some states{' '}
+                <span className={legendStyles.noData}>
+                  don&apos;t report any LTC data
+                </span>
+                .
+              </div>
+            </>
+          )}
         </div>
       </Col>
     </Row>

From dd613b48e6d271ddc9d92d275d75a88a895bfe8b Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 5 Feb 2021 09:21:08 -0800
Subject: [PATCH 13/47] chore: Add CMS detail view

---
 .../long-term-care/map/facility-details.js    | 120 +++++++++++++-----
 .../pages/data/long-term-care/map/index.js    |   4 +-
 .../pages/data/long-term-care/map/infobox.js  |  20 ++-
 .../pages/data/long-term-care/map/legend.js   |   8 +-
 4 files changed, 115 insertions(+), 37 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index 586a55b96..625914727 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -1,42 +1,98 @@
 import React from 'react'
 import facilityDetailsStyle from './facility-details.module.scss'
 
-const fields = [
-  {
-    title: 'Resident positives',
-    field: 'resident_positives',
-  },
-  {
-    title: 'Resident deaths',
-    field: 'resident_deaths',
-  },
-  {
-    title: 'Outbreak resident positives',
-    field: 'outbreak_resident_positives',
-  },
-  {
-    title: 'Outbreak resident deaths',
-    field: 'outbreak_resident_deaths',
-  },
-  {
-    title: 'Staff cases',
-    field: 'staff_positives',
-  },
-  {
-    title: 'Staff deaths',
-    field: 'staff_deaths',
-  },
-]
+const fields = {
+  ltc: [
+    {
+      title: 'Resident positives',
+      field: 'resident_positives',
+    },
+    {
+      title: 'Resident deaths',
+      field: 'resident_deaths',
+    },
+    {
+      title: 'Outbreak resident positives',
+      field: 'outbreak_resident_positives',
+    },
+    {
+      title: 'Outbreak resident deaths',
+      field: 'outbreak_resident_deaths',
+    },
+    {
+      title: 'Staff cases',
+      field: 'staff_positives',
+    },
+    {
+      title: 'Staff deaths',
+      field: 'staff_deaths',
+    },
+  ],
+  cms: [
+    {
+      title: 'Collection date',
+      field: 'date',
+    },
+    {
+      title: 'Resident total confirmed cases',
+      field: 'residents-total-confirmed-covid-19',
+    },
+    {
+      title: 'Resident total suspected cases',
+      field: 'residents-total-suspected-covid-19',
+    },
+    {
+      title: 'Resident weekly confirmed cases',
+      field: 'residents-weekly-confirmed-covid-19',
+    },
+    {
+      title: 'Resident weekly suspected cases',
+      field: 'residents-weekly-suspected-covid-19',
+    },
+    {
+      title: 'Resident total deaths',
+      field: 'residents-total-all-deaths',
+    },
+    {
+      title: 'Staff total confirmed cases',
+      field: 'staff-total-confirmed-covid-19',
+    },
+    {
+      title: 'Staff total suspected cases',
+      field: 'staff-total-suspected-covid-19',
+    },
+    {
+      title: 'Staff weekly confirmed cases',
+      field: 'staff-weekly-confirmed-covid-19',
+    },
+    {
+      title: 'Staff weekly suspected cases',
+      field: 'staff-weekly-suspected-covid-19',
+    },
+    {
+      title: 'Staff total deaths',
+      field: 'staff-total-all-deaths',
+    },
+  ],
+}
 
-const FacilityDetails = ({ facility }) => (
+const FacilityDetails = ({ facility, layer }) => (
   <>
-    <h2>{facility.facility_name}</h2>
+    <h2>
+      {layer === 'cms-cases' || layer === 'cms-deaths' ? (
+        <>{facility.name}</>
+      ) : (
+        <>{facility.facility_name}</>
+      )}
+    </h2>
 
     <dl className={facilityDetailsStyle.details}>
-      {Object.keys(fields).map(key => (
-        <div key={key}>
-          <dt>{fields[key].title}</dt>
-          <dd>{facility[fields[key].field] || <>N/A</>}</dd>
+      {fields[
+        layer === 'cms-cases' || layer === 'cms-deaths' ? 'cms' : 'ltc'
+      ].map(({ title, field }) => (
+        <div key={field}>
+          <dt>{title}</dt>
+          <dd>{facility[field] || <>N/A</>}</dd>
         </div>
       ))}
     </dl>
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index fe7e2dd22..478b4a3bc 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -22,7 +22,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   const [currentZoom, setCurrentZoom] = useState(0)
   const [highlighedMarker, setHighlightedMarker] = useState(false)
   const [mapLayer, setMapLayer] = useState('cases')
-  const layers = ['cases', 'deaths', 'cms-cases']
+  const layers = ['cases', 'deaths', 'cms-cases', 'cms-deaths']
 
   const mapNode = useRef(null)
   const mapRef = useRef(null)
@@ -246,7 +246,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
                 setRevealedFacility(false)
               }}
             >
-              <FacilityDetails facility={activeFacility} />
+              <FacilityDetails facility={activeFacility} layer={mapLayer} />
             </Overlay>
           )}
 
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 30b44ec56..9bc7ee819 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -21,7 +21,25 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
           <h3>{facility.name}</h3>
           <Item
             title="Resident positives"
-            value={facility['Residents Total Confirmed COVID-19']}
+            value={
+              facility['residents-total-suspected-covid-19'] +
+              facility['residents-total-confirmed-covid-19']
+            }
+          />
+          <Item
+            title="Resident deaths"
+            value={facility['residents-total-all-deaths']}
+          />
+          <Item
+            title="Staff positives"
+            value={
+              facility['staff-total-suspected-covid-19'] +
+              facility['staff-total-confirmed-covid-19']
+            }
+          />
+          <Item
+            title="Staff deaths"
+            value={facility['staff-total-all-deaths']}
           />
         </>
       ) : (
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 21e6c91be..4fd22aa6e 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -21,14 +21,18 @@ const Legend = ({ mapLayer }) => (
             },
             {
               id: 'cms-cases',
-              name: 'Federal data',
+              name: 'Federal case data',
+            },
+            {
+              id: 'cms-deaths',
+              name: 'Federal death data',
             },
           ]}
         />
       </Col>
       <Col width={[4, 6, 8]}>
         <div className={legendStyles.legend} aria-hidden>
-          {mapLayer === 'cms-cases' ? (
+          {mapLayer === 'cms-cases' || mapLayer === 'cms-deaths' ? (
             <p>All facilities that report to the federal government.</p>
           ) : (
             <>

From 36b0c13090f25ea2a36fae36386447557d37d8a4 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 5 Feb 2021 09:27:31 -0800
Subject: [PATCH 14/47] chore: Fix infobox

---
 src/components/pages/data/long-term-care/map/infobox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 9bc7ee819..73f84e987 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -16,7 +16,7 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
     facility.resident_deaths
   return (
     <Infobox x={x} y={y}>
-      {layer === 'cms-cases' ? (
+      {layer === 'cms-cases' || layer === 'cms-deaths' ? (
         <>
           <h3>{facility.name}</h3>
           <Item

From fa52bf684f3128c14d4d263f12dbb3d17303530e Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 5 Feb 2021 09:40:40 -0800
Subject: [PATCH 15/47] chore: Fix sidebar for CMS deaths

---
 src/components/pages/data/long-term-care/map/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 478b4a3bc..7971d159d 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -209,13 +209,13 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
                             setRevealedFacility(true)
                           }}
                         >
-                          {mapLayer === 'cms-cases'
+                          {mapLayer === 'cms-cases' || mapLayer === 'cms-deaths'
                             ? facility.properties.name
                             : facility.properties.facility_name}
                         </button>
                       </Td>
                       <Td>
-                        {mapLayer === 'cms-cases'
+                        {mapLayer === 'cms-cases' || mapLayer === 'cms-deaths'
                           ? facility.properties[
                               'residents-total-confirmed-covid-19'
                             ] +

From 9b99b246cf2987705c8166318e494fa0f1b0954f Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 5 Feb 2021 11:00:08 -0800
Subject: [PATCH 16/47] chore: Just use CMS cases

---
 src/components/pages/data/long-term-care/map/legend.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 4fd22aa6e..28d95b07d 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -21,11 +21,7 @@ const Legend = ({ mapLayer }) => (
             },
             {
               id: 'cms-cases',
-              name: 'Federal case data',
-            },
-            {
-              id: 'cms-deaths',
-              name: 'Federal death data',
+              name: 'Federal data',
             },
           ]}
         />

From c8412fb734540668bfd1d798bca605fa1351ae79 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Fri, 5 Feb 2021 11:04:19 -0800
Subject: [PATCH 17/47] chore: Remove death layer

---
 .../pages/data/long-term-care/map/facility-details.js | 11 +++++++----
 src/components/pages/data/long-term-care/map/index.js |  6 +++---
 .../pages/data/long-term-care/map/infobox.js          |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index 625914727..8c004854c 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -79,17 +79,20 @@ const fields = {
 const FacilityDetails = ({ facility, layer }) => (
   <>
     <h2>
-      {layer === 'cms-cases' || layer === 'cms-deaths' ? (
+      {layer === 'cms-cases' ? (
         <>{facility.name}</>
       ) : (
         <>{facility.facility_name}</>
       )}
     </h2>
+    {layer === 'cms-cases' && (
+      <p>
+        {facility.city}, {facility.state}
+      </p>
+    )}
 
     <dl className={facilityDetailsStyle.details}>
-      {fields[
-        layer === 'cms-cases' || layer === 'cms-deaths' ? 'cms' : 'ltc'
-      ].map(({ title, field }) => (
+      {fields[layer === 'cms-cases' ? 'cms' : 'ltc'].map(({ title, field }) => (
         <div key={field}>
           <dt>{title}</dt>
           <dd>{facility[field] || <>N/A</>}</dd>
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 7971d159d..79ffd2e15 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -22,7 +22,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   const [currentZoom, setCurrentZoom] = useState(0)
   const [highlighedMarker, setHighlightedMarker] = useState(false)
   const [mapLayer, setMapLayer] = useState('cases')
-  const layers = ['cases', 'deaths', 'cms-cases', 'cms-deaths']
+  const layers = ['cases', 'deaths', 'cms-cases']
 
   const mapNode = useRef(null)
   const mapRef = useRef(null)
@@ -209,13 +209,13 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
                             setRevealedFacility(true)
                           }}
                         >
-                          {mapLayer === 'cms-cases' || mapLayer === 'cms-deaths'
+                          {mapLayer === 'cms-cases'
                             ? facility.properties.name
                             : facility.properties.facility_name}
                         </button>
                       </Td>
                       <Td>
-                        {mapLayer === 'cms-cases' || mapLayer === 'cms-deaths'
+                        {mapLayer === 'cms-cases'
                           ? facility.properties[
                               'residents-total-confirmed-covid-19'
                             ] +
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 73f84e987..9bc7ee819 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -16,7 +16,7 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
     facility.resident_deaths
   return (
     <Infobox x={x} y={y}>
-      {layer === 'cms-cases' || layer === 'cms-deaths' ? (
+      {layer === 'cms-cases' ? (
         <>
           <h3>{facility.name}</h3>
           <Item

From 91028990c7e19cd3515d2dcb227d9e8a16cf50ad Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Tue, 9 Feb 2021 10:52:17 -0800
Subject: [PATCH 18/47] chore: Change to four-layer map

---
 .../pages/data/long-term-care/map/index.js    | 43 ++++++++++++++++++-
 .../pages/data/long-term-care/map/legend.js   | 29 +++++--------
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 79ffd2e15..b3551916f 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -22,7 +22,13 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   const [currentZoom, setCurrentZoom] = useState(0)
   const [highlighedMarker, setHighlightedMarker] = useState(false)
   const [mapLayer, setMapLayer] = useState('cases')
-  const layers = ['cases', 'deaths', 'cms-cases']
+  const layers = [
+    'cases',
+    'deaths',
+    'cases-outbreak-only',
+    'deaths-outbreak-only',
+    'cms-cases',
+  ]
 
   const mapNode = useRef(null)
   const mapRef = useRef(null)
@@ -68,6 +74,39 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
     )
   }
 
+  useEffect(() => {
+    if (!mapRef.current) {
+      return
+    }
+    if (mapLayer === 'cms-cases') {
+      mapRef.current.setLayoutProperty(
+        'states-outbreak-only',
+        'visibility',
+        'none',
+      )
+
+      mapRef.current.setLayoutProperty('states-all-data', 'visibility', 'none')
+
+      mapRef.current.setLayoutProperty('states', 'visibility', 'none')
+      return
+    }
+
+    mapRef.current.setLayoutProperty('states', 'visibility', 'visible')
+    mapRef.current.setLayoutProperty(
+      'states-outbreak-only',
+      'visibility',
+      ['cases', 'deaths'].indexOf(mapLayer) > -1 ? 'visible' : 'none',
+    )
+
+    mapRef.current.setLayoutProperty(
+      'states-all-data',
+      'visibility',
+      ['cases-outbreak-only', 'deaths-outbreak-only'].indexOf(mapLayer) > -1
+        ? 'visible'
+        : 'none',
+    )
+  }, [mapLayer])
+
   useEffect(() => {
     if (!highlightedFacility || !highlightedFacility.geometry) {
       return
@@ -96,7 +135,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
 
     const map = new mapboxgl.Map({
       container: mapNode.current,
-      style: 'mapbox://styles/covidtrackingproject/ckfeoswng0hc219o24blw5utn',
+      style: 'mapbox://styles/covidtrackingproject/ckkx6v37q178u17qtj0dn36b5',
       center: hash.length > 2 ? [hash[0], hash[1]] : center,
       zoom: hash.length > 2 ? hash[2] : zoom,
     })
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 28d95b07d..94903ecc4 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -8,7 +8,7 @@ import { Col, Row } from '~components/common/grid'
 const Legend = ({ mapLayer }) => (
   <Container>
     <Row className={legendStyles.wrapper}>
-      <Col width={[4, 6, 4]}>
+      <Col width={[4, 6, 6]}>
         <LayerToggle
           layers={[
             {
@@ -19,6 +19,14 @@ const Legend = ({ mapLayer }) => (
               id: 'deaths',
               name: 'Deaths',
             },
+            {
+              id: 'cases-outbreak-only',
+              name: 'Outbreak Cases',
+            },
+            {
+              id: 'deaths-outbreak-only',
+              name: 'Outbreak Deaths',
+            },
             {
               id: 'cms-cases',
               name: 'Federal data',
@@ -26,7 +34,7 @@ const Legend = ({ mapLayer }) => (
           ]}
         />
       </Col>
-      <Col width={[4, 6, 8]}>
+      <Col width={[4, 6, 6]}>
         <div className={legendStyles.legend} aria-hidden>
           {mapLayer === 'cms-cases' || mapLayer === 'cms-deaths' ? (
             <p>All facilities that report to the federal government.</p>
@@ -53,23 +61,6 @@ const Legend = ({ mapLayer }) => (
                 </span>{' '}
                 an outbreak.
               </div>
-              <div>
-                {' '}
-                Some states{' '}
-                <span
-                  className={classnames(
-                    legendStyles.item,
-                    legendStyles.outbreakOnly,
-                  )}
-                >
-                  only report outbreaks
-                </span>
-                , and some states{' '}
-                <span className={legendStyles.noData}>
-                  don&apos;t report any LTC data
-                </span>
-                .
-              </div>
             </>
           )}
         </div>

From 5ade573e7c0def801c3d023a31feb03adb04fd5c Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Tue, 9 Feb 2021 16:22:43 -0800
Subject: [PATCH 19/47] chore: Change base layers

---
 .../pages/data/long-term-care/map/index.js    | 62 ++++++-------------
 .../pages/data/long-term-care/map/legend.js   | 37 ++---------
 2 files changed, 24 insertions(+), 75 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index b3551916f..91e1e595c 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -21,14 +21,8 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   const [revealedFacility, setRevealedFacility] = useState(false)
   const [currentZoom, setCurrentZoom] = useState(0)
   const [highlighedMarker, setHighlightedMarker] = useState(false)
-  const [mapLayer, setMapLayer] = useState('cases')
-  const layers = [
-    'cases',
-    'deaths',
-    'cases-outbreak-only',
-    'deaths-outbreak-only',
-    'cms-cases',
-  ]
+  const [mapLayer, setMapLayer] = useState('facilities')
+  const layers = ['facilities', 'cases', 'deaths', 'cms-cases']
 
   const mapNode = useRef(null)
   const mapRef = useRef(null)
@@ -68,45 +62,15 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
     })
     setCurrentZoom(event.target.getZoom())
     setFacilities(
-      features.sort((a, b) =>
-        a.properties.hospital_name > b.properties.hospital_name ? 1 : -1,
-      ),
+      features.sort((a, b) => {
+        if (mapLayer === 'cms-cases') {
+          return a.properties.name > b.properties.name ? 1 : -1
+        }
+        return a.properties.facility_name > b.properties.facility_name ? 1 : -1
+      }),
     )
   }
 
-  useEffect(() => {
-    if (!mapRef.current) {
-      return
-    }
-    if (mapLayer === 'cms-cases') {
-      mapRef.current.setLayoutProperty(
-        'states-outbreak-only',
-        'visibility',
-        'none',
-      )
-
-      mapRef.current.setLayoutProperty('states-all-data', 'visibility', 'none')
-
-      mapRef.current.setLayoutProperty('states', 'visibility', 'none')
-      return
-    }
-
-    mapRef.current.setLayoutProperty('states', 'visibility', 'visible')
-    mapRef.current.setLayoutProperty(
-      'states-outbreak-only',
-      'visibility',
-      ['cases', 'deaths'].indexOf(mapLayer) > -1 ? 'visible' : 'none',
-    )
-
-    mapRef.current.setLayoutProperty(
-      'states-all-data',
-      'visibility',
-      ['cases-outbreak-only', 'deaths-outbreak-only'].indexOf(mapLayer) > -1
-        ? 'visible'
-        : 'none',
-    )
-  }, [mapLayer])
-
   useEffect(() => {
     if (!highlightedFacility || !highlightedFacility.geometry) {
       return
@@ -193,6 +157,16 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
         layer === mapLayer ? 'visible' : 'none',
       )
     })
+    mapRef.current.setLayoutProperty(
+      'states-outbreak-only-cases',
+      'visibility',
+      mapLayer === 'cases' ? 'visible' : 'none',
+    )
+    mapRef.current.setLayoutProperty(
+      'states-outbreak-only-deaths',
+      'visibility',
+      mapLayer === 'deaths' ? 'visible' : 'none',
+    )
   }, [mapLayer])
 
   return (
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 94903ecc4..20bbf7d9d 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import classnames from 'classnames'
 import Container from '~components/common/container'
 import LayerToggle from '~components/common/map/layer-toggle'
 import legendStyles from './legend.module.scss'
@@ -11,6 +10,10 @@ const Legend = ({ mapLayer }) => (
       <Col width={[4, 6, 6]}>
         <LayerToggle
           layers={[
+            {
+              id: 'facilities',
+              name: 'All facilities',
+            },
             {
               id: 'cases',
               name: 'Cases',
@@ -19,14 +22,6 @@ const Legend = ({ mapLayer }) => (
               id: 'deaths',
               name: 'Deaths',
             },
-            {
-              id: 'cases-outbreak-only',
-              name: 'Outbreak Cases',
-            },
-            {
-              id: 'deaths-outbreak-only',
-              name: 'Outbreak Deaths',
-            },
             {
               id: 'cms-cases',
               name: 'Federal data',
@@ -37,30 +32,10 @@ const Legend = ({ mapLayer }) => (
       <Col width={[4, 6, 6]}>
         <div className={legendStyles.legend} aria-hidden>
           {mapLayer === 'cms-cases' || mapLayer === 'cms-deaths' ? (
-            <p>All facilities that report to the federal government.</p>
+            <div>All facilities that report to the federal government.</div>
           ) : (
             <>
-              <div>
-                Long-term care facilities{' '}
-                <span
-                  className={classnames(
-                    legendStyles.item,
-                    legendStyles.notExperiencing,
-                  )}
-                >
-                  not experiencing
-                </span>{' '}
-                and{' '}
-                <span
-                  className={classnames(
-                    legendStyles.item,
-                    legendStyles.experiencing,
-                  )}
-                >
-                  experiencing
-                </span>{' '}
-                an outbreak.
-              </div>
+              <div>Long-term care facilities. [Legend TK]</div>
             </>
           )}
         </div>

From d2dce6ee809b87e965728c14a3de14acb1059b80 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 07:33:29 -0800
Subject: [PATCH 20/47] chore: Add outbreak res & staff

---
 .../pages/data/long-term-care/map/facility-details.js     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index 8c004854c..b2a51a443 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -19,6 +19,14 @@ const fields = {
       title: 'Outbreak resident deaths',
       field: 'outbreak_resident_deaths',
     },
+    {
+      title: 'Outbreak resident & staff positives',
+      field: 'outbreak_resident_staff_positives',
+    },
+    {
+      title: 'Outbreak resident & staff deaths',
+      field: 'outbreak_resident_staff_deaths',
+    },
     {
       title: 'Staff cases',
       field: 'staff_positives',

From 7d82018042a72541a845d93b501ee25b333ad3c0 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 07:34:30 -0800
Subject: [PATCH 21/47] chore: Typo U

---
 src/components/pages/data/long-term-care/map/infobox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 9bc7ee819..0c70d298c 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -57,7 +57,7 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
                 value={facility.outbreak_resident_positives}
               />
               <Item
-                title="OUtbreak resident positives"
+                title="Outbreak resident positives"
                 value={facility.outbreak_resident_deaths}
               />
             </>

From eed9f0a22c5f8a41699e7a711ed926b2f1259884 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 07:45:07 -0800
Subject: [PATCH 22/47] chore: Change to radius for sidebar

---
 .../long-term-care/map/facility-details.js    | 24 ++++++++++++-------
 .../pages/data/long-term-care/map/index.js    | 23 +++++++++++-------
 .../pages/data/long-term-care/map/infobox.js  |  2 +-
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index b2a51a443..e162675bd 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -11,6 +11,22 @@ const fields = {
       title: 'Resident deaths',
       field: 'resident_deaths',
     },
+    {
+      title: 'Staff cases',
+      field: 'staff_positives',
+    },
+    {
+      title: 'Staff deaths',
+      field: 'staff_deaths',
+    },
+    {
+      title: 'Resident & staff cases',
+      field: 'resident_staff_positives',
+    },
+    {
+      title: 'Resident & staff deaths',
+      field: 'resident_staff_deaths',
+    },
     {
       title: 'Outbreak resident positives',
       field: 'outbreak_resident_positives',
@@ -27,14 +43,6 @@ const fields = {
       title: 'Outbreak resident & staff deaths',
       field: 'outbreak_resident_staff_deaths',
     },
-    {
-      title: 'Staff cases',
-      field: 'staff_positives',
-    },
-    {
-      title: 'Staff deaths',
-      field: 'staff_deaths',
-    },
   ],
   cms: [
     {
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 91e1e595c..b12980041 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -143,6 +143,10 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
       selectFacility(event, true)
     })
 
+    map.on('data', () => {
+      console.log('data')
+    })
+
     mapRef.current = map
   }, [])
 
@@ -184,7 +188,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
             <thead>
               <tr>
                 <Th alignLeft>Name</Th>
-                <Th>Resident cases</Th>
+                <Th>{mapLayer === 'deaths' ? 'Deaths' : 'Cases'}</Th>
               </tr>
             </thead>
           </Table>
@@ -194,7 +198,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
                 <thead className="a11y-only">
                   <tr>
                     <Th alignLeft>Name</Th>
-                    <Th>Resident cases</Th>
+                    <Th>{mapLayer === 'deaths' ? 'Deaths' : 'Cases'}</Th>
                   </tr>
                 </thead>
                 <tbody>
@@ -228,14 +232,17 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
                         </button>
                       </Td>
                       <Td>
-                        {mapLayer === 'cms-cases'
-                          ? facility.properties[
-                              'residents-total-confirmed-covid-19'
-                            ] +
+                        {mapLayer === 'cms-cases' &&
+                          facility.properties[
+                            'residents-total-confirmed-covid-19'
+                          ] +
                             facility.properties[
                               'residents-total-suspected-covid-19'
-                            ]
-                          : facility.properties.resident_positives}
+                            ]}
+                        {(mapLayer === 'cases' || mapLayer === 'facilities') &&
+                          facility.properties.radius_positive}
+                        {mapLayer === 'deaths' &&
+                          facility.properties.radius_deaths}
                       </Td>
                     </tr>
                   ))}
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 0c70d298c..b3cd05f4c 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -76,7 +76,7 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
                 value={facility.outbreak_resident_staff_positives}
               />
               <Item
-                title="OUtbreak resident&amp; staff positives"
+                title="Outbreak resident&amp; staff positives"
                 value={facility.outbreak_resident_staff_deaths}
               />
             </>

From 184f6a5313a13e1cdbe50f05e2edc0f623ade2be Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 07:54:07 -0800
Subject: [PATCH 23/47] chore: Fix data event

---
 src/components/pages/data/long-term-care/map/index.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index b12980041..80579c278 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -143,8 +143,11 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
       selectFacility(event, true)
     })
 
-    map.on('data', () => {
-      console.log('data')
+    map.on('data', event => {
+      if (event.isSourceLoaded) {
+        console.log('eventtt')
+        mapBoundChanged(event)
+      }
     })
 
     mapRef.current = map
@@ -181,7 +184,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
         infoboxPosition: tooltip,
       }}
     >
-      <Legend mapLayer={mapLayer} setLayer={layer => setMapLayer(layer)} />
+      <Legend mapLayer={mapLayer} />
       <div className={facilitiesMapStyles.container} aria-hidden>
         <Sidebar map={mapRef.current}>
           <Table ariaHidden>

From 410657c7f92efb40c409b99201092c8e5b75be22 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 10:08:06 -0800
Subject: [PATCH 24/47] chore: Change to total covid-19 in CMS

---
 .../pages/data/long-term-care/map/facility-details.js         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index e162675bd..0a6e21682 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -67,7 +67,7 @@ const fields = {
     },
     {
       title: 'Resident total deaths',
-      field: 'residents-total-all-deaths',
+      field: 'residents-total-covid-19-deaths',
     },
     {
       title: 'Staff total confirmed cases',
@@ -87,7 +87,7 @@ const fields = {
     },
     {
       title: 'Staff total deaths',
-      field: 'staff-total-all-deaths',
+      field: 'staff-total-covid-19-deaths',
     },
   ],
 }

From d6f2153571723b1d3350e1227b71fdb4e755bda1 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 12:28:29 -0800
Subject: [PATCH 25/47] chore: Remove federal layer

---
 src/components/pages/data/long-term-care/map/index.js  | 3 +--
 src/components/pages/data/long-term-care/map/legend.js | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 80579c278..e47886268 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -22,7 +22,7 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
   const [currentZoom, setCurrentZoom] = useState(0)
   const [highlighedMarker, setHighlightedMarker] = useState(false)
   const [mapLayer, setMapLayer] = useState('facilities')
-  const layers = ['facilities', 'cases', 'deaths', 'cms-cases']
+  const layers = ['facilities', 'cases', 'deaths' /* ,'cms-cases' */]
 
   const mapNode = useRef(null)
   const mapRef = useRef(null)
@@ -145,7 +145,6 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
 
     map.on('data', event => {
       if (event.isSourceLoaded) {
-        console.log('eventtt')
         mapBoundChanged(event)
       }
     })
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 20bbf7d9d..c3c3ba2db 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -22,10 +22,10 @@ const Legend = ({ mapLayer }) => (
               id: 'deaths',
               name: 'Deaths',
             },
-            {
+            /* {
               id: 'cms-cases',
               name: 'Federal data',
-            },
+            }, */
           ]}
         />
       </Col>

From 9ecf4ef3fb893bdd3e854931a9ebfc520c118eca Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 13:19:46 -0800
Subject: [PATCH 26/47] feat: Add facilities map to state pages

---
 .../pages/data/long-term-care/map/index.js    |   4 +-
 .../pages/state/long-term-care/facilities.js  | 488 ++++++++++--------
 .../long-term-care/facilities.module.scss     |   4 +
 src/templates/state/long-term-care/index.js   |  70 +--
 4 files changed, 311 insertions(+), 255 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index e47886268..81f1e53b0 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -108,7 +108,9 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
 
     map.on('load', () => {
       if (state) {
-        map.setFilter('cases', ['==', ['get', 'state_abbreviation'], state])
+        layers.forEach(layer => {
+          map.setFilter(layer, ['==', ['get', 'state'], state])
+        })
       }
 
       if (window.location.hash && hash.length > 2) {
diff --git a/src/components/pages/state/long-term-care/facilities.js b/src/components/pages/state/long-term-care/facilities.js
index 806cd0062..559e04347 100644
--- a/src/components/pages/state/long-term-care/facilities.js
+++ b/src/components/pages/state/long-term-care/facilities.js
@@ -2,14 +2,22 @@
 import React, { useState, useEffect } from 'react'
 import slugify from 'slugify'
 import { Link } from 'gatsby'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@reach/disclosure'
 import Alert from '~components/common/alert'
 import { Row, Col } from '~components/common/grid'
 import { Table, Th, Td } from '~components/common/table'
 import { Form, Input } from '~components/common/form'
 import Modal from '~components/common/modal'
+import Container from '~components/common/container'
 import { FormatDate } from '~components/utils/format'
+import LTCMap from '~components/pages/data/long-term-care/map'
 import facilitiesStyles from './facilities.module.scss'
 import SocialSharing from '~components/common/social-sharing'
+import stateCenters from '~data/visualization/state-centers.json'
 
 const getNumber = number => {
   if (!number) {
@@ -145,7 +153,7 @@ const probableFields = {
   resident_staff_deaths: 'resident_staff_probable_deaths',
 }
 
-const LongTermCareFacilities = ({ stateSlug, facilities }) => {
+const LongTermCareFacilities = ({ stateSlug, stateAbbr, facilities }) => {
   const [sort, setSort] = useState({ field: 'facility_name', desc: false })
   const [searchQuery, setSearchQuery] = useState(false)
   const [openedFacility, setOpenedFacility] = useState(false)
@@ -245,235 +253,271 @@ const LongTermCareFacilities = ({ stateSlug, facilities }) => {
     }
     return null
   }
+  const stateCenter = stateCenters.find(center => center.state === stateAbbr)
   return (
     <>
-      <SearchForm
-        hasFacilities={facilities.length > 0}
-        setSearchQuery={query => setSearchQuery(query)}
+      <LTCMap
+        center={[stateCenter.lon, stateCenter.lat]}
+        zoom={stateCenter.zoom}
+        state={stateAbbr}
       />
-      <p>
-        Do you have information about a facility on this list?{' '}
-        <Link to="/nursing-homes/contact">We would love to hear from you</Link>.
-      </p>
-      {openedFacility && (
-        <Modal
-          isOpen={openedFacility}
-          label={`Facility details for ${openedFacility.facility_name}`}
-          onClose={() => {
-            setOpenedFacility(false)
-          }}
-        >
-          <FacilityDetails
-            facility={openedFacility}
-            stateSlug={stateSlug}
-            facilityId={openedFacilityId}
-          />
-        </Modal>
-      )}
-      <div role="region" aria-live="polite">
-        {facilityList.length > 0 ? (
-          <>
-            <Table>
-              <thead>
-                <tr>
-                  {hasCounty && (
-                    <Th
-                      header
-                      alignLeft
-                      sortable
-                      onClick={() => handleSortClick('county')}
-                      sortDirection={sortDirection('county')}
-                    >
-                      County
-                    </Th>
-                  )}
-                  {hasCity && (
-                    <Th
-                      header
-                      alignLeft
-                      sortable
-                      onClick={() => handleSortClick('city')}
-                      sortDirection={sortDirection('city')}
-                    >
-                      City
-                    </Th>
-                  )}
-                  <Th
-                    header
-                    alignLeft
-                    sortable
-                    onClick={() => handleSortClick('facility_name')}
-                    sortDirection={sortDirection('facility_name')}
-                  >
-                    Name
-                  </Th>
-                  <Th header alignLeft>
-                    Category
-                  </Th>
-                  {hasResidentData ? (
-                    <>
-                      <Th
-                        header
-                        isFirst
-                        sortable
-                        onClick={() => handleSortClick('resident_positives')}
-                        sortDirection={sortDirection('resident_positives')}
-                      >
-                        Resident positives
-                      </Th>
-                      <Th
-                        header
-                        sortable
-                        onClick={() => handleSortClick('resident_deaths')}
-                        sortDirection={sortDirection('resident_deaths')}
-                      >
-                        Resident deaths
-                      </Th>
-
-                      <Th
-                        header
-                        isFirst
-                        sortable
-                        onClick={() =>
-                          handleSortClick('outbreak_resident_positives')
-                        }
-                        sortDirection={sortDirection(
-                          'outbreak_resident_positives',
-                        )}
-                      >
-                        Outbreak Resident positives
-                      </Th>
-                      <Th
-                        header
-                        sortable
-                        onClick={() =>
-                          handleSortClick('outbreak_resident_deaths')
-                        }
-                        sortDirection={sortDirection(
-                          'outbreak_resident_deaths',
+      <Container>
+        <Disclosure>
+          <DisclosureButton className={facilitiesStyles.disclosureButton}>
+            View data as a table {}
+          </DisclosureButton>
+          <DisclosurePanel>
+            <SearchForm
+              hasFacilities={facilities.length > 0}
+              setSearchQuery={query => setSearchQuery(query)}
+            />
+            <p>
+              Do you have information about a facility on this list?{' '}
+              <Link to="/nursing-homes/contact">
+                We would love to hear from you
+              </Link>
+              .
+            </p>
+            {openedFacility && (
+              <Modal
+                isOpen={openedFacility}
+                label={`Facility details for ${openedFacility.facility_name}`}
+                onClose={() => {
+                  setOpenedFacility(false)
+                }}
+              >
+                <FacilityDetails
+                  facility={openedFacility}
+                  stateSlug={stateSlug}
+                  facilityId={openedFacilityId}
+                />
+              </Modal>
+            )}
+            <div role="region" aria-live="polite">
+              {facilityList.length > 0 ? (
+                <>
+                  <Table>
+                    <thead>
+                      <tr>
+                        {hasCounty && (
+                          <Th
+                            header
+                            alignLeft
+                            sortable
+                            onClick={() => handleSortClick('county')}
+                            sortDirection={sortDirection('county')}
+                          >
+                            County
+                          </Th>
                         )}
-                      >
-                        Outbreak Resident deaths
-                      </Th>
-                    </>
-                  ) : (
-                    <>
-                      <Th
-                        header
-                        isFirst
-                        sortable
-                        onClick={() =>
-                          handleSortClick('resident_staff_positives')
-                        }
-                        sortDirection={sortDirection(
-                          'resident_staff_positives',
+                        {hasCity && (
+                          <Th
+                            header
+                            alignLeft
+                            sortable
+                            onClick={() => handleSortClick('city')}
+                            sortDirection={sortDirection('city')}
+                          >
+                            City
+                          </Th>
                         )}
-                      >
-                        Resident &amp; staff positives
-                      </Th>
-                      <Th
-                        header
-                        sortable
-                        onClick={() => handleSortClick('resident_staff_deaths')}
-                        sortDirection={sortDirection('resident_staff_deaths')}
-                      >
-                        Resident &amp; staff deaths
-                      </Th>
+                        <Th
+                          header
+                          alignLeft
+                          sortable
+                          onClick={() => handleSortClick('facility_name')}
+                          sortDirection={sortDirection('facility_name')}
+                        >
+                          Name
+                        </Th>
+                        <Th header alignLeft>
+                          Category
+                        </Th>
+                        {hasResidentData ? (
+                          <>
+                            <Th
+                              header
+                              isFirst
+                              sortable
+                              onClick={() =>
+                                handleSortClick('resident_positives')
+                              }
+                              sortDirection={sortDirection(
+                                'resident_positives',
+                              )}
+                            >
+                              Resident positives
+                            </Th>
+                            <Th
+                              header
+                              sortable
+                              onClick={() => handleSortClick('resident_deaths')}
+                              sortDirection={sortDirection('resident_deaths')}
+                            >
+                              Resident deaths
+                            </Th>
 
-                      <Th
-                        header
-                        isFirst
-                        sortable
-                        onClick={() =>
-                          handleSortClick('outbreak_resident_staff_positives')
-                        }
-                        sortDirection={sortDirection(
-                          'outbreak_resident_staff_positives',
-                        )}
-                      >
-                        Outbreak Resident &amp; staff positives
-                      </Th>
-                      <Th
-                        header
-                        sortable
-                        onClick={() =>
-                          handleSortClick('outbreak_resident_staff_deaths')
-                        }
-                        sortDirection={sortDirection(
-                          'outbreak_resident_staff_deaths',
+                            <Th
+                              header
+                              isFirst
+                              sortable
+                              onClick={() =>
+                                handleSortClick('outbreak_resident_positives')
+                              }
+                              sortDirection={sortDirection(
+                                'outbreak_resident_positives',
+                              )}
+                            >
+                              Outbreak Resident positives
+                            </Th>
+                            <Th
+                              header
+                              sortable
+                              onClick={() =>
+                                handleSortClick('outbreak_resident_deaths')
+                              }
+                              sortDirection={sortDirection(
+                                'outbreak_resident_deaths',
+                              )}
+                            >
+                              Outbreak Resident deaths
+                            </Th>
+                          </>
+                        ) : (
+                          <>
+                            <Th
+                              header
+                              isFirst
+                              sortable
+                              onClick={() =>
+                                handleSortClick('resident_staff_positives')
+                              }
+                              sortDirection={sortDirection(
+                                'resident_staff_positives',
+                              )}
+                            >
+                              Resident &amp; staff positives
+                            </Th>
+                            <Th
+                              header
+                              sortable
+                              onClick={() =>
+                                handleSortClick('resident_staff_deaths')
+                              }
+                              sortDirection={sortDirection(
+                                'resident_staff_deaths',
+                              )}
+                            >
+                              Resident &amp; staff deaths
+                            </Th>
+
+                            <Th
+                              header
+                              isFirst
+                              sortable
+                              onClick={() =>
+                                handleSortClick(
+                                  'outbreak_resident_staff_positives',
+                                )
+                              }
+                              sortDirection={sortDirection(
+                                'outbreak_resident_staff_positives',
+                              )}
+                            >
+                              Outbreak Resident &amp; staff positives
+                            </Th>
+                            <Th
+                              header
+                              sortable
+                              onClick={() =>
+                                handleSortClick(
+                                  'outbreak_resident_staff_deaths',
+                                )
+                              }
+                              sortDirection={sortDirection(
+                                'outbreak_resident_staff_deaths',
+                              )}
+                            >
+                              Outbreak Resident &amp; staff deaths
+                            </Th>
+                          </>
                         )}
-                      >
-                        Outbreak Resident &amp; staff deaths
-                      </Th>
-                    </>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {facilityList.map(facility => {
+                        const facilityId = slugify(
+                          [
+                            facility.county,
+                            facility.city,
+                            facility.facility_name,
+                          ].join('-'),
+                          { lower: true },
+                        )
+                        return (
+                          <tr key={facilityId} id={facilityId}>
+                            {hasCounty && <Td alignLeft>{facility.county}</Td>}
+                            {hasCity && <Td alignLeft>{facility.city}</Td>}
+                            <Td alignLeft>
+                              <button
+                                className={facilitiesStyles.linkButton}
+                                type="button"
+                                onClick={event => {
+                                  event.preventDefault()
+                                  setOpenedFacilityId(facilityId)
+                                  setOpenedFacility(facility)
+                                  window.location.hash = facilityId
+                                }}
+                              >
+                                {facility.facility_name}
+                              </button>
+                            </Td>
+                            <Td alignLeft>{facility.ctp_facility_category}</Td>
+                            {hasResidentData ? (
+                              <>
+                                <Td isFirst>{facility.resident_positives}</Td>
+                                <Td>{facility.resident_deaths}</Td>
+                                <Td isFirst>
+                                  {facility.outbreak_resident_positives}
+                                </Td>
+                                <Td>{facility.outbreak_resident_deaths}</Td>
+                              </>
+                            ) : (
+                              <>
+                                <Td isFirst>
+                                  {facility.resident_staff_positives}
+                                </Td>
+                                <Td>{facility.resident_staff_deaths}</Td>
+                                <Td isFirst>
+                                  {facility.outbreak_resident_staff_positives}
+                                </Td>
+                                <Td>
+                                  {facility.outbreak_resident_staff_deaths}
+                                </Td>
+                              </>
+                            )}
+                          </tr>
+                        )
+                      })}
+                    </tbody>
+                  </Table>
+                  <p>Case totals include confirmed and probable cases.</p>
+                </>
+              ) : (
+                <>
+                  {facilities.length > 0 ? (
+                    <Alert>
+                      No facilities found. Please refine your search.
+                    </Alert>
+                  ) : (
+                    <Alert>Facility information not reported</Alert>
                   )}
-                </tr>
-              </thead>
-              <tbody>
-                {facilityList.map(facility => {
-                  const facilityId = slugify(
-                    [
-                      facility.county,
-                      facility.city,
-                      facility.facility_name,
-                    ].join('-'),
-                    { lower: true },
-                  )
-                  return (
-                    <tr key={facilityId} id={facilityId}>
-                      {hasCounty && <Td alignLeft>{facility.county}</Td>}
-                      {hasCity && <Td alignLeft>{facility.city}</Td>}
-                      <Td alignLeft>
-                        <button
-                          className={facilitiesStyles.linkButton}
-                          type="button"
-                          onClick={event => {
-                            event.preventDefault()
-                            setOpenedFacilityId(facilityId)
-                            setOpenedFacility(facility)
-                            window.location.hash = facilityId
-                          }}
-                        >
-                          {facility.facility_name}
-                        </button>
-                      </Td>
-                      <Td alignLeft>{facility.ctp_facility_category}</Td>
-                      {hasResidentData ? (
-                        <>
-                          <Td isFirst>{facility.resident_positives}</Td>
-                          <Td>{facility.resident_deaths}</Td>
-                          <Td isFirst>
-                            {facility.outbreak_resident_positives}
-                          </Td>
-                          <Td>{facility.outbreak_resident_deaths}</Td>
-                        </>
-                      ) : (
-                        <>
-                          <Td isFirst>{facility.resident_staff_positives}</Td>
-                          <Td>{facility.resident_staff_deaths}</Td>
-                          <Td isFirst>
-                            {facility.outbreak_resident_staff_positives}
-                          </Td>
-                          <Td>{facility.outbreak_resident_staff_deaths}</Td>
-                        </>
-                      )}
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </Table>
-            <p>Case totals include confirmed and probable cases.</p>
-          </>
-        ) : (
-          <>
-            {facilities.length > 0 ? (
-              <Alert>No facilities found. Please refine your search.</Alert>
-            ) : (
-              <Alert>Facility information not reported</Alert>
-            )}
-          </>
-        )}
-      </div>
+                </>
+              )}
+            </div>
+          </DisclosurePanel>
+        </Disclosure>
+      </Container>
     </>
   )
 }
diff --git a/src/components/pages/state/long-term-care/facilities.module.scss b/src/components/pages/state/long-term-care/facilities.module.scss
index f5257156e..e32a95b55 100644
--- a/src/components/pages/state/long-term-care/facilities.module.scss
+++ b/src/components/pages/state/long-term-care/facilities.module.scss
@@ -29,3 +29,7 @@
   @include margin(16, left);
   @include type-size(100);
 }
+
+.disclosure-button {
+  @include remove-button-style();
+}
diff --git a/src/templates/state/long-term-care/index.js b/src/templates/state/long-term-care/index.js
index df53ad637..f826242e3 100644
--- a/src/templates/state/long-term-care/index.js
+++ b/src/templates/state/long-term-care/index.js
@@ -5,7 +5,7 @@ import LongTermCarePreamble from '~components/pages/state/long-term-care/preambl
 import LongTermCareSummaryTable from '~components/pages/state/long-term-care/summary-table'
 import LongTermCareFacilities from '~components/pages/state/long-term-care/facilities'
 import LongTermCareBarChart from '~components/pages/state/long-term-care/chart'
-
+import Container from '~components/common/container'
 import LongTermCareAlertNote from '~components/pages/state/long-term-care/alert-note'
 import Layout from '~components/layout'
 
@@ -21,46 +21,52 @@ export default ({ pageContext, path, data }) => {
       ]}
       description={`Cumulative and outbreak data on cases and deaths in nursing homes, assisted living, and other long-term-care facilities in ${state.name}.`}
       path={path}
+      noContainer
     >
       {data.aggregate.nodes.length ? (
         <>
-          <LongTermCarePreamble
-            state={state.state}
-            stateSlug={state.childSlug.slug}
-            stateName={state.name}
-            overview={data.covidStateInfo.childLtc.current}
-            showFacilities={
-              data.allCovidLtcFacilities.group &&
-              data.allCovidLtcFacilities.group.length > 0
-            }
-          />
-          <LongTermCareBarChart data={data.aggregate.nodes} />
-          {data.covidLtcNotes.alerts && (
-            <LongTermCareAlertNote>
-              {data.covidLtcNotes.alerts}
-            </LongTermCareAlertNote>
-          )}
-          <h2 id="summary">Summary</h2>
-          <LongTermCareSummaryTable
-            aggregate={data.aggregate.nodes[0]}
-            outbreak={data.outbreak.nodes[0]}
-          />
-          <h2 id="notes">State notes</h2>
-          <div
-            dangerouslySetInnerHTML={{
-              __html: marked(data.covidLtcNotes.notes),
-            }}
-          />
-          <h2 id="facilities">Facilities</h2>
+          <Container>
+            <LongTermCarePreamble
+              state={state.state}
+              stateSlug={state.childSlug.slug}
+              stateName={state.name}
+              overview={data.covidStateInfo.childLtc.current}
+              showFacilities={
+                data.allCovidLtcFacilities.group &&
+                data.allCovidLtcFacilities.group.length > 0
+              }
+            />
+            <LongTermCareBarChart data={data.aggregate.nodes} />
+            {data.covidLtcNotes.alerts && (
+              <LongTermCareAlertNote>
+                {data.covidLtcNotes.alerts}
+              </LongTermCareAlertNote>
+            )}
+            <h2 id="summary">Summary</h2>
+            <LongTermCareSummaryTable
+              aggregate={data.aggregate.nodes[0]}
+              outbreak={data.outbreak.nodes[0]}
+            />
+            <h2 id="notes">State notes</h2>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: marked(data.covidLtcNotes.notes),
+              }}
+            />
+            <h2 id="facilities">Facilities</h2>
+          </Container>
           <LongTermCareFacilities
             stateSlug={slug}
             facilities={data.allCovidLtcFacilities.group}
+            stateAbbr={state.state}
           />
         </>
       ) : (
-        <LongTermCareAlertNote>
-          {state.name} does not report long-term care data.
-        </LongTermCareAlertNote>
+        <Container>
+          <LongTermCareAlertNote>
+            {state.name} does not report long-term care data.
+          </LongTermCareAlertNote>
+        </Container>
       )}
     </Layout>
   )

From 74d946e32793b93ed295ea21671ce571c3af8774 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 13:31:07 -0800
Subject: [PATCH 27/47] chore: Add legend

---
 .../pages/data/long-term-care/map/legend.js   | 16 ++++++++--
 .../long-term-care/map/legend.module.scss     | 32 ++++++++-----------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index c3c3ba2db..93dd4a912 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -7,7 +7,7 @@ import { Col, Row } from '~components/common/grid'
 const Legend = ({ mapLayer }) => (
   <Container>
     <Row className={legendStyles.wrapper}>
-      <Col width={[4, 6, 6]}>
+      <Col width={[4, 6, 4]}>
         <LayerToggle
           layers={[
             {
@@ -29,13 +29,23 @@ const Legend = ({ mapLayer }) => (
           ]}
         />
       </Col>
-      <Col width={[4, 6, 6]}>
+      <Col width={[4, 6, 8]}>
         <div className={legendStyles.legend} aria-hidden>
           {mapLayer === 'cms-cases' || mapLayer === 'cms-deaths' ? (
             <div>All facilities that report to the federal government.</div>
           ) : (
             <>
-              <div>Long-term care facilities. [Legend TK]</div>
+              <div>
+                Some states{' '}
+                <span className={legendStyles.outbreakOnly}>
+                  only report outbreak data
+                </span>
+                , while{' '}
+                <span className={legendStyles.missing}>
+                  others do not report any data
+                </span>
+                .
+              </div>
             </>
           )}
         </div>
diff --git a/src/components/pages/data/long-term-care/map/legend.module.scss b/src/components/pages/data/long-term-care/map/legend.module.scss
index 26d11820f..21e1c8a38 100644
--- a/src/components/pages/data/long-term-care/map/legend.module.scss
+++ b/src/components/pages/data/long-term-care/map/legend.module.scss
@@ -1,34 +1,30 @@
 .wrapper {
   @include margin(32, top);
+  @include margin(16, bottom);
+  align-items: center;
 }
 .legend {
-  @include padding(8);
   text-align: right;
   div {
     @include margin(8, bottom);
   }
 }
 
-.item {
-  border-bottom: 3px solid;
-  display: inline-block;
-  padding-bottom: 3px; // ignore-style-rule
-}
-
-.experiencing {
-  border-color: $color-honey-500;
-}
-
-.not-experiencing {
-  border-color: $color-plum-600;
-}
-
 .outbreak-only {
-  border-color: $color-slate-400;
+  display: inline-block;
+  background: #f3d8b7; // ignore-style-rule
+  @include padding(8);
 }
 
-.no-data {
+.missing {
   display: inline-block;
-  background: #ffdbc7; // ignore-style-rule
+  border: 1px solid $color-slate-300;
+  background: repeating-linear-gradient(
+    45deg,
+    #fff,
+    #fff 5px,
+    $color-slate-300 6px,
+    $color-slate-300 6px
+  );
   @include padding(8);
 }

From d52e90f18e1ab00836702ab2123133c092fdb9db Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 13:56:29 -0800
Subject: [PATCH 28/47] chore: Fix missing state center

---
 src/components/pages/state/long-term-care/facilities.js | 2 +-
 src/data/visualization/state-centers.json               | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/state/long-term-care/facilities.js b/src/components/pages/state/long-term-care/facilities.js
index 559e04347..a2b17b760 100644
--- a/src/components/pages/state/long-term-care/facilities.js
+++ b/src/components/pages/state/long-term-care/facilities.js
@@ -257,7 +257,7 @@ const LongTermCareFacilities = ({ stateSlug, stateAbbr, facilities }) => {
   return (
     <>
       <LTCMap
-        center={[stateCenter.lon, stateCenter.lat]}
+        center={stateCenter ? [stateCenter.lon, stateCenter.lat] : [-97, 38]}
         zoom={stateCenter.zoom}
         state={stateAbbr}
       />
diff --git a/src/data/visualization/state-centers.json b/src/data/visualization/state-centers.json
index 878414582..50a57ffdf 100644
--- a/src/data/visualization/state-centers.json
+++ b/src/data/visualization/state-centers.json
@@ -55,7 +55,13 @@
     "zoom": 7,
     "state": "DE"
   },
-  { "name": "Washington DC", "lat": 38.9101, "lon": -77.0147, "zoom": 7 },
+  {
+    "name": "Washington DC",
+    "lat": 38.9101,
+    "lon": -77.0147,
+    "zoom": 7,
+    "state": "DC"
+  },
   {
     "name": "Florida",
     "lat": 28.6305,

From 8ec6135f7fa56d580f6b500a5fe2b95a4eb40ec1 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 14:05:07 -0800
Subject: [PATCH 29/47] chore: Default zoom

---
 src/components/pages/state/long-term-care/facilities.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/state/long-term-care/facilities.js b/src/components/pages/state/long-term-care/facilities.js
index a2b17b760..50440f6eb 100644
--- a/src/components/pages/state/long-term-care/facilities.js
+++ b/src/components/pages/state/long-term-care/facilities.js
@@ -258,7 +258,7 @@ const LongTermCareFacilities = ({ stateSlug, stateAbbr, facilities }) => {
     <>
       <LTCMap
         center={stateCenter ? [stateCenter.lon, stateCenter.lat] : [-97, 38]}
-        zoom={stateCenter.zoom}
+        zoom={stateCenter ? stateCenter.zoom : 3.5}
         state={stateAbbr}
       />
       <Container>

From b8b8308c8003f4b7eb657059bc350480a8330806 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 10 Feb 2021 16:42:28 -0800
Subject: [PATCH 30/47] chore: Add definitions, copy

---
 .../data/long-term-care/map/definitions.js    | 50 ++++++++++++++++++
 .../pages/data/long-term-care/map/index.js    |  5 ++
 .../map.js                                    | 52 ++++++++++++++++---
 3 files changed, 100 insertions(+), 7 deletions(-)
 create mode 100644 src/components/pages/data/long-term-care/map/definitions.js

diff --git a/src/components/pages/data/long-term-care/map/definitions.js b/src/components/pages/data/long-term-care/map/definitions.js
new file mode 100644
index 000000000..8070f56c4
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/definitions.js
@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { useStaticQuery, graphql } from 'gatsby'
+import classnames from 'classnames'
+import definitionsStyles from '../../hhs-facilities/definitions.module.scss'
+
+const Definitions = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const data = useStaticQuery(graphql`
+    {
+      contentfulSnippet(slug: { eq: "ltc-map-definitions" }) {
+        contentful_id
+        childContentfulSnippetContentTextNode {
+          childMarkdownRemark {
+            html
+          }
+        }
+      }
+    }
+  `)
+  return (
+    <div className={definitionsStyles.definitionsWrapper}>
+      <button
+        aria-expanded={isOpen}
+        type="button"
+        className={definitionsStyles.definitionsButton}
+        onClick={event => {
+          event.preventDefault()
+          setIsOpen(!isOpen)
+        }}
+      >
+        About this map<span aria-hidden> {isOpen ? <>↑</> : <>↓</>}</span>
+      </button>
+
+      <div
+        className={classnames(
+          definitionsStyles.definitions,
+          isOpen && definitionsStyles.isOpen,
+        )}
+        hidden={isOpen ? undefined : true}
+        dangerouslySetInnerHTML={{
+          __html:
+            data.contentfulSnippet.childContentfulSnippetContentTextNode
+              .childMarkdownRemark.html,
+        }}
+      />
+    </div>
+  )
+}
+
+export default Definitions
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 81f1e53b0..379e7d364 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -8,7 +8,9 @@ import Overlay from '~components/common/map/overlay'
 import FacilityDetails from './facility-details'
 import Legend from './legend'
 import Infobox from './infobox'
+import Definitions from './definitions'
 import Wrapper from '~components/common/map/wrapper'
+import Container from '~components/common/container'
 import facilitiesMapStyles from './map.module.scss'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
@@ -289,6 +291,9 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
           />
         </Wrapper>
       </div>
+      <Container>
+        <Definitions />
+      </Container>
     </MapContext.Provider>
   )
 }
diff --git a/src/pages/nursing-homes-long-term-care-facilities/map.js b/src/pages/nursing-homes-long-term-care-facilities/map.js
index 9157fff95..2bed90940 100644
--- a/src/pages/nursing-homes-long-term-care-facilities/map.js
+++ b/src/pages/nursing-homes-long-term-care-facilities/map.js
@@ -1,13 +1,51 @@
 import React from 'react'
+import { graphql } from 'gatsby'
 import Layout from '~components/layout'
 import LTCMap from '~components/pages/data/long-term-care/map'
+import ContentfulContent from '~components/common/contentful-content'
 import Container from '~components/common/container'
 
-const LTCContactPage = () => (
-  <Layout title="Long term care: Facility map" noContainer>
-    <Container centered>This is a piece of content above the map!</Container>
-    <LTCMap center={[-97, 38]} zoom={3.5} />
-  </Layout>
-)
+const LTCMapPage = ({ data }) => {
+  const Snippet = ({ slug }) => {
+    const item = data.contentfulSnippetCollection.snippets.find(
+      snippet => snippet.slug === slug,
+    )
+    return (
+      <ContentfulContent
+        id={item.contentful_id}
+        content={
+          item.childContentfulSnippetContentTextNode.childMarkdownRemark.html
+        }
+      />
+    )
+  }
+  return (
+    <Layout title="Long term care: Facility map" noContainer>
+      <Container centered>
+        <Snippet slug="ltc-map-lede" />
+      </Container>
+      <LTCMap center={[-97, 38]} zoom={3.5} />
+      <Container centered>
+        <Snippet slug="ltc-map-closure" />
+      </Container>
+    </Layout>
+  )
+}
 
-export default LTCContactPage
+export default LTCMapPage
+
+export const query = graphql`
+  query {
+    contentfulSnippetCollection(slug: { eq: "long-term-care-map-page" }) {
+      snippets {
+        contentful_id
+        slug
+        childContentfulSnippetContentTextNode {
+          childMarkdownRemark {
+            html
+          }
+        }
+      }
+    }
+  }
+`

From bee677163ffed952b5aaea73bdb747450bcd8e4a Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Thu, 11 Feb 2021 14:51:53 -0800
Subject: [PATCH 31/47] chore: Tweaks to UI

---
 .../pages/data/long-term-care/map/definitions.js      |  2 +-
 .../pages/data/long-term-care/map/legend.js           | 11 +++++------
 .../nursing-homes-long-term-care-facilities/map.js    |  5 ++++-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/definitions.js b/src/components/pages/data/long-term-care/map/definitions.js
index 8070f56c4..12c5b2b59 100644
--- a/src/components/pages/data/long-term-care/map/definitions.js
+++ b/src/components/pages/data/long-term-care/map/definitions.js
@@ -28,7 +28,7 @@ const Definitions = () => {
           setIsOpen(!isOpen)
         }}
       >
-        About this map<span aria-hidden> {isOpen ? <>↑</> : <>↓</>}</span>
+        Data definitions<span aria-hidden> {isOpen ? <>↑</> : <>↓</>}</span>
       </button>
 
       <div
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 93dd4a912..c59ea4ed6 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -12,7 +12,7 @@ const Legend = ({ mapLayer }) => (
           layers={[
             {
               id: 'facilities',
-              name: 'All facilities',
+              name: 'All Facilities Impacted',
             },
             {
               id: 'cases',
@@ -36,15 +36,14 @@ const Legend = ({ mapLayer }) => (
           ) : (
             <>
               <div>
-                Some states{' '}
+                Most states report cumulative data, some states{' '}
                 <span className={legendStyles.outbreakOnly}>
-                  only report outbreak data
+                  only report outbreak data,
                 </span>
-                , while{' '}
+                while{' '}
                 <span className={legendStyles.missing}>
-                  others do not report any data
+                  others do not report any facility data.
                 </span>
-                .
               </div>
             </>
           )}
diff --git a/src/pages/nursing-homes-long-term-care-facilities/map.js b/src/pages/nursing-homes-long-term-care-facilities/map.js
index 2bed90940..12d22d424 100644
--- a/src/pages/nursing-homes-long-term-care-facilities/map.js
+++ b/src/pages/nursing-homes-long-term-care-facilities/map.js
@@ -20,7 +20,10 @@ const LTCMapPage = ({ data }) => {
     )
   }
   return (
-    <Layout title="Long term care: Facility map" noContainer>
+    <Layout
+      title="COVID-19's impact on nursing homes and other long-term-care facilities"
+      noContainer
+    >
       <Container centered>
         <Snippet slug="ltc-map-lede" />
       </Container>

From 45fff1bc4a83bb3080513782638a2607a334aaa9 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Sun, 14 Feb 2021 19:27:08 -0800
Subject: [PATCH 32/47] chore: Fix cae

---
 .../data/long-term-care/map/facility-details.js  |  6 +++---
 .../pages/data/long-term-care/map/infobox.js     | 16 ++++++++--------
 .../map.js                                       |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index 0a6e21682..83c73774d 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -4,7 +4,7 @@ import facilityDetailsStyle from './facility-details.module.scss'
 const fields = {
   ltc: [
     {
-      title: 'Resident positives',
+      title: 'Resident cases',
       field: 'resident_positives',
     },
     {
@@ -28,7 +28,7 @@ const fields = {
       field: 'resident_staff_deaths',
     },
     {
-      title: 'Outbreak resident positives',
+      title: 'Outbreak resident cases',
       field: 'outbreak_resident_positives',
     },
     {
@@ -36,7 +36,7 @@ const fields = {
       field: 'outbreak_resident_deaths',
     },
     {
-      title: 'Outbreak resident & staff positives',
+      title: 'Outbreak resident & staff cases',
       field: 'outbreak_resident_staff_positives',
     },
     {
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index b3cd05f4c..3535d481d 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -20,7 +20,7 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
         <>
           <h3>{facility.name}</h3>
           <Item
-            title="Resident positives"
+            title="Resident cases"
             value={
               facility['residents-total-suspected-covid-19'] +
               facility['residents-total-confirmed-covid-19']
@@ -31,7 +31,7 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
             value={facility['residents-total-all-deaths']}
           />
           <Item
-            title="Staff positives"
+            title="Staff cases"
             value={
               facility['staff-total-suspected-covid-19'] +
               facility['staff-total-confirmed-covid-19']
@@ -48,23 +48,23 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
           {hasResidentData ? (
             <>
               <Item
-                title="Resident positives"
+                title="Resident cases"
                 value={facility.resident_positives}
               />
               <Item title="Resident deaths" value={facility.resident_deaths} />
               <Item
-                title="Outbreak resident positives"
+                title="Outbreak resident cases"
                 value={facility.outbreak_resident_positives}
               />
               <Item
-                title="Outbreak resident positives"
+                title="Outbreak resident cases"
                 value={facility.outbreak_resident_deaths}
               />
             </>
           ) : (
             <>
               <Item
-                title="Resident &amp; staff positives"
+                title="Resident &amp; staff cases"
                 value={facility.resident_staff_positives}
               />
               <Item
@@ -72,11 +72,11 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
                 value={facility.resident_staff_deaths}
               />
               <Item
-                title="Outbreak resident &amp; staff positives"
+                title="Outbreak resident &amp; staff cases"
                 value={facility.outbreak_resident_staff_positives}
               />
               <Item
-                title="Outbreak resident&amp; staff positives"
+                title="Outbreak resident&amp; staff cases"
                 value={facility.outbreak_resident_staff_deaths}
               />
             </>
diff --git a/src/pages/nursing-homes-long-term-care-facilities/map.js b/src/pages/nursing-homes-long-term-care-facilities/map.js
index 12d22d424..696e39eb6 100644
--- a/src/pages/nursing-homes-long-term-care-facilities/map.js
+++ b/src/pages/nursing-homes-long-term-care-facilities/map.js
@@ -21,7 +21,7 @@ const LTCMapPage = ({ data }) => {
   }
   return (
     <Layout
-      title="COVID-19's impact on nursing homes and other long-term-care facilities"
+      title="Nursing Homes and Other Long-Term-Care Facilities"
       noContainer
     >
       <Container centered>

From 3aaf0012334d5808ef62551c2374bb01115b299a Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Mon, 15 Feb 2021 12:47:59 -0800
Subject: [PATCH 33/47] chore: Move definitions

---
 src/components/pages/data/long-term-care/map/index.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 379e7d364..81f1e53b0 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -8,9 +8,7 @@ import Overlay from '~components/common/map/overlay'
 import FacilityDetails from './facility-details'
 import Legend from './legend'
 import Infobox from './infobox'
-import Definitions from './definitions'
 import Wrapper from '~components/common/map/wrapper'
-import Container from '~components/common/container'
 import facilitiesMapStyles from './map.module.scss'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
@@ -291,9 +289,6 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
           />
         </Wrapper>
       </div>
-      <Container>
-        <Definitions />
-      </Container>
     </MapContext.Provider>
   )
 }

From 9b7bb5157dbac97cdc17c985e8dd3b6a28da262c Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Mon, 15 Feb 2021 13:35:25 -0800
Subject: [PATCH 34/47] chore: fix the legend

---
 .../pages/data/long-term-care/map/legend.js        | 14 ++++----------
 .../data/long-term-care/map/legend.module.scss     | 14 ++++++++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index c59ea4ed6..86821b3c0 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -35,16 +35,10 @@ const Legend = ({ mapLayer }) => (
             <div>All facilities that report to the federal government.</div>
           ) : (
             <>
-              <div>
-                Most states report cumulative data, some states{' '}
-                <span className={legendStyles.outbreakOnly}>
-                  only report outbreak data,
-                </span>
-                while{' '}
-                <span className={legendStyles.missing}>
-                  others do not report any facility data.
-                </span>
-              </div>
+              <span className={legendStyles.outbreakOnly} />
+              State reports only outbreak data
+              <span className={legendStyles.missing} />
+              State reports no facility data
             </>
           )}
         </div>
diff --git a/src/components/pages/data/long-term-care/map/legend.module.scss b/src/components/pages/data/long-term-care/map/legend.module.scss
index 21e1c8a38..2bd134f0b 100644
--- a/src/components/pages/data/long-term-care/map/legend.module.scss
+++ b/src/components/pages/data/long-term-care/map/legend.module.scss
@@ -5,13 +5,16 @@
 }
 .legend {
   text-align: right;
-  div {
-    @include margin(8, bottom);
-  }
+  @include margin(8, bottom);
+  display: flex;
+  justify-content: flex-end;
 }
 
 .outbreak-only {
   display: inline-block;
+  height: 1.5rem;
+  width: 1.5rem;
+  @include margin(8, right);
   background: #f3d8b7; // ignore-style-rule
   @include padding(8);
 }
@@ -19,6 +22,10 @@
 .missing {
   display: inline-block;
   border: 1px solid $color-slate-300;
+  height: 1.5rem;
+  width: 1.5rem;
+  @include margin(8, right);
+  @include margin(16, left);
   background: repeating-linear-gradient(
     45deg,
     #fff,
@@ -26,5 +33,4 @@
     $color-slate-300 6px,
     $color-slate-300 6px
   );
-  @include padding(8);
 }

From daf5c4c0e22b66b2b4add358964c5fc748b29b0d Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Mon, 15 Feb 2021 14:26:51 -0800
Subject: [PATCH 35/47] chore: Add map button

---
 src/components/common/map/wrapper.js          |  11 +-
 src/components/common/map/wrapper.module.scss |  11 +
 .../pages/data/long-term-care/map/index.js    | 166 +++---
 .../pages/state/long-term-care/facilities.js  | 487 +++++++++---------
 .../long-term-care/facilities.module.scss     |  16 +
 src/templates/state/long-term-care/index.js   |  68 ++-
 6 files changed, 398 insertions(+), 361 deletions(-)

diff --git a/src/components/common/map/wrapper.js b/src/components/common/map/wrapper.js
index d8e8756b9..747046aa8 100644
--- a/src/components/common/map/wrapper.js
+++ b/src/components/common/map/wrapper.js
@@ -1,8 +1,15 @@
 import React from 'react'
+import classnames from 'classnames'
 import wrapperStyle from './wrapper.module.scss'
 
-const Wrapper = ({ children }) => (
-  <div className={wrapperStyle.wrapper} role="img">
+const Wrapper = ({ children, fullWidth = false }) => (
+  <div
+    className={classnames(
+      wrapperStyle.wrapper,
+      fullWidth && wrapperStyle.fullWidth,
+    )}
+    role="img"
+  >
     <div className={wrapperStyle.inset}>{children}</div>
   </div>
 )
diff --git a/src/components/common/map/wrapper.module.scss b/src/components/common/map/wrapper.module.scss
index e8c01042b..d5e4a2a34 100644
--- a/src/components/common/map/wrapper.module.scss
+++ b/src/components/common/map/wrapper.module.scss
@@ -12,6 +12,17 @@
     max-width: 70%;
     flex-basis: 70%;
   }
+  &.full-width {
+    @media (min-width: $viewport-md) {
+      order: 1;
+      max-width: 100%;
+      flex-basis: 100%;
+    }
+    @media (min-width: $viewport-lg) {
+      max-width: 100%;
+      flex-basis: 100%;
+    }
+  }
 }
 
 .inset {
diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 81f1e53b0..09bb9d8a8 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -12,7 +12,13 @@ import Wrapper from '~components/common/map/wrapper'
 import facilitiesMapStyles from './map.module.scss'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
-const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
+const LTCFacilitiesMap = ({
+  center,
+  zoom,
+  state = false,
+  removeSidebar = false,
+  button = false,
+}) => {
   mapboxgl.accessToken = process.env.GATSBY_MAPBOX_API_TOKEN
   const [activeFacility, setActiveFacility] = useState(false)
   const [facilities, setFacilities] = useState(false)
@@ -185,85 +191,89 @@ const LTCFacilitiesMap = ({ center, zoom, state = false }) => {
         infoboxPosition: tooltip,
       }}
     >
-      <Legend mapLayer={mapLayer} />
+      {!removeSidebar && <Legend mapLayer={mapLayer} />}
       <div className={facilitiesMapStyles.container} aria-hidden>
-        <Sidebar map={mapRef.current}>
-          <Table ariaHidden>
-            <thead>
-              <tr>
-                <Th alignLeft>Name</Th>
-                <Th>{mapLayer === 'deaths' ? 'Deaths' : 'Cases'}</Th>
-              </tr>
-            </thead>
-          </Table>
-          {facilities && facilities.length > 0 ? (
-            <div className={facilitiesMapStyles.tableScroll}>
-              <Table>
-                <thead className="a11y-only">
-                  <tr>
-                    <Th alignLeft>Name</Th>
-                    <Th>{mapLayer === 'deaths' ? 'Deaths' : 'Cases'}</Th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {facilities.map(facility => (
-                    <tr
-                      onMouseEnter={() => {
-                        setHighlightedFacility(facility)
-                      }}
-                      onMouseLeave={() => {
-                        setHighlightedFacility(false)
-                      }}
-                      onFocus={() => {
-                        setHighlightedFacility(facility)
-                      }}
-                      onBlur={() => {
-                        setHighlightedFacility(false)
-                      }}
-                    >
-                      <Td alignLeft>
-                        <button
-                          type="button"
-                          onClick={event => {
-                            event.preventDefault()
-                            setActiveFacility({ ...facility.properties })
-                            setRevealedFacility(true)
-                          }}
-                        >
-                          {mapLayer === 'cms-cases'
-                            ? facility.properties.name
-                            : facility.properties.facility_name}
-                        </button>
-                      </Td>
-                      <Td>
-                        {mapLayer === 'cms-cases' &&
-                          facility.properties[
-                            'residents-total-confirmed-covid-19'
-                          ] +
-                            facility.properties[
-                              'residents-total-suspected-covid-19'
-                            ]}
-                        {(mapLayer === 'cases' || mapLayer === 'facilities') &&
-                          facility.properties.radius_positive}
-                        {mapLayer === 'deaths' &&
-                          facility.properties.radius_deaths}
-                      </Td>
+        {!removeSidebar && (
+          <Sidebar map={mapRef.current}>
+            <Table ariaHidden>
+              <thead>
+                <tr>
+                  <Th alignLeft>Name</Th>
+                  <Th>{mapLayer === 'deaths' ? 'Deaths' : 'Cases'}</Th>
+                </tr>
+              </thead>
+            </Table>
+            {facilities && facilities.length > 0 ? (
+              <div className={facilitiesMapStyles.tableScroll}>
+                <Table>
+                  <thead className="a11y-only">
+                    <tr>
+                      <Th alignLeft>Name</Th>
+                      <Th>{mapLayer === 'deaths' ? 'Deaths' : 'Cases'}</Th>
                     </tr>
-                  ))}
-                </tbody>
-              </Table>
-            </div>
-          ) : (
-            <p>
-              {currentZoom < 6 ? (
-                <>Zoom in to get facility details.</>
-              ) : (
-                <>No facilities in the current map.</>
-              )}
-            </p>
-          )}
-        </Sidebar>
-        <Wrapper>
+                  </thead>
+                  <tbody>
+                    {facilities.map(facility => (
+                      <tr
+                        onMouseEnter={() => {
+                          setHighlightedFacility(facility)
+                        }}
+                        onMouseLeave={() => {
+                          setHighlightedFacility(false)
+                        }}
+                        onFocus={() => {
+                          setHighlightedFacility(facility)
+                        }}
+                        onBlur={() => {
+                          setHighlightedFacility(false)
+                        }}
+                      >
+                        <Td alignLeft>
+                          <button
+                            type="button"
+                            onClick={event => {
+                              event.preventDefault()
+                              setActiveFacility({ ...facility.properties })
+                              setRevealedFacility(true)
+                            }}
+                          >
+                            {mapLayer === 'cms-cases'
+                              ? facility.properties.name
+                              : facility.properties.facility_name}
+                          </button>
+                        </Td>
+                        <Td>
+                          {mapLayer === 'cms-cases' &&
+                            facility.properties[
+                              'residents-total-confirmed-covid-19'
+                            ] +
+                              facility.properties[
+                                'residents-total-suspected-covid-19'
+                              ]}
+                          {(mapLayer === 'cases' ||
+                            mapLayer === 'facilities') &&
+                            facility.properties.radius_positive}
+                          {mapLayer === 'deaths' &&
+                            facility.properties.radius_deaths}
+                        </Td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </Table>
+              </div>
+            ) : (
+              <p>
+                {currentZoom < 6 ? (
+                  <>Zoom in to get facility details.</>
+                ) : (
+                  <>No facilities in the current map.</>
+                )}
+              </p>
+            )}
+          </Sidebar>
+        )}
+        <Wrapper fullWidth={removeSidebar}>
+          {button}
           {revealedFacility && (
             <Overlay
               close={() => {
diff --git a/src/components/pages/state/long-term-care/facilities.js b/src/components/pages/state/long-term-care/facilities.js
index 50440f6eb..05818d2d1 100644
--- a/src/components/pages/state/long-term-care/facilities.js
+++ b/src/components/pages/state/long-term-care/facilities.js
@@ -12,7 +12,6 @@ import { Row, Col } from '~components/common/grid'
 import { Table, Th, Td } from '~components/common/table'
 import { Form, Input } from '~components/common/form'
 import Modal from '~components/common/modal'
-import Container from '~components/common/container'
 import { FormatDate } from '~components/utils/format'
 import LTCMap from '~components/pages/data/long-term-care/map'
 import facilitiesStyles from './facilities.module.scss'
@@ -259,265 +258,265 @@ const LongTermCareFacilities = ({ stateSlug, stateAbbr, facilities }) => {
       <LTCMap
         center={stateCenter ? [stateCenter.lon, stateCenter.lat] : [-97, 38]}
         zoom={stateCenter ? stateCenter.zoom : 3.5}
+        removeSidebar
         state={stateAbbr}
+        button={
+          <Link
+            className={facilitiesStyles.mapButton}
+            to={`/nursing-homes-long-term-care-facilities/map${stateCenter &&
+              `#${stateCenter.lon},${stateCenter.lat},${stateCenter.zoom}`}`}
+          >
+            View more details
+          </Link>
+        }
       />
-      <Container>
-        <Disclosure>
-          <DisclosureButton className={facilitiesStyles.disclosureButton}>
-            View data as a table {}
-          </DisclosureButton>
-          <DisclosurePanel>
-            <SearchForm
-              hasFacilities={facilities.length > 0}
-              setSearchQuery={query => setSearchQuery(query)}
-            />
-            <p>
-              Do you have information about a facility on this list?{' '}
-              <Link to="/nursing-homes/contact">
-                We would love to hear from you
-              </Link>
-              .
-            </p>
-            {openedFacility && (
-              <Modal
-                isOpen={openedFacility}
-                label={`Facility details for ${openedFacility.facility_name}`}
-                onClose={() => {
-                  setOpenedFacility(false)
-                }}
-              >
-                <FacilityDetails
-                  facility={openedFacility}
-                  stateSlug={stateSlug}
-                  facilityId={openedFacilityId}
-                />
-              </Modal>
-            )}
-            <div role="region" aria-live="polite">
-              {facilityList.length > 0 ? (
-                <>
-                  <Table>
-                    <thead>
-                      <tr>
-                        {hasCounty && (
+      <Disclosure>
+        <DisclosureButton className={facilitiesStyles.disclosureButton}>
+          View data as a table {}
+        </DisclosureButton>
+        <DisclosurePanel>
+          <SearchForm
+            hasFacilities={facilities.length > 0}
+            setSearchQuery={query => setSearchQuery(query)}
+          />
+          <p>
+            Do you have information about a facility on this list?{' '}
+            <Link to="/nursing-homes/contact">
+              We would love to hear from you
+            </Link>
+            .
+          </p>
+          {openedFacility && (
+            <Modal
+              isOpen={openedFacility}
+              label={`Facility details for ${openedFacility.facility_name}`}
+              onClose={() => {
+                setOpenedFacility(false)
+              }}
+            >
+              <FacilityDetails
+                facility={openedFacility}
+                stateSlug={stateSlug}
+                facilityId={openedFacilityId}
+              />
+            </Modal>
+          )}
+          <div role="region" aria-live="polite">
+            {facilityList.length > 0 ? (
+              <>
+                <Table>
+                  <thead>
+                    <tr>
+                      {hasCounty && (
+                        <Th
+                          header
+                          alignLeft
+                          sortable
+                          onClick={() => handleSortClick('county')}
+                          sortDirection={sortDirection('county')}
+                        >
+                          County
+                        </Th>
+                      )}
+                      {hasCity && (
+                        <Th
+                          header
+                          alignLeft
+                          sortable
+                          onClick={() => handleSortClick('city')}
+                          sortDirection={sortDirection('city')}
+                        >
+                          City
+                        </Th>
+                      )}
+                      <Th
+                        header
+                        alignLeft
+                        sortable
+                        onClick={() => handleSortClick('facility_name')}
+                        sortDirection={sortDirection('facility_name')}
+                      >
+                        Name
+                      </Th>
+                      <Th header alignLeft>
+                        Category
+                      </Th>
+                      {hasResidentData ? (
+                        <>
                           <Th
                             header
-                            alignLeft
+                            isFirst
                             sortable
-                            onClick={() => handleSortClick('county')}
-                            sortDirection={sortDirection('county')}
+                            onClick={() =>
+                              handleSortClick('resident_positives')
+                            }
+                            sortDirection={sortDirection('resident_positives')}
                           >
-                            County
+                            Resident positives
                           </Th>
-                        )}
-                        {hasCity && (
                           <Th
                             header
-                            alignLeft
                             sortable
-                            onClick={() => handleSortClick('city')}
-                            sortDirection={sortDirection('city')}
+                            onClick={() => handleSortClick('resident_deaths')}
+                            sortDirection={sortDirection('resident_deaths')}
                           >
-                            City
+                            Resident deaths
                           </Th>
-                        )}
-                        <Th
-                          header
-                          alignLeft
-                          sortable
-                          onClick={() => handleSortClick('facility_name')}
-                          sortDirection={sortDirection('facility_name')}
-                        >
-                          Name
-                        </Th>
-                        <Th header alignLeft>
-                          Category
-                        </Th>
-                        {hasResidentData ? (
-                          <>
-                            <Th
-                              header
-                              isFirst
-                              sortable
-                              onClick={() =>
-                                handleSortClick('resident_positives')
-                              }
-                              sortDirection={sortDirection(
-                                'resident_positives',
-                              )}
-                            >
-                              Resident positives
-                            </Th>
-                            <Th
-                              header
-                              sortable
-                              onClick={() => handleSortClick('resident_deaths')}
-                              sortDirection={sortDirection('resident_deaths')}
-                            >
-                              Resident deaths
-                            </Th>
 
-                            <Th
-                              header
-                              isFirst
-                              sortable
-                              onClick={() =>
-                                handleSortClick('outbreak_resident_positives')
-                              }
-                              sortDirection={sortDirection(
-                                'outbreak_resident_positives',
-                              )}
-                            >
-                              Outbreak Resident positives
-                            </Th>
-                            <Th
-                              header
-                              sortable
-                              onClick={() =>
-                                handleSortClick('outbreak_resident_deaths')
-                              }
-                              sortDirection={sortDirection(
-                                'outbreak_resident_deaths',
-                              )}
-                            >
-                              Outbreak Resident deaths
-                            </Th>
-                          </>
-                        ) : (
-                          <>
-                            <Th
-                              header
-                              isFirst
-                              sortable
-                              onClick={() =>
-                                handleSortClick('resident_staff_positives')
-                              }
-                              sortDirection={sortDirection(
-                                'resident_staff_positives',
-                              )}
-                            >
-                              Resident &amp; staff positives
-                            </Th>
-                            <Th
-                              header
-                              sortable
-                              onClick={() =>
-                                handleSortClick('resident_staff_deaths')
-                              }
-                              sortDirection={sortDirection(
-                                'resident_staff_deaths',
-                              )}
-                            >
-                              Resident &amp; staff deaths
-                            </Th>
+                          <Th
+                            header
+                            isFirst
+                            sortable
+                            onClick={() =>
+                              handleSortClick('outbreak_resident_positives')
+                            }
+                            sortDirection={sortDirection(
+                              'outbreak_resident_positives',
+                            )}
+                          >
+                            Outbreak Resident positives
+                          </Th>
+                          <Th
+                            header
+                            sortable
+                            onClick={() =>
+                              handleSortClick('outbreak_resident_deaths')
+                            }
+                            sortDirection={sortDirection(
+                              'outbreak_resident_deaths',
+                            )}
+                          >
+                            Outbreak Resident deaths
+                          </Th>
+                        </>
+                      ) : (
+                        <>
+                          <Th
+                            header
+                            isFirst
+                            sortable
+                            onClick={() =>
+                              handleSortClick('resident_staff_positives')
+                            }
+                            sortDirection={sortDirection(
+                              'resident_staff_positives',
+                            )}
+                          >
+                            Resident &amp; staff positives
+                          </Th>
+                          <Th
+                            header
+                            sortable
+                            onClick={() =>
+                              handleSortClick('resident_staff_deaths')
+                            }
+                            sortDirection={sortDirection(
+                              'resident_staff_deaths',
+                            )}
+                          >
+                            Resident &amp; staff deaths
+                          </Th>
 
-                            <Th
-                              header
-                              isFirst
-                              sortable
-                              onClick={() =>
-                                handleSortClick(
-                                  'outbreak_resident_staff_positives',
-                                )
-                              }
-                              sortDirection={sortDirection(
+                          <Th
+                            header
+                            isFirst
+                            sortable
+                            onClick={() =>
+                              handleSortClick(
                                 'outbreak_resident_staff_positives',
-                              )}
-                            >
-                              Outbreak Resident &amp; staff positives
-                            </Th>
-                            <Th
-                              header
-                              sortable
-                              onClick={() =>
-                                handleSortClick(
-                                  'outbreak_resident_staff_deaths',
-                                )
-                              }
-                              sortDirection={sortDirection(
-                                'outbreak_resident_staff_deaths',
-                              )}
-                            >
-                              Outbreak Resident &amp; staff deaths
-                            </Th>
-                          </>
-                        )}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {facilityList.map(facility => {
-                        const facilityId = slugify(
-                          [
-                            facility.county,
-                            facility.city,
-                            facility.facility_name,
-                          ].join('-'),
-                          { lower: true },
-                        )
-                        return (
-                          <tr key={facilityId} id={facilityId}>
-                            {hasCounty && <Td alignLeft>{facility.county}</Td>}
-                            {hasCity && <Td alignLeft>{facility.city}</Td>}
-                            <Td alignLeft>
-                              <button
-                                className={facilitiesStyles.linkButton}
-                                type="button"
-                                onClick={event => {
-                                  event.preventDefault()
-                                  setOpenedFacilityId(facilityId)
-                                  setOpenedFacility(facility)
-                                  window.location.hash = facilityId
-                                }}
-                              >
-                                {facility.facility_name}
-                              </button>
-                            </Td>
-                            <Td alignLeft>{facility.ctp_facility_category}</Td>
-                            {hasResidentData ? (
-                              <>
-                                <Td isFirst>{facility.resident_positives}</Td>
-                                <Td>{facility.resident_deaths}</Td>
-                                <Td isFirst>
-                                  {facility.outbreak_resident_positives}
-                                </Td>
-                                <Td>{facility.outbreak_resident_deaths}</Td>
-                              </>
-                            ) : (
-                              <>
-                                <Td isFirst>
-                                  {facility.resident_staff_positives}
-                                </Td>
-                                <Td>{facility.resident_staff_deaths}</Td>
-                                <Td isFirst>
-                                  {facility.outbreak_resident_staff_positives}
-                                </Td>
-                                <Td>
-                                  {facility.outbreak_resident_staff_deaths}
-                                </Td>
-                              </>
+                              )
+                            }
+                            sortDirection={sortDirection(
+                              'outbreak_resident_staff_positives',
+                            )}
+                          >
+                            Outbreak Resident &amp; staff positives
+                          </Th>
+                          <Th
+                            header
+                            sortable
+                            onClick={() =>
+                              handleSortClick('outbreak_resident_staff_deaths')
+                            }
+                            sortDirection={sortDirection(
+                              'outbreak_resident_staff_deaths',
                             )}
-                          </tr>
-                        )
-                      })}
-                    </tbody>
-                  </Table>
-                  <p>Case totals include confirmed and probable cases.</p>
-                </>
-              ) : (
-                <>
-                  {facilities.length > 0 ? (
-                    <Alert>
-                      No facilities found. Please refine your search.
-                    </Alert>
-                  ) : (
-                    <Alert>Facility information not reported</Alert>
-                  )}
-                </>
-              )}
-            </div>
-          </DisclosurePanel>
-        </Disclosure>
-      </Container>
+                          >
+                            Outbreak Resident &amp; staff deaths
+                          </Th>
+                        </>
+                      )}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {facilityList.map(facility => {
+                      const facilityId = slugify(
+                        [
+                          facility.county,
+                          facility.city,
+                          facility.facility_name,
+                        ].join('-'),
+                        { lower: true },
+                      )
+                      return (
+                        <tr key={facilityId} id={facilityId}>
+                          {hasCounty && <Td alignLeft>{facility.county}</Td>}
+                          {hasCity && <Td alignLeft>{facility.city}</Td>}
+                          <Td alignLeft>
+                            <button
+                              className={facilitiesStyles.linkButton}
+                              type="button"
+                              onClick={event => {
+                                event.preventDefault()
+                                setOpenedFacilityId(facilityId)
+                                setOpenedFacility(facility)
+                                window.location.hash = facilityId
+                              }}
+                            >
+                              {facility.facility_name}
+                            </button>
+                          </Td>
+                          <Td alignLeft>{facility.ctp_facility_category}</Td>
+                          {hasResidentData ? (
+                            <>
+                              <Td isFirst>{facility.resident_positives}</Td>
+                              <Td>{facility.resident_deaths}</Td>
+                              <Td isFirst>
+                                {facility.outbreak_resident_positives}
+                              </Td>
+                              <Td>{facility.outbreak_resident_deaths}</Td>
+                            </>
+                          ) : (
+                            <>
+                              <Td isFirst>
+                                {facility.resident_staff_positives}
+                              </Td>
+                              <Td>{facility.resident_staff_deaths}</Td>
+                              <Td isFirst>
+                                {facility.outbreak_resident_staff_positives}
+                              </Td>
+                              <Td>{facility.outbreak_resident_staff_deaths}</Td>
+                            </>
+                          )}
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </Table>
+                <p>Case totals include confirmed and probable cases.</p>
+              </>
+            ) : (
+              <>
+                {facilities.length > 0 ? (
+                  <Alert>No facilities found. Please refine your search.</Alert>
+                ) : (
+                  <Alert>Facility information not reported</Alert>
+                )}
+              </>
+            )}
+          </div>
+        </DisclosurePanel>
+      </Disclosure>
     </>
   )
 }
diff --git a/src/components/pages/state/long-term-care/facilities.module.scss b/src/components/pages/state/long-term-care/facilities.module.scss
index e32a95b55..b8f05a703 100644
--- a/src/components/pages/state/long-term-care/facilities.module.scss
+++ b/src/components/pages/state/long-term-care/facilities.module.scss
@@ -33,3 +33,19 @@
 .disclosure-button {
   @include remove-button-style();
 }
+
+.map-button {
+  position: absolute;
+  color: white;
+  @include padding(8);
+  border-radius: 4px;
+  background: $color-plum-600;
+  display: block;
+  text-decoration: none;
+  z-index: 1000;
+  top: 2rem;
+  left: 2rem;
+  &:hover {
+    text-decoration: none;
+  }
+}
diff --git a/src/templates/state/long-term-care/index.js b/src/templates/state/long-term-care/index.js
index 04930198c..be7da4a93 100644
--- a/src/templates/state/long-term-care/index.js
+++ b/src/templates/state/long-term-care/index.js
@@ -5,7 +5,6 @@ import LongTermCarePreamble from '~components/pages/state/long-term-care/preambl
 import LongTermCareSummaryTable from '~components/pages/state/long-term-care/summary-table'
 import LongTermCareFacilities from '~components/pages/state/long-term-care/facilities'
 import LongTermCareBarChart from '~components/pages/state/long-term-care/chart'
-import Container from '~components/common/container'
 import LongTermCareAlertNote from '~components/pages/state/long-term-care/alert-note'
 import Layout from '~components/layout'
 
@@ -21,52 +20,47 @@ export default ({ pageContext, path, data }) => {
       ]}
       description={`Cumulative and outbreak data on cases and deaths in nursing homes, assisted living, and other long-term-care facilities in ${state.name}.`}
       path={path}
-      noContainer
     >
       {data.aggregate.nodes.length ? (
         <>
-          <Container>
-            <LongTermCarePreamble
-              state={state.state}
-              stateSlug={state.childSlug.slug}
-              stateName={state.name}
-              overview={data.covidStateInfo.childLtc.current}
-              showFacilities={
-                data.allCovidLtcFacilities.group &&
-                data.allCovidLtcFacilities.group.length > 0
-              }
-            />
-            <LongTermCareBarChart data={data.aggregate.nodes} />
-            {data.covidLtcNotes.alerts && (
-              <LongTermCareAlertNote>
-                {data.covidLtcNotes.alerts}
-              </LongTermCareAlertNote>
-            )}
-            <h2 id="summary">Summary</h2>
-            <LongTermCareSummaryTable
-              aggregate={data.aggregate.nodes[0]}
-              outbreak={data.outbreak.nodes[0]}
-            />
-            <h2 id="notes">State notes</h2>
-            <div
-              dangerouslySetInnerHTML={{
-                __html: marked(data.covidLtcNotes.notes),
-              }}
-            />
-            <h2 id="facilities">Facilities</h2>
-          </Container>
+          <LongTermCarePreamble
+            state={state.state}
+            stateSlug={state.childSlug.slug}
+            stateName={state.name}
+            overview={data.covidStateInfo.childLtc.current}
+            showFacilities={
+              data.allCovidLtcFacilities.group &&
+              data.allCovidLtcFacilities.group.length > 0
+            }
+          />
+          <LongTermCareBarChart data={data.aggregate.nodes} />
+          {data.covidLtcNotes.alerts && (
+            <LongTermCareAlertNote>
+              {data.covidLtcNotes.alerts}
+            </LongTermCareAlertNote>
+          )}
+          <h2 id="facilities">Facilities</h2>
           <LongTermCareFacilities
             stateSlug={slug}
             facilities={data.allCovidLtcFacilities.group}
             stateAbbr={state.state}
           />
+          <h2 id="summary">Summary</h2>
+          <LongTermCareSummaryTable
+            aggregate={data.aggregate.nodes[0]}
+            outbreak={data.outbreak.nodes[0]}
+          />
+          <h2 id="notes">State notes</h2>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: marked(data.covidLtcNotes.notes),
+            }}
+          />
         </>
       ) : (
-        <Container>
-          <LongTermCareAlertNote>
-            {state.name} does not report long-term care data.
-          </LongTermCareAlertNote>
-        </Container>
+        <LongTermCareAlertNote>
+          {state.name} does not report long-term care data.
+        </LongTermCareAlertNote>
       )}
     </Layout>
   )

From ec2535a8d132ed18455c6e22f26924a2815ddc32 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Tue, 16 Feb 2021 14:12:07 -0800
Subject: [PATCH 36/47] chore: Add state to facility card

---
 .../pages/data/long-term-care/map/facility-details.js      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index 83c73774d..0f341d1a1 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -101,10 +101,15 @@ const FacilityDetails = ({ facility, layer }) => (
         <>{facility.facility_name}</>
       )}
     </h2>
-    {layer === 'cms-cases' && (
+    {layer === 'cms-cases' ? (
       <p>
         {facility.city}, {facility.state}
       </p>
+    ) : (
+      <p>
+        {facility.county && <>{facility.county} County</>}
+        {facility.city && <> {facility.city} </>}, {facility.state}
+      </p>
     )}
 
     <dl className={facilityDetailsStyle.details}>

From 2835847281d77a85c33b28a0702ad261ed0af501 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Tue, 16 Feb 2021 14:23:54 -0800
Subject: [PATCH 37/47] chore: Hash out states with no data for a certain layer

---
 .../pages/data/long-term-care/map/index.js        | 12 ++++++++++++
 .../pages/data/long-term-care/map/legend.js       | 15 +++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 09bb9d8a8..1df5efa1d 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -176,11 +176,23 @@ const LTCFacilitiesMap = ({
       'visibility',
       mapLayer === 'cases' ? 'visible' : 'none',
     )
+
+    mapRef.current.setLayoutProperty(
+      'states-no-data-cases',
+      'visibility',
+      mapLayer === 'cases' ? 'visible' : 'none',
+    )
     mapRef.current.setLayoutProperty(
       'states-outbreak-only-deaths',
       'visibility',
       mapLayer === 'deaths' ? 'visible' : 'none',
     )
+
+    mapRef.current.setLayoutProperty(
+      'states-no-data-deaths',
+      'visibility',
+      mapLayer === 'deaths' ? 'visible' : 'none',
+    )
   }, [mapLayer])
 
   return (
diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 86821b3c0..75442a422 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -36,9 +36,20 @@ const Legend = ({ mapLayer }) => (
           ) : (
             <>
               <span className={legendStyles.outbreakOnly} />
-              State reports only outbreak data
+              State reports only outbreak data{' '}
+              {mapLayer === 'cases' ? (
+                <>for cases</>
+              ) : (
+                <>{mapLayer === 'deaths' && <>for deaths</>}</>
+              )}{' '}
               <span className={legendStyles.missing} />
-              State reports no facility data
+              State reports no{' '}
+              {mapLayer === 'cases' ? (
+                <>case</>
+              ) : (
+                <>{mapLayer === 'deaths' ? <>death</> : <>facility</>}</>
+              )}{' '}
+              data
             </>
           )}
         </div>

From e303c9eb069016ce4a97d8d6dfb3885b6c86327d Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 10:51:39 -0800
Subject: [PATCH 38/47] fix: Label in infobox

---
 src/components/pages/data/long-term-care/map/infobox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 3535d481d..0ca32c132 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -76,7 +76,7 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
                 value={facility.outbreak_resident_staff_positives}
               />
               <Item
-                title="Outbreak resident&amp; staff cases"
+                title="Outbreak resident &amp; staff deaths"
                 value={facility.outbreak_resident_staff_deaths}
               />
             </>

From b175b8b4b4385dd8ea41e8c658da12fcf627a8d9 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 11:23:36 -0800
Subject: [PATCH 39/47] chore: Fix link to defintiions

---
 .../pages/data/long-term-care/map/legend.js   | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/legend.js b/src/components/pages/data/long-term-care/map/legend.js
index 75442a422..4458bd73a 100644
--- a/src/components/pages/data/long-term-care/map/legend.js
+++ b/src/components/pages/data/long-term-care/map/legend.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Link } from 'gatsby'
 import Container from '~components/common/container'
 import LayerToggle from '~components/common/map/layer-toggle'
 import legendStyles from './legend.module.scss'
@@ -35,13 +36,19 @@ const Legend = ({ mapLayer }) => (
             <div>All facilities that report to the federal government.</div>
           ) : (
             <>
-              <span className={legendStyles.outbreakOnly} />
-              State reports only outbreak data{' '}
-              {mapLayer === 'cases' ? (
-                <>for cases</>
-              ) : (
-                <>{mapLayer === 'deaths' && <>for deaths</>}</>
-              )}{' '}
+              {(mapLayer === 'cases' || mapLayer === 'deaths') && (
+                <>
+                  <span className={legendStyles.outbreakOnly} />
+                  State reports&nbsp;
+                  <Link to="#ltc-map-definitions">only outbreak data</Link>
+                  &nbsp;
+                  {mapLayer === 'cases' ? (
+                    <>for cases</>
+                  ) : (
+                    <>{mapLayer === 'deaths' && <>for deaths</>}</>
+                  )}{' '}
+                </>
+              )}
               <span className={legendStyles.missing} />
               State reports no{' '}
               {mapLayer === 'cases' ? (

From efeaa0450d5749cf1aa0f8b99a32b82eec7c43bb Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 13:02:40 -0800
Subject: [PATCH 40/47] chore: Add assessment level to map

---
 .../long-term-care/map/facility-details.js    | 20 ++++---
 .../pages/data/long-term-care/map/infobox.js  |  3 +
 .../data/long-term-care/map/state-alert.js    | 60 +++++++++++++++++++
 src/components/pages/state/state-grade.js     |  2 +
 4 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 src/components/pages/data/long-term-care/map/state-alert.js

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index 0f341d1a1..fd832fd9f 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import facilityDetailsStyle from './facility-details.module.scss'
+import StateAlerts from './state-alert'
 
 const fields = {
   ltc: [
@@ -102,14 +103,19 @@ const FacilityDetails = ({ facility, layer }) => (
       )}
     </h2>
     {layer === 'cms-cases' ? (
-      <p>
-        {facility.city}, {facility.state}
-      </p>
+      <>
+        <p>
+          {facility.city}, {facility.state}
+        </p>
+      </>
     ) : (
-      <p>
-        {facility.county && <>{facility.county} County</>}
-        {facility.city && <> {facility.city} </>}, {facility.state}
-      </p>
+      <>
+        <p>
+          {facility.county && <>{facility.county} County</>}
+          {facility.city && <> {facility.city}, </>} {facility.state}
+        </p>
+        <StateAlerts state={facility.state} />
+      </>
     )}
 
     <dl className={facilityDetailsStyle.details}>
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 0ca32c132..69000f78e 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -1,6 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react'
 import Infobox from '~components/common/map/infobox'
+import StateAlert from './state-alert'
 
 const Item = ({ title, value }) => (
   <p>
@@ -45,6 +46,8 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
       ) : (
         <>
           <h3>{facility.facility_name}</h3>
+          <StateAlert state={facility.state} />
+
           {hasResidentData ? (
             <>
               <Item
diff --git a/src/components/pages/data/long-term-care/map/state-alert.js b/src/components/pages/data/long-term-care/map/state-alert.js
new file mode 100644
index 000000000..7429467eb
--- /dev/null
+++ b/src/components/pages/data/long-term-care/map/state-alert.js
@@ -0,0 +1,60 @@
+import React from 'react'
+import { useStaticQuery, graphql, Link } from 'gatsby'
+import infoboxStyle from '~components/common/map/infobox.module.scss'
+import { icons, adjectives } from '~components/pages/state/state-grade'
+
+const StateAlerts = ({ state }) => {
+  const data = useStaticQuery(graphql`
+    {
+      allCovidLtcNotes {
+        nodes {
+          state
+          alerts
+        }
+      }
+      allCovidGradeStateAssessment {
+        nodes {
+          state
+          ltc
+        }
+      }
+      allCovidStateInfo {
+        nodes {
+          state
+          name
+          childSlug {
+            slug
+          }
+        }
+      }
+    }
+  `)
+
+  const alerts = data.allCovidLtcNotes.nodes.find(node => node.state === state)
+  const assessment = data.allCovidGradeStateAssessment.nodes.find(
+    node => node.state === state,
+  )
+  const stateName = data.allCovidStateInfo.nodes.find(
+    node => node.state === state,
+  )
+
+  if (!alerts && !assessment) {
+    return null
+  }
+  return (
+    <div className={infoboxStyle.alert}>
+      <p>
+        <img src={icons[assessment.ltc]} alt="" aria-hidden />
+        <Link
+          to={`/data/state/${stateName.childSlug.slug}/assessment#long-term-care`}
+        >
+          {adjectives[assessment.ltc]} issues exist
+        </Link>{' '}
+        with this state&apos;s data
+        {alerts && alerts.alerts && <>, and the state has an active alert</>}
+      </p>
+    </div>
+  )
+}
+
+export default StateAlerts
diff --git a/src/components/pages/state/state-grade.js b/src/components/pages/state/state-grade.js
index 31bcb9ba7..3b685907c 100644
--- a/src/components/pages/state/state-grade.js
+++ b/src/components/pages/state/state-grade.js
@@ -70,3 +70,5 @@ const StateGrade = ({ slug, assessment, date }) => {
 }
 
 export default StateGrade
+
+export { icons, adjectives }

From 98ff1f885a7bdba7c26c7e545b9735829a789be1 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 13:15:59 -0800
Subject: [PATCH 41/47] chore: Remove alert part

---
 .../pages/data/long-term-care/map/state-alert.js     | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/state-alert.js b/src/components/pages/data/long-term-care/map/state-alert.js
index 7429467eb..8956515e7 100644
--- a/src/components/pages/data/long-term-care/map/state-alert.js
+++ b/src/components/pages/data/long-term-care/map/state-alert.js
@@ -6,12 +6,6 @@ import { icons, adjectives } from '~components/pages/state/state-grade'
 const StateAlerts = ({ state }) => {
   const data = useStaticQuery(graphql`
     {
-      allCovidLtcNotes {
-        nodes {
-          state
-          alerts
-        }
-      }
       allCovidGradeStateAssessment {
         nodes {
           state
@@ -30,7 +24,6 @@ const StateAlerts = ({ state }) => {
     }
   `)
 
-  const alerts = data.allCovidLtcNotes.nodes.find(node => node.state === state)
   const assessment = data.allCovidGradeStateAssessment.nodes.find(
     node => node.state === state,
   )
@@ -38,7 +31,7 @@ const StateAlerts = ({ state }) => {
     node => node.state === state,
   )
 
-  if (!alerts && !assessment) {
+  if (!assessment) {
     return null
   }
   return (
@@ -50,8 +43,7 @@ const StateAlerts = ({ state }) => {
         >
           {adjectives[assessment.ltc]} issues exist
         </Link>{' '}
-        with this state&apos;s data
-        {alerts && alerts.alerts && <>, and the state has an active alert</>}
+        for long-term care data
       </p>
     </div>
   )

From c09a5b7e9630914d9328f6062b5b6ed14e98aff4 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 14:20:55 -0800
Subject: [PATCH 42/47] chore: Fix staff positive

---
 .../pages/data/long-term-care/map/facility-details.js           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index fd832fd9f..d56b30269 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -14,7 +14,7 @@ const fields = {
     },
     {
       title: 'Staff cases',
-      field: 'staff_positives',
+      field: 'staff_positive',
     },
     {
       title: 'Staff deaths',

From e503727903b69a5e7a826e5e317706ecbb1d99d0 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 15:28:00 -0800
Subject: [PATCH 43/47] chore: Add state name

---
 .../long-term-care/map/facility-details.js    | 82 +++++++++++--------
 1 file changed, 50 insertions(+), 32 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index d56b30269..a13376ff0 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import facilityDetailsStyle from './facility-details.module.scss'
 import StateAlerts from './state-alert'
 
@@ -93,42 +94,59 @@ const fields = {
   ],
 }
 
-const FacilityDetails = ({ facility, layer }) => (
-  <>
-    <h2>
+const FacilityDetails = ({ facility, layer }) => {
+  const data = useStaticQuery(graphql`
+    {
+      allCovidStateInfo {
+        nodes {
+          state
+          name
+        }
+      }
+    }
+  `)
+  const states = Object.fromEntries(
+    data.allCovidStateInfo.nodes.map(node => [node.state, node.name]),
+  )
+
+  return (
+    <>
+      <h2>
+        {layer === 'cms-cases' ? (
+          <>{facility.name}</>
+        ) : (
+          <>{facility.facility_name}</>
+        )}
+      </h2>
       {layer === 'cms-cases' ? (
-        <>{facility.name}</>
+        <>
+          <p>
+            {facility.city}, {states[facility.state]}
+          </p>
+        </>
       ) : (
-        <>{facility.facility_name}</>
+        <>
+          <p>
+            {facility.county && <>{facility.county} County, </>}
+            {facility.city && <> {facility.city}, </>} {states[facility.state]}
+          </p>
+          <StateAlerts state={facility.state} />
+        </>
       )}
-    </h2>
-    {layer === 'cms-cases' ? (
-      <>
-        <p>
-          {facility.city}, {facility.state}
-        </p>
-      </>
-    ) : (
-      <>
-        <p>
-          {facility.county && <>{facility.county} County</>}
-          {facility.city && <> {facility.city}, </>} {facility.state}
-        </p>
-        <StateAlerts state={facility.state} />
-      </>
-    )}
-
-    <dl className={facilityDetailsStyle.details}>
-      {fields[layer === 'cms-cases' ? 'cms' : 'ltc'].map(({ title, field }) => (
-        <div key={field}>
-          <dt>{title}</dt>
-          <dd>{facility[field] || <>N/A</>}</dd>
-        </div>
-      ))}
-    </dl>
-  </>
-)
 
+      <dl className={facilityDetailsStyle.details}>
+        {fields[layer === 'cms-cases' ? 'cms' : 'ltc'].map(
+          ({ title, field }) => (
+            <div key={field}>
+              <dt>{title}</dt>
+              <dd>{facility[field] || <>N/A</>}</dd>
+            </div>
+          ),
+        )}
+      </dl>
+    </>
+  )
+}
 export default FacilityDetails
 
 export { fields }

From 836cd320a2dc5cc5c9e256a620675d7fa9947fde Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 15:35:34 -0800
Subject: [PATCH 44/47] chore: Change logic for case/death card

---
 .../pages/data/long-term-care/map/infobox.js  | 81 ++++++++++---------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index 69000f78e..ef64b89c6 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -10,11 +10,11 @@ const Item = ({ title, value }) => (
 )
 
 const LtcInfobox = ({ layer, facility, x, y }) => {
-  const hasResidentData =
-    facility.outbreak_resident_positives ||
-    facility.outbreak_resident_deaths ||
-    facility.resident_positives ||
-    facility.resident_deaths
+  const hasResidentCaseData =
+    facility.outbreak_resident_positives || facility.resident_positives
+
+  const hasResidentDeathData =
+    facility.outbreak_resident_deaths || facility.resident_deaths
   return (
     <Infobox x={x} y={y}>
       {layer === 'cms-cases' ? (
@@ -48,41 +48,44 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
           <h3>{facility.facility_name}</h3>
           <StateAlert state={facility.state} />
 
-          {hasResidentData ? (
-            <>
-              <Item
-                title="Resident cases"
-                value={facility.resident_positives}
-              />
-              <Item title="Resident deaths" value={facility.resident_deaths} />
-              <Item
-                title="Outbreak resident cases"
-                value={facility.outbreak_resident_positives}
-              />
-              <Item
-                title="Outbreak resident cases"
-                value={facility.outbreak_resident_deaths}
-              />
-            </>
+          {hasResidentCaseData ? (
+            <Item title="Resident cases" value={facility.resident_positives} />
+          ) : (
+            <Item
+              title="Resident &amp; staff cases"
+              value={facility.resident_staff_positives}
+            />
+          )}
+          {hasResidentDeathData ? (
+            <Item title="Resident deaths" value={facility.resident_deaths} />
+          ) : (
+            <Item
+              title="Resident &amp; staff deaths"
+              value={facility.resident_staff_deaths}
+            />
+          )}
+
+          {hasResidentCaseData ? (
+            <Item
+              title="Outbreak resident cases"
+              value={facility.outbreak_resident_positives}
+            />
+          ) : (
+            <Item
+              title="Outbreak resident &amp; staff cases"
+              value={facility.outbreak_resident_staff_positives}
+            />
+          )}
+          {hasResidentDeathData ? (
+            <Item
+              title="Outbreak resident deaths"
+              value={facility.outbreak_resident_deaths}
+            />
           ) : (
-            <>
-              <Item
-                title="Resident &amp; staff cases"
-                value={facility.resident_staff_positives}
-              />
-              <Item
-                title="Resident &amp; staff deaths"
-                value={facility.resident_staff_deaths}
-              />
-              <Item
-                title="Outbreak resident &amp; staff cases"
-                value={facility.outbreak_resident_staff_positives}
-              />
-              <Item
-                title="Outbreak resident &amp; staff deaths"
-                value={facility.outbreak_resident_staff_deaths}
-              />
-            </>
+            <Item
+              title="Outbreak resident &amp; staff deaths"
+              value={facility.outbreak_resident_staff_deaths}
+            />
           )}
         </>
       )}

From 63b6a600f5d3ddba9085aeb5da3579d6fbe819a0 Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 16:46:55 -0800
Subject: [PATCH 45/47] chore: Add state to infobox

---
 .../pages/data/long-term-care/map/index.js    | 31 +++++++++++++++----
 .../pages/data/long-term-care/map/infobox.js  | 20 ++++++++++--
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 1df5efa1d..1f1f0449a 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -63,9 +63,19 @@ const LTCFacilitiesMap = ({
       setFacilities(false)
       return
     }
-    const features = mapRef.current.queryRenderedFeatures({
-      layers,
-    })
+    const hashes = []
+    const features = mapRef.current
+      .queryRenderedFeatures({
+        layers: [mapLayer],
+      })
+      .filter(item => {
+        if (hashes.indexOf(item.properties.hash) === -1) {
+          hashes.push(item.properties.hash)
+          return true
+        }
+        return false
+      })
+
     setCurrentZoom(event.target.getZoom())
     setFacilities(
       features.sort((a, b) => {
@@ -120,9 +130,18 @@ const LTCFacilitiesMap = ({
       }
 
       if (window.location.hash && hash.length > 2) {
-        const features = map.queryRenderedFeatures({
-          layers,
-        })
+        const hashes = []
+        const features = map
+          .queryRenderedFeatures({
+            layers: [mapLayer],
+          })
+          .filter(item => {
+            if (hashes.indexOf(item.properties.hash) === -1) {
+              hashes.push(item.properties.hash)
+              return true
+            }
+            return false
+          })
         setFacilities(
           features.sort((a, b) =>
             a.properties.facility_name > b.properties.facility_name ? 1 : -1,
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index ef64b89c6..ca1413243 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import Infobox from '~components/common/map/infobox'
-import StateAlert from './state-alert'
 
 const Item = ({ title, value }) => (
   <p>
@@ -10,6 +10,19 @@ const Item = ({ title, value }) => (
 )
 
 const LtcInfobox = ({ layer, facility, x, y }) => {
+  const data = useStaticQuery(graphql`
+    {
+      allCovidStateInfo {
+        nodes {
+          state
+          name
+        }
+      }
+    }
+  `)
+  const states = Object.fromEntries(
+    data.allCovidStateInfo.nodes.map(node => [node.state, node.name]),
+  )
   const hasResidentCaseData =
     facility.outbreak_resident_positives || facility.resident_positives
 
@@ -46,7 +59,10 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
       ) : (
         <>
           <h3>{facility.facility_name}</h3>
-          <StateAlert state={facility.state} />
+          <p>
+            {facility.county && <>{facility.county} County, </>}
+            {facility.city && <> {facility.city}, </>} {states[facility.state]}
+          </p>
 
           {hasResidentCaseData ? (
             <Item title="Resident cases" value={facility.resident_positives} />

From 34f123d9d4669e07f10851fa2d059fe0e19770aa Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 17:18:19 -0800
Subject: [PATCH 46/47] chore: Remove sidebar numbers

---
 .../pages/data/long-term-care/map/index.js    | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/index.js b/src/components/pages/data/long-term-care/map/index.js
index 1f1f0449a..e3888606a 100644
--- a/src/components/pages/data/long-term-care/map/index.js
+++ b/src/components/pages/data/long-term-care/map/index.js
@@ -66,7 +66,7 @@ const LTCFacilitiesMap = ({
     const hashes = []
     const features = mapRef.current
       .queryRenderedFeatures({
-        layers: [mapLayer],
+        layers,
       })
       .filter(item => {
         if (hashes.indexOf(item.properties.hash) === -1) {
@@ -133,7 +133,7 @@ const LTCFacilitiesMap = ({
         const hashes = []
         const features = map
           .queryRenderedFeatures({
-            layers: [mapLayer],
+            layers,
           })
           .filter(item => {
             if (hashes.indexOf(item.properties.hash) === -1) {
@@ -230,7 +230,6 @@ const LTCFacilitiesMap = ({
               <thead>
                 <tr>
                   <Th alignLeft>Name</Th>
-                  <Th>{mapLayer === 'deaths' ? 'Deaths' : 'Cases'}</Th>
                 </tr>
               </thead>
             </Table>
@@ -240,7 +239,6 @@ const LTCFacilitiesMap = ({
                   <thead className="a11y-only">
                     <tr>
                       <Th alignLeft>Name</Th>
-                      <Th>{mapLayer === 'deaths' ? 'Deaths' : 'Cases'}</Th>
                     </tr>
                   </thead>
                   <tbody>
@@ -273,20 +271,6 @@ const LTCFacilitiesMap = ({
                               : facility.properties.facility_name}
                           </button>
                         </Td>
-                        <Td>
-                          {mapLayer === 'cms-cases' &&
-                            facility.properties[
-                              'residents-total-confirmed-covid-19'
-                            ] +
-                              facility.properties[
-                                'residents-total-suspected-covid-19'
-                              ]}
-                          {(mapLayer === 'cases' ||
-                            mapLayer === 'facilities') &&
-                            facility.properties.radius_positive}
-                          {mapLayer === 'deaths' &&
-                            facility.properties.radius_deaths}
-                        </Td>
                       </tr>
                     ))}
                   </tbody>

From 581443ccfe52cddb30e38f3e9bba7fa64e860c9c Mon Sep 17 00:00:00 2001
From: Kevin Miller <keveemiller@gmail.com>
Date: Wed, 17 Feb 2021 18:18:46 -0800
Subject: [PATCH 47/47] chore: Change order of address

---
 .../pages/data/long-term-care/map/facility-details.js          | 3 ++-
 src/components/pages/data/long-term-care/map/infobox.js        | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/data/long-term-care/map/facility-details.js b/src/components/pages/data/long-term-care/map/facility-details.js
index a13376ff0..b1d57f280 100644
--- a/src/components/pages/data/long-term-care/map/facility-details.js
+++ b/src/components/pages/data/long-term-care/map/facility-details.js
@@ -127,8 +127,9 @@ const FacilityDetails = ({ facility, layer }) => {
       ) : (
         <>
           <p>
+            {facility.city && <> {facility.city}, </>}
             {facility.county && <>{facility.county} County, </>}
-            {facility.city && <> {facility.city}, </>} {states[facility.state]}
+            {states[facility.state]}
           </p>
           <StateAlerts state={facility.state} />
         </>
diff --git a/src/components/pages/data/long-term-care/map/infobox.js b/src/components/pages/data/long-term-care/map/infobox.js
index ca1413243..b61f16897 100644
--- a/src/components/pages/data/long-term-care/map/infobox.js
+++ b/src/components/pages/data/long-term-care/map/infobox.js
@@ -60,8 +60,9 @@ const LtcInfobox = ({ layer, facility, x, y }) => {
         <>
           <h3>{facility.facility_name}</h3>
           <p>
+            {facility.city && <> {facility.city}, </>}
             {facility.county && <>{facility.county} County, </>}
-            {facility.city && <> {facility.city}, </>} {states[facility.state]}
+            {states[facility.state]}
           </p>
 
           {hasResidentCaseData ? (