@cdc/map 2.6.4 → 4.22.10-alpha.1

package/src/components/UsaMap.js

@@ -10,6 +10,7 @@ import { AlbersUsa, Mercator } from '@visx/geo';
 import chroma from 'chroma-js';
 import CityList from './CityList';
 import BubbleList from './BubbleList';
+import { supportedCities, supportedStates } from '../data/supported-geos';
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -70,9 +71,31 @@ const UsaMap = (props) => {
     supportedTerritories,
     rebuildTooltips,
     titleCase,
-    handleCircleClick
+    handleCircleClick,
+    setSharedFilterValue,
+    handleMapAriaLabels
   } = props;
 
+  let isFilterValueSupported = false;
+
+  if(setSharedFilterValue){
+    Object.keys(supportedStates).forEach(supportedState => {
+      if(supportedStates[supportedState].indexOf(setSharedFilterValue.toUpperCase()) !== -1){
+        isFilterValueSupported = true;
+      }
+    });
+    Object.keys(supportedTerritories).forEach(supportedTerritory => {
+      if(supportedTerritories[supportedTerritory].indexOf(setSharedFilterValue.toUpperCase()) !== -1){
+        isFilterValueSupported = true;
+      }
+    });
+    Object.keys(supportedCities).forEach(supportedCity => {
+      if(supportedCity === setSharedFilterValue.toUpperCase()){
+        isFilterValueSupported = true;
+      }
+    });
+  }
+
   // "Choose State" options
   const [extent, setExtent] = useState(null)
   const [focusedStates, setFocusedStates] = useState(unitedStates)
@@ -125,7 +148,7 @@ const UsaMap = (props) => {
 
     if (legendColors) {
       // Use white text if the background is dark, and dark grey if it's light
-      if (chroma.contrast(textColor, legendColors[0]) < 4.5) {
+      if (chroma.contrast(textColor, legendColors[0]) < 3.5) {
         textColor = '#202020';
       }
 
@@ -139,6 +162,8 @@ const UsaMap = (props) => {
       styles = {
         color: textColor,
         fill: legendColors[0],
+        opacity: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== territoryData[state.columns.geo.name] ? .5 : 1,
+        stroke: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === territoryData[state.columns.geo.name] ? 'rgba(0, 0, 0, 1)' : geoStrokeColor,
         cursor: needsPointer ? 'pointer' : 'default',
         '&:hover': {
           fill: legendColors[1],
@@ -155,7 +180,6 @@ const UsaMap = (props) => {
         text={styles.color}
         data-tip={toolTip}
         data-for="tooltip"
-        stroke={geoStrokeColor}
         strokeWidth={1.5}
         onClick={() => geoClickHandler(territory, territoryData)}
       />)
@@ -171,7 +195,7 @@ const UsaMap = (props) => {
       let textColor = "#FFF"
 
       // Dynamic text color
-      if (chroma.contrast(textColor, bgColor) < 4.5 ) {
+      if (chroma.contrast(textColor, bgColor) < 3.5 ) {
         textColor = '#202020';
       }
 
@@ -208,6 +232,25 @@ const UsaMap = (props) => {
   const constructGeoJsx = (geographies, projection) => {
     let showLabel = state.general.displayStateLabels
 
+    // Order alphabetically. Important for accessibility if ever read out loud.
+    geographies.map ( state => {
+      if(!state.feature.properties.iso) return;
+      state.feature.properties.name = titleCase(supportedStates[state.feature.properties.iso][0])
+    })
+
+    geographies.sort( (a,b) => {
+      const first = a.feature.properties.name.toUpperCase(); // ignore upper and lowercase
+      const second = b.feature.properties.name.toUpperCase(); // ignore upper and lowercase
+      if (first < second) {
+        return -1;
+      }
+      if (first > second) {
+        return 1;
+      }
+
+      // names must be equal
+      return 0;
+    })
     const geosJsx = geographies.map(( {feature: geo, path = ''}) => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
@@ -218,6 +261,7 @@ const UsaMap = (props) => {
 
       // Map the name from the geo data with the appropriate key for the processed data
       let geoKey = geo.properties.iso;
+      let geoName = geo.properties.name;
 
       // Manually add Washington D.C. in for Hex maps
 
@@ -240,6 +284,8 @@ const UsaMap = (props) => {
 
         styles = {
           fill: state.general.type !== 'bubble' ? legendColors[0] : '#E6E6E6',
+          opacity: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[state.columns.geo.name] ? .5 : 1,
+          stroke: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === geoData[state.columns.geo.name] ? 'rgba(0, 0, 0, 1)' : geoStrokeColor,
           cursor: 'default',
           '&:hover': {
             fill: state.general.type !== 'bubble' ? legendColors[1] : '#e6e6e6',
@@ -253,43 +299,43 @@ const UsaMap = (props) => {
         if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
           styles.cursor = 'pointer'
         }
-
         return (
+          <g data-name={geoName} key={key}>
+            <g
+              data-for="tooltip"
+              data-tip={tooltip}
+              className="geo-group"
+              css={styles}
+              onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            >
+              <path
+                tabIndex={-1}
+                className='single-geo'
+                strokeWidth={1.3}   
+                d={path}
+              />
+              {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
+            </g>
+          </g>
+        )
+      }
+
+      // Default return state, just geo with no additional information
+      return (
+        <g data-name={geoName} key={key}>
           <g
-            data-for="tooltip"
-            data-tip={tooltip}
-            key={key}         
             className="geo-group"
             css={styles}
-            onClick={() => geoClickHandler(geoDisplayName, geoData)}
           >
             <path
               tabIndex={-1}
               className='single-geo'
               stroke={geoStrokeColor}
-              strokeWidth={1.3}   
+              strokeWidth={1.3}
               d={path}
             />
-            {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
+            {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
           </g>
-        )
-      }
-
-      // Default return state, just geo with no additional information
-      return (
-        <g
-        key={key}
-          className="geo-group"
-          css={styles}
-        >
-          <path
-            tabIndex={-1}
-            className='single-geo'
-            stroke={geoStrokeColor}
-            strokeWidth={1.3}
-            d={path}
-          />
-          {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
         </g>
       )
     });
@@ -307,6 +353,9 @@ const UsaMap = (props) => {
       displayGeoName={displayGeoName}
       applyLegendToRow={applyLegendToRow}
       titleCase={titleCase}
+      setSharedFilterValue={setSharedFilterValue}
+      isFilterValueSupported={isFilterValueSupported}
+      isGeoCodeMap={state.general.type === 'us-geocode'}
     />)
 
     // Bubbles
@@ -330,7 +379,11 @@ const UsaMap = (props) => {
   
   return (
     <ErrorBoundary component="UsaMap">
-      <svg viewBox="0 0 880 500">
+      <svg 
+        viewBox="0 0 880 500" 
+        role="img" 
+        aria-label={handleMapAriaLabels(state)}
+      >
         {state.general.displayAsHex ?
             (<Mercator data={unitedStatesHex} scale={650} translate={[1600, 775]}>
               {({ features, projection }) => constructGeoJsx(features, projection)}

package/src/components/UsaRegionMap.js

@@ -32,7 +32,8 @@ const UsaRegionMap = (props) => {
     supportedTerritories,
     rebuildTooltips,
     titleCase,
-    handleCircleClick
+    handleCircleClick,
+    handleMapAriaLabels
   } = props;
 
   // "Choose State" options
@@ -299,7 +300,7 @@ const UsaRegionMap = (props) => {
   
   return (
     <ErrorBoundary component="UsaRegionMap">
-      <svg viewBox="0 0 880 500">
+      <svg viewBox="0 0 880 500" role="img" aria-label={handleMapAriaLabels(state)}>
 
         <Mercator data={focusedStates} scale={620} translate={[1500, 735]}>
           {({ features, projection }) => constructGeoJsx(features, projection)}

package/src/components/WorldMap.js

@@ -31,7 +31,8 @@ const WorldMap = (props) => {
     setFilteredCountryCode,
     position,
     setPosition,
-    hasZoom
+    hasZoom,
+    handleMapAriaLabels
   } = props;
 
 // TODO Refactor - state should be set together here to avoid rerenders
@@ -173,6 +174,7 @@ const ZoomControls = ({position, setPosition, state, setState, setRuntimeData, g
       applyTooltipsToGeo={applyTooltipsToGeo}
       displayGeoName={displayGeoName}
       applyLegendToRow={applyLegendToRow}
+			isGeoCodeMap={state.general.type === 'us-geocode'}
     />)
 
     // Bubbles
@@ -198,7 +200,11 @@ const ZoomControls = ({position, setPosition, state, setState, setRuntimeData, g
   return (
     <ErrorBoundary component="WorldMap">
       {hasZoom ? (
-        <svg viewBox="0 0 880 500">
+        <svg 
+          viewBox="0 0 880 500"
+          role="img"
+          aria-label={handleMapAriaLabels(state)}
+        >
           <rect height={500} width={880} onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} fill="white"/>
           <ZoomableGroup
             zoom={position.zoom}

package/src/data/initial-state.js

@@ -42,7 +42,9 @@ export default {
     },
     navigate: {
       name: ''
-    }
+    },
+    latitude: { name: "" },
+    longitude: { name: "" }
   },
   legend: {
     descriptions: {},
@@ -70,7 +72,8 @@ export default {
   visual: {
     minBubbleSize: 1,
     maxBubbleSize: 20,
-    extraBubbleBorder: false
+    extraBubbleBorder: false,
+    cityStyle: 'circle'
   },
   mapPosition: 
     { coordinates: [0, 30], zoom: 1 }

package/src/data/supported-geos.js

@@ -497,7 +497,12 @@ export const supportedTerritories = {
 };
 
 export const supportedCities = {
+  'GAINESVILLE': [-82.3248, 29.6516],
   'DISTRICT OF COLUMBIA': [-77.036873, 38.907192],
+  'US-DC': [-77.036873, 38.907192],
+  'WASHINGTON D.C.': [-77.036873, 38.907192],
+  'WASHINGTON DC.': [-77.036873, 38.907192],
+  'WASHINGTON DC': [-77.036873, 38.907192],
   'LOS ANGELES COUNTY': [-118.229362, 34.058762],
   MESA: [-111.831474, 33.415184],
   PHOENIX: [-112.074036, 33.448376],
@@ -531,6 +536,7 @@ export const supportedCities = {
   'NEW YORK CITY': [-74.005974, 40.712776],
   OMAHA: [-95.934502, 41.256538],
   'LAS VEGAS': [-115.139832, 36.169941],
+  "SALEM, ILLINOIS":[-88.945618,38.626991],
   CLEVELAND: [-81.694359, 41.499321],
   COLUMBUS: [-82.998795, 39.961178],
   'OKLAHOMA CITY': [-97.516426, 35.467560],
@@ -557,6 +563,10 @@ export const supportedCities = {
   HONOLULU: [-157.858337, 21.306944],
   'SANTA ANA': [-117.867653, 33.745472],
   RIVERSIDE: [-117.375496, 33.980602],
+  'SAN BERNARDINO':[-117.302399,34.115784],
+  'SANTA CLARA':[-121.955238,37.354107],
+   MARION:[-88.9330556,37.7305556],
+   PASADENA:[-95.209099,29.691063],
   'CORPUS CHRISTI': [-97.396378, 27.800583],
   LEXINGTON: [-84.503716, 38.040585],
   STOCKTON: [-121.290779, 37.957703],

package/src/index.html

@@ -15,23 +15,19 @@
 	<body>
 		<!-- DEFAULT EXAMPLES -->
 		<!-- <div class="react-container react-container--maps" data-config="/examples/default-county.json"></div> -->
-		 <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div>
-<!--		 <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-usa.json"></div>-->
+		<!-- <div class="react-container react-container--maps" data-config="/examples/default-geocode.json"></div> -->
+		 <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div> -->
 		<!-- <div class="react-container react-container--maps" data-config="/examples/default-world.json"></div> -->
-		<!-- <div class="react-container react-container--maps" data-config="/examples/private/world.json"></div> -->
 		<!-- <div class="react-container react-container--maps" data-config="/examples/bubble-us.json"></div/> -->
 <!--		<div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-world.json"></div>-->
-		<!-- <div class="react-container react-container--maps" data-config="/examples/private/nav-only.json"></div> -->
-		<!-- <div class="react-container react-container--maps" data-config="/examples/private/example-hex-map-with-filter.json"></div> -->
-		<!-- <div class="react-container react-container--maps" data-config="/examples/default-single-state.json"></div> -->
+		<div class="react-container react-container--maps" data-config="/examples/default-single-state.json"></div>
 		
 		<!-- TP4 EXAMPLES -->
 		<!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div>  -->
 		<!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div>  -->
 		<!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div>  -->
-		<!-- <div class="react-container react-container--maps" data-config="/examples/private/atsdr.json"></div>  -->
-		
 		
+
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 	</body>
 </html>

package/src/scss/editor-panel.scss

@@ -30,7 +30,8 @@
         fill: currentColor
       }
     }
-    li {
+    button {
+      background: transparent;
       padding: .3em .75em;
       display: flex;
       border: $lightGray 1px solid;
@@ -239,7 +240,6 @@
         display: block;
         text-align: left;
         cursor: pointer;
-        color: rgba(0,0,0,.5);
         text-decoration: underline;
         span {
           text-decoration: none;

package/src/scss/main.scss

@@ -9,11 +9,6 @@
   .loading > div.la-ball-beat {
     margin-top: 20%;
   }
-  @include breakpointClass(xs) {
-    div#tooltip {
-      display: none !important;
-    }
-  }
   @include breakpointClass(md) {
     .map-container.modal-background::before {
       border-bottom: $lightGray 1px solid;
@@ -221,4 +216,4 @@
     outline-color: rgb(0, 95, 204)
   }
   
-}
+}

package/src/scss/map.scss

@@ -55,6 +55,12 @@ header + .map-container.full-border {
 			flex-direction: row;
 		}
 	}
+
+	.map-container.us-geocode {
+		&.side {
+			flex-direction: row;
+		}
+	}
 }
 
 .geography-container {
@@ -155,6 +161,9 @@ header + .map-container.full-border {
 			height: 1.75em;
 			width: 1.75em;
 		}
+		&:focus {
+			background: #005eaa;
+		}
 	}
 	> button:first-child {
 		margin-right: 0.25em;
@@ -170,6 +179,7 @@ header + .map-container.full-border {
 			width: 2.5em;
 		}
 	}
+	
 }
 
 @include breakpointClass(md) {
@@ -292,3 +302,11 @@ header + .map-container.full-border {
 		transform: translateY(34px);
 	}
 }
+
+.county-borders {
+  fill: none;
+  stroke-width: 1px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  pointer-events: none;
+}

package/src/scss/sidebar.scss

@@ -68,6 +68,7 @@ aside {
       padding: 0;
       display: flex;
       flex-wrap: wrap;
+      button { font-size: unset; background: transparent; }
       li {
         flex-shrink: 0;
         display: inline-block;
@@ -76,7 +77,7 @@ aside {
         vertical-align: middle;
         transition: .1s opacity;
         display: flex;
-        align-items: center;
+        // align-items: center;
         &.single-legend {
           cursor: pointer;
         }