diff --git a/front/package-lock.json b/front/package-lock.json
index a60e9b8..465ab48 100644
--- a/front/package-lock.json
+++ b/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",
diff --git a/front/package.json b/front/package.json
index cc9df15..c8f2c94 100644
--- a/front/package.json
+++ b/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": {
diff --git a/front/src/assets/locate.svg b/front/src/assets/locate.svg
new file mode 100644
index 0000000..45a697c
--- /dev/null
+++ b/front/src/assets/locate.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/front/src/components/LocateButton.tsx b/front/src/components/LocateButton.tsx
new file mode 100644
index 0000000..af02451
--- /dev/null
+++ b/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
+}
+
+function LocateButton({ setPosition }: LocaleButtonProps) {
+ const map = useMapEvent('locationfound', (e) => {
+ setPosition(e.latlng)
+ map.flyTo(e.latlng)
+ })
+
+ const handleLocale: MouseEventHandler = (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+
+ map.locate()
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default LocateButton
\ No newline at end of file
diff --git a/front/src/components/index.ts b/front/src/components/index.ts
index 15d9eba..c6457f3 100644
--- a/front/src/components/index.ts
+++ b/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'
diff --git a/front/src/pages/AddPage.tsx b/front/src/pages/AddPage.tsx
index 85c91e0..ec49ada 100644
--- a/front/src/pages/AddPage.tsx
+++ b/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='© OpenStreetMap contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/>
- {gotResponse(address) && }
+ />
+
+