Frontend

docker-compose.yml

@@ -22,6 +22,6 @@ services:
     build: ./nginx
     container_name: nginx
     ports:
-      - "3000:80"
+      - "80:80"
     depends_on:
       - backend

frontend/package.json

@@ -9,18 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "leaflet": "^1.9.4",
+    "next": "14.2.14",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.14"
+    "react-leaflet": "^4.2.1"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.14",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.14"
+    "typescript": "^5"
   }
 }

frontend/src/app/components/PinAdder.tsx

@@ -0,0 +1,34 @@
+// File: app/map/components/PinAdder.tsx
+import { useMapEvents } from 'react-leaflet/hooks';
+import { Dispatch, SetStateAction } from 'react';
+import { LatLng } from 'leaflet';
+
+interface Pin {
+  id: number;
+  lat: number;
+  lng: number;
+  name: string;
+}
+
+interface PinAdderProps {
+  pins: Pin[];
+  setPins: Dispatch<SetStateAction<Pin[]>>;
+}
+
+const PinAdder: React.FC<PinAdderProps> = ({ pins, setPins }) => {
+  useMapEvents({
+    click: (e: { latlng: LatLng }) => {
+      const newPin: Pin = {
+        id: pins.length + 1,
+        lat: e.latlng.lat,
+        lng: e.latlng.lng,
+        name: `Location ${pins.length + 1}`,
+      };
+      setPins((prevPins) => [...prevPins, newPin]);
+    },
+  });
+
+  return null;
+};
+
+export default PinAdder;

frontend/src/app/components/SearchControl.tsx

@@ -0,0 +1,59 @@
+// File: app/map/components/SearchControl.tsx
+import { useMap } from 'react-leaflet/hooks';
+import React from 'react';
+
+interface SearchControlProps {
+  latInput: string;
+  lngInput: string;
+  onLatChange: (value: string) => void;
+  onLngChange: (value: string) => void;
+}
+
+const SearchControl: React.FC<SearchControlProps> = ({ latInput, lngInput, onLatChange, onLngChange }) => {
+  const map = useMap();
+
+const handleSearch = (e: React.MouseEvent<HTMLButtonElement>) => {
+
+    e.preventDefault();
+
+    if (latInput && lngInput) {
+        const lat = parseFloat(latInput);
+        const lng = parseFloat(lngInput);
+        if (!isNaN(lat) && !isNaN(lng)) {
+            map.flyTo([lat, lng], 15, { animate: true });
+        }
+    }
+};
+
+  return (
+    <div
+      className="absolute top-4 left-1/2 transform -translate-x-1/2 w-11/12 max-w-xl p-4 bg-white bg-opacity-90 rounded-lg shadow-lg flex items-center"
+      style={{ zIndex: 1000 }} // Set zIndex higher to ensure it's above the map
+    >
+      <input
+        type="text"
+        placeholder="Latitude"
+        value={latInput}
+        onChange={(e) => onLatChange(e.target.value)}
+        onClick={(e) => e.stopPropagation()} // Stop the click event from reaching the map
+        className="flex-1 p-2 mr-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+      <input
+        type="text"
+        placeholder="Longitude"
+        value={lngInput}
+        onChange={(e) => onLngChange(e.target.value)}
+        onClick={(e) => e.stopPropagation()} // Stop the click event from reaching the map
+        className="flex-1 p-2 mr-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+      <button
+        onClick={handleSearch}
+        className="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        Search
+      </button>
+    </div>
+  );
+};
+
+export default SearchControl;