Add precise location sharing option for chapter map

frontend/src/app/chapters/page.tsx

@@ -91,6 +91,7 @@ const ChaptersPage = () => {
         <ChapterMapWrapper
           geoLocData={searchQuery ? chapters : geoLocData}
           showLocal={true}
+          showLocationSharing={true}
           style={{
             height: '400px',
             width: '100%',

frontend/src/components/ChapterMap.tsx

@@ -1,7 +1,12 @@
 'use client'
+import { faLocationDot } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Button } from '@heroui/button'
+import { Tooltip } from '@heroui/tooltip'
 import L, { MarkerClusterGroup } from 'leaflet'
 import React, { useEffect, useRef, useState } from 'react'
 import type { Chapter } from 'types/chapter'
+import type { UserLocation } from 'utils/geolocationUtils'
 import 'leaflet.markercluster'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -12,10 +17,14 @@ const ChapterMap = ({
   geoLocData,
   showLocal,
   style,
+  userLocation,
+  onShareLocation,
 }: {
   geoLocData: Chapter[]
   showLocal: boolean
   style: React.CSSProperties
+  userLocation?: UserLocation | null
+  onShareLocation?: () => void
 }) => {
   const mapRef = useRef<L.Map | null>(null)
   const markerClusterRef = useRef<MarkerClusterGroup | null>(null)
@@ -103,7 +112,49 @@ const ChapterMap = ({
 
     markerClusterGroup.addLayers(markers)
 
-    if (showLocal && validGeoLocData.length > 0) {
+    // Add user location marker if available
+    if (userLocation) {
+      const userMarkerIcon = new L.Icon({
+        iconAnchor: [22, 48],
+        iconRetinaUrl: '/img/user-marker-icon.png',
+        iconSize: [42, 48],
+        iconUrl: '/img/user-marker-icon.png',
+        popupAnchor: [3, -40],
+        shadowSize: [52, 48],
+        shadowUrl: '/img/marker-shadow.png',
+      })
+
+      const userMarker = L.marker([userLocation.latitude, userLocation.longitude], {
+        icon: userMarkerIcon,
+      })
+      const userPopup = L.popup()
+      const userPopupContent = document.createElement('div')
+      userPopupContent.textContent = 'Your Location'
+      userPopup.setContent(userPopupContent)
+      userMarker.bindPopup(userPopup)
+      userMarker.addTo(map)
+    }
+
+    if (userLocation && validGeoLocData.length > 0) {
+      const maxNearestChapters = 5
+      const localChapters = validGeoLocData.slice(0, maxNearestChapters)
+      const localBounds = L.latLngBounds(
+        localChapters.map((chapter) => [
+          chapter._geoloc?.lat ?? chapter.geoLocation?.lat,
+          chapter._geoloc?.lng ?? chapter.geoLocation?.lng,
+        ])
+      )
+      const maxZoom = 12
+      const nearestChapter = validGeoLocData[0]
+      map.setView(
+        [
+          nearestChapter._geoloc?.lat ?? nearestChapter.geoLocation?.lat,
+          nearestChapter._geoloc?.lng ?? nearestChapter.geoLocation?.lng,
+        ],
+        maxZoom
+      )
+      map.fitBounds(localBounds, { maxZoom: maxZoom })
+    } else if (showLocal && validGeoLocData.length > 0) {
       const maxNearestChapters = 5
       const localChapters = validGeoLocData.slice(0, maxNearestChapters - 1)
       const localBounds = L.latLngBounds(
@@ -123,7 +174,7 @@ const ChapterMap = ({
       )
       map.fitBounds(localBounds, { maxZoom: maxZoom })
     }
-  }, [geoLocData, showLocal])
+  }, [geoLocData, showLocal, userLocation])
 
   return (
     <div className="relative" style={style}>
@@ -132,7 +183,7 @@ const ChapterMap = ({
         <button
           type="button"
           tabIndex={0}
-          className="absolute inset-0 z-[1000] flex cursor-pointer items-center justify-center rounded-[inherit] bg-black/10"
+          className="pointer-events-none absolute inset-0 z-[500] flex cursor-pointer items-center justify-center rounded-[inherit] bg-black/10"
           onClick={() => {
             mapRef.current?.scrollWheelZoom.enable()
             setIsMapActive(true)
@@ -146,11 +197,34 @@ const ChapterMap = ({
           }}
           aria-label="Click to interact with map"
         >
-          <p className="rounded-md bg-white/90 px-5 py-3 text-sm font-medium text-gray-700 shadow-lg dark:bg-gray-700 dark:text-white">
+          <p className="pointer-events-auto rounded-md bg-white/90 px-5 py-3 text-sm font-medium text-gray-700 shadow-lg dark:bg-gray-700 dark:text-white">
             Click to interact with map
           </p>
         </button>
       )}
+      <div className="absolute bottom-5 left-3 z-[999] w-fit">
+        {onShareLocation && (
+          <Tooltip
+            showArrow
+            content={
+              userLocation
+                ? 'Reset location filter'
+                : 'Share your current location to find nearby chapters'
+            }
+          >
+            <Button
+              isIconOnly
+              className="h-9 w-9 min-w-9 bg-white text-blue-600 shadow-lg hover:bg-gray-100"
+              onPress={onShareLocation}
+              aria-label={
+                userLocation ? 'Reset location filter' : 'Share location to find nearby chapters'
+              }
+            >
+              <FontAwesomeIcon icon={faLocationDot} size="sm" />
+            </Button>
+          </Tooltip>
+        )}
+      </div>
     </div>
   )
 }

frontend/src/components/ChapterMapWrapper.tsx

@@ -1,15 +1,64 @@
 import dynamic from 'next/dynamic'
-import React from 'react'
+import React, { useState } from 'react'
 import type { Chapter } from 'types/chapter'
+import {
+  getUserLocationFromBrowser,
+  sortChaptersByDistance,
+  type UserLocation,
+} from 'utils/geolocationUtils'
 
 const ChapterMap = dynamic(() => import('./ChapterMap'), { ssr: false })
 
-const ChapterMapWrapper = (props: {
+interface ChapterMapWrapperProps {
   geoLocData: Chapter[]
   showLocal: boolean
   style: React.CSSProperties
-}) => {
-  return <ChapterMap {...props} />
+  showLocationSharing?: boolean
+}
+
+const ChapterMapWrapper: React.FC<ChapterMapWrapperProps> = (props) => {
+  const [userLocation, setUserLocation] = useState<UserLocation | null>(null)
+  const [sortedData, setSortedData] = useState<Chapter[] | null>(null)
+
+  const enableLocationSharing = props.showLocationSharing === true
+
+  if (!enableLocationSharing) {
+    return <ChapterMap {...props} />
+  }
+
+  const handleShareLocation = async () => {
+    if (userLocation) {
+      setUserLocation(null)
+      setSortedData(null)
+      return
+    }
+
+    try {
+      const location = await getUserLocationFromBrowser()
+
+      if (location) {
+        setUserLocation(location)
+        const sorted = sortChaptersByDistance(props.geoLocData, location)
+        setSortedData(sorted.map(({ _distance, ...chapter }) => chapter as unknown as Chapter))
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error detecting location:', error)
+    }
+  }
+
+  const mapData = sortedData ?? props.geoLocData
+
+  return (
+    <div className="space-y-4">
+      <ChapterMap
+        {...props}
+        geoLocData={mapData}
+        userLocation={userLocation}
+        onShareLocation={handleShareLocation}
+      />
+    </div>
+  )
 }
 
 export default ChapterMapWrapper

frontend/src/utils/geolocationUtils.ts

@@ -0,0 +1,99 @@
+export interface UserLocation {
+  latitude: number
+  longitude: number
+  city?: string
+  country?: string
+}
+
+interface ChapterCoordinates {
+  lat: number | null
+  lng: number | null
+}
+
+export const calculateDistance = (
+  lat1: number,
+  lon1: number,
+  lat2: number,
+  lon2: number
+): number => {
+  const R = 6371
+  const dLat = ((lat2 - lat1) * Math.PI) / 180
+  const dLon = ((lon2 - lon1) * Math.PI) / 180
+
+  const a =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(dLon / 2) ** 2
+
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+  return R * c
+}
+
+export const getUserLocationFromBrowser = (): Promise<UserLocation | null> => {
+  return new Promise((resolve) => {
+    if (!navigator.geolocation) {
+      // eslint-disable-next-line no-console
+      console.warn('Geolocation API not supported')
+      resolve(null)
+      return
+    }
+
+    /* Geolocation permission is required for the "Find chapters near you" feature.
+       The user must explicitly opt in by clicking a button. The location data never
+       leaves the client and is not sent to the backend. It is used only to calculate
+       distances between the user and nearby chapters.
+    */
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        resolve({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        })
+      },
+      (error) => {
+        // eslint-disable-next-line no-console
+        console.warn('Browser geolocation error:', error.message)
+        resolve(null)
+      },
+      {
+        enableHighAccuracy: false,
+        timeout: 10000,
+        maximumAge: 0,
+      }
+    )
+  })
+}
+
+const extractChapterCoordinates = (chapter: Record<string, unknown>): ChapterCoordinates => {
+  const lat =
+    (chapter._geoloc as Record<string, unknown>)?.lat ??
+    (chapter.geoLocation as Record<string, unknown>)?.lat ??
+    null
+
+  const lng =
+    (chapter._geoloc as Record<string, unknown>)?.lng ??
+    (chapter.geoLocation as Record<string, unknown>)?.lng ??
+    null
+
+  return { lat: lat as number | null, lng: lng as number | null }
+}
+
+/**
+ * Sort chapters by distance from user
+ */
+export const sortChaptersByDistance = (
+  chapters: Record<string, unknown>[],
+  userLocation: UserLocation
+): Array<Record<string, unknown> & { distance: number }> => {
+  return chapters
+    .map((chapter) => {
+      const { lat, lng } = extractChapterCoordinates(chapter)
+
+      if (typeof lat !== 'number' || typeof lng !== 'number') return null
+
+      const distance = calculateDistance(userLocation.latitude, userLocation.longitude, lat, lng)
+
+      return { ...chapter, distance }
+    })
+    .filter((item) => item !== null)
+    .sort((a, b) => a!.distance - b!.distance)
+}