Added location marker

front/package-lock.json

@@ -17,6 +17,7 @@
         "react-dom": "^18.2.0",
         "react-insta-stories": "^2.6.1",
         "react-leaflet": "^4.2.1",
+        "react-leaflet-custom-control": "^1.3.5",
         "react-router-dom": "^6.14.1"
       },
       "devDependencies": {
@@ -2864,6 +2865,16 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/react-leaflet-custom-control": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/react-leaflet-custom-control/-/react-leaflet-custom-control-1.3.5.tgz",
+      "integrity": "sha512-9/v7AxY6CoUbc6fAD/0u8O6wCBopxtdzJukWOR7vLZcyAN5rQCYWXjF5wXJ8klONweZGsRaGPJelfEBRtZAgQA==",
+      "peerDependencies": {
+        "leaflet": "^1.7.1",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",

front/package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-insta-stories": "^2.6.1",
     "react-leaflet": "^4.2.1",
+    "react-leaflet-custom-control": "^1.3.5",
     "react-router-dom": "^6.14.1"
   },
   "devDependencies": {

front/src/assets/locate.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 15 3 L 15 5.0625 C 9.734375 5.539063 5.539063 9.734375 5.0625 15 L 3 15 L 3 17 L 5.0625 17 C 5.539063 22.265625 9.734375 26.460938 15 26.9375 L 15 29 L 17 29 L 17 26.9375 C 22.265625 26.460938 26.460938 22.265625 26.9375 17 L 29 17 L 29 15 L 26.9375 15 C 26.460938 9.734375 22.265625 5.539063 17 5.0625 L 17 3 Z M 15 7.03125 L 15 9 L 17 9 L 17 7.03125 C 21.191406 7.484375 24.515625 10.808594 24.96875 15 L 23 15 L 23 17 L 24.96875 17 C 24.515625 21.191406 21.191406 24.515625 17 24.96875 L 17 23 L 15 23 L 15 24.96875 C 10.808594 24.515625 7.484375 21.191406 7.03125 17 L 9 17 L 9 15 L 7.03125 15 C 7.484375 10.808594 10.808594 7.484375 15 7.03125 Z"/></svg>

front/src/components/LocateButton.tsx

@@ -0,0 +1,38 @@
+import { MouseEventHandler } from 'react'
+import { useMapEvent } from 'react-leaflet'
+import { LatLng } from 'leaflet'
+import Control from 'react-leaflet-custom-control'
+
+import locateIcon from '../assets/locate.svg'
+
+import styles from '../styles/Map.module.css'
+import { SetState } from '../utils/types'
+type LocaleButtonProps = {
+    setPosition: SetState<LatLng>
+}
+
+function LocateButton({ setPosition }: LocaleButtonProps) {
+    const map = useMapEvent('locationfound', (e) => {
+        setPosition(e.latlng)
+        map.flyTo(e.latlng)
+    })
+
+    const handleLocale: MouseEventHandler<HTMLAnchorElement> = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        map.locate()
+    }
+
+    return (
+        <Control position='topleft'>
+            <div className='leaflet-bar'>
+                <a href='#' role='button' onClick={handleLocale}>
+                    <img className={styles.localeIcon} src={locateIcon} alt='locate' />
+                </a>
+            </div>
+        </Control>
+    )
+}
+
+export default LocateButton

front/src/components/index.ts

@@ -16,3 +16,4 @@ export { default as Poetry } from './Poetry'
 export { default as SelectDisposalTrashbox } from './SelectDisposalTrashbox'
 export { default as StarRating } from './StarRating'
 export { default as CardLayout } from './CardLayout'
+export { default as LocateButton } from './LocateButton'

front/src/pages/AddPage.tsx

@@ -4,7 +4,7 @@ import { MapContainer, TileLayer } from 'react-leaflet'
 import { latLng } from 'leaflet'
 import { useNavigate } from 'react-router-dom'
 
-import { MapClickHandler, LocationMarker, CardLayout } from '../components'
+import { MapClickHandler, LocationMarker, CardLayout, LocateButton } from '../components'
 import { useAddAnnouncement } from '../hooks/api'
 import { categories, categoryNames } from '../assets/category'
 import { stations, lines, lineNames } from '../assets/metro'
@@ -85,11 +85,14 @@ function AddPage() {
                                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                                 url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                             />
-                            {gotResponse(address) && <LocationMarker
+
-                                address={fallbackError(address)}
+                            <LocationMarker
+                                address={gotResponse(address) ? fallbackError(address) : 'Загрузка...'}
                                 position={addressPosition}
                                 setPosition={setAddressPosition}
-                            />}
+                            />
+
+                            <LocateButton setPosition={setAddressPosition} />
 
                             <MapClickHandler
                                 setPosition={setAddressPosition}

front/src/styles/Map.module.css

@@ -0,0 +1,3 @@
+.localeIcon {
+    height: 22.5px;
+}