@cdc/map 4.23.2 → 4.23.4

package/src/components/Sidebar.jsx

@@ -22,6 +22,8 @@ const Sidebar = props => {
 
     newLegend['disabledAmt'] = newValue ? disabledAmt + 1 : disabledAmt - 1
 
+    newLegend.runtimeDataHash = runtimeLegend.runtimeDataHash
+
     setRuntimeLegend(newLegend)
 
     setAccessibleStatus(`Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`)

package/src/components/UsaMap.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, memo } from 'react'
 
 import { jsx } from '@emotion/react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { geoCentroid } from 'd3-geo'
+import { geoCentroid, geoPath } from 'd3-geo'
 import { feature } from 'topojson-client'
 import topoJSON from '../data/us-topo.json'
 import hexTopoJSON from '../data/us-hex-topo.json'
@@ -11,6 +11,9 @@ import chroma from 'chroma-js'
 import CityList from './CityList'
 import BubbleList from './BubbleList'
 import { supportedCities, supportedStates } from '../data/supported-geos'
+import { geoAlbersUsa } from 'd3-composite-projections'
+
+import useMapLayers from '../hooks/useMapLayers'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -79,6 +82,7 @@ const UsaMap = props => {
         isFilterValueSupported = true
       }
     })
+
     Object.keys(supportedTerritories).forEach(supportedTerritory => {
       if (supportedTerritories[supportedTerritory].indexOf(setSharedFilterValue.toUpperCase()) !== -1) {
         isFilterValueSupported = true
@@ -109,11 +113,15 @@ const UsaMap = props => {
   const territoriesKeys = Object.keys(supportedTerritories) // data will have already mapped abbreviated territories to their full names
 
   useEffect(() => {
-    // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
-    const territoriesList = territoriesKeys.filter(key => data[key])
-
-    setTerritoriesData(territoriesList)
-  }, [data])
+    if (state.general.territoriesAlwaysShow) {
+      // show all Territories whether in the data or not
+      setTerritoriesData(territoriesKeys)
+    } else {
+      // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
+      const territoriesList = territoriesKeys.filter(key => data[key])
+      setTerritoriesData(territoriesList)
+    }
+  }, [data, state.general.territoriesAlwaysShow])
 
   const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
 
@@ -166,10 +174,7 @@ const UsaMap = props => {
         }
       }
 
-      return <Shape key={label} label={label} css={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)}
-                    data-tooltip-id="tooltip"
-                    data-tooltip-html={toolTip}
-      />
+      return <Shape key={label} label={label} css={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
     }
   })
 
@@ -216,6 +221,9 @@ const UsaMap = props => {
     )
   }
 
