Added location marker

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'