[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 busStationIconURL from "../src/assets/icons/bus-station.png";
-import busIconURL from "../src/assets/icons/bus.png";
+import "leaflet.markercluster/dist/MarkerCluster.css";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+// 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: "source2", name: "Data Source 2", url: "https://api.example.com/source2" },
-    { id: "source3", name: "Data Source 3", url: "https://api.example.com/source3" },
+    { id: "IrishRailTrains", name: "Irish Rail Trains", url: TRANSIENT_DATA_API + "?objectType=IrishRailTrain" },
+    { id: "IrishRailStations", name: "Irish Rail Stations", url: PERMANENT_DATA_API + "?objectType=IrishRailStation" },
 ];
 
 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,50 +81,67 @@ function App() {
     };
 
     return (
-        <>
-            <div style={{ height: "100vh", width: "100vw", display: "flex", position: "relative" }}>
-                {loading && (
-                    <div style={{
-                        position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
-                        background: "rgba(0, 0, 0, 0.5)", display: "flex",
-                        alignItems: "center", justifyContent: "center",
-                        color: "white", fontSize: "20px", fontWeight: "bold",
-                        zIndex: 1000
-                    }}>
-                        Loading data...
-                    </div>
-                )}
-                <div style={{ width: "250px", padding: "10px", background: "#000000" }}>
-                    <h3>Select Data Sources</h3>
-                    {dataSources.map((source) => (
-                        <div key={source.id}>
-                            <input
-                                type="checkbox"
-                                id={source.id}
-                                checked={selectedSources.includes(source.id)}
-                                onChange={() => handleCheckboxChange(source.id)}
-                            />
-                            <label htmlFor={source.id}>{source.name}</label>
-                        </div>
-                    ))}
-                    <button onClick={fetchData} style={{ marginTop: "10px" }}>Submit</button>
+        <div style={{ height: "100vh", width: "100vw", display: "flex", position: "relative" }}>
+            {loading && (
+                <div style={{
+                    position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
+                    background: "rgba(0, 0, 0, 0.5)", display: "flex",
+                    alignItems: "center", justifyContent: "center",
+                    color: "white", fontSize: "20px", fontWeight: "bold",
+                    zIndex: 1000
+                }}>
+                    Loading data...
                 </div>
-                <div style={{ flex: 1 }}>
-                    <MapContainer center={[53.4494762, -7.5029786]} zoom={7} minZoom={4} style={{ height: "100%", width: "100%" }}>
-                        <TileLayer
-                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            )}
+            <div style={{ width: "250px", padding: "10px", background: "#000000", color: "white" }}>
+                <h3>Select Data Sources</h3>
+                {dataSources.map((source) => (
+                    <div key={source.id}>
+                        <input
+                            type="checkbox"
+                            id={source.id}
+                            checked={selectedSources.includes(source.id)}
+                            onChange={() => handleCheckboxChange(source.id)}
                         />
-                        {markers.map((marker, index) => (
+                        <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 }}>
+                <MapContainer center={[53.4494762, -7.5029786]} zoom={7} minZoom={4} style={{ height: "100%", width: "100%" }}>
+                    <TileLayer
+                        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>
+                        ))
+                    )}
+                </MapContainer>
             </div>
-        </>
+        </div>
     );
 }
 
-export default App;
+export default App;