Rovermap fixes

.gitignore

@@ -2,6 +2,6 @@ tiles/
 tiles.tar
 node_modules
 map_tiles
-public/
+public/utah-tiles-2/
 dist/
 gps_webtransport_server/target/

frontend/gps-client.js

@@ -1,13 +1,15 @@
 export function startGPSClient() {
-    const socket = new WebSocket('ws://localhost:9001'); // make sure port matches server port
-
+    console.log("Creating websocket...")
+    const socket = new WebSocket('ws://192.168.1.68:9001'); // make sure port matches server port
+    console.log("WebSocket created!")
     socket.onopen = () => {
         console.log('🔌 WebSocket connection established');
-    }
+    };
 
     socket.onmessage = (event) => {
         try {
             const data = JSON.parse(event.data);
+            console.log(data);
             const gpsEvent = new CustomEvent('gps-update', { detail: data });
             window.dispatchEvent(gpsEvent);
         } catch (e) {

frontend/index.html

@@ -16,6 +16,7 @@
     <div id="map" style="width: 90%; height: 400px; margin: auto"></div>
     <script type="module" src="/main.js"></script>
     <div id="container">
+        <p id="rover-pos">Rover's current position</p>
         <div id="tools" class="section">
             <h2 class="section-title">Tools</h2>
             <p id="tool-reminder">Click a tool's button to enable it.</p>

frontend/main.js

@@ -35,14 +35,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: '/rover-icon/rover.png',
+        shadowUrl: '/rover-icon/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
         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 = () => {
@@ -51,14 +51,18 @@ window.onload = () => {
 
     // Listen for GPS data
     window.addEventListener('gps-update', (e) => {
+        console.log("GPS updated");
         const { lat, lon } = e.detail;
-        // FOR TESTING: console.log(`📡 GPS Update: Latitude ${lat}, Longitude ${lon}`);
+        console.log(`📡 GPS Update: Latitude ${lat}, Longitude ${lon}`);
+        document.getElementById("rover-pos").innerHTML = `Rover Position: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;
 
         // Add or update the current position marker
         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], 13);
         }
     });
 

frontend/map.js

@@ -13,7 +13,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 = '/map-placeholder.png'; // placeholder image for if tiles don't load
 });
 
 tileLayer.addTo(map);