Merge branch 'dominicschweizer:main' into main

dominicschweizer · May 13, 2023 · 13ce3f5 · 13ce3f5
2 parents 8d8375d + 9a53471
commit 13ce3f5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -20,8 +20,9 @@
 
 Das Team hat seine Arbeit aufgeteilt. Team 1 konzentrierte sich darauf, die besonders schützenswerten Personen innerhalb der Polygone zu filtern und anzuzeigen. Team 2 widmete sich der Berechnung der Wetterbedingungen für ein bestimmtes Szenario. Dies wurde in einem agilen Arbeitsprozess parallel durchgeführt. Das Hauptziel bestand darin, den Bewegungspfad der Schadstoffwolke zu verfolgen und festzustellen, welche schützenswerten Personen sich innerhalb der Evakuierungszone befinden.
 
-Im Demo (hier als GIF unter dargestellt) wird der Ereignisort als erster Punkt auf der Karte markiert, gefolgt von der Richtung und Geschwindigkeit der Schadstoffwolke als zweitem Punkt. 
-![Wetterberechnung](Docs/ezgif-4-553d4623c6.gif)
+Es wird der Ereignisort als erster Punkt auf der Karte markiert, gefolgt von der Richtung und Geschwindigkeit der Schadstoffwolke als zweitem Punkt.
+
+![wetterberechnung](Docs/wetterberechnung.jpg)
 
 Die Filterungsergebnisse sind in diesem Bild zu sehen.
 ![Filterung](Docs/Prototyp_Entwicklung3.jpg)

diff --git a/prototype-2/index.html b/prototype-2/index.html
@@ -31,6 +31,12 @@
   <link rel="stylesheet" href="styles.css" />
   <body>
     <h1>Prototype Schutz und Rettung: Daten retten Leben</h1>
+    <div id="textbox">
+      <h2 id="alarm"></h2>
+      <h3 id="noPeople"></h3>
+      <h3 id="oldPeople"></h3>
+      <h3 id="youngPeople"></h3>
+    </div>
     <div id="container">
       <div id="map"></div>
     </div>

diff --git a/prototype-2/lib.js b/prototype-2/lib.js
@@ -70,7 +70,12 @@ export const oldPersonIcon = L.icon({
   iconAnchor: iconSize,
 });
 export const youngPersonIcon = L.icon({
-  iconUrl: "https://svgsilh.com/svg/44050-ae0aa3.svg",
+  iconUrl: "https://svgsilh.com/svg/44050.svg",
   iconSize: iconSize,
   iconAnchor: iconSize,
 });
+export const alarmIcon = L.icon({
+  iconUrl: "https://svgsilh.com/svg/98704-9f1212.svg",
+  iconSize: iconSize.map((n) => n * 6),
+  iconAnchor: iconSize,
+});
diff --git a/prototype-2/main.js b/prototype-2/main.js
@@ -4,6 +4,7 @@ import {
   getPeopleInPolygon,
   oldPersonIcon,
   youngPersonIcon,
+  alarmIcon,
 } from "./lib.js";
 var map = L.map("map").setView([46.94863, 7.45164], 16);
 L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
@@ -12,7 +13,6 @@ L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
     '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 }).addTo(map);
 const data = loadData();
-
 let clickOrigin;
 let originMarker;
 let clickWind;
@@ -22,23 +22,26 @@ let markerGroup;
 const MAXHOURS = 5;
 let hour = 0;
 let polygon;
+updateTextnode();
+
 map.on("click", (e) => {
   if (clickOrigin && clickWind) {
     clickOrigin = undefined;
     clickWind = undefined;
     map.removeLayer(originMarker);
     map.removeLayer(windMarker);
     map.removeLayer(windVector);
+    map.removeLayer(markerGroup);
     return;
   }
   if (clickOrigin) {
     clickWind = e.latlng;
-    windMarker = L.marker(clickWind).addTo(map);
+    windMarker = L.marker(clickWind, { icon: alarmIcon }).addTo(map);
     triggerCloudCalculation();
     return;
   }
   clickOrigin = e.latlng;
-  originMarker = L.marker(clickOrigin).addTo(map);
+  originMarker = L.marker(clickOrigin, { icon: alarmIcon }).addTo(map);
 });
 
 function triggerCloudCalculation() {
@@ -57,25 +60,45 @@ function triggerCloudCalculation() {
     const people = getPeopleInPolygon(windPolygon, data);
     console.log(people);
     const markers = [];
-    people
-      .filter((p) => p.Alter >= 75)
-      .forEach((person) => {
-        markers.push(
-          L.marker(L.latLng(...person.position), { icon: oldPersonIcon })
-        );
-      });
-    people
-      .filter((p) => p.Alter <= 10)
-      .forEach((person) => {
-        markers.push(
-          L.marker(L.latLng(...person.position), { icon: youngPersonIcon })
-        );
-      });
+    const oldPeople = people.filter((p) => p.Alter >= 75);
+    oldPeople.forEach((person) => {
+      markers.push(
+        L.marker(L.latLng(...person.position), { icon: oldPersonIcon })
+      );
+    });
+    const youngPeople = people.filter((p) => p.Alter <= 10);
+    youngPeople.forEach((person) => {
+      markers.push(
+        L.marker(L.latLng(...person.position), { icon: youngPersonIcon })
+      );
+    });
+    updateTextnode(people, oldPeople, youngPeople);
     markerGroup = L.featureGroup(markers).addTo(map);
     hour += 1;
     if (hour > MAXHOURS) clearInterval(intervall);
   }, 1000);
-} /*
+}
+
+function updateTextnode(noPeople, noOldPeople, noYoungPeople) {
+  document.getElementById("alarm").textContent =
+    windVector !== undefined
+      ? `Alarm bei Koordinaten ${clickOrigin}`
+      : "Kein Alarm ausgelöst. Starten sie einen Alarm!";
+  document.getElementById("noPeople").textContent =
+    noPeople === undefined
+      ? "Keine Personen betroffen"
+      : `${noPeople.length} Personen betroffen`;
+  document.getElementById("oldPeople").textContent =
+    noOldPeople === undefined
+      ? "Keine Personen > 75 Jahre betroffen"
+      : `${noOldPeople.length} Personen betroffen`;
+  document.getElementById("youngPeople").textContent =
+    noYoungPeople === undefined
+      ? "Keine Personen < 10 Jahren betroffen"
+      : `${noYoungPeople.length} Personen < 10 Jahren betroffen`;
+}
+
+/*
 const rathaus = [46.94866, 7.45144];
 const wind = [46.94806, 7.45004];