[frontend]: Add icons

frontend/src/App.jsx

@@ -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>
+        </>
     );
 }
 

frontend/src/components/TabTitle.jsx

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