a map!

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",

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"
   },

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 (
+  return (
-        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+    <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
-            <Box 
+      <TileLayer
-                bg="bg" 
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                shadow="md" 
+        attribution='&copy; OpenStreetMap contributors'
-                borderRadius="md"
+      />
-                p={8}
+      <Marker position={position}>
-                width="600px"
+        <Popup>
-                height="100px"
+          A sample popup!
-                textAlign="center"
+        </Popup>
-                display="flex"
+      </Marker>
-                alignItems="center"
+    </MapContainer>
-                justifyContent="center"
+  );
-            >
-                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
-                    Global Map Canvas coming soon!
-                </Text>
-            </Box>
-        </Box>
-    );
 }