Fetching OSM notes (more work needed to dosplai them).

src/components/map/LocationInfo.tsx

@@ -10,10 +10,13 @@ import {
   IonListHeader,
   IonItem,
   IonSpinner,
+  IonAccordionGroup,
+  IonAccordion,
 } from '@ionic/react';
-import React, { useRef, useState } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import i18n from '../../i18n';
+import { geoPoint } from '../../lib/geo';
 import { MapState } from '../../store/map';
 
 const LocationInfo: React.FC<{}> = () => {
@@ -29,6 +32,7 @@ const LocationInfo: React.FC<{}> = () => {
   const [address, setAddress] = useState<{ display_name: any } | undefined>(
     undefined
   );
+  const [notes, setNotes] = useState<{ features: any } | undefined>(undefined);
 
   const findElevation = async () => {
     setElevation(undefined);
@@ -38,6 +42,7 @@ const LocationInfo: React.FC<{}> = () => {
       {}
     );
     const data = await response.json();
+    console.log(`elevation: ${JSON.stringify(data)}`);
     setElevation(data.elevation[0]);
   };
 
@@ -52,13 +57,50 @@ const LocationInfo: React.FC<{}> = () => {
       {}
     );
     const data = await response.json();
-    console.log(JSON.stringify(data));
+    console.log(`address: ${JSON.stringify(data)}`);
     setAddress(data);
   };
 
+  const findNotes = async () => {
+    setNotes(undefined);
+    const metresPerDegree =
+      111111 * Math.cos((scope.center.lat * Math.PI) / 180);
+    const deltaDegrees = 1000 / metresPerDegree;
+    const response = await fetch(
+      `https://api.openstreetmap.org/api/0.6/notes.json?bbox=${
+        scope.center.lon - deltaDegrees
+      },${scope.center.lat - deltaDegrees},${scope.center.lon + deltaDegrees},${
+        scope.center.lat + deltaDegrees
+      }`,
+      {}
+    );
+    const data = await response.json();
+    console.log(`notes: ${JSON.stringify(data)}`);
+    setNotes(data);
+  };
+
   const ionModalWillPresentHandler = async () => {
     findElevation();
     findAddress();
+    findNotes();
+  };
+
+  const roughDistance = (a: geoPoint, b: geoPoint): number => {
+    const pseudoDistanceInDegrees = Math.sqrt(
+      (a.lat - b.lat) ** 2 + (a.lon - b.lon) ** 2
+    );
+    const metresPerDegree =
+      111111 * Math.cos((scope.center.lat * Math.PI) / 180);
+    return pseudoDistanceInDegrees * metresPerDegree;
+  };
+
+  const localDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    const format = new Intl.DateTimeFormat(i18n.getLanguage(), {
+      dateStyle: 'full',
+      timeStyle: 'long',
+    });
+    return format.format(date);
   };
 
   return (
@@ -100,14 +142,60 @@ const LocationInfo: React.FC<{}> = () => {
             <IonLabel>{i18n.locationInfo!.display_name}</IonLabel>
             {address === undefined && <IonSpinner name='lines' />}
             {address !== undefined &&
-              address.display_name.split(',').map((value: string) => (
-                <>
-                  {value}
-                  <br />
-                </>
-              ))}
+              address.display_name
+                .split(',')
+                .map((value: string, index: number) => (
+                  <Fragment key={index}>
+                    {value}
+                    <br />
+                  </Fragment>
+                ))}
           </IonItem>
         </IonList>
+        <IonList lines='full' class='ion-no-margin'>
+          <IonListHeader lines='full'>
+            <IonLabel>
+              {i18n.locationInfo!.notes}
+              {notes === undefined && <IonSpinner name='lines' />}
+            </IonLabel>
+          </IonListHeader>
+          {notes !== undefined && (
+            <IonAccordionGroup>
+              {notes.features.map((feature: any) => (
+                <IonAccordion key={feature.properties.id}>
+                  <IonItem slot='header'>
+                    <IonLabel>
+                      {i18n.locationInfo!.at!(
+                        roughDistance(scope.center, {
+                          lon: feature.geometry.coordinates[0],
+                          lat: feature.geometry.coordinates[1],
+                        })
+                      )}
+                    </IonLabel>
+                  </IonItem>
+                  <div className='ion-padding' slot='content'>
+                    <IonList lines='full' class='ion-no-margin'>
+                      <IonListHeader lines='full'>
+                        <IonLabel>
+                          {i18n.locationInfo!.created}
+                          {localDate(feature.properties.date_created)}
+                          {', '}
+                          {feature.properties.status === 'open'
+                            ? i18n.locationInfo.status?.opened
+                            : i18n.locationInfo.status?.closed}
+                          {'.'}
+                        </IonLabel>
+                      </IonListHeader>
+                      {feature.properties.comments.map((comment: any) => (
+                        <IonItem>{comment.html}</IonItem>
+                      ))}
+                    </IonList>
+                  </div>
+                </IonAccordion>
+              ))}
+            </IonAccordionGroup>
+          )}
+        </IonList>
       </IonContent>
     </IonModal>
   );

src/i18n/index.tsx

@@ -57,6 +57,13 @@ const strings = new LocalizedStrings({
       elevation: 'Elevation:',
       address: 'Address',
       display_name: 'Full address:',
+      notes: 'Notes',
+      at: (distance: number) => `At ${Math.round(distance)}m...`,
+      created: 'Created on ',
+      status: {
+        opened: 'opened',
+        closed: 'closed',
+      },
     },
   },
   fr: {