diff --git a/frontend/src/App.css b/frontend/src/App.css index f2d3d6a..9748b43 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -55,6 +55,13 @@ img.gridImage { right: 0px; } +.locationButton { + position: absolute; + right: 60px; + top: 68px; + z-index: 490; +} + .marginRight { margin-right: 10px; } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0cf4cf7..d8a8614 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -331,8 +331,16 @@ interface PathAndNode { function SearchComponent({ setImageState, settings, setSettings, grid, setGrid, pathAndNode }: SearchComponentProps) { const map = useMap(); + useMapEvents({ async click(e) { + if ( + ("classList" in (e.originalEvent.target as any) && + (e.originalEvent.target as any).classList.contains("locationButton")) + || ("parentElement" in (e.originalEvent.target as any) && "classList" in (e.originalEvent.target as any).parentElement && + (e.originalEvent.target as any).parentElement.classList.contains("locationButton"))) { + return; + } await doSearchFromLocation(setImageState, setGrid, setSettings, e.latlng, settings, pathAndNode, map); }, moveend(e) { @@ -386,6 +394,35 @@ function copyUrlToClipBoard() { navigator.clipboard.writeText(window.location.href); } +function searchFromCurrentLocation( + setImageState: (state: ImageState | undefined) => void, + setGrid: (grid: GridState) => void, + setSettings: (settings: Settings) => void, + settings: Settings, + pathAndNode: PathAndNode, + map: MapLeaflet +) { + if (!("geolocation" in navigator)) { + return; + } + + navigator.geolocation.getCurrentPosition((position) => { + console.log(position); + if (position.coords.altitude !== null) { + const newSettings: Settings = { + ...settings, + startHeight: position.coords.altitude + }; + setSettings(newSettings); + doSearchFromLocation(setImageState, setGrid, setSettings, new LatLng(position.coords.latitude, position.coords.longitude), newSettings, pathAndNode, map); + } else { + doSearchFromLocation(setImageState, setGrid, setSettings, new LatLng(position.coords.latitude, position.coords.longitude), settings, pathAndNode, map); + } + }, null, { + enableHighAccuracy: true + }); +} + function SettingsCard({ settings, setSettings, setImageState, setGrid, grid, pathAndNode, setIsInfoOpen }: SettingsCardProps) { const setStartHeight = (value: number | undefined) => { if (value !== undefined && grid.response !== undefined) { @@ -631,6 +668,34 @@ interface InfoPanelProps { setIsOpen: (open: boolean) => void; } +interface CurrentLocationProps { + setImageState: (state: ImageState | undefined) => void; + settings: Settings; + setSettings: (settings: Settings) => void; + setGrid: (grid: GridState) => void; + pathAndNode: PathAndNode; +} + +function CurrenLocationPane({ setImageState, setGrid, setSettings, settings, pathAndNode }: CurrentLocationProps) { + const map = useMap(); + + return <> + { + "geolocation" in navigator ? : <> + } + ; +} + function InfoPanel({ isOpen, setIsOpen }: InfoPanelProps) { let handleClose = () => { setIsOpen(false); @@ -793,6 +858,12 @@ function App() { setGrid={setGrid} pathAndNode={pathAndNode} setSettings={setSettings}> +