Sogn Finder

Find dit sogn

Sogn Finder med Kort

Find dit sogn

Kode til at lave sognesøg ud fra adresse

Lav et nyt modul og vælg html-modul

 

Under Indhold - Generelt indsættes denne kode:

<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sogn Finder</title>
<style>
body {
font-family: Arial, sans-serif;
}
.sogn-container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
position: relative;
}
input, button {
width: 100%;
padding: 10px;
margin-top: 10px;
}
button {
background-color: #28a745; /* Klar grøn */
color: #0066cc;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.3s;
transition: background-color 0.3s ease, transform 0.2s ease;
}
#dropdown {
width: 100%;
padding: 0;
display: none;
border: 1px solid #ccc;
background-color: white;
position: absolute;
z-index: 1000;
max-height: 200px;
overflow-y: auto;
}
.dropdown-item {
padding: 10px;
cursor: pointer;
}
.dropdown-item:hover {
background-color: #ddd;
}
#result {
font-size: 18px;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>

<div class="sogn-container">
<h2>Find dit sogn</h2>
<form id="sognForm">
<label for="address">Indtast din adresse:</label>
<input type="text" id="address" name="address" required autocomplete="off">
<div id="dropdown"></div>
<button type="submit">Find sogn</button>
</form>

<div id="result"></div>
</div>

<script>
const addressInput = document.getElementById("address");
const dropdown = document.getElementById("dropdown");

addressInput.addEventListener("input", async function () {
const query = this.value;

if (query.length < 3) {
dropdown.style.display = "none";
return;
}

try {
const response = await fetch(`https://api.dataforsyningen.dk/adresser/autocomplete?q=${encodeURIComponent(query)}`);
const data = await response.json();

dropdown.innerHTML = "";
dropdown.style.display = "block";

data.forEach(item => {
const option = document.createElement("div");
option.classList.add("dropdown-item");
option.innerText = item.tekst;
option.addEventListener("click", function () {
addressInput.value = item.tekst;
dropdown.style.display = "none";
});
dropdown.appendChild(option);
});
} catch (error) {
console.error("Fejl ved hentning af adresser:", error);
}
});

document.getElementById("sognForm").addEventListener("submit", async function(event) {
event.preventDefault();
const address = addressInput.value;

try {
const addressResponse = await fetch(`https://api.dataforsyningen.dk/adresser?q=${encodeURIComponent(address)}`);
const addressData = await addressResponse.json();

if (!addressData || addressData.length === 0) {
document.getElementById("result").innerText = "Ingen gyldig adresse fundet.";
return;
}

const adgangsadresse = addressData[0].adgangsadresse;
const koordinater = adgangsadresse.adgangspunkt?.koordinater;

if (!koordinater || koordinater.length !== 2) {
document.getElementById("result").innerText = "Koordinater ikke fundet.";
return;
}

const [x, y] = koordinater;

const sognResponse = await fetch(`https://api.dataforsyningen.dk/sogne?x=${x}&y=${y}`);
const sognData = await sognResponse.json();

if (!sognData || sognData.length === 0) {
document.getElementById("result").innerText = "Ingen sogneoplysninger fundet.";
} else {
const sognNavn = encodeURIComponent(sognData[0].navn + " sogn"); // Tilføjer "sogn"
const sognUrl = `https://sogn.dk/?esq=${sognNavn}&est=9&esd=0`;
document.getElementById("result").innerHTML = `Dit sogn: <a href="${sognUrl}" target="_blank">${sognData[0].navn} sogn</a>`;
}
} catch (error) {
document.getElementById("result").innerText = "Der opstod en fejl. Prøv igen.";
console.error("Fejl:", error);
}
});
</script>

</body>
</html>

Sogn Finder

Find dit sogn

Ullamco laboris nisi

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ullamco laboris nisi

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ullamco laboris nisi

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.