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

This commit is contained in:
Eric van der Vlist 2022-10-10 11:54:28 +02:00
parent 1b0ab84923
commit 3b86f143c7
2 changed files with 103 additions and 8 deletions

View File

@ -10,10 +10,13 @@ import {
IonListHeader, IonListHeader,
IonItem, IonItem,
IonSpinner, IonSpinner,
IonAccordionGroup,
IonAccordion,
} from '@ionic/react'; } from '@ionic/react';
import React, { useRef, useState } from 'react'; import React, { Fragment, useRef, useState } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import i18n from '../../i18n'; import i18n from '../../i18n';
import { geoPoint } from '../../lib/geo';
import { MapState } from '../../store/map'; import { MapState } from '../../store/map';
const LocationInfo: React.FC<{}> = () => { const LocationInfo: React.FC<{}> = () => {
@ -29,6 +32,7 @@ const LocationInfo: React.FC<{}> = () => {
const [address, setAddress] = useState<{ display_name: any } | undefined>( const [address, setAddress] = useState<{ display_name: any } | undefined>(
undefined undefined
); );
const [notes, setNotes] = useState<{ features: any } | undefined>(undefined);
const findElevation = async () => { const findElevation = async () => {
setElevation(undefined); setElevation(undefined);
@ -38,6 +42,7 @@ const LocationInfo: React.FC<{}> = () => {
{} {}
); );
const data = await response.json(); const data = await response.json();
console.log(`elevation: ${JSON.stringify(data)}`);
setElevation(data.elevation[0]); setElevation(data.elevation[0]);
}; };
@ -52,13 +57,50 @@ const LocationInfo: React.FC<{}> = () => {
{} {}
); );
const data = await response.json(); const data = await response.json();
console.log(JSON.stringify(data)); console.log(`address: ${JSON.stringify(data)}`);
setAddress(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 () => { const ionModalWillPresentHandler = async () => {
findElevation(); findElevation();
findAddress(); 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 ( return (
@ -100,14 +142,60 @@ const LocationInfo: React.FC<{}> = () => {
<IonLabel>{i18n.locationInfo!.display_name}</IonLabel> <IonLabel>{i18n.locationInfo!.display_name}</IonLabel>
{address === undefined && <IonSpinner name='lines' />} {address === undefined && <IonSpinner name='lines' />}
{address !== undefined && {address !== undefined &&
address.display_name.split(',').map((value: string) => ( address.display_name
<> .split(',')
.map((value: string, index: number) => (
<Fragment key={index}>
{value} {value}
<br /> <br />
</> </Fragment>
))} ))}
</IonItem> </IonItem>
</IonList> </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> </IonContent>
</IonModal> </IonModal>
); );

View File

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