Add regional map functionality, and edit global map zoom settings

client/src/App.jsx

@@ -1,4 +1,6 @@
 import Dashboard from './components/layout/Dashboard.jsx'
+import 'leaflet/dist/leaflet.css';
+
 
 function App() {
   return (

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'

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>
+  );
 }