fix: react leaflet locate control fixes

WatWowMap · Apr 3, 2024 · d01beb0 · d01beb0
1 parent 3c983d3
commit d01beb0
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -125,6 +125,7 @@
     "@turf/destination": "^6.5.0",
     "@turf/distance": "^6.5.0",
     "@turf/helpers": "^6.5.0",
+    "@turtlesocks/react-leaflet.locatecontrol": "^0.1.1",
     "bcrypt": "^5.0.1",
     "body-parser": "^1.20.2",
     "chalkercli": "https://github.com/TurtIeSocks/chalkercli.git",

diff --git a/src/hooks/useLocation.js b/src/hooks/useLocation.js
@@ -28,6 +28,13 @@ export function useLocation() {
       _cleanClasses() {
         setColor('inherit')
       },
+      stop() {
+        if (!this._map) return
+        this._deactivate()
+        this._cleanClasses()
+        this._resetVariables()
+        this._removeMarker()
+      },
       onAdd() {
         const container = DomUtil.create(
           'div',

diff --git a/src/pages/map/components/Layers.jsx b/src/pages/map/components/Layers.jsx
@@ -1,8 +1,8 @@
 // @ts-check
 import * as React from 'react'
-import { TileLayer, useMap } from 'react-leaflet'
-import { control } from 'leaflet'
+import { TileLayer, ZoomControl } from 'react-leaflet'
 import { useTranslation } from 'react-i18next'
+import { LocateControl } from '@turtlesocks/react-leaflet.locatecontrol'
 
 import { useStorage } from '@store/useStorage'
 
@@ -14,62 +14,39 @@ export function ControlledTileLayer() {
 }
 
 export function ControlledZoomLayer() {
-  const map = useMap()
   const navSetting = useStorage(
     (s) => s.settings.navigationControls === 'leaflet',
   )
-
-  React.useLayoutEffect(() => {
-    if (navSetting) {
-      const zoom = control.zoom({ position: 'bottomright' }).addTo(map)
-      return () => {
-        zoom.remove()
-      }
-    }
-  }, [navSetting, map])
-
-  return null
+  return navSetting ? <ZoomControl position="bottomright" /> : null
 }
 
 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(
+  const strings = React.useMemo(
     () =>
-      control.locate({
-        position: 'bottomright',
-        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'),
-        },
+      /** @type {import('@turtlesocks/react-leaflet.locatecontrol').LocateControlProps['strings']} */ ({
+        metersUnit: t('lc_metersUnit'),
+        feetUnit: t('lc_feetUnit'),
+        popup: t('lc_popup'),
+        outsideMapBoundsMsg: t('lc_outsideMapBoundsMsg'),
+        title: t('lc_title'),
       }),
-    [t, metric],
+    [t],
   )
-
-  React.useEffect(() => {
-    if (navSetting) {
-      lc.addTo(map)
-      return () => {
-        lc.stop()
-        lc.remove()
-      }
-    }
-  }, [navSetting, map, lc])
-
-  return null
+  return navSetting ? (
+    <LocateControl
+      position="bottomright"
+      metric={metric}
+      icon="fas fa-crosshairs"
+      setView="untilPan"
+      keepCurrentZoomLevel
+      locateOptions={{ maximumAge: 5000 }}
+      strings={strings}
+    />
+  ) : null
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1752,7 +1752,7 @@
     express "^4.18.2"
     passport-strategy "^1.0.0"
 
-"@react-leaflet/core@^2.1.0":
+"@react-leaflet/core@^2", "@react-leaflet/core@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
   integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
@@ -2316,6 +2316,13 @@
     "@turf/line-intersect" "^6.5.0"
     "@turf/meta" "^6.5.0"
 
+"@turtlesocks/react-leaflet.locatecontrol@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@turtlesocks/react-leaflet.locatecontrol/-/react-leaflet.locatecontrol-0.1.1.tgz#4e53d752c5dccfe46df76f0c5e1aff7d394b741d"
+  integrity sha512-O1NzVHds9JaIe4NEdzNwraQ1Bt5JCrjGsutd7tLHCVOjWWjJq/MJKgE+26D3cZubHjFUpCEPrIFgXvP6CZvWVQ==
+  dependencies:
+    "@react-leaflet/core" "^2"
+
 "@types/babel__core@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"