diff --git a/index.html b/index.html
index d1e8c08d6a65f899f4e45359171e6beac22dc249..f7c2d60629bbe93f7003962b92c196a11eea41d9 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,17 @@
<!DOCTYPE html>
-
-<html>
- <head>
- <title>Interaktive Karte mit Leaflet</title>
+<html lang="de">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Stahlskelettkirchen der Hochmoderne</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
- <link rel="stylesheet" type="text/css" href="style.css">
+ <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="karte-container">
<div id="map" class="karte"></div>
+ <div class="bildnachweis">Bildnachweis: <a href="https://de.batchgeo.com/map/15c01aba3677d3063b4cc759e49de386">Quelle</a></div>
</div>
<div class="tabelle-container">
@@ -17,6 +19,7 @@
<h1> Ãœbersicht der Stahlskelettkirchen in Deutschland 1920- 1945 </h1>
<table>
+
<tr>
<th>Name</th>
<th>Standort</th>
diff --git a/script.js b/script.js
index 08cd92bfc55eb1b384ef70c94088614f5f5c05b7..a7e15410620631a11f8ef2df08c0e60bdbaeac48 100644
--- a/script.js
+++ b/script.js
@@ -1,33 +1,53 @@
document.addEventListener("DOMContentLoaded", function () {
- // Initialisiere die Karte
- var map = L.map('map').setView([51.1657, 10.4515], 6); // Setze die Karte auf Deutschland
+ // Initialisiere die Karte
+ var map = L.map('map').setView([51.1657, 10.4515], 6); // Setze die Karte auf Deutschland
- // Füge eine OpenStreetMap-Kachel hinzu
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
- }).addTo(map);
+ // Füge eine OpenStreetMap-Kachel hinzu
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+ }).addTo(map);
- // Füge Markierungen hinzu
- var markers = [
- {
- coords: [52.2799, 8.0472],
- dataBefund: "1",
- name: "Heilig Kreuz Kirche"
- }
- // Füge hier weitere Markierungen hinzu
- ];
+ // Füge Markierungen hinzu
+ var markers = [
+ {
+ coords: [52.2799, 8.0472],
+ dataBefund: "1",
+ name: "Heilig Kreuz Kirche"
+ }
+ // Füge hier weitere Markierungen hinzu
+ ];
- markers.forEach(function(marker) {
- var mark = L.marker(marker.coords).addTo(map);
- mark.bindPopup(marker.name);
- mark.on('click', function() {
- // Markierung und Tabellenzeile hervorheben
- document.querySelectorAll('.markierung, table tr').forEach(function(el) {
- el.classList.remove('ausgewaehlt');
- });
- document.querySelectorAll('.markierung[data-befund="' + marker.dataBefund + '"], table tr[data-befund="' + marker.dataBefund + '"]').forEach(function(el) {
- el.classList.add('ausgewaehlt');
- });
- });
- });
+ markers.forEach(function(marker) {
+ var mark = L.marker(marker.coords).addTo(map);
+ mark.bindPopup(marker.name);
+ mark.on('click', function() {
+ // Markierung und Tabellenzeile hervorheben
+ document.querySelectorAll('.markierung, table tr').forEach(function(el) {
+ el.classList.remove('ausgewaehlt');
+ });
+ document.querySelectorAll('.markierung[data-befund="' + marker.dataBefund + '"], table tr[data-befund="' + marker.dataBefund + '"]').forEach(function(el) {
+ el.classList.add('ausgewaehlt');
+ });
+ });
+ });
+
+ const tableRows = document.querySelectorAll("table tr");
+ tableRows.forEach(function (row) {
+ row.addEventListener("click", function () {
+ const befundNummer = row.getAttribute("data-befund");
+
+ // Alle Zeilen und Markierungen deselektieren
+ document.querySelectorAll('.ausgewaehlt').forEach(function (el) {
+ el.classList.remove('ausgewaehlt');
+ });
+
+ // Aktuelle Zeile hervorheben
+ row.classList.add('ausgewaehlt');
+
+ // Markierung hervorheben
+ document.querySelectorAll('.markierung[data-befund="' + befundNummer + '"]').forEach(function (el) {
+ el.classList.add('ausgewaehlt');
+ });
+ });
+ });
});