fetch OSM Data
This commit is contained in:
parent
e52aacbf28
commit
dc84436346
6 changed files with 58 additions and 57 deletions
81
elevators.js
81
elevators.js
|
@ -24,42 +24,57 @@ let geolocation = [null, null];
|
|||
|
||||
async function loadOsmData() {
|
||||
const elevatorNodes = document.querySelectorAll('.elevator');
|
||||
const nodeIdList = [];
|
||||
for (const elevator of elevatorNodes) {
|
||||
elevator.querySelector('.osm').insertAdjacentHTML("beforeend", '<dl class="osmTags">loading...</dl>')
|
||||
|
||||
const osmContainer = elevator.querySelector('.osm');
|
||||
const nodeId = osmContainer.dataset.nodeid;
|
||||
if (nodeId > 0) {
|
||||
elevator.querySelector('.osm').insertAdjacentHTML("beforeend", '<dl class="osmTags">loading...</dl>');
|
||||
nodeIdList.push(nodeId)
|
||||
}
|
||||
}
|
||||
|
||||
for (const elevator of elevatorNodes) {
|
||||
const osmContainer = elevator.querySelector('.osmTags');
|
||||
const nodeId = elevator.querySelector('.osm').dataset.nodeid;
|
||||
const osmData = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(${nodeId});out%20body;`, {});
|
||||
const responseData = await osmData.json();
|
||||
const osmData = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(id:${nodeIdList.join(',')});out%20body;`, {});
|
||||
const osmJson = await osmData.json();
|
||||
|
||||
if (responseData.elements.length) {
|
||||
const node = responseData.elements[0];
|
||||
const tags = node['tags'];
|
||||
console.log(tags)
|
||||
if (tags['highway'] === 'elevator') {
|
||||
let osmTemplate = '';
|
||||
osmTemplate += `<div><dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt><dd><a href="https://www.openstreetmap.org/node/${nodeId}" target="_blank">
|
||||
if (!osmJson.hasOwnProperty('elements')) return;
|
||||
|
||||
for (const elevator of elevatorNodes) {
|
||||
const tagContainer = elevator.querySelector('.osmTags');
|
||||
const nodeId = elevator.querySelector('.osm').dataset.nodeid;
|
||||
|
||||
const nodes = osmJson.elements.filter(node => node.id === parseInt(nodeId))
|
||||
if (!nodes.length) {
|
||||
tagContainer.innerHTML = 'keine Daten';
|
||||
continue;
|
||||
}
|
||||
const nodeInfo = nodes[0];
|
||||
|
||||
if (!nodeInfo.hasOwnProperty('tags')) {
|
||||
tagContainer.innerHTML = 'keine Daten';
|
||||
continue;
|
||||
}
|
||||
const tags = nodeInfo['tags'];
|
||||
|
||||
if (tags['highway'] === 'elevator') {
|
||||
let osmTemplate = '';
|
||||
osmTemplate += `<div><dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt><dd><a href="https://www.openstreetmap.org/node/${nodeId}" target="_blank">
|
||||
Auf Karte anzeigen
|
||||
</a></dd></div>`;
|
||||
if (tags.hasOwnProperty('description')) {
|
||||
osmTemplate += `<div><dt><span data-icon="info" class="size-l"></span>Beschreibung</dt><dd>${tags['description']}</dd></div>`;
|
||||
}
|
||||
if (tags.hasOwnProperty('level')) {
|
||||
osmTemplate += `<div><dt><span data-icon="up-down" class="size-l"></span>Ebenen</dt><dd>${tags['level'].split(';').sort().join(', ')}</dd></div>`;
|
||||
}
|
||||
if (tags.hasOwnProperty('wheelchair')) {
|
||||
osmTemplate += `<div><dt><span data-icon="wheelchair" class="size-l"></span>Rollstühle</dt><dd>${tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
if (tags.hasOwnProperty('bicycle')) {
|
||||
osmTemplate += `<div><dt><span data-icon="bicycle" class="size-l"></span>Fahrräder</dt><dd>${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
osmContainer.innerHTML = ''; // clear loading state
|
||||
osmContainer.insertAdjacentHTML('beforeend', osmTemplate);
|
||||
if (tags.hasOwnProperty('description')) {
|
||||
osmTemplate += `<div><dt><span data-icon="info" class="size-l"></span>Beschreibung</dt><dd>${tags['description']}</dd></div>`;
|
||||
}
|
||||
|
||||
if (tags.hasOwnProperty('level')) {
|
||||
osmTemplate += `<div><dt><span data-icon="up-down" class="size-l"></span>Ebenen</dt><dd>${tags['level'].split(';').sort().join(', ')}</dd></div>`;
|
||||
}
|
||||
if (tags.hasOwnProperty('wheelchair')) {
|
||||
osmTemplate += `<div><dt><span data-icon="wheelchair" class="size-l"></span>Rollstühle</dt><dd>${tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
if (tags.hasOwnProperty('bicycle')) {
|
||||
osmTemplate += `<div><dt><span data-icon="bicycle" class="size-l"></span>Fahrräder</dt><dd>${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
tagContainer.innerHTML = ''; // clear loading state
|
||||
tagContainer.insertAdjacentHTML('beforeend', osmTemplate);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -174,6 +189,9 @@ function renderData() {
|
|||
dateContainer.innerHTML = dateTimeStyle.format(date);
|
||||
|
||||
let stationIndex = 0;
|
||||
|
||||
//clear list before update
|
||||
listContainer.innerHTML = '';
|
||||
for (const station of stations) {
|
||||
const stationName = station.mainSubStation.stationName;
|
||||
const lines = new Set();
|
||||
|
@ -345,6 +363,11 @@ document.querySelector('#loadElevators')
|
|||
loadElevators().then(() => renderData());
|
||||
})
|
||||
|
||||
document.querySelector('#loadOSM')
|
||||
.addEventListener('click', (e) => {
|
||||
loadOsmData();
|
||||
})
|
||||
|
||||
renderData();
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue