From f932a4f467fdb13af2916b67f7556b4138ecc421 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Wed, 30 Jul 2025 11:16:21 -0700
Subject: [PATCH] a map!

---
 client/package-lock.json                      | 33 ++++++++++++++++
 client/package.json                           |  2 +
 .../layout/Canvas/views/GlobalMapCanvas.jsx   | 39 +++++++++----------
 3 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index b015727..4aec4b2 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -13,11 +13,13 @@
         "@emotion/styled": "^11.14.1",
         "@tailwindcss/vite": "^4.1.11",
         "framer-motion": "^12.23.0",
+        "leaflet": "^1.9.4",
         "next-themes": "^0.4.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-grid-layout": "^1.5.2",
         "react-icons": "^5.5.0",
+        "react-leaflet": "^5.0.0",
         "react-resizable": "^3.0.5",
         "tailwindcss": "^4.1.11"
       },
@@ -1105,6 +1107,17 @@
         "node": ">=14"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz",
@@ -3599,6 +3612,12 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4296,6 +4315,20 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-resizable": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
diff --git a/client/package.json b/client/package.json
index af7fe94..c14d34c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,11 +15,13 @@
     "@emotion/styled": "^11.14.1",
     "@tailwindcss/vite": "^4.1.11",
     "framer-motion": "^12.23.0",
+    "leaflet": "^1.9.4",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-grid-layout": "^1.5.2",
     "react-icons": "^5.5.0",
+    "react-leaflet": "^5.0.0",
     "react-resizable": "^3.0.5",
     "tailwindcss": "^4.1.11"
   },
diff --git a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
index 223f81d..29b9a1a 100644
--- a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
@@ -1,24 +1,21 @@
-import { Box, Text } from '@chakra-ui/react';
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import 'leaflet/dist/leaflet.css';
+
+const position = [51.505, -0.09]; // [latitude, longitude]
 
 export default function GlobalMapCanvas() {
-    return (
-        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
-            <Box 
-                bg="bg" 
-                shadow="md" 
-                borderRadius="md"
-                p={8}
-                width="600px"
-                height="100px"
-                textAlign="center"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-            >
-                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
-                    Global Map Canvas coming soon!
-                </Text>
-            </Box>
-        </Box>
-    );
+  return (
+    <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; OpenStreetMap contributors'
+      />
+      <Marker position={position}>
+        <Popup>
+          A sample popup!
+        </Popup>
+      </Marker>
+    </MapContainer>
+  );
 }
\ No newline at end of file