Fetching OSM notes (more work needed to dosplai them).
This commit is contained in:
parent
1b0ab84923
commit
3b86f143c7
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
Loading…
Reference in New Issue