[frontend]: Cluster overlapping icons

frontend/src/App.jsx

@@ -1,19 +1,15 @@
 import React, { useState } from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
+import MarkerClusterGroup from "react-leaflet-markercluster";
 import L, { Icon } from "leaflet";
 
-// icons
+import "leaflet.markercluster/dist/MarkerCluster.css";
-import busStationIconURL from "../src/assets/icons/bus-station.png";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
-import busIconURL from "../src/assets/icons/bus.png";
+
+// Icons
 import trainStationIconURL from "../src/assets/icons/train-station.png";
 import trainIconURL from "../src/assets/icons/train.png";
-import trainLateIconURL from "../src/assets/icons/train_late.png";
-import trainNotRunningIconURL from "../src/assets/icons/train_notrunning.png";
-import trainOntimeIconURL from "../src/assets/icons/train_ontime.png";
-import tramStationIconURL from "../src/assets/icons/tram-station.png";
-
-
 
 // Fix marker icon issue with Leaflet
 delete L.Icon.Default.prototype._getIconUrl;
@@ -28,7 +24,7 @@ icons.set(
     "IrishRailStation",
     new Icon({
         iconUrl: trainStationIconURL,
-        iconSize: [38, 38],
+        iconSize: [24, 24],
     })
 );
 
@@ -36,22 +32,23 @@ icons.set(
     "IrishRailTrain",
     new Icon({
         iconUrl: trainIconURL,
-        iconSize: [38, 38],
+        iconSize: [24, 24],
     })
 );
 
-const TRAINSIENT_DATA_API = "https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data"
+const TRANSIENT_DATA_API = "https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data";
+const PERMANENT_DATA_API = "https://a6y312dpuj.execute-api.us-east-1.amazonaws.com/permanent_data";
 
 const dataSources = [
-    { id: "IrishRailTrains", name: "Irish Rail Trains", url: TRAINSIENT_DATA_API + "?objectType=IrishRailTrain" },
+    { id: "IrishRailTrains", name: "Irish Rail Trains", url: TRANSIENT_DATA_API + "?objectType=IrishRailTrain" },
-    { id: "source2", name: "Data Source 2", url: "https://api.example.com/source2" },
+    { id: "IrishRailStations", name: "Irish Rail Stations", url: PERMANENT_DATA_API + "?objectType=IrishRailStation" },
-    { id: "source3", name: "Data Source 3", url: "https://api.example.com/source3" },
 ];
 
 function App() {
     const [selectedSources, setSelectedSources] = useState([]);
     const [markers, setMarkers] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [clusteringEnabled, setClusteringEnabled] = useState(true);
 
     const handleCheckboxChange = (id) => {
         setSelectedSources((prev) =>
@@ -84,7 +81,6 @@ function App() {
     };
 
     return (
-        <>
         <div style={{ height: "100vh", width: "100vw", display: "flex", position: "relative" }}>
             {loading && (
                 <div style={{
@@ -97,7 +93,7 @@ function App() {
                     Loading data...
                 </div>
             )}
-                <div style={{ width: "250px", padding: "10px", background: "#000000" }}>
+            <div style={{ width: "250px", padding: "10px", background: "#000000", color: "white" }}>
                 <h3>Select Data Sources</h3>
                 {dataSources.map((source) => (
                     <div key={source.id}>
@@ -110,6 +106,15 @@ function App() {
                         <label htmlFor={source.id}>{source.name}</label>
                     </div>
                 ))}
+                <div style={{ marginTop: "10px" }}>
+                    <input
+                        type="checkbox"
+                        id="toggleClustering"
+                        checked={clusteringEnabled}
+                        onChange={() => setClusteringEnabled(!clusteringEnabled)}
+                    />
+                    <label htmlFor="toggleClustering">Cluster overlapping icons</label>
+                </div>
                 <button onClick={fetchData} style={{ marginTop: "10px" }}>Submit</button>
             </div>
             <div style={{ flex: 1 }}>
@@ -118,15 +123,24 @@ function App() {
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                     />
+                    {clusteringEnabled ? (
+                        <MarkerClusterGroup>
                             {markers.map((marker, index) => (
                                 <Marker key={index} position={marker.coords} icon={icons.get(marker.icon)}>
                                     <Popup>{marker.popup}</Popup>
                                 </Marker>
                             ))}
+                        </MarkerClusterGroup>
+                    ) : (
+                        markers.map((marker, index) => (
+                            <Marker key={index} position={marker.coords} icon={icons.get(marker.icon)}>
+                                <Popup>{marker.popup}</Popup>
+                            </Marker>
+                        ))
+                    )}
                 </MapContainer>
             </div>
         </div>
-        </>
     );
 }