feat: combines features

dominicschweizer · May 13, 2023 · 271ebae · 271ebae
1 parent 711316d
commit 271ebae
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 6 deletions.
diff --git a/prototype-2/index.html b/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" />

diff --git a/prototype-2/lib.js b/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,
+});
diff --git a/prototype-2/main.js b/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);
+*/