Fixed marker image bug for offline mode

frontend/main.js

@@ -1,4 +1,9 @@
 import './index.css';
+import L from 'leaflet';
+import roverImage from '/images/rover.png';
+import roverShadowImage from '/images/rover-shadow.png';
+import markerIcon from 'leaflet/dist/images/marker-icon.png';
+import markerShadow from 'leaflet/dist/images/marker-shadow.png';
 import { map } from './map.js';
 import { toggleCircles, clearCircles, circleOnPoint } from './circleTools';
 import { toggleMarkers, clearPaths } from './pathTools';
@@ -15,6 +20,11 @@ import {
 } from './helpers.js';
 import { startGPSClient } from './gps-client.js';  // This now returns the WebSocket
 
+L.Icon.Default.prototype._getIconUrl = function (name) {
+    if (name === 'icon') return markerIcon;
+    if (name === 'shadow') return markerShadow;
+};
+
 // Event listeners
 window.toggleCircles = toggleCircles;
 window.clearCircles = clearCircles;
@@ -36,14 +46,14 @@ let currentPositionMarker = null;
 window.onload = () => {
     // Initialize rover icon
     var roverIcon = L.icon({
-        iconUrl: 'rover.png',
-        shadowUrl: 'rover-shadow.png',
-    
-        iconSize:     [30, 30], // size of the icon
-        shadowSize:   [30, 30], // size of the shadow
-        iconAnchor:   [0, 0], // point of the icon which will correspond to marker's location
+        iconUrl: roverImage,
+        shadowUrl: roverShadowImage,
+
+        iconSize: [30, 30], // size of the icon
+        shadowSize: [30, 30], // size of the shadow
+        iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
         shadowAnchor: [-2, 1],  // the same for the shadow
-        popupAnchor:  [50, 50] // point from which the popup should open relative to the iconAnchor
+        popupAnchor: [50, 50] // point from which the popup should open relative to the iconAnchor
     });
 
     window.addWayPoint = () => {
@@ -63,8 +73,8 @@ window.onload = () => {
         if (currentPositionMarker) {
             currentPositionMarker.setLatLng([lat, lon]);
         } else {
-            currentPositionMarker = L.marker([lat, lon], {icon: roverIcon}).addTo(map);
-            
+            currentPositionMarker = L.marker([lat, lon], { icon: roverIcon }).addTo(map);
+
             map.setView([lat, lon], 15); // Center map around Rover initial position
         }
     });

frontend/map.js

@@ -1,5 +1,6 @@
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import placeholderImage from '/images/map-placeholder.png'
 
 export const map = L.map('map').setView([38.4375, -110.8125], 17);
 
@@ -13,7 +14,7 @@ const tileLayer = L.tileLayer('/utah-tiles-2/{z}/{x}/{y}.png', {
 
 tileLayer.on('tileerror', function (e) {
     const img = e.tile;
-    img.src = '../map-placeholder.png'; // placeholder image for if tiles don't load
+    img.src = placeholderImage; // placeholder image for if tiles don't load
 });
 
 tileLayer.addTo(map);