diff --git a/src/components/map/SelectMap.tsx b/src/components/map/SelectMap.tsx index 4031f05..19064e5 100644 --- a/src/components/map/SelectMap.tsx +++ b/src/components/map/SelectMap.tsx @@ -8,7 +8,8 @@ import { import L, { LatLng, LatLngBounds } from "leaflet"; import "leaflet/dist/leaflet.css"; import { css } from "@emotion/react"; -import { CircleMinus, MousePointerClick } from "lucide-react"; +import { CircleMinus, MousePointerClick, Search, Loader2 } from "lucide-react"; +import { useMap } from "react-leaflet"; const IconSize = css({ width: "14px", @@ -120,6 +121,16 @@ function RectangleSelector({ ) : null; } +function MapUpdater({ center }: { center: [number, number] | null }) { + const map = useMap(); + useEffect(() => { + if (center) { + map.flyTo(center, 13); + } + }, [center, map]); + return null; +} + export function MapComponent({ onDone, onRemove, @@ -131,6 +142,35 @@ export function MapComponent({ const [bounds, setBounds] = useState(null); const [drawBounds, setDrawBounds] = useState(null); + const [searchQuery, setSearchQuery] = useState(""); + const [isSearching, setIsSearching] = useState(false); + const [searchCenter, setSearchCenter] = useState<[number, number] | null>(null); + + const handleSearch = async (e: React.FormEvent) => { + e.preventDefault(); + if (!searchQuery.trim()) return; + + setIsSearching(true); + try { + const response = await fetch( + `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent( + searchQuery + )}` + ); + const data = await response.json(); + if (data && data.length > 0) { + setSearchCenter([parseFloat(data[0].lat), parseFloat(data[0].lon)]); + } else { + alert("Location not found"); + } + } catch (error) { + console.error("Search error:", error); + alert("Error searching location"); + } finally { + setIsSearching(false); + } + }; + const handleClickSwitchDrag = () => { setIsDrag(!isDrag); }; @@ -158,6 +198,56 @@ export function MapComponent({ position: "relative", })} > +
+ setSearchQuery(e.target.value)} + css={css({ + padding: "0.5rem", + border: "1px solid #ccc", + borderRadius: "4px", + outline: "none", + width: "200px", + })} + /> + +
+
+