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}>
+