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

[frontend]: Add icons

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-02-28 12:35:23 +00:00
parent 2981fbe474
commit 624b60980b
13 changed files with 94 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>Vite + React</title>
</head> </head>

36
frontend/package-lock.json generated
View File

@ -14,6 +14,7 @@
"postcss": "^8.5.3", "postcss": "^8.5.3",
"react": "^19.0.0-rc.1", "react": "^19.0.0-rc.1",
"react-dom": "^19.0.0-rc.1", "react-dom": "^19.0.0-rc.1",
"react-helmet": "^6.1.0",
"react-leaflet": "^5.0.0-rc.2", "react-leaflet": "^5.0.0-rc.2",
"tailwindcss": "^4.0.9" "tailwindcss": "^4.0.9"
}, },
@ -3292,7 +3293,6 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/js-yaml": { "node_modules/js-yaml": {
@ -3630,7 +3630,6 @@
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0" "js-tokens": "^3.0.0 || ^4.0.0"
@ -3713,7 +3712,6 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@ -3988,7 +3986,6 @@
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"loose-envify": "^1.4.0", "loose-envify": "^1.4.0",
@ -4027,11 +4024,40 @@
"react": "^19.0.0" "react": "^19.0.0"
} }
}, },
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
"license": "MIT"
},
"node_modules/react-helmet": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
"license": "MIT",
"dependencies": {
"object-assign": "^4.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.1.1",
"react-side-effect": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.3.0"
}
},
"node_modules/react-helmet/node_modules/react-side-effect": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
"integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
"license": "MIT",
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/react-leaflet": { "node_modules/react-leaflet": {

1
frontend/package.json
View File

@ -16,6 +16,7 @@
"postcss": "^8.5.3", "postcss": "^8.5.3",
"react": "^19.0.0-rc.1", "react": "^19.0.0-rc.1",
"react-dom": "^19.0.0-rc.1", "react-dom": "^19.0.0-rc.1",
"react-helmet": "^6.1.0",
"react-leaflet": "^5.0.0-rc.2", "react-leaflet": "^5.0.0-rc.2",
"tailwindcss": "^4.0.9" "tailwindcss": "^4.0.9"
}, },

69
frontend/src/App.jsx
View File

@ -5,6 +5,9 @@ import "leaflet/dist/leaflet.css";
import L from "leaflet"; import L from "leaflet";
import { Icon } from "leaflet"; import { Icon } from "leaflet";
import trainStationURL from "../src/assets/icons/train-station.png"
import TabTitle from "./components/TabTitle.jsx";
// Fix marker icon issue with Leaflet // Fix marker icon issue with Leaflet
delete L.Icon.Default.prototype._getIconUrl; delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({ L.Icon.Default.mergeOptions({
@ -16,39 +19,63 @@ L.Icon.Default.mergeOptions({
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png", "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
}); });
const mapCenter = [53.4494762, -7.5029786]; let mapCenter = [53.4494762, -7.5029786];
const trainIcon = new Icon({ if ("geolocation" in navigator) {
iconUrl: "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.Y1zUQhXp7cOSgg6Hl-C7yAHaHa%26pid%3DApi&f=1&ipt=b8b24d390654184e739b4c462f210b4b18e2f6876f90024ba8ce6ccf8fc761fb&ipo=images", navigator.geolocation.getCurrentPosition(
iconSize: [38,38] (position) => {
}) mapCenter = [position.coords.latitude, position.coords.longitude];
},
(error) => {
}
);
}
const icons = new Map();
icons.set(
"train-station",
new Icon({
iconUrl: trainStationURL,
iconSize: [38,38]
})
)
const markers = [ const markers = [
{ {
coords: [53.4494762, -7.5029786], coords: [53.4494762, -7.5029786],
popup: "Popup lol" popup: "Popup lol",
icon: "train-station"
} }
] ]
function App() { function App() {
return ( return (
<div style={{ height: "100vh", width: "100vw" }}> <>
<MapContainer center={mapCenter} zoom={7} style={{ height: "100%", width: "100%" }}> <TabTitle />
<TileLayer <div style={{height: "100vh", width: "100vw"}}>
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
{markers.map(marker => ( <MapContainer center={mapCenter} zoom={7} style={{height: "100%", width: "100%"}}>
<Marker position={marker.coords} icon={trainIcon}> <TileLayer
<Popup> url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
<h2> Train 2</h2> attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
</Popup> {markers.map(marker => (
</Marker> <Marker position={marker.coords} icon={icons.get(marker.icon)}>
))} <Popup>
</MapContainer> <h2> Train 2</h2>
</div> <h2> Train 2</h2>
<h2> Train 2</h2>
<h2> Train 2</h2>
<h2> Train 2</h2>
<h2> Train 2</h2>
</Popup>
</Marker>
))}
</MapContainer>
</div>
</>
); );
} }

BIN
frontend/src/assets/icons/bus-station.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
frontend/src/assets/icons/bus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
frontend/src/assets/icons/train-station.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
frontend/src/assets/icons/train.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
frontend/src/assets/icons/train_late.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
frontend/src/assets/icons/train_notrunning.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
frontend/src/assets/icons/train_ontime.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
frontend/src/assets/icons/tram-station.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

14
frontend/src/components/TabTitle.jsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import { Helmet } from "react-helmet";
import favicon from "../../src/assets/icons/train-station.png"
const TabTitle = () => {
return (
<Helmet>
<title>Iompar</title>
<link rel="icon" href={favicon} />
</Helmet>
);
};
export default TabTitle;