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

69
frontend/src/App.jsx
View File

@ -5,6 +5,9 @@ import "leaflet/dist/leaflet.css";
import L 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
delete L.Icon.Default.prototype._getIconUrl;
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",
});
const mapCenter = [53.4494762, -7.5029786];
let mapCenter = [53.4494762, -7.5029786];
const trainIcon = new Icon({
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",
iconSize: [38,38]
})
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
(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 = [
{
coords: [53.4494762, -7.5029786],
popup: "Popup lol"
popup: "Popup lol",
icon: "train-station"
}
]
function App() {
return (
<div style={{ height: "100vh", width: "100vw" }}>
<MapContainer center={mapCenter} zoom={7} 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'
/>
<>
<TabTitle />
<div style={{height: "100vh", width: "100vw"}}>
{markers.map(marker => (
<Marker position={marker.coords} icon={trainIcon}>
<Popup>
<h2> Train 2</h2>
<MapContainer center={mapCenter} zoom={7} 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'
/>
</Popup>
</Marker>
))}
</MapContainer>
</div>
{markers.map(marker => (
<Marker position={marker.coords} icon={icons.get(marker.icon)}>
<Popup>
<h2> Train 2</h2>
<h2> Train 2</h2>
<h2> Train 2</h2>
<h2> Train 2</h2>
<h2> Train 2</h2>
<h2> Train 2</h2>
</Popup>
</Marker>
))}
</MapContainer>
</div>
</>
);
}