feat: add geolocation control (#282)

Author: mustaphaturhan

src/components/map/index.spec.tsx

@@ -3,6 +3,10 @@ import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MapComponent } from './index';
 
+const mockToast = vi.hoisted(() => ({
+  error: vi.fn(),
+}));
+
 const mockMapRef = {
   getCenter: vi.fn(() => ({ lng: 13.4, lat: 52.5 })),
   getZoom: vi.fn(() => 10),
@@ -45,6 +49,22 @@ vi.mock('react-map-gl/maplibre', () => ({
   NavigationControl: vi.fn(() => (
     <div data-testid="navigation-control">Nav</div>
   )),
+  GeolocateControl: vi.fn(({ onError }) => (
+    <div data-testid="geolocate-control">
+      <button
+        data-testid="trigger-geolocate-error"
+        onClick={() => onError?.({ PERMISSION_DENIED: false })}
+      >
+        Trigger Error
+      </button>
+      <button
+        data-testid="trigger-geolocate-permission-denied"
+        onClick={() => onError?.({ PERMISSION_DENIED: true })}
+      >
+        Trigger Permission Denied
+      </button>
+    </div>
+  )),
   useMap: vi.fn(() => ({ current: mockMapRef })),
 }));
 
@@ -212,6 +232,10 @@ vi.mock('@/utils/heightgraph', () => ({
   buildHeightgraphData: vi.fn(() => []),
 }));
 
+vi.mock('sonner', () => ({
+  toast: mockToast,
+}));
+
 describe('MapComponent', () => {
   let localStorageMock: Record<string, string>;
 
@@ -247,6 +271,11 @@ describe('MapComponent', () => {
     expect(screen.getByTestId('navigation-control')).toBeInTheDocument();
   });
 
+  it('should render geolocate control', () => {
+    render(<MapComponent />);
+    expect(screen.getByTestId('geolocate-control')).toBeInTheDocument();
+  });
+
   it('should render draw control', () => {
     render(<MapComponent />);
     expect(screen.getByTestId('draw-control')).toBeInTheDocument();
@@ -388,4 +417,30 @@ describe('MapComponent', () => {
       expect(screen.queryByTestId('map-info-popup')).not.toBeInTheDocument();
     });
   });
+
+  describe('GeolocateControl error handling', () => {
+    it('should show default error toast when geolocate fails', async () => {
+      const user = userEvent.setup();
+      render(<MapComponent />);
+
+      await user.click(screen.getByTestId('trigger-geolocate-error'));
+
+      expect(mockToast.error).toHaveBeenCalledWith(
+        "We couldn't get your location. Please try again."
+      );
+    });
+
+    it('should show permission denied error toast when location permission is denied', async () => {
+      const user = userEvent.setup();
+      render(<MapComponent />);
+
+      await user.click(
+        screen.getByTestId('trigger-geolocate-permission-denied')
+      );
+
+      expect(mockToast.error).toHaveBeenCalledWith(
+        "We couldn't get your location. Please check your browser settings and allow location access."
+      );
+    });
+  });
 });

src/components/map/index.tsx

@@ -6,6 +6,8 @@ import {
   Popup,
   type MapRef,
   NavigationControl,
+  GeolocateControl,
+  type GeolocateErrorEvent,
 } from 'react-map-gl/maplibre';
 import type { MaplibreTerradrawControl } from '@watergis/maplibre-gl-terradraw';
 import type maplibregl from 'maplibre-gl';
@@ -52,6 +54,7 @@ import {
   useIsochronesQuery,
   useReverseGeocodeIsochrones,
 } from '@/hooks/use-isochrones-queries';
+import { toast } from 'sonner';
 
 const { center, zoom: zoom_initial } = getInitialMapPosition();
 
@@ -601,6 +604,16 @@ export const MapComponent = () => {
     setRouteHoverPopup(null);
   }, []);
 
+  const handleGeolocateError = useCallback((error: GeolocateErrorEvent) => {
+    let defaultMessage = "We couldn't get your location. Please try again.";
+    if (error.PERMISSION_DENIED) {
+      defaultMessage =
+        "We couldn't get your location. Please check your browser settings and allow location access.";
+    }
+
+    toast.error(defaultMessage);
+  }, []);
+
   return (
     <Map
       ref={mapRef}
@@ -623,6 +636,7 @@ export const MapComponent = () => {
       id="mainMap"
     >
       <NavigationControl />
+      <GeolocateControl onError={handleGeolocateError} />
       <DrawControl onUpdate={updateExcludePolygons} controlRef={drawRef} />
       <MapStyleControl
         customStyleData={customStyleData}