From ba4a2fbaf119e7db2a90250ff80f45d16ff27dba Mon Sep 17 00:00:00 2001 From: Mouad Lahlal Date: Mon, 20 Oct 2025 23:32:23 +0200 Subject: [PATCH] feat: Leaflet map, not working yet Signed-off-by: Mouad Lahlal --- package-lock.json | 58 ++++++++++++++++++++++++++++++++++++++++++ package.json | 4 +++ src/app/map/page.tsx | 56 +++++++--------------------------------- src/components/map.tsx | 25 ++++++++++++++++++ 4 files changed, 96 insertions(+), 47 deletions(-) create mode 100644 src/components/map.tsx diff --git a/package-lock.json b/package-lock.json index b584818..61556ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,14 +20,18 @@ "@radix-ui/react-tooltip": "^1.2.8", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "leaflet": "^1.9.4", + "leaflet-defaulticon-compatibility": "^0.1.2", "lucide-react": "^0.546.0", "next": "15.5.5", "react": "19.1.0", "react-dom": "19.1.0", + "react-leaflet": "^5.0.0", "tailwind-merge": "^3.3.1" }, "devDependencies": { "@tailwindcss/postcss": "^4", + "@types/leaflet": "^1.9.21", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", @@ -1543,6 +1547,17 @@ "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==", "license": "MIT" }, + "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/@swc/helpers": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", @@ -1828,6 +1843,23 @@ "tailwindcss": "4.1.14" } }, + "node_modules/@types/geojson": { + "version": "7946.0.16", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", + "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/leaflet": { + "version": "1.9.21", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz", + "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/node": { "version": "20.19.21", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.21.tgz", @@ -1990,6 +2022,18 @@ "jiti": "lib/jiti-cli.mjs" } }, + "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/leaflet-defaulticon-compatibility": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.2.tgz", + "integrity": "sha512-IrKagWxkTwzxUkFIumy/Zmo3ksjuAu3zEadtOuJcKzuXaD76Gwvg2Z1mLyx7y52ykOzM8rAH5ChBs4DnfdGa6Q==", + "license": "BSD-2-Clause" + }, "node_modules/lightningcss": { "version": "1.30.1", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz", @@ -2425,6 +2469,20 @@ "react": "^19.1.0" } }, + "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-remove-scroll": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz", diff --git a/package.json b/package.json index 793ae96..8fcf4dd 100644 --- a/package.json +++ b/package.json @@ -20,14 +20,18 @@ "@radix-ui/react-tooltip": "^1.2.8", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "leaflet": "^1.9.4", + "leaflet-defaulticon-compatibility": "^0.1.2", "lucide-react": "^0.546.0", "next": "15.5.5", "react": "19.1.0", "react-dom": "19.1.0", + "react-leaflet": "^5.0.0", "tailwind-merge": "^3.3.1" }, "devDependencies": { "@tailwindcss/postcss": "^4", + "@types/leaflet": "^1.9.21", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx index 858e6fa..c11ddb8 100644 --- a/src/app/map/page.tsx +++ b/src/app/map/page.tsx @@ -1,33 +1,13 @@ +"use client"; + import { AppSidebar } from "@/components/app-sidebar"; -import { Button } from "@/components/ui/button"; -import { Edit, Plus } from "lucide-react"; -import { - Card, - CardAction, - CardContent, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card"; import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip"; -import { - Table, - TableBody, - TableCaption, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; -import { cn } from "@/lib/utils"; -import { Checkbox } from "@/components/ui/checkbox"; +import dynamic from "next/dynamic"; export default function Page() { + const MapWithNoSSR = dynamic(() => import("../../components/map"), { + ssr: false, + }); return ( - {/* -
- - - - - - All Inboxes - - - - Inbox - - - -
- */} - CIAO STROOOOOOONSO +
+ +
); diff --git a/src/components/map.tsx b/src/components/map.tsx new file mode 100644 index 0000000..29ae55c --- /dev/null +++ b/src/components/map.tsx @@ -0,0 +1,25 @@ +import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet"; + +const Map = () => { + const position = [45.5637, 10.16356]; + return ( + <> + + + + Hey ! you found me + + + + ); +}; + +export default Map;