From 52b976c4529bef2da279ebd275f570de66179b4e Mon Sep 17 00:00:00 2001
From: Shihaam Abdul Rahman <shihaam@shihaam.me>
Date: Sat, 13 Dec 2025 19:08:43 +0500
Subject: [PATCH] fix pin image 404

---
 public/src/components/map/MapView.tsx | 10 ++++++++++
 public/src/pages/SharedMap.tsx        | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/public/src/components/map/MapView.tsx b/public/src/components/map/MapView.tsx
index 2590d88..5c64569 100644
--- a/public/src/components/map/MapView.tsx
+++ b/public/src/components/map/MapView.tsx
@@ -1,11 +1,21 @@
 import { useState, useEffect } from 'react';
 import { MapContainer, TileLayer, useMap } from 'react-leaflet';
+import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { DrawingHandler } from './DrawingHandler';
 import { MapItemsLayer } from './MapItemsLayer';
 import { ShareDialog } from './ShareDialog';
 import { useMapWebSocket } from '../../hooks/useMapWebSocket';
 
+// Fix Leaflet's default icon paths for production builds
+// Since we use custom DivIcons, we just need to prevent 404s
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==',
+  iconRetinaUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==',
+  shadowUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==',
+});
+
 interface MapViewProps {
   mapId: string | null;
   activeLayer: string;
diff --git a/public/src/pages/SharedMap.tsx b/public/src/pages/SharedMap.tsx
index 5edac96..d3bf862 100644
--- a/public/src/pages/SharedMap.tsx
+++ b/public/src/pages/SharedMap.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { MapContainer, TileLayer, useMap } from 'react-leaflet';
+import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { LayerSwitcher } from '../components/map/LayerSwitcher';
 import { DrawingHandler } from '../components/map/DrawingHandler';
@@ -10,6 +11,15 @@ import { useMapWebSocket } from '../hooks/useMapWebSocket';
 import { apiClient } from '../services/api';
 import { useUIStore } from '../stores/uiStore';
 
+// Fix Leaflet's default icon paths for production builds
+// Since we use custom DivIcons, we just need to prevent 404s
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==',
+  iconRetinaUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==',
+  shadowUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==',
+});
+
 type MapLayer = 'osm' | 'google' | 'esri';
 
 const MAP_LAYERS = {