+  let pathGenerator = geoPath().projection(geoAlbersUsa().translate(translate))
+  const { pathArray } = useMapLayers(state, '', pathGenerator)
+
   // Constructs and displays markup for all geos on the map (except territories right now)
   const constructGeoJsx = (geographies, projection) => {
     let showLabel = state.general.displayStateLabels
@@ -291,11 +299,7 @@ const UsaMap = props => {
 
         return (
           <g data-name={geoName} key={key}>
-            <g className='geo-group' css={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)}
-               id={geoName}
-               data-tooltip-id="tooltip"
-               data-tooltip-html={tooltip}
-               >
+            <g className='geo-group' css={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id='tooltip' data-tooltip-html={tooltip}>
               <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
               {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
             </g>
@@ -319,18 +323,18 @@ const UsaMap = props => {
     // Cities
     geosJsx.push(
       <CityList
-        projection={projection}
-        key='cities'
-        data={data}
-        state={state}
-        geoClickHandler={geoClickHandler}
+        applyLegendToRow={applyLegendToRow}
         applyTooltipsToGeo={applyTooltipsToGeo}
+        data={data}
         displayGeoName={displayGeoName}
-        applyLegendToRow={applyLegendToRow}
-        titleCase={titleCase}
-        setSharedFilterValue={setSharedFilterValue}
+        geoClickHandler={geoClickHandler}
         isFilterValueSupported={isFilterValueSupported}
         isGeoCodeMap={state.general.type === 'us-geocode'}
+        key='cities'
+        projection={projection}
+        setSharedFilterValue={setSharedFilterValue}
+        state={state}
+        titleCase={titleCase}
       />
     )
 
@@ -339,6 +343,13 @@ const UsaMap = props => {
       geosJsx.push(<BubbleList key='bubbles' data={state.data} runtimeData={data} state={state} projection={projection} applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} displayGeoName={displayGeoName} />)
     }
 
+    // })
+
+    if (pathArray.length > 0) {
+      pathArray.map(layer => {
+        return geosJsx.push(layer)
+      })
+    }
     return geosJsx
   }
 

package/src/components/WorldMap.jsx

@@ -1,4 +1,4 @@
-import { useEffect, memo } from 'react'
+import { memo } from 'react'
 
 import { jsx } from '@emotion/react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -16,7 +16,21 @@ const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 let projection = geoMercator()
 
 const WorldMap = props => {
-  const { state, applyTooltipsToGeo, data, geoClickHandler, applyLegendToRow, displayGeoName, supportedCountries, setState, setRuntimeData, generateRuntimeData, setFilteredCountryCode, position, setPosition, hasZoom, handleMapAriaLabels } = props
+  const {
+    state,
+    applyTooltipsToGeo,
+    data,
+    geoClickHandler,
+    applyLegendToRow,
+    displayGeoName,
+    supportedCountries,
+    setState, setRuntimeData,
+    generateRuntimeData,
+    setFilteredCountryCode,
+    position, setPosition,
+    hasZoom,
+    handleMapAriaLabels,
+    titleCase } = props
 
   // TODO Refactor - state should be set together here to avoid rerenders
   // Resets to original data & zooms out
@@ -58,6 +72,11 @@ const WorldMap = props => {
           Reset Filters
         </button>
       )}
+      {state.general.type === 'world-geocode' && (
+        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom'>
+          Reset Zoom
+        </button>
+      )}
     </div>
   )
 
@@ -76,7 +95,7 @@ const WorldMap = props => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
       const geoKey = geo.properties.iso
 
-      if (!geoKey) return
+      if (!geoKey) return null;
 
       const geoData = data[geoKey]
 
@@ -104,13 +123,13 @@ const WorldMap = props => {
 
         styles = {
           ...styles,
-          fill: legendColors[0],
+          fill: state.general.type !== 'world-geocode' ? legendColors[0] : '#E6E6E6',
           cursor: 'default',
           '&:hover': {
-            fill: legendColors[1]
+            fill: state.general.type !== 'world-geocode' ? legendColors[1] : '#E6E6E6'
           },
           '&:active': {
-            fill: legendColors[2]
+            fill: state.general.type !== 'world-geocode' ? legendColors[2] : '#E6E6E6'
           }
         }
 
@@ -136,7 +155,20 @@ const WorldMap = props => {
     })
 
     // Cities
-    geosJsx.push(<CityList projection={projection} key='cities' data={data} state={state} geoClickHandler={geoClickHandler} applyTooltipsToGeo={applyTooltipsToGeo} displayGeoName={displayGeoName} applyLegendToRow={applyLegendToRow} isGeoCodeMap={state.general.type === 'us-geocode'} />)
+    geosJsx.push(
+      <CityList
+        applyLegendToRow={applyLegendToRow}
+        applyTooltipsToGeo={applyTooltipsToGeo}
+        data={data}
+        displayGeoName={displayGeoName}
+        geoClickHandler={geoClickHandler}
+        isGeoCodeMap={state.general.type === 'world-geocode'}
+        key='cities'
+        projection={projection}
+        state={state}
+        titleCase={titleCase}
+      />
+    )
 
     // Bubbles
     if (state.general.type === 'bubble') {
@@ -174,7 +206,7 @@ const WorldMap = props => {
           </ZoomableGroup>
         </svg>
       )}
-      {(state.general.type === 'data' || (state.general.type === 'bubble' && hasZoom)) && <ZoomControls position={position} setPosition={setPosition} setRuntimeData={setRuntimeData} state={state} setState={setState} generateRuntimeData={generateRuntimeData} />}
+      {(state.general.type === 'data' || (state.general.type === 'world-geocode' && hasZoom) || (state.general.type === 'bubble' && hasZoom)) && <ZoomControls position={position} setPosition={setPosition} setRuntimeData={setRuntimeData} state={state} setState={setState} generateRuntimeData={generateRuntimeData} />}
     </ErrorBoundary>
   )
 }

