a map!

2025-07-30 11:16:21 -07:00
parent 6ce374405c
commit f932a4f467
3 changed files with 53 additions and 21 deletions
@@ -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>
+  );
 }