From 719f2ffdc505917b7972b86480d1b220bbe3ecfb Mon Sep 17 00:00:00 2001 From: KaroGil Date: Sat, 29 Mar 2025 17:28:59 +0100 Subject: [PATCH] add geolocation of user --- app/page.tsx | 2 ++ components/geolocation.tsx | 32 ++++++++++++++++++++++++++++++++ package.json | 2 ++ pnpm-lock.yaml | 38 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 74 insertions(+) create mode 100644 components/geolocation.tsx diff --git a/app/page.tsx b/app/page.tsx index 992670b..77421c7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,6 +2,7 @@ import InterestsMenu from "@/components/interestsMenu"; import LinkButton from "../components/linkButton"; import { getServerSession } from "next-auth"; import { authOptions } from "@lib/authOptions"; +import Geolocation from "@/components/geolocation"; export default async function Home() { const session = await getServerSession(authOptions); @@ -20,6 +21,7 @@ export default async function Home() { )} + ); } diff --git a/components/geolocation.tsx b/components/geolocation.tsx new file mode 100644 index 0000000..c9c4e2f --- /dev/null +++ b/components/geolocation.tsx @@ -0,0 +1,32 @@ +"use client"; + +import { useState } from "react"; + +export default function Geolocation() { + const [location, setLocation] = useState(""); + + const getLocation = () => { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(success, error); + } else { + setLocation("Geolocation is not supported by this browser."); + } + }; + + const success = (position: GeolocationPosition) => { + setLocation( + `Latitude: ${position.coords.latitude}
Longitude: ${position.coords.longitude}` + ); + }; + + const error = () => { + alert("Sorry, no position available."); + }; + + return ( +
+ +

+
+ ); +} diff --git a/package.json b/package.json index fdf794d..b07e8a1 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,13 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "framer-motion": "^12.6.2", + "leaflet": "^1.9.4", "lucide-react": "^0.485.0", "next": "15.2.4", "next-auth": "^4.24.11", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-leaflet": "^5.0.0", "tailwind-merge": "^3.0.2", "tw-animate-css": "^1.2.5" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ed01eaa..82eee41 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: framer-motion: specifier: ^12.6.2 version: 12.6.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + leaflet: + specifier: ^1.9.4 + version: 1.9.4 lucide-react: specifier: ^0.485.0 version: 0.485.0(react@19.0.0) @@ -35,6 +38,9 @@ importers: react-dom: specifier: ^19.0.0 version: 19.0.0(react@19.0.0) + react-leaflet: + specifier: ^5.0.0 + version: 5.0.0(leaflet@1.9.4)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) tailwind-merge: specifier: ^3.0.2 version: 3.0.2 @@ -346,6 +352,13 @@ packages: '@types/react': optional: true + '@react-leaflet/core@3.0.0': + resolution: {integrity: sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==} + peerDependencies: + leaflet: ^1.9.0 + react: ^19.0.0 + react-dom: ^19.0.0 + '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} @@ -1258,6 +1271,9 @@ packages: resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==} engines: {node: '>=0.10'} + leaflet@1.9.4: + resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==} + levn@0.4.1: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} @@ -1553,6 +1569,13 @@ packages: react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react-leaflet@5.0.0: + resolution: {integrity: sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==} + peerDependencies: + leaflet: ^1.9.0 + react: ^19.0.0 + react-dom: ^19.0.0 + react@19.0.0: resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==} engines: {node: '>=0.10.0'} @@ -2050,6 +2073,12 @@ snapshots: optionalDependencies: '@types/react': 19.0.12 + '@react-leaflet/core@3.0.0(leaflet@1.9.4)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + leaflet: 1.9.4 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + '@rtsao/scc@1.1.0': {} '@rushstack/eslint-patch@1.11.0': {} @@ -3132,6 +3161,8 @@ snapshots: dependencies: language-subtag-registry: 0.3.23 + leaflet@1.9.4: {} + levn@0.4.1: dependencies: prelude-ls: 1.2.1 @@ -3407,6 +3438,13 @@ snapshots: react-is@16.13.1: {} + react-leaflet@5.0.0(leaflet@1.9.4)(react-dom@19.0.0(react@19.0.0))(react@19.0.0): + dependencies: + '@react-leaflet/core': 3.0.0(leaflet@1.9.4)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + leaflet: 1.9.4 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + react@19.0.0: {} reflect.getprototypeof@1.0.10: