fetch OSM Data

This commit is contained in:
kritzl 2024-06-04 14:17:07 +02:00
parent e52aacbf28
commit dc84436346
6 changed files with 58 additions and 57 deletions

View file

@ -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();