Adding a modal to display inforlation about a location.

src/components/map/Gpx.tsx

@@ -40,13 +40,7 @@ const Gpx: React.FC<{ gpx: any }> = (props) => {
     )}`;
   }, '');
 
-  return (
-    <path
-      d={d}
-      className={`track ${props.gpx.subtype}`}
-      onClick={clickHandler}
-    />
-  );
+  return <path d={d} className={`track ${props.gpx.subtype}`} />;
 };
 
 export default Gpx;

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<HTMLIonModalElement>(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 (
+    <IonModal
+      trigger='information-request'
+      ref={modal}
+      onIonModalWillPresent={ionModalWillPresentHandler}
+    >
+      <IonToolbar>
+        <IonTitle>{i18n.locationInfo!.title}</IonTitle>
+        <IonButtons slot='end'>
+          <IonButton onClick={() => dismiss()}>{i18n.close}</IonButton>
+        </IonButtons>
+      </IonToolbar>
+      <IonContent>
+        <IonList lines='full' class='ion-no-margin'>
+          <IonListHeader lines='full'>
+            <IonLabel>{i18n.locationInfo!.location}</IonLabel>
+          </IonListHeader>
+          <IonItem>
+            <IonLabel>{i18n.locationInfo!.lat}</IonLabel>
+            {scope.center.lat} N
+          </IonItem>
+          <IonItem>
+            <IonLabel>{i18n.locationInfo!.lon}</IonLabel>
+            {scope.center.lon} E
+          </IonItem>
+          <IonItem>
+            <IonLabel>{i18n.locationInfo!.elevation}</IonLabel>
+            {elevation === undefined && <IonSpinner name='lines' />}
+            {elevation !== undefined && <>{elevation} m</>}
+          </IonItem>
+        </IonList>
+      </IonContent>{' '}
+    </IonModal>
+  );
+};
+
+export default LocationInfo;

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 (
-    <g className='reticle'>
+    <g className='reticle' pointerEvents='visible' id='information-request'>
       <circle
         cx={center.x}
         cy={center.y}
@@ -121,9 +131,33 @@ const Reticle: React.FC<{}> = () => {
         href='#reticle-east'
         transform={`rotate(-90, ${center.x}, ${center.y})`}
       />
-      <text x={center.x + unitPxStep * nbUnits - 15} y={center.y - 20}>
+      <text
+        x={center.x + unitPxStep * nbUnits - 15}
+        y={center.y - 10}
+        cursor='pointer'
+      >
         {`${radiusUnitValue * nbUnits} ${radiusUnit}`}
       </text>
+      <circle
+        cx={center.x + unitPxStep * nbUnits - 15}
+        cy={center.y - 32}
+        r={10}
+        fill='white'
+        opacity={0.8}
+        strokeWidth={1}
+        stroke='black'
+        cursor='pointer'
+        pointerEvents='visible'
+      />
+      <text
+        cursor='pointer'
+        x={center.x + unitPxStep * nbUnits - 17}
+        y={center.y - 27}
+        style={{ fontFamily: 'fixed', fontSize: 17, fontWeight: 'bolder' }}
+        pointerEvents='none'
+      >
+        i
+      </text>
     </g>
   );
 };

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<{}> = () => {
       <IonContent fullscreen={true}>
         <IonApp>
           <TileServerChooserDialog />
+          <LocationInfo />
           <Slippy>
             <Whiteboard fixedChildren={<Reticle />}>
               <CurrentLocation />