From 7a350aa45e45a67ddb249b6b82d076b8cb8f10de Mon Sep 17 00:00:00 2001 From: logbasem Date: Fri, 20 Feb 2026 12:36:59 -0600 Subject: [PATCH] Fixed marker image bug for offline mode --- frontend/{ => images}/map-placeholder.png | Bin frontend/{ => images}/rover-shadow.png | Bin frontend/{ => images}/rover.png | Bin frontend/main.js | 28 +++++++++++++++------- frontend/map.js | 3 ++- package-lock.json | 20 ++++++++-------- 6 files changed, 31 insertions(+), 20 deletions(-) rename frontend/{ => images}/map-placeholder.png (100%) rename frontend/{ => images}/rover-shadow.png (100%) rename frontend/{ => images}/rover.png (100%) diff --git a/frontend/map-placeholder.png b/frontend/images/map-placeholder.png similarity index 100% rename from frontend/map-placeholder.png rename to frontend/images/map-placeholder.png diff --git a/frontend/rover-shadow.png b/frontend/images/rover-shadow.png similarity index 100% rename from frontend/rover-shadow.png rename to frontend/images/rover-shadow.png diff --git a/frontend/rover.png b/frontend/images/rover.png similarity index 100% rename from frontend/rover.png rename to frontend/images/rover.png diff --git a/frontend/main.js b/frontend/main.js index eb8306f..98d6dbd 100644 --- a/frontend/main.js +++ b/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 } }); diff --git a/frontend/map.js b/frontend/map.js index 3a7837f..5e88dd8 100644 --- a/frontend/map.js +++ b/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); diff --git a/package-lock.json b/package-lock.json index c5284da..d1bc582 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,7 @@ "requires": true, "packages": { "": { + "name": "RoverMap", "dependencies": { "@fails-components/webtransport": "^1.3.1", "@maptiler/leaflet-maptilersdk": "^4.0.3", @@ -1339,10 +1340,11 @@ } }, "node_modules/vite": { - "version": "6.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", - "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz", + "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==", "dev": true, + "license": "MIT", "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", @@ -1930,8 +1932,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.0.0.tgz", "integrity": "sha512-gc9Tjg8bUxBVSTzeWT3Njc0Cl3PakHFKdNfABnZWiUgbxqmHDEn7uECv3fHVylxoYgNzAcmU7ZrILz+BwSo3sA==", - "dev": true, - "requires": {} + "dev": true }, "bindings": { "version": "1.5.0", @@ -1996,8 +1997,7 @@ "version": "6.4.4", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz", "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==", - "dev": true, - "requires": {} + "dev": true }, "file-uri-to-path": { "version": "1.0.0", @@ -2260,9 +2260,9 @@ "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==" }, "vite": { - "version": "6.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", - "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz", + "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==", "dev": true, "requires": { "esbuild": "^0.25.0",