diff --git a/src/main.js b/src/main.js index 1cf486a..9df42c3 100644 --- a/src/main.js +++ b/src/main.js @@ -43,7 +43,7 @@ function formatToAreaNumber(number) { } -function renderBiotopeMeta(data) { +function renderParcelMeta(data) { if (currentLayer) { map.removeLayer(currentLayer) } @@ -62,20 +62,20 @@ function renderBiotopeMeta(data) { let detailOutput = '' - if (data['district'] !== null) { - detailOutput += `
  • Landkreis
  • ` + if (data['parcel_number'] !== null) { + detailOutput += `
  • Flurstück
    ${data['parcel_number']}
  • ` } - if (data['municipality'] !== null) { - detailOutput += `
  • Gemeinde
    ${data['municipality']}
  • ` + if (data['field_parcel_number'] !== null) { + detailOutput += `
  • Flur
    ${data['field_parcel_number']}
  • ` } - if (data['parcel_number'] !== null) { - detailOutput += `
  • Gemarkungsnummer
    ${data['parcel_number']}
  • ` + if (data['land_parcel_name'] !== null) { + detailOutput += `
  • Gemarkung
    ${data['land_parcel_name']}
  • ` } - if (data['field_number'] !== null) { - detailOutput += `
  • Flurnummer
    ${data['field_number']}
  • ` + if (data['municipality_name'] !== null) { + detailOutput += `
  • Gemeinde
    ${data['municipality_name']}
  • ` } if (data['shape_area'] > 0) { @@ -84,23 +84,8 @@ function renderBiotopeMeta(data) { } const detailList = document.querySelector('#detailList') - const ribbonValuableBiotope = document.querySelector('#ribbonElement') - - if (ribbonValuableBiotope) { - ribbonValuableBiotope.remove() - } - - if (data['valuable_biotope'] !== undefined && data['valuable_biotope'] === 1) { - const ribbonElement = document.createElement('div') - const ribbonTextNode = document.createTextNode('Wertbiotop') - - ribbonElement.id = 'ribbonElement' - ribbonElement.append(ribbonTextNode) - ribbonElement.classList.add('ribbon', 'top-2', 'absolute', 'text-base', 'text-zinc-900', 'font-mono', 'bg-emerald-200', 'tracking-normal', 'ps-2.5', 'pe-3.5') - detailList.parentNode.insertBefore(ribbonElement, detailList) - } - detailList.innerHTML = detailOutput + document.querySelector('#detailList').innerHTML = detailOutput document.querySelector('#sidebar').classList.remove('hidden') document.querySelector('#sidebar').classList.add('absolute') document.querySelector('#about').classList.add('hidden') @@ -108,19 +93,12 @@ function renderBiotopeMeta(data) { } -function cleanBiotopeMeta() { +function cleanParcelMeta() { if (currentLayer) { map.removeLayer(currentLayer) } - const detailList = document.querySelector('#detailList') - const ribbonValuableBiotope = document.querySelector('#ribbonElement') - - if (ribbonValuableBiotope) { - ribbonValuableBiotope.remove() - } - - detailList.innerHTML = '' + document.querySelector('#detailList').innerHTML = '' document.querySelector('#sidebar').classList.add('hidden') document.querySelector('#sidebar').classList.remove('absolute') document.querySelector('#about').classList.remove('hidden') @@ -128,21 +106,20 @@ function cleanBiotopeMeta() { } -function fetchBiotopeMeta(lat, lng) { +function fetchParcelMeta(lat, lng) { const url = `https://api.oklabflensburg.de/alkis/v1/parcel?lat=${lat}&lng=${lng}` - // const url = `http://localhost:8000/alkis/v1/parcel?lat=${lat}&lng=${lng}` try { fetch(url, { method: 'GET' }).then((response) => response.json()).then((data) => { - renderBiotopeMeta(data) + renderParcelMeta(data) }).catch(function (error) { - cleanBiotopeMeta() + cleanParcelMeta() }) } catch { - cleanBiotopeMeta() + cleanParcelMeta() } } @@ -175,15 +152,15 @@ function handleWindowSize() { document.addEventListener('DOMContentLoaded', function () { L.tileLayer('https://tiles.oklabflensburg.de/sgm/{z}/{x}/{y}.png', { - maxZoom: 22, + maxZoom: 20, tileSize: 256, attribution: '© OpenStreetMap contributors' }).addTo(map) L.tileLayer('https://tiles.oklabflensburg.de/shalkislot/{z}/{x}/{y}.png', { opacity: 0.9, - maxZoom: 22, - maxNativeZoom: 22, + maxZoom: 20, + maxNativeZoom: 20, attribution: '© GeoBasis-DE/LVermGeo SH/CC BY 4.0' }).addTo(map) @@ -191,13 +168,13 @@ document.addEventListener('DOMContentLoaded', function () { const lat = e.latlng.lat const lng = e.latlng.lng - fetchBiotopeMeta(lat, lng) + fetchParcelMeta(lat, lng) }) document.querySelector('#sidebarContentCloseButton').addEventListener('click', function (e) { e.preventDefault() - cleanBiotopeMeta() + cleanParcelMeta() }) document.querySelector('#sidebarCloseButton').addEventListener('click', function (e) { @@ -210,7 +187,6 @@ document.addEventListener('DOMContentLoaded', function () { history.replaceState({ screen: 'home' }, '', '/') }) - const layers = { 'layer1': L.tileLayer('https://tiles.oklabflensburg.de/nksh/{z}/{x}/{y}.png', { opacity: 0.7,