97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
import React, {useEffect,useState} from 'react';
|
|
import axios from 'axios';
|
|
import qs from 'qs';
|
|
|
|
import Map from '../components/map/map';
|
|
|
|
const data = qs.stringify(
|
|
{
|
|
'data': '[bbox:51.990800124058914,10.045623779296875,52.552976197007524,11.01104736328125][out:json];(node["shop"="second_hand"];way["shop"="second_hand"];relation["shop"="second_hand"];);out center;'
|
|
}
|
|
);
|
|
|
|
//TODO Make fields available via configuration!
|
|
const interval=3600000;
|
|
const opInstance='https://overpass-api.de/api/interpreter';
|
|
const opInstanceZ='https://z.overpass-api.de/api/interpreter';
|
|
const config = {
|
|
method: 'post',
|
|
maxBodyLength: Infinity,
|
|
url: opInstanceZ,
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
data : data
|
|
};
|
|
|
|
function parseOsmElem(response){
|
|
let elemAry=[];
|
|
if(response.data){
|
|
let elements=response.data.elements;
|
|
let no=elements.length;
|
|
//console.log('no: '+no);
|
|
for(let i = 0; i < no; i++) {
|
|
let elemObj={};
|
|
elemObj.id=elements[i].id;
|
|
elemObj.name=elements[i].tags.name;
|
|
if(elements[i].tags.name===undefined){
|
|
//TODO Handle issue!
|
|
console.error('ERROR: OSM element does NOT include name tag');
|
|
}else if(elements[i].type==='node'){
|
|
elemObj.lat=elements[i].lat;
|
|
elemObj.lon=elements[i].lon;
|
|
}else if(elements[i].type==='way'){
|
|
elemObj.lat=elements[i].center.lat;
|
|
elemObj.lon=elements[i].center.lon;
|
|
}else{
|
|
console.error('ERROR: OSM element NOT supported');
|
|
}
|
|
//console.log('elem name: '+elemObj.name);
|
|
//console.log('elem lat: '+elemObj.lat);
|
|
//console.log('elem lon: '+elemObj.lon);
|
|
elemAry.push(elemObj);
|
|
//console.error('elemAry no: '+elemAry.length);
|
|
}
|
|
}else{
|
|
console.error('ERROR: response NOT available');
|
|
}
|
|
return elemAry;
|
|
};
|
|
|
|
export default function MapPage() {
|
|
/*storage*/
|
|
const [ary, setAry] = useState([]);
|
|
const getData= async ()=>{
|
|
//console.log('getData() start...');
|
|
try {
|
|
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
|
|
const res = await axios(config);
|
|
let elemAry=parseOsmElem(res);
|
|
setAry((ary) => elemAry);
|
|
} catch (err) {
|
|
console.error('ERROR: err.message: ' + err.message);
|
|
}
|
|
//console.log('getData() done.');
|
|
};
|
|
|
|
useEffect(()=>{
|
|
/*do not wait the interval when component loads the first time*/
|
|
getData();
|
|
|
|
/*refresh data periodically*/
|
|
const intervalCall=setInterval(()=>{
|
|
getData();
|
|
}, interval);
|
|
/*TODO adjust interval, make it available via config file*/
|
|
return ()=>{
|
|
/*clean up*/
|
|
clearInterval(intervalCall);
|
|
};
|
|
},[]);
|
|
return (
|
|
<>
|
|
<Map elements={ary}/>
|
|
</>
|
|
);
|
|
}
|