fix: locate translations / unit of measurement

src/features/webhooks/human/Location.jsx

@@ -91,7 +91,7 @@ const Location = () => {
       lc.stop()
       useWebhookStore.setState({ location: [0, 0] })
     },
-    [],
+    [lc],
   )
 
   const fetchedData = data || previousData || { geocoder: [] }

src/hooks/useLocation.js

@@ -1,9 +1,11 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { LayerGroup, DomEvent, DomUtil, Control } from 'leaflet'
 import { useTranslation } from 'react-i18next'
 import { useMap } from 'react-leaflet'
 import 'leaflet.locatecontrol'
 
+import { useStorage } from '@store/useStorage'
+
 /**
  * Use location hook
  * @returns {{ lc: any, color: import('@mui/material').ButtonProps['color'] }}
@@ -14,6 +16,7 @@ export function useLocation() {
     /** @type {import('@mui/material').ButtonProps['color']} */ ('inherit'),
   )
   const { t } = useTranslation()
+  const metric = useStorage((s) => s.settings.distanceUnit === 'kilometers')
 
   const lc = useMemo(() => {
     const LocateFab = Control.Locate.extend({
@@ -31,9 +34,8 @@ export function useLocation() {
           'react-locate-control leaflet-bar leaflet-control',
         )
         this._container = container
-        this._map = map
         this._layer = this.options.layer || new LayerGroup()
-        this._layer.addTo(map)
+        this._layer.addTo(this._map)
         this._event = undefined
         this._compassHeading = null
         this._prevBounds = null
@@ -66,18 +68,30 @@ export function useLocation() {
     const result = new LocateFab({
       keepCurrentZoomLevel: true,
       setView: 'untilPan',
-      options: {
-        title: t('lc_title'),
+      metric,
+      locateOptions: {
+        maximumAge: 5000,
+      },
+      strings: {
         metersUnit: t('lc_metersUnit'),
         feetUnit: t('lc_feetUnit'),
         popup: t('lc_popup'),
         outsideMapBoundsMsg: t('lc_outsideMapBoundsMsg'),
-        locateOptions: {
-          maximumAge: 5000,
-        },
+        title: t('lc_title'),
       },
-    }).addTo(map)
+    })
     return result
-  }, [map, t])
+  }, [t, metric])
+
+  useEffect(() => {
+    if (lc) {
+      lc.addTo(map)
+      return () => {
+        lc.stop()
+        lc.remove()
+      }
+    }
+  }, [lc, map])
+
   return { lc, color }
 }

src/pages/map/components/FloatingBtn.jsx

@@ -113,7 +113,7 @@ export function FloatingButtons() {
           break
       }
     },
-    [map],
+    [map, lc],
   )
 
   React.useEffect(() => {

src/pages/map/components/Layers.jsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import { TileLayer, useMap } from 'react-leaflet'
 import { control } from 'leaflet'
+import { useTranslation } from 'react-i18next'
 
 import { useStorage } from '@store/useStorage'
 
@@ -32,9 +33,11 @@ export function ControlledZoomLayer() {
 
 export function ControlledLocate() {
   const map = useMap()
+  const { t } = useTranslation()
   const navSetting = useStorage(
     (s) => s.settings.navigationControls === 'leaflet',
   )
+  const metric = useStorage((s) => s.settings.distanceUnit === 'kilometers')
 
   const lc = React.useMemo(
     () =>
@@ -43,14 +46,26 @@ export function ControlledLocate() {
         icon: 'fas fa-crosshairs',
         keepCurrentZoomLevel: true,
         setView: 'untilPan',
+        metric,
+        locateOptions: {
+          maximumAge: 5000,
+        },
+        strings: {
+          metersUnit: t('lc_metersUnit'),
+          feetUnit: t('lc_feetUnit'),
+          popup: t('lc_popup'),
+          outsideMapBoundsMsg: t('lc_outsideMapBoundsMsg'),
+          title: t('lc_title'),
+        },
       }),
-    [],
+    [t, metric],
   )
 
   React.useEffect(() => {
     if (navSetting) {
       lc.addTo(map)
       return () => {
+        lc.stop()
         lc.remove()
       }
     }