From 647e69e9c3afb317885fbc04e609e9b3b945941a Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com>
Date: Mon, 3 Mar 2025 22:57:47 +0100
Subject: Manually add pin icon

---
 public/map-pin-icon.png | Bin 0 -> 4033 bytes
 src/Layout.tsx          |   1 -
 src/pages/Map.tsx       |  12 ++++++++++--
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 public/map-pin-icon.png

diff --git a/public/map-pin-icon.png b/public/map-pin-icon.png
new file mode 100644
index 0000000..0015b64
Binary files /dev/null and b/public/map-pin-icon.png differ
diff --git a/src/Layout.tsx b/src/Layout.tsx
index 30db47b..de5a16a 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { Link, useLocation } from 'react-router';
 import { MapPin, Map, Info } from 'lucide-react';
-import { useTheme } from './ThemeContext';
 import './Layout.css';
 
 interface LayoutProps {
diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 9b960be..3368e09 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -8,7 +8,15 @@ import LineIcon from '../components/LineIcon';
 import { Link } from 'react-router';
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import MarkerClusterGroup from "react-leaflet-markercluster";
-import { LatLngTuple } from "leaflet";
+import { Icon, LatLngTuple } from "leaflet";
+
+const icon = new Icon({
+	iconUrl: '/map-pin-icon.png',
+	iconSize: [25, 41],
+	iconAnchor: [12, 41],
+	popupAnchor: [1, -34],
+	shadowSize: [41, 41]
+});
 
 const sdp = new StopDataProvider();
 
@@ -28,7 +36,7 @@ export function StopMap() {
 			/>
 			<MarkerClusterGroup>
 				{stops.map((stop) => (
-					<Marker key={stop.stopId} position={[stop.latitude, stop.longitude] as LatLngTuple}>
+					<Marker key={stop.stopId} position={[stop.latitude, stop.longitude] as LatLngTuple} icon={icon}>
 						<Popup>
 							<Link to={`/estimates/${stop.stopId}`}>{stop.name}</Link>
 							<br />
-- 
cgit v1.3