Merge remote-tracking branch 'origin/frontend/feature/map'

client/src/components/Bus.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import './css/Vehicle.css';
+
+function Bus({ data }) {
+  return (
+    <div>
+      <h2>{data.type}</h2>
+      <p>ID: {data.id}</p>
+      <p>Latitude: {data.position.lat}</p>
+      <p>Longitude: {data.position.lon}</p>
+    </div>
+  );
+}
+
+export default Bus;

client/src/components/RealtimeMap.js

@@ -1,28 +1,59 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import L from 'leaflet';
 import './../../node_modules/leaflet/dist/leaflet.css'
+import './css/RealtimeMap.css';
 import 'leaflet-realtime';
+import Bus from './Bus';
+import Tram from './Tram';
+import Train from './Train';
+import { Marker } from 'react-leaflet';
 import { MapContainer, TileLayer, useMap } from 'react-leaflet';
 
 function RealtimeMap() {
   const map = useMap();
+  const [data, setData] = useState([]);
 
-  // useEffect(() => {
-  //   L.realtime({
-  //     url: 'https://wanderdrone.appspot.com/',
-  //     crossOrigin: true,
-  //     type: 'json'
-  //   }, {
-  //     interval: 3 * 1000
-  //   }).addTo(map);
-  // }, [map]);
+  useEffect(() => {
+    const bounds = map.getBounds();
+    const upperLeft = bounds.getNorthWest();
+    const lowerRight = bounds.getSouthEast();
+    fetch('https://hackhpi24.ivo-zilkenat.de/api/trafficData/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        "bounds": {
+          "upper-left": {
+            "lat": upperLeft.lat,
+            "lon": upperLeft.lng
+          },
+          "lower-right": {
+            "lat": lowerRight.lat,
+            "lon": lowerRight.lng
+          }
+        }
+      })
+    })
+      .then(response => response.json())
+      .then(data => {
+        setData(data);
+      });
+  }, []);
+  data["2"] = {"id": "2", "type": "bus", "position": {"lat": 52.3906, "lon": 13.0645}};
 
-  return null;
+  return Object.values(data).map(item => (
+    <Marker position={[item.position.lat, item.position.lon]}>
+      {item.type === "bus" && <Bus data={item} />}
+      {item.type === "tram" && <Tram data={item} />}
+      {item.type === "train" && <Train data={item} />}
+    </Marker>
+  ));
 }
 
 function MapComponent() {
   return (
-      <MapContainer center={[0, 0]} zoom={13} style={{ height: "400px", marginTop: "80px", marginBottom: "90px" }} >
+    <MapContainer center={[52.3906, 13.0645]} zoom={13} className="map">
       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       <RealtimeMap />
     </MapContainer>

client/src/components/Train.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import './css/Vehicle.css';
+
+function Train({ data }) {
+  return (
+    <div>
+      <h2>{data.type}</h2>
+      <p>ID: {data.id}</p>
+      <p>Latitude: {data.position.lat}</p>
+      <p>Longitude: {data.position.lon}</p>
+    </div>
+  );
+}
+
+export default Train;

client/src/components/Tram.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import './css/Vehicle.css';
+
+function Tram({ data }) {
+  return (
+    <div>
+      <h2>{data.type}</h2>
+      <p>ID: {data.id}</p>
+      <p>Latitude: {data.position.lat}</p>
+      <p>Longitude: {data.position.lon}</p>
+    </div>
+  );
+}
+
+export default Tram;

client/src/components/Vehicle.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import './css/Vehicle.css';
+
+function Vehicle({ data }) {
+  return (
+    <div>
+      <h2>{data.type}</h2>
+      <p>ID: {data.id}</p>
+      <p>Latitude: {data.position.lat}</p>
+      <p>Longitude: {data.position.lon}</p>
+    </div>
+  );
+}
+
+export default Vehicle;

client/src/components/css/RealtimeMap.css

@@ -0,0 +1,9 @@
+.map {
+  height: 400px;
+  width: 800px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
+}

client/src/components/css/Vehicle.css

@@ -0,0 +1,3 @@
+.bus{
+
+}

client/src/index.css

@@ -5,12 +5,11 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #A0AECD;
+  background-color: white;
   color: #000000;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
-