package/src/data/feature-test.json

@@ -0,0 +1,73 @@
+{
+  "type": "Topology",
+  "arcs": [
+    [
+      [
+        33,
+        100
+      ],
+      [
+        -6,
+        9
+      ],
+      [
+        30,
+        66
+      ],
+      [
+        102,
+        -42
+      ],
+      [
+        -118,
+        -133
+      ],
+      [
+        11,
+        39
+      ],
+      [
+        -52,
+        39
+      ],
+      [
+        33,
+        22
+      ]
+    ]
+  ],
+  "transform": {
+    "scale": [
+      0.04505085471698112,
+      0.04496205714285712
+    ],
+    "translate": [
+      -116.2012448,
+      33.3764121
+    ]
+  },
+  "objects": {
+    "Untitled layer": {
+      "type": "GeometryCollection",
+      "geometries": [
+        {
+          "arcs": [
+            [
+              0
+            ]
+          ],
+          "type": "Polygon",
+          "properties": {
+            "name": "new",
+            "styleUrl": "#poly-000000-1200-77-nodesc",
+            "fill-opacity": 0.30196078431372547,
+            "fill": "#000000",
+            "stroke-opacity": 1,
+            "stroke": "#000000",
+            "stroke-width": 1.2
+          }
+        }
+      ]
+    }
+  }
+}

package/src/data/initial-state.js

