chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a map!

Browse Source
This commit is contained in:
vkuchenik
2025-07-30 11:16:21 -07:00
parent 6ce374405c
commit f932a4f467
3 changed files with 53 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package-lock.json
Generated
+33
View File
@@ -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
+2
View File
@@ -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
+18 -21
View File
@@ -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>
);
}