diff --git a/src/components/map/Gpx.tsx b/src/components/map/Gpx.tsx
index 7bf625f..e3a8e7b 100644
--- a/src/components/map/Gpx.tsx
+++ b/src/components/map/Gpx.tsx
@@ -40,13 +40,7 @@ const Gpx: React.FC<{ gpx: any }> = (props) => {
)}`;
}, '');
- return (
-
- );
+ return ;
};
export default Gpx;
diff --git a/src/components/map/LocationInfo.tsx b/src/components/map/LocationInfo.tsx
new file mode 100644
index 0000000..3aecf97
--- /dev/null
+++ b/src/components/map/LocationInfo.tsx
@@ -0,0 +1,78 @@
+import {
+ IonModal,
+ IonToolbar,
+ IonTitle,
+ IonButtons,
+ IonButton,
+ IonContent,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonItem,
+ IonSpinner,
+} from '@ionic/react';
+import React, { useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import i18n from '../../i18n';
+import { MapState } from '../../store/map';
+
+const LocationInfo: React.FC<{}> = () => {
+ const scope = useSelector((state: { map: MapState }) => state.map.scope);
+
+ const modal = useRef(null);
+
+ const dismiss = () => {
+ modal.current?.dismiss();
+ };
+
+ const [elevation, setElevation] = useState(undefined);
+
+ const ionModalWillPresentHandler = async () => {
+ setElevation(undefined);
+ console.log('ionModalWillPresentHandler');
+ const response = await fetch(
+ // `https://api.opentopodata.org/v1/mapzen?locations=${scope.center.lat},${scope.center.lon}`,
+ `https://api.open-meteo.com/v1/elevation?latitude=${scope.center.lat}&longitude=${scope.center.lon}`,
+ {}
+ );
+ const data = await response.json();
+ setElevation(data.elevation[0]);
+ };
+
+ return (
+
+
+ {i18n.locationInfo!.title}
+
+ dismiss()}>{i18n.close}
+
+
+
+
+
+ {i18n.locationInfo!.location}
+
+
+ {i18n.locationInfo!.lat}
+ {scope.center.lat} N
+
+
+ {i18n.locationInfo!.lon}
+ {scope.center.lon} E
+
+
+ {i18n.locationInfo!.elevation}
+ {elevation === undefined && }
+ {elevation !== undefined && <>{elevation} m>}
+
+
+ {' '}
+
+ );
+};
+
+export default LocationInfo;
diff --git a/src/components/map/Reticle.tsx b/src/components/map/Reticle.tsx
index aaf380b..41f0c4d 100644
--- a/src/components/map/Reticle.tsx
+++ b/src/components/map/Reticle.tsx
@@ -1,9 +1,19 @@
import _ from 'lodash';
-import React from 'react';
+import React, { useRef } from 'react';
import { useSelector } from 'react-redux';
+import { informationCircleOutline } from 'ionicons/icons';
import { Point } from '../../lib/geo';
import { MapState } from '../../store/map';
import '../../theme/map.css';
+import {
+ IonButton,
+ IonButtons,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/react';
+import i18n from '../../i18n';
+import eventBus from '../../lib/pubsub';
const Reticle: React.FC<{}> = () => {
const windowState = useSelector(
@@ -65,7 +75,7 @@ const Reticle: React.FC<{}> = () => {
);
return (
-
+
= () => {
href='#reticle-east'
transform={`rotate(-90, ${center.x}, ${center.y})`}
/>
-
+
{`${radiusUnitValue * nbUnits} ${radiusUnit}`}
+
+
+ i
+
);
};
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 84a9f01..c65c6e9 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -27,6 +27,7 @@ import TileServerChooserDialog from './TileServerChooserDialog';
import TrackBrowser from './TracksBrowser';
import Settings from './Settings';
import Reticle from './Reticle';
+import LocationInfo from './LocationInfo';
const Map: react.FC<{}> = () => {
const dispatch = useDispatch();
@@ -53,6 +54,7 @@ const Map: react.FC<{}> = () => {
+
}>
diff --git a/src/components/slippy/mouse-handler.tsx b/src/components/slippy/mouse-handler.tsx
index 125a04a..8471f77 100644
--- a/src/components/slippy/mouse-handler.tsx
+++ b/src/components/slippy/mouse-handler.tsx
@@ -26,7 +26,7 @@ const MouseHandler: react.FC = (
const genericHandler = (event: any) => {
console.log(`Log - Event: ${event.type}`);
if (event.pageX !== undefined) {
- console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
+ console.log(`Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`);
console.log(
`mouseState: ' ${JSON.stringify(mouseState)} (+${
Date.now() - mouseState.timestamp
@@ -43,7 +43,7 @@ const MouseHandler: react.FC = (
};
const mouseDownHandler = (event: any) => {
- event.preventDefault();
+// event.preventDefault();
genericHandler(event);
setMouseState({
down: true,
@@ -54,12 +54,12 @@ const MouseHandler: react.FC = (
const mouseUpHandler = (event: any) => {
genericHandler(event);
- event.preventDefault();
+// event.preventDefault();
setMouseState(initialMouseState);
};
const mouseMoveHandler = (event: any) => {
- event.preventDefault();
+// event.preventDefault();
if (mouseState.down && Date.now() - mouseState.timestamp > 50) {
genericHandler(event);
console.log(
diff --git a/src/i18n/index.tsx b/src/i18n/index.tsx
index d5b9441..628d25d 100644
--- a/src/i18n/index.tsx
+++ b/src/i18n/index.tsx
@@ -48,6 +48,14 @@ const strings = new LocalizedStrings({
},
tracks: 'Tracks',
+
+ locationInfo: {
+ title: 'Here',
+ location: 'Location',
+ lat: 'Latitude: ',
+ lon: 'Longitude: ',
+ elevation: 'Elevation:',
+ },
},
fr: {
colonize: (input: string): any => strings.formatString('{0} :', input),
@@ -106,6 +114,14 @@ const strings = new LocalizedStrings({
},
tracks: 'Traces',
+
+ locationInfo: {
+ title: 'Ici',
+ location: 'Position',
+ lat: 'Latitude : ',
+ lon: 'Longitude : ',
+ elevation: 'Altitude :',
+ },
},
});
diff --git a/src/theme/map.css b/src/theme/map.css
index e44b719..e10fecc 100644
--- a/src/theme/map.css
+++ b/src/theme/map.css
@@ -55,7 +55,7 @@ use.reticle,
}
ion-modal {
- --height: 50%;
+ --height: 100%;
--border-radius: 16px;
--box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);