[DEV-9325] Custom Map Layers (#1706)

* [DEV-9325] use core ViewPort type * [DEV-9325] start work on leaflet map contributions * [DEV-9325] update attribution lines * [DEV-9325] Continue Map API Work * [DEV-9325] add missing files * [DEV-9325] reset buttons * [DEV-9325] Reset buttons * [DEV-9325] remove leaflet data * [DEV-9325] add fixes * [DEV-9325] adjust type
CDCgov · Jan 10, 2025 · afea864 · afea864
1 parent 7117f0f
commit afea864
Show file tree

Hide file tree

Showing 10 changed files with 1,065 additions and 9 deletions.
diff --git a/packages/map/package.json b/packages/map/package.json
@@ -28,7 +28,9 @@
     "@cdc/core": "^4.24.11",
     "@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",

diff --git a/packages/map/src/CdcMap.tsx b/packages/map/src/CdcMap.tsx
@@ -75,8 +75,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'
 import useResizeObserver from './hooks/useResizeObserver'
 
@@ -1559,6 +1560,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' }} />
                       )}

diff --git a/packages/map/src/_stories/GoogleMap.stories.tsx b/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