sandbox-react/axios-overpass-api/app/components/map.jsx

66 lines
1.7 KiB
JavaScript

import React from 'react';
import axios from 'axios';
import qs from 'qs';
var 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;'
});
var config = {
method: 'post',
maxBodyLength: Infinity,
url: 'https://overpass-api.de/api/interpreter',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data : data
};
function myFunction(value,key) {
//console.log("key: "+key+",type: "+value.type);
if(value.tags.name===undefined){
console.log('ERROR: OSM element does NOT include name tag');
}else if(value.type==='node'){
console.log('node');
console.log('name: '+value.tags.name);
console.log('lat: '+value.lat);
console.log('lon: '+value.lon);
}else if(value.type==='way'){
console.log('way');
console.log('name: '+value.tags.name);
console.log('lat: '+value.center.lat);
console.log('lon: '+value.center.lon);
}else{
console.log('ERROR: OSM element NOT supported');
}
}
function post () {
console.log('post() started...');
console.log('data: '+data);
axios(config)
.then(function (response) {
//log JSON
const dataObj=response.data;
//console.log("dataObj: "+dataObj);
const elemAry=dataObj.elements;
const elemAryLength=elemAry.length;
console.log("no: "+elemAryLength)
elemAry.forEach(myFunction);
})
.catch(function (error) {
console.log(error);
});
console.log('post() done.');
}
export default function Map() {
return (
<>
<p>Map</ p>
<button onClick={post}>post</button>
</>
);
}