diff --git a/src/components/ErrorGeoLocation.jsx b/src/components/ErrorGeoLocation.jsx
new file mode 100644
index 0000000..d290c87
--- /dev/null
+++ b/src/components/ErrorGeoLocation.jsx
@@ -0,0 +1,25 @@
+import { MdError } from "react-icons/md";
+import { Button, Text, VStack } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+export default function LoadingPage() {
+ const router = useRouter();
+
+ return (
+
+
+
+ Veillez à autoriser la géolocalisation
+
+
+
+ );
+}
diff --git a/src/components/layout/map/MapComponent.tsx b/src/components/layout/map/MapComponent.tsx
index 985d01d..0323830 100644
--- a/src/components/layout/map/MapComponent.tsx
+++ b/src/components/layout/map/MapComponent.tsx
@@ -10,7 +10,7 @@ import "leaflet/dist/leaflet.css";
export default function MapComponent(props: any) {
const { location, listBars } = props;
- const toast = useToast({ position: "top" });
+ const toast = useToast({ position: "bottom" });
const idToastError = "error_location";
@@ -43,6 +43,7 @@ export default function MapComponent(props: any) {
center={location}
zoom={13}
minZoom={8}
+ zoomControl={false}
style={{
width: "100vw",
height: "100vw",
diff --git a/src/pages/map.tsx b/src/pages/map.tsx
index 4287850..37e0f15 100644
--- a/src/pages/map.tsx
+++ b/src/pages/map.tsx
@@ -7,6 +7,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
import LoadingPage from "@/components/LoadingPage";
import ErrorPage from "@/components/ErrorPage";
+import ErrorGeolocation from "@/components/ErrorGeolocation";
import Navbar from "@/components/Navbar";
export default function Map() {
@@ -14,6 +15,8 @@ export default function Map() {
null as unknown as number,
null as unknown as number,
]);
+
+ const [geolocationError, setGeolocationError] = useState(false);
const toast = useToast({ position: "bottom" });
const idSaveToast = "saved_location";
const { data: session, status } = useSession();
@@ -101,16 +104,34 @@ export default function Map() {
},
});
+ const geolocationOptions = {
+ enableHighAccuracy: true,
+ timeout: 5000,
+ maximumAge: 0,
+ };
+
useEffect(() => {
- navigator.geolocation.getCurrentPosition((position) => {
- setLocation([position.coords.latitude, position.coords.longitude]);
- if (!loggedUser) return;
- userSetLocation.mutate(
- `${position.coords.latitude},${position.coords.longitude}`
- );
- });
+ navigator.geolocation.getCurrentPosition(
+ successPosition,
+ errorPosition,
+ geolocationOptions
+ );
}, [loggedUser]);
+ function successPosition(position: GeolocationPosition) {
+ setLocation([position.coords.latitude, position.coords.longitude]);
+ setGeolocationError(false);
+
+ if (!loggedUser) return;
+ userSetLocation.mutate(
+ `${position.coords.latitude},${position.coords.longitude}`
+ );
+ }
+
+ function errorPosition(error: GeolocationPositionError) {
+ setGeolocationError(true);
+ }
+
const MapWithNoSSR = dynamic(
() => import("../components/layout/map/MapComponent"),
{
@@ -120,10 +141,12 @@ export default function Map() {
return (
<>
- {isLoading || isLoadingListBars ? (
-
+ {geolocationError ? (
+
) : isError || isErrorListBars ? (
+ ) : isLoading || isLoadingListBars ? (
+
) : (
<>