@@ -2,6 +2,7 @@ export default {
   general: {
     geoBorderColor: 'darkGray',
     headerColor: 'theme-blue',
+    title: '',
     showTitle: true,
     showSidebar: true,
     showDownloadButton: true,
@@ -9,6 +10,7 @@ export default {
     displayAsHex: false,
     displayStateLabels: false,
     territoriesLabel: 'Territories',
+    territoriesAlwaysShow: false,
     language: 'en',
     geoType: 'single-state',
     geoLabelOverride: '',
@@ -23,7 +25,6 @@ export default {
     hideGeoColumnInTooltip: false,
     hidePrimaryColumnInTooltip: false
   },
-
   type: 'map',
   color: 'pinkpurple',
   columns: {
@@ -53,6 +54,7 @@ export default {
     unified: false,
     singleColumn: false,
     singleRow: false,
+    showSpecialClassesLast: false,
     dynamicDescription: false,
     type: 'equalnumber',
     numberOfItems: 3,
@@ -64,7 +66,8 @@ export default {
     title: 'Data Table'
   },
   table: {
-    showDownloadUrl: false
+    showDownloadUrl: false,
+    showDataTableLink: true
   },
   tooltips: {
     appearanceType: 'hover',
@@ -82,5 +85,9 @@ export default {
     geoCodeCircleSize: 2,
     showBubbleZeros: false
   },
-  mapPosition: { coordinates: [0, 30], zoom: 1 }
+  mapPosition: { coordinates: [0, 30], zoom: 1 },
+  map: {
+    layers: []
+  },
+  filterBehavior: 'Filter Change'
 }

package/src/data/supported-geos.js

@@ -121,13 +121,13 @@ export const stateToIso = {
 }
 
 export const stateFipsToTwoDigit = {
-  ['01']: 'AL',
-  ['02']: 'AK',
-  ['04']: 'AZ',
-  ['05']: 'AR',
-  ['06']: 'CA',
-  ['08']: 'CO',
-  ['09']: 'CT',
+  ['01']: 'AL', // eslint-disable-line
+  ['02']: 'AK', // eslint-disable-line
+  ['04']: 'AZ', // eslint-disable-line
+  ['05']: 'AR', // eslint-disable-line
+  ['06']: 'CA', // eslint-disable-line
+  ['08']: 'CO', // eslint-disable-line
+  ['09']: 'CT', // eslint-disable-line
   10: 'DE',
   11: 'DC',
   12: 'FL',

package/src/hooks/useMapLayers.jsx

@@ -0,0 +1,243 @@
+import { useEffect, useId, useState } from 'react'
+import { feature } from 'topojson-client'
+import { Group } from '@visx/group'
+
+/**
+ * This is the starting structure for adding custom geoJSON shape layers to a projection.
+ * The expectation should be that geoJSON is saved somewhere externally.
+ *
+ * todo: save map layers to local state and add debounce fn to improve performance
+ * todo: usaMap is using objects.cove which needs to be converted to a dynamic value
+ *
+ * User Interface Expectations:
+ * 1) Direct users  to https://www.google.com/maps/about/mymaps to create a map
+ * 2) Export the shape layer as a kml file and import into mapshaper.org
+ * 3) Clean (ie. mapshaper -clean) and edit the shape as needed and export the new layer as geoJSON
+ * 4) Save the geoJSON somewhere external.
+ */
+export default function useMapLayers(config, setConfig, pathGenerator) {
+  const [fetchedTopoJSON, setFetchedTopoJSON] = useState([])
+  const geoId = useId()
+
+  // small reminder that we export the feature and the path as options
+  const [pathArray, setPathArray] = useState([])
+  const [featureArray, setFeatureArray] = useState([])
+
+  useEffect(() => {
+    fetchGeoJSONLayers()
+  }, []) //eslint-disable-line
+
+  useEffect(() => {
+    fetchGeoJSONLayers()
+  }, [config.map.layers]) //eslint-disable-line
+
+  useEffect(() => {
+    if (pathGenerator) {
+      generateCustomLayers()
+    }
+  }, [fetchedTopoJSON]) //eslint-disable-line
+
+  const fetchGeoJSONLayers = async () => {
+    let geos = await getMapTopoJSONLayers()
+    setFetchedTopoJSON(geos)
+  }
+
+  /**
+   * Removes a custom map layer from the config.
+   * @param { Event } e Remove onclick event
+   * @param { Integer } index index of layer to remove
+   */
+  const handleRemoveLayer = (e, index) => {
+    e.preventDefault()
+
+    const updatedState = {
+      ...config,
+      map: {
+        ...config.map,
+        layers: config.map.layers.filter((layer, i) => i !== index)
+      }
+    }
+
+    setConfig(updatedState)
+  }
+
+  /**
+   * Adds a new custom map layer to the config
+   * @param { Event } e Add onclick event
+   */
+  const handleAddLayer = e => {
+    e.preventDefault()
+    const updatedState = {
+      ...config,
+      map: {
+        ...config.map,
+        layers: [
+          ...config.map.layers,
+          {
+            name: 'New Custom Layer',
+            url: ''
+          }
+        ]
+      }
+    }
+    setConfig(updatedState)
+  }
+
+  /**
+   * Updates the index of the layer tooltip
+   * @param {Event} e
+   * @param {Integer} index
+   */
+  const handleMapLayerTooltip = (e, index) => {
+    e.preventDefault()
+    let newLayers = [...config.map.layers]
+
+    newLayers[index].tooltip = e.target.value
+
+    setConfig({
+      ...config,
+      map: {
+        ...config.map,
+        layers: newLayers
+      }
+    })
+  }
+
+  /**
+   * Changes the map layer url for a given index
+   * @param {Event} e - on add custom layer click
+   * @param {Integer} index - index of layer to update
+   */
+  const handleMapLayerUrl = (e, index) => {
+    e.preventDefault()
+    let newLayers = [...config.map.layers]
+
+    newLayers[index].url = e.target.value
+
+    setConfig({
+      ...config,
+      map: {
+        ...config.map,
+        layers: newLayers
+      }
+    })
+  }
+
+  /**
+   * Changes the map layer name for a given index
+   * @param {Event} e - on add custom layer click
+   * @param {Integer} index - index of layer to update
+   */
+  const handleMapLayerName = (e, index) => {
+    e.preventDefault()
+
+    let newLayers = [...config.map.layers]
+
+    newLayers[index].name = e.target.value
+
+    setConfig({
+      ...config,
+      map: {
+        ...config.map,
+        layers: newLayers
+      }
+    })
+  }
+
+  /**
+   * Changes the map layer namespace for a given index
+   * @param {Event} e - on add custom layer click
+   * @param {Integer} index - index of layer to update
+   */
+  const handleMapLayerNamespace = (e, index) => {
+    e.preventDefault()
+
+    let newLayers = [...config.map.layers]
+
+    newLayers[index].namespace = e.target.value
+
+    setConfig({
+      ...config,
+      map: {
+        ...config.map,
+        layers: newLayers
+      }
+    })
+  }
+
+  /**
+   * Fetches TopoJSON urls found in config.map.layers and stores it locally.
+   * @returns
+   */
+  const getMapTopoJSONLayers = async () => {
+    let TopoJSONObjects = []
+    if (!config.map.layers) return
+
+    for (const mapLayer of config.map.layers) {
+      let newLayerItem = await fetch(mapLayer.url)
+        .then(res => res.json())
+        .catch(e => console.warn('error with newLayer item'))
+      if (!newLayerItem) newLayerItem = []
+      TopoJSONObjects.push(newLayerItem)
+    }
+
+    return TopoJSONObjects
+  }
+
+  /**
+   * Updates the custom map layers based on the topojson data
+   * @returns {void} new map layers to the config
+   */
+  const generateCustomLayers = () => {
+    if (fetchedTopoJSON.length === 0 || !fetchedTopoJSON) return false
+    let tempArr = []
+    let tempFeatureArray = []
+
+    // loop on each file.
+    fetchedTopoJSON?.map((layer, index) => {
+      if (layer.length === 0) return null
+      let layerObjects = layer.objects[config.map.layers[index].namespace]
+      if (!layerObjects) return null
+
+      let layerData = feature(layer, layerObjects).features
+
+      // now loop on each feature
+      layerData.forEach(item => {
+        let layerClasses = [`custom-map-layer`, `custom-map-layer--${item.properties.name.replace(' ', '-')}`]
+
+        // feature array for county maps
+        tempFeatureArray.push(item)
+
+        tempArr.push(
+          <Group className={layerClasses.join(' ')} key={`customMapLayer-${item.properties.name.replace(' ', '-')}-${index}`}>
+            {/* prettier-ignore */}
+            <path
+              d={pathGenerator(item)}
+              fill={item.properties.fill}
+              fillOpacity={item.properties['fill-opacity']}
+              key={geoId} data-id={geoId}
+              stroke={item.properties.stroke}
+              strokeWidth={item.properties['stroke-width']}
+              data-tooltip-id='tooltip'
+              data-tooltip-html={config.map.layers[index].tooltip ? config.map.layers[index].tooltip : ''}
+            />
+          </Group>
+        )
+      })
+    })
+
+    // export options for either the feature or the path
+    setPathArray(tempArr)
+    setFeatureArray(tempFeatureArray)
+  }
+
+  const MapLayerHandlers = () => null
+  MapLayerHandlers.handleRemoveLayer = handleRemoveLayer
+  MapLayerHandlers.handleAddLayer = handleAddLayer
+  MapLayerHandlers.handleMapLayerUrl = handleMapLayerUrl
+  MapLayerHandlers.handleMapLayerName = handleMapLayerName
+  MapLayerHandlers.handleMapLayerNamespace = handleMapLayerNamespace
+  MapLayerHandlers.handleMapLayerTooltip = handleMapLayerTooltip
+
+  return { pathArray, featureArray, MapLayerHandlers }
+}

package/src/index.jsx

@@ -1,20 +1,16 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import CdcMap from './CdcMap';
+import CdcMap from './CdcMap'
 
 import 'react-tooltip/dist/react-tooltip.css'
 
 let isEditor = window.location.href.includes('editor=true')
-
+let isDebug = window.location.href.includes('debug=true')
 let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcMap
-      isEditor={isEditor}
-      configUrl={domContainer.attributes['data-config'].value}
-      containerEl={domContainer}
-    />
-  </React.StrictMode>,
+    <CdcMap isEditor={isEditor} isDebug={isDebug} configUrl={domContainer.attributes['data-config'].value} containerEl={domContainer} />
+  </React.StrictMode>
 )