fix: locatecontrol

Author: Mygod

src/hooks/useLocation.js

@@ -2,17 +2,17 @@
 // TODO: Not sure if this is possible to actually type correctly with how the leaflet.locatecontrol library is written
 
 import { useEffect, useMemo, useState } from 'react'
-import { LayerGroup, DomEvent, DomUtil, Control } from 'leaflet'
+import { LayerGroup, DomEvent, DomUtil } from 'leaflet'
 import { useTranslation } from 'react-i18next'
 import { useMap } from 'react-leaflet'
-import 'leaflet.locatecontrol'
+import { LocateControl } from 'leaflet.locatecontrol'
 
 import { useStorage } from '@store/useStorage'
 import { useLocationError } from '@hooks/useLocationError'
 
 /**
  * Use location hook
- * @returns {{ lc: Control.Locate & { _onClick: () => void }, requesting: boolean, color: import('@mui/material').ButtonProps['color'], locationError: { show: boolean, message: string }, hideLocationError: () => void }}
+ * @returns {{ lc: import('leaflet.locatecontrol').LocateControl & { _onClick: () => void }, requesting: boolean, color: import('@mui/material').ButtonProps['color'], locationError: { show: boolean, message: string }, hideLocationError: () => void }}
  */
 export function useLocation(dependency = false) {
   const map = useMap()
@@ -26,7 +26,7 @@ export function useLocation(dependency = false) {
     useLocationError()
 
   const lc = useMemo(() => {
-    const LocateFab = Control.Locate.extend({
+    const LocateFab = LocateControl.extend({
       _setClasses(state) {
         if (state === 'requesting') setColor('secondary')
         else if (state === 'active') setColor('success')

src/pages/map/components/Layers.jsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import { TileLayer, useMap } from 'react-leaflet'
 import { useTranslation } from 'react-i18next'
 import { control } from 'leaflet'
+import { locate } from 'leaflet.locatecontrol'
 import { useStorage } from '@store/useStorage'
 import { useLocationError } from '@hooks/useLocationError'
 import { Notification } from '@components/Notification'
@@ -44,7 +45,7 @@ export function ControlledLocate() {
 
   const lc = React.useMemo(
     () =>
-      control.locate({
+      locate({
         position: 'bottomright',
         metric,
         icon: 'fas fa-crosshairs',