added PathComponent, MarkersComponent and fetched data about intersections from Spring Boot server

package-lock.json

@@ -2077,6 +2077,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg=="
+    },
     "@remix-run/router": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
@@ -8323,6 +8328,11 @@
         "shell-quote": "^1.7.3"
       }
     },
+    "leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -10034,6 +10044,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "requires": {
+        "@react-leaflet/core": "^2.1.0"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

package.json

@@ -6,11 +6,13 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "leaflet": "^1.9.3",
     "primeflex": "^3.3.0",
     "primeicons": "^6.0.1",
     "primereact": "^9.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -2,6 +2,7 @@ import './App.css';
 import { Button } from 'primereact/button';
 import "primeflex/primeflex.css";
 
+
 function App() {
   return (
     <div className="App">

src/components/MarkersComponent.js

@@ -0,0 +1,27 @@
+import {Marker, Popup} from "react-leaflet";
+import React, {useEffect} from "react";
+import {Icon} from "leaflet";
+import marker from "primeicons/raw-svg/car.svg";
+
+export default MarkersComponent
+
+function MarkersComponent(props) {
+    useEffect(() => {
+        console.log(props)
+    });
+
+    const myIcon = new Icon({
+        iconUrl: marker,
+        iconSize: [42, 42]
+    })
+
+    return props.positions?.map((position, index) =>
+        <Marker key={index} position={position} icon={myIcon}>
+            <Popup>
+                {position[0] + " " + position[1]}
+            </Popup>
+        </Marker>
+    )
+}
+
+

src/components/PathComponent.js

@@ -0,0 +1,19 @@
+import {Polyline} from "react-leaflet";
+import React, {useEffect} from "react";
+
+export default PathComponent
+
+function PathComponent(props) {
+    useEffect(() => {
+        console.log(props.positions[0][0])
+
+    });
+
+
+    return props.positions?.map((position, index, elements) => {
+            if (elements[index + 1]) return <Polyline key={index} positions={[elements[index], elements[index + 1]]}></Polyline>
+        }
+    )
+}
+
+

src/config.js

@@ -0,0 +1 @@
+export const SPRING_SERVER = "http://localhost:8080";

src/pages/HomePage.js

@@ -1,7 +1,62 @@
+import {Avatar} from "primereact/avatar";
+import {MapContainer, TileLayer} from 'react-leaflet'
+import 'leaflet/dist/leaflet.css'
+import React, {useEffect, useState} from "react";
+import {SPRING_SERVER} from "../config";
+import {Button} from "primereact/button";
+import PathComponent from "../components/PathComponent";
+
 export default function () {
+
+    const [positions, setPositions] = useState([[51.746732, 19.450587], [51.744347, 19.451015]]);
+
+    useEffect(() => {
+        const params = new URLSearchParams({
+            lon1: 19.45056,
+            lat1: 51.74673,
+            lon2: 19.46211,
+            lat2: 51.74275
+        });
+
+        const url = SPRING_SERVER + '/route/nodes?' + params;
+
+        fetch(url)
+            .then(response => response.json())
+            .then(data => {
+                setPositions(data)
+            })
+            .catch(error => console.error(error));
+    }, []);
+
+    const onButtonClick = () => {
+        console.log(positions)
+    };
+
     return (
-        <>
-            dadad
+        < >
+            <div className="flex flex-row h-screen">
+                <div className="w-5 bg-orange-500 flex flex-column">
+
+                    <div className="flex flex-row align-self-center mt-3">
+                        <Avatar className="align-self-center" icon="pi pi-user" size="xlarge" shape="circle"
+                                style={{fontSize: '2.5rem'}}/>
+                        <div className="font-medium text-500 pl-2 align-self-center">USERNAME</div>
+                        <Button onClick={onButtonClick}></Button>
+
+                    </div>
+                </div>
+                <div className="w-full bg-orange-500">
+
+                    <MapContainer style={{height: '100vh', width: '100wh'}} center={[51.74673, 19.45056]} zoom={15}
+                                  scrollWheelZoom={false}>
+                        <TileLayer
+                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        />
+                        <PathComponent positions={positions}></PathComponent>
+                    </MapContainer>
+                </div>
+            </div>
         </>
     )
 }