@cdc/map 4.23.3 → 4.23.5

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)
@@ -118,7 +121,7 @@ const UsaMap = props => {
       const territoriesList = territoriesKeys.filter(key => data[key])
       setTerritoriesData(territoriesList)
     }
-  }, [data, state.general.territoriesAlwaysShow]) // eslint-disable-line
+  }, [data, state.general.territoriesAlwaysShow])
 
   const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
 
@@ -171,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} />
     }
   })
 
@@ -221,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
@@ -296,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>
@@ -344,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/data/initial-state.js

@@ -5,7 +5,7 @@ export default {
     title: '',
     showTitle: true,
     showSidebar: true,
-    showDownloadButton: true,
+    showDownloadButton: false,
     showDownloadMediaButton: false,
     displayAsHex: false,
     displayStateLabels: false,
@@ -15,7 +15,6 @@ export default {
     geoType: 'single-state',
     geoLabelOverride: '',
     hasRegions: false,
-    expandDataTable: true,
     fullBorder: false,
     type: 'data',
     palette: {
@@ -25,7 +24,6 @@ export default {
     hideGeoColumnInTooltip: false,
     hidePrimaryColumnInTooltip: false
   },
-
   type: 'map',
   color: 'pinkpurple',
   columns: {
@@ -63,11 +61,17 @@ export default {
     title: 'Legend'
   },
   filters: [],
-  dataTable: {
-    title: 'Data Table'
-  },
   table: {
-    showDownloadUrl: false
+    label: 'Data Table',
+    expanded: false,
+    limitHeight: false,
+    height: '',
+    caption: '',
+    showDownloadUrl: false,
+    showDataTableLink: true,
+    forceDisplay: true,
+    download: false,
+    indexLabel: ''
   },
   tooltips: {
     appearanceType: 'hover',
@@ -85,5 +89,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/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>
 )