Merge branch 'dominicschweizer:main' into main

README.md

@@ -16,6 +16,19 @@
 
 # News
 
+## Samstag, 11:30 Uhr Prototyp wurde gefiltert
+
+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)
+
+Die Filterungsergebnisse sind in diesem Bild zu sehen.
+![Filterung](Docs/Prototyp_Entwicklung3.jpg)
+
+Derzeit fügen wir unsere Fortschritte zusammen. Es ist auch von grosser Bedeutung, das gesamte Projekt benutzerfreundlicher zu gestalten, damit dem Endbenutzer sofort die Anzahl der Personen im Allgemeinen sowie weitere Details angezeigt werden. Dieser Schritt wird jedoch nach der Mittagspause umgesetzt.
+
+
 ## Uhr 20:00 Uhr Prototyp mit Test Daten ergänzt
 
 Die Datenaufbereitung für die Karte erwies sich als herausfordernd. Wir führten intensive Meetings durch, um zu bestimmen, wie wir die Daten sammeln und publizieren können, um Bereiche zu analysieren, in denen besonders schutzbedürftige Kinder (unter 10 Jahren) und ältere Menschen (über 70 Jahren) leben. Um den Fokus auf die Benutzerfreundlichkeit zu legen, musste auf den ersten Blick erkennbar sein, wo sich diese besonders schutzbedürftigen Personen befinden. Wir haben spezielle Icons für diese Personengruppen ausgewählt. Zusätzlich mussten wir die Berechnung der Polygone durchführen und den Datenschutz sicherstellen. Um dies zu gewährleisten nutzten wir hier Test Daten. 

prototype-2/index.html

@@ -19,6 +19,13 @@
     crossorigin="anonymous"
     referrerpolicy="no-referrer"
   ></script>
+  <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"
+    integrity="sha512-dfX5uYVXzyU8+KHqj8bjo7UkOdg18PaOtpa48djpNbZHwExddghZ+ZmzWT06R5v6NSk3ZUfsH6FNEDepLx9hPQ=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
   <script src="lib/vector2js.js"></script>
   <script defer type="module" src="main.js"></script>
   <link rel="stylesheet" href="styles.css" />

prototype-2/lib.js

@@ -1,3 +1,4 @@
+const iconSize = [10, 10];
 /**
  *
  * @param {[number, number]} origin
@@ -24,3 +25,52 @@ export function createWindPolygon(origin, windVector, time) {
   ];
   return polygon;
 }
+
+export function loadData() {
+  // Stream big file in worker thread
+  let geodata = [];
+  Papa.parse("../prototype-1/data/geodaten.csv", {
+    //worker: true,
+    download: true,
+    header: true,
+    complete: (results) => {
+      results.data.forEach((bro) => {
+        // hier werden wir aus dem objekt ein koordinaten paar beziehen
+        const coordpair = [
+          parseFloat(bro["WGS84-N"]),
+          parseFloat(bro["WGS84-E"]),
+        ];
+        bro.position = coordpair;
+        // prüfen ob die koordinaten nummerisch sind
+        if (typeof coordpair[0] !== "number" || Number.isNaN(coordpair[0])) {
+          return;
+        }
+        geodata.push(bro);
+      });
+    },
+  });
+  return geodata;
+}
+
+export function getPeopleInPolygon(polygon, people) {
+  const poly = buildTurfPolygon(polygon);
+  return people.filter((p) => {
+    return turf.booleanPointInPolygon(turf.point(p.position), poly);
+  });
+}
+function buildTurfPolygon(polygon) {
+  const pPoints = [...polygon];
+  // close the polygon
+  pPoints.push(pPoints[0]);
+  return turf.polygon([[...pPoints]]);
+}
+export const oldPersonIcon = L.icon({
+  iconUrl: "https://svgsilh.com/svg/1800224-ff5722.svg",
+  iconSize: iconSize,
+  iconAnchor: iconSize,
+});
+export const youngPersonIcon = L.icon({
+  iconUrl: "https://svgsilh.com/svg/44050-ae0aa3.svg",
+  iconSize: iconSize,
+  iconAnchor: iconSize,
+});

prototype-2/main.js

@@ -1,21 +1,28 @@
-import { createWindPolygon } from "./lib.js";
+import {
+  createWindPolygon,
+  loadData,
+  getPeopleInPolygon,
+  oldPersonIcon,
+  youngPersonIcon,
+} from "./lib.js";
 var map = L.map("map").setView([46.94863, 7.45164], 16);
 L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
   maxZoom: 19,
   attribution:
     '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 }).addTo(map);
+const data = loadData();
 
 let clickOrigin;
 let originMarker;
 let clickWind;
 let windMarker;
 let windVector;
+let markerGroup;
 const MAXHOURS = 5;
 let hour = 0;
 let polygon;
 map.on("click", (e) => {
-  console.log(e);
   if (clickOrigin && clickWind) {
     clickOrigin = undefined;
     clickWind = undefined;
@@ -33,6 +40,7 @@ map.on("click", (e) => {
   clickOrigin = e.latlng;
   originMarker = L.marker(clickOrigin).addTo(map);
 });
+
 function triggerCloudCalculation() {
   windVector = L.polyline([clickOrigin, clickWind], { color: "red" }).addTo(
     map
@@ -41,16 +49,33 @@ function triggerCloudCalculation() {
   const intervall = setInterval(() => {
     const originKoords = [originMarker._latlng.lat, originMarker._latlng.lng];
     const windKoords = [windMarker._latlng.lat, windMarker._latlng.lng];
-    console.log("foo", originKoords, windKoords);
-    console.log(originMarker, windMarker);
     if (polygon) map.removeLayer(polygon);
-    polygon = L.polygon(createWindPolygon(originKoords, windKoords, hour), {
+    const windPolygon = createWindPolygon(originKoords, windKoords, hour);
+    polygon = L.polygon(windPolygon, {
       color: "yellow",
     }).addTo(map);
+    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 })
+        );
+      });
+    markerGroup = L.featureGroup(markers).addTo(map);
     hour += 1;
     if (hour > MAXHOURS) clearInterval(intervall);
   }, 1000);
-}
+} /*
 const rathaus = [46.94866, 7.45144];
 const wind = [46.94806, 7.45004];
 
@@ -67,3 +92,4 @@ const intervall = setInterval(() => {
   if (hour > MAXHOURS) clearInterval(intervall);
 }, 1000);
 //L.polygon(createWindPolygon(rathaus, wind, 3), { color: "yellow" }).addTo(map);
+*/