Querying nominatim reverse (OSM) to get addresses.

src/components/map/LocationInfo.tsx

@@ -26,10 +26,12 @@ const LocationInfo: React.FC<{}> = () => {
   };
 
   const [elevation, setElevation] = useState(undefined);
+  const [address, setAddress] = useState<{ display_name: any } | undefined>(
+    undefined
+  );
 
-  const ionModalWillPresentHandler = async () => {
+  const findElevation = 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}`,
@@ -39,6 +41,26 @@ const LocationInfo: React.FC<{}> = () => {
     setElevation(data.elevation[0]);
   };
 
+  const findAddress = async () => {
+    setAddress(undefined);
+    const response = await fetch(
+      `https://nominatim.openstreetmap.org/reverse?lat=${
+        scope.center.lat
+      }&lon=${
+        scope.center.lon
+      }&format=jsonv2&addressdetails=1&extratags=1&namedetails=1&accept-language=${i18n.getLanguage()}`,
+      {}
+    );
+    const data = await response.json();
+    console.log(JSON.stringify(data));
+    setAddress(data);
+  };
+
+  const ionModalWillPresentHandler = async () => {
+    findElevation();
+    findAddress();
+  };
+
   return (
     <IonModal
       trigger='information-request'
@@ -70,7 +92,23 @@ const LocationInfo: React.FC<{}> = () => {
             {elevation !== undefined && <>{elevation} m</>}
           </IonItem>
         </IonList>
-      </IonContent>{' '}
+        <IonList lines='full' class='ion-no-margin'>
+          <IonListHeader lines='full'>
+            <IonLabel>{i18n.locationInfo!.address}</IonLabel>
+          </IonListHeader>
+          <IonItem>
+            <IonLabel>{i18n.locationInfo!.display_name}</IonLabel>
+            {address === undefined && <IonSpinner name='lines' />}
+            {address !== undefined &&
+              address.display_name.split(',').map((value: string) => (
+                <>
+                  {value}
+                  <br />
+                </>
+              ))}
+          </IonItem>
+        </IonList>
+      </IonContent>
     </IonModal>
   );
 };

src/i18n/index.tsx

@@ -55,6 +55,8 @@ const strings = new LocalizedStrings({
       lat: 'Latitude: ',
       lon: 'Longitude: ',
       elevation: 'Elevation:',
+      address: 'Address',
+      display_name: 'Full address:',
     },
   },
   fr: {
@@ -121,6 +123,8 @@ const strings = new LocalizedStrings({
       lat: 'Latitude : ',
       lon: 'Longitude : ',
       elevation: 'Altitude :',
+      address: 'Addresse',
+      display_name: 'Adresse complète :',
     },
   },
 });