aindreas/fyp
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[frontend]: Cluster overlapping icons

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-01 22:56:28 +00:00
parent 3ca690ed24
commit 67e6e732b5
1 changed files with 67 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/src/App.jsx
View File

@ -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;