[DEV-9325] Custom Map Layers

packages/map/package.json

@@ -28,7 +28,9 @@
     "@cdc/core": "^4.24.10",
     "@emotion/core": "^10.0.28",
     "@emotion/react": "^11.1.5",
+    "@googlemaps/markerclusterer": "^2.5.3",
     "@hello-pangea/dnd": "^16.2.0",
+    "@react-google-maps/api": "^2.20.3",
     "@visx/geo": "^1.13.0",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
@@ -38,9 +40,12 @@
     "d3-zoom": "^3.0.0",
     "html-react-parser": "^3.0.8",
     "html2canvas": "^1.0.0-rc.7",
+    "leaflet": "^1.9.4",
     "lodash.debounce": "^4.0.8",
     "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.0.1",
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-markercluster": "^4.1.1",
     "react-table": "^7.5.0",
     "react-tag-autocomplete": "^6.0.0",
     "react-tooltip": "5.8.2-beta.3",

packages/map/src/CdcMap.tsx

@@ -78,8 +78,9 @@ import Modal from './components/Modal'
 import NavigationMenu from './components/NavigationMenu'
 import UsaMap from './components/UsaMap'
 import WorldMap from './components/WorldMap'
+import GoogleMap from './components/GoogleMap'
 
-// Hooks
+// hooks
 import useTooltip from './hooks/useTooltip'
 
 // Data props
@@ -1600,6 +1601,7 @@ const CdcMap = ({
                       {'us-county' === geoType && <UsaMap.County />}
                       {'world' === geoType && <WorldMap />}
                       {/* logo is handled in UsaMap.State when applicable */}
+                      {'google-map' === geoType && <GoogleMap />}
                       {'data' === general.type && logo && ('us' !== geoType || 'us-geocode' === state.general.type) && (
                         <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
                       )}

packages/map/src/_stories/GoogleMap.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import CdcMap from '../CdcMap'
+import googleMapConfig from './_mock/google-map.json'
+import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map',
+  component: CdcMap
+}
+
+type Story = StoryObj<typeof CdcMap>
+
+export const Google_Map: Story = {
+  args: {
+    config: googleMapConfig
+  }
+}
+
+export default meta