From e6b7d8231000ad11c8ae3c7a2ab14aa604d95c28 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Thu, 31 Jul 2025 14:39:35 -0700
Subject: [PATCH 1/2] Add regional map functionality, and edit global map zoom
 settings

---
 client/src/App.jsx                            |  2 +
 .../layout/Canvas/views/GlobalMapCanvas.jsx   |  4 +-
 .../layout/Canvas/views/RegionalMapCanvas.jsx | 40 +++++++++----------
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index cc8a57a..9935035 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,4 +1,6 @@
 import Dashboard from './components/layout/Dashboard.jsx'
+import 'leaflet/dist/leaflet.css';
+
 
 function App() {
   return (
diff --git a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
index 7190735..a4bba7f 100644
--- a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
-import 'leaflet/dist/leaflet.css';
+// import 'leaflet/dist/leaflet.css';
 
 export default function GlobalMapCanvas() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
   return (
-      <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
+      <MapContainer center={position} zoom={3} style={{ height: "100%", width: "100%" }}>
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           attribution='&copy; OpenStreetMap contributors'
diff --git a/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx b/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
index 259e2fc..42963b5 100644
--- a/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
@@ -1,24 +1,20 @@
-import { Box, Text } from '@chakra-ui/react';
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+// import 'leaflet/dist/leaflet.css';
 
-export default function RegionalMapCanvas() {
-    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">
-                    Regional Map Canvas coming soon!
-                </Text>
-            </Box>
-        </Box>
-    );
+export default function GlobalMapCanvas() {
+  const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
+  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>
+            CVO — Home of the volcanoligists
+          </Popup>
+        </Marker>
+      </MapContainer>
+  );
 }
\ No newline at end of file

From d2716f6f84d1ca69bb0cb08c8eb1bbb8cc4226ba Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Thu, 31 Jul 2025 14:51:25 -0700
Subject: [PATCH 2/2] Fix canvas not taking up full space in Regional and
 Global map views

---
 client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx  | 1 -
 .../src/components/layout/Canvas/views/RegionalMapCanvas.jsx   | 1 -
 client/src/components/layout/Dashboard.jsx                     | 3 ++-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
index a4bba7f..b7d47e6 100644
--- a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
-// import 'leaflet/dist/leaflet.css';
 
 export default function GlobalMapCanvas() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
diff --git a/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx b/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
index 42963b5..2377dd6 100644
--- a/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
-// import 'leaflet/dist/leaflet.css';
 
 export default function GlobalMapCanvas() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx
index a27f6af..8cded10 100644
--- a/client/src/components/layout/Dashboard.jsx
+++ b/client/src/components/layout/Dashboard.jsx
@@ -49,7 +49,8 @@ export default function Dashboard() {
     <>
       <Grid css={styles}
         templateRows="1fr 11fr"
-        templateColumns="1fr 20fr"
+        // templateColumns="1fr 20fr"
+        templateColumns="auto 1fr"
         height="100vh"
         width="100vw"
       >