Allow running from current location

Hoff97 · Oct 2, 2024 · 2562a81 · 2562a81
1 parent 0fdf96a
commit 2562a81
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git 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
@@ -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 ? <Button
+                onClick={(ev) => {
+                    searchFromCurrentLocation(setImageState, setGrid, setSettings, settings, pathAndNode, map);
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                }}
+                large={true}
+                intent="primary"
+                className="locationButton"
+                text="From my location">
+            </Button> : <></>
+        }
+    </>;
+}
+
 function InfoPanel({ isOpen, setIsOpen }: InfoPanelProps) {
     let handleClose = () => {
         setIsOpen(false);
@@ -793,6 +858,12 @@ function App() {
                         setGrid={setGrid}
                         pathAndNode={pathAndNode}
                         setSettings={setSettings}></SearchComponent>
+                    <CurrenLocationPane
+                        setImageState={setImageState}
+                        settings={settings}
+                        setGrid={setGrid}
+                        pathAndNode={pathAndNode}
+                        setSettings={setSettings}></CurrenLocationPane>
                 </MapContainer>
             </OverlaysProvider>
         </div>