@cdc/map 4.26.2 → 4.26.4

package/src/components/WorldMap/worldMap.styles.css

@@ -4,8 +4,8 @@
   }
   .geography-container {
     cursor: move;
-    position: relative;
     flex-grow: 1;
+    position: relative;
     width: 100%;
     .geo-point {
       transition: 0.3s all;

package/src/components/ZoomControls.tsx

@@ -13,27 +13,58 @@ type ZoomControlsProps = {
 const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleZoomReset }) => {
   const { config, setRuntimeData, position } = useContext<MapContext>(ConfigContext)
   if (!config.general.allowMapZoom) return
+
+  const isUsGeocodeMap = config.general.type === 'us-geocode'
+  const shouldShowUsGeocodeReset = isUsGeocodeMap && position.zoom > 1
+  const shouldShowBottomReset = config.general.geoType === 'single-state' || config.general.type === 'bubble'
+
+  if (!isUsGeocodeMap) {
+    return (
+      <div className='zoom-controls' data-html2canvas-ignore='true'>
+        <button onClick={() => handleZoomIn(position)} aria-label='Zoom In'>
+          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+            <line x1='12' y1='5' x2='12' y2='19' />
+            <line x1='5' y1='12' x2='19' y2='12' />
+          </svg>
+        </button>
+        <button onClick={() => handleZoomOut(position)} aria-label='Zoom Out'>
+          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+            <line x1='5' y1='12' x2='19' y2='12' />
+          </svg>
+        </button>
+        {shouldShowBottomReset && (
+          <button onClick={() => handleZoomReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
+            Reset Zoom
+          </button>
+        )}
+      </div>
+    )
+  }
+
   return (
-    <div className='zoom-controls' data-html2canvas-ignore='true'>
-      <button onClick={() => handleZoomIn(position)} aria-label='Zoom In'>
-        <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
-          <line x1='12' y1='5' x2='12' y2='19' />
-          <line x1='5' y1='12' x2='19' y2='12' />
-        </svg>
-      </button>
-      <button onClick={() => handleZoomOut(position)} aria-label='Zoom Out'>
-        <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
-          <line x1='5' y1='12' x2='19' y2='12' />
-        </svg>
-      </button>
-      {(config.general.type === 'world-geocode' ||
-        config.general.geoType === 'single-state' ||
-        config.general.type === 'bubble') && (
-        <button onClick={() => handleZoomReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
-          Reset Zoom
+    <>
+      <div className='zoom-controls' data-html2canvas-ignore='true'>
+        <button onClick={() => handleZoomIn(position)} aria-label='Zoom In'>
+          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+            <line x1='12' y1='5' x2='12' y2='19' />
+            <line x1='5' y1='12' x2='19' y2='12' />
+          </svg>
+        </button>
+        <button onClick={() => handleZoomOut(position)} aria-label='Zoom Out'>
+          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+            <line x1='5' y1='12' x2='19' y2='12' />
+          </svg>
         </button>
+      </div>
+
+      {shouldShowUsGeocodeReset && (
+        <div className='zoom-controls zoom-controls--top-right' data-html2canvas-ignore='true'>
+          <button onClick={() => handleZoomReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
+            Reset Zoom
+          </button>
+        </div>
       )}
-    </div>
+    </>
   )
 }
 

package/src/components/zoomControls.styles.css

@@ -1,14 +1,14 @@
 .zoom-controls {
-  display: flex;
-  position: absolute;
   bottom: 2em;
+  display: flex;
   left: 1em;
+  position: absolute;
   z-index: 4;
   > button.reset {
-    margin-left: 5px;
     background: rgba(0, 0, 0, 0.65);
-    transition: 0.2s all;
     color: #fff;
+    margin-left: 5px;
+    transition: 0.2s all;
     &:hover {
       background: rgba(0, 0, 0, 0.8);
       transition: 0.2s all;
@@ -21,17 +21,17 @@
     }
   }
   > button:not(.reset) {
-    display: flex;
     align-items: center;
+    background: rgba(0, 0, 0, 0.65);
+    border: 0;
+    border-radius: 100%;
+    color: #fff;
+    display: flex;
+    height: 1.75em;
     justify-content: center;
     padding: 0.2em;
-    height: 1.75em;
-    width: 1.75em;
-    background: rgba(0, 0, 0, 0.65);
     transition: 0.2s all;
-    color: #fff;
-    border-radius: 100%;
-    border: 0;
+    width: 1.75em;
     &:hover {
       background: rgba(0, 0, 0, 0.8);
       transition: 0.2s all;
@@ -51,3 +51,19 @@
     margin-right: 0.25em;
   }
 }
+
+.zoom-controls--top-right {
+  bottom: auto;
+  left: auto;
+  right: 1em;
+  top: 1em;
+}
+
+.zoom-controls--top-right > button.reset {
+  background: #005eaa;
+}
+
+.zoom-controls--top-right > button.reset:hover,
+.zoom-controls--top-right > button.reset:focus {
+  background: #004b88;
+}

package/src/data/initial-state.js

@@ -41,6 +41,7 @@ const createInitialState = () => {
       allowMapZoom: true,
       hideGeoColumnInTooltip: false,
       hidePrimaryColumnInTooltip: false,
+      hideUnselectedStates: true,
       statesPicked: []
     },
     type: 'map',
@@ -49,7 +50,8 @@ const createInitialState = () => {
         name: 'FIPS Codes',
         label: 'Location',
         tooltip: false,
-        dataTable: true
+        dataTable: true,
+        displayColumn: ''
       },
       primary: {
         dataTable: true,
@@ -76,14 +78,14 @@ const createInitialState = () => {
       showSpecialClassesLast: false,
       dynamicDescription: false,
       type: 'equalnumber',
-      numberOfItems: 3,
-      position: 'side',
+      numberOfItems: 5,
+      position: 'top',
       title: '',
-      style: 'circles',
+      style: 'gradient',
       subStyle: 'linear blocks',
       tickRotation: '',
       singleColumnLegend: false,
-      hideBorder: false,
+      hideBorder: true,
       groupBy: ''
     },
     filters: [],
@@ -96,6 +98,7 @@ const createInitialState = () => {
       height: '',
       caption: '',
       showDownloadUrl: false,
+      downloadUrlLabel: '',
       showDataTableLink: true,
       showDownloadLinkBelow: true,
       showFullGeoNameInCSV: false,
@@ -114,6 +117,13 @@ const createInitialState = () => {
       editorErrorMessage: []
     },
     visual: {
+      border: false,
+      borderColorTheme: false,
+      accent: false,
+      background: false,
+      hideBackgroundColor: false,
+      tp5Treatment: false,
+      tp5Background: false,
       minBubbleSize: 1,
       maxBubbleSize: 20,
       extraBubbleBorder: false,

package/src/data/legacy-defaults.ts

@@ -0,0 +1,8 @@
+// Preserves the OLD default values for properties changed in initial-state.js.
+// When the backfill loop fills a missing property, it uses these values instead
+// of the current defaults so that existing configs aren't visually affected.
+//
+// See backfillDefaults() in @cdc/core for the shared fill logic.
+export const LEGACY_MAP_DEFAULTS: Record<string, Record<string, unknown>> = {
+  legend: { style: 'circles', position: 'side', numberOfItems: 3, hideBorder: false }
+}