map chnages

views/map.ejs

@@ -47,14 +47,19 @@
     <div id="map"></div>
     <script src="/socket.io/socket.io.js"></script>
     <script>
+      // Your Mapbox access token
       var mapId = "<%=env%>";
       mapboxgl.accessToken = mapId;
+
+      // Create a socket connection
       const socket = io("http://195.35.45.35:3000/");
 
+      // Event handler for socket connection
       socket.on("connect", () => {
-        console.log("Connected");
+        console.log("Connected to the socket server");
       });
 
+      // Extract the trip ID from the URL
       const queryString = window.location.pathname.split("p");
       console.log(queryString[1], "here");
 
@@ -66,88 +71,100 @@
         zoom: 15,
       });
 
-      map.on("load", () => {
-        // Initialize the source for the bus marker
-        map.addSource("busNew", {
-          type: "geojson",
-          data: {
-            type: "FeatureCollection",
-            features: [],
+      // Initialize the source for the bus path
+      map.addSource("busPath", {
+        type: "geojson",
+        data: {
+          type: "Feature",
+          properties: {},
+          geometry: {
+            type: "LineString",
+            coordinates: [], // Initially empty
           },
-        });
-
-        // Function to update the bus marker on the map
-        function updateBusMarker(coordinates, source, dest, time, via) {
-          let tryMap = map.getSource("busNew").setData({
-            type: "FeatureCollection",
-            features: [
-              {
-                type: "Feature",
-                geometry: {
-                  type: "Point",
-                  coordinates: coordinates,
-                },
-                properties: {
-                  title: "Rodhak",
-                  description: "Driver's Current Location",
-
-                  start: source,
-                  end: dest,
-
-                  time: time,
-                  via: via,
-                },
-              },
-            ],
-          });
+        },
+      });
+
+      // Add a layer to display the bus path
+      map.addLayer({
+        id: "busPathLayer",
+        type: "line",
+        source: "busPath",
+        layout: {
+          "line-join": "round",
+          "line-cap": "round",
+        },
+        paint: {
+          "line-color": "#007BFF", // Line color
+          "line-width": 2, // Line width
+        },
+      });
+
+      // Create a marker element
+      const el = document.createElement("div");
+      el.className = "marker";
+
+      // Add the marker to the map
+      const busMarker = new mapboxgl.Marker(el)
+        .setLngLat([0, 0])
+        .setPopup(
+          new mapboxgl.Popup({ offset: 25 }).setHTML(
+            "<h3>Bus Details</h3>" +
+              "<p>Driver's Current Location</p>" +
+              `<p>From: ${source}</p>` +
+              `<p>To: ${dest}</p>` +
+              `<p>Via: ${via}</p>` +
+              `<p>Time: ${time}</p>`
+          )
+        )
+        .addTo(map);
+
+      // Listen for WebSocket updates from the server
+      socket.on("broadcastDriverData", (data) => {
+        console.log("Received data:", data);
 
-          let bus = map.getSource("busNew")._data;
-          console.log("check__22", bus);
-
-          for (const feature of bus.features) {
-            // create a HTML element for each feature
-            const el = document.createElement("div");
-
-            el.className = "marker";
-
-            // make a marker for each feature and add to the map
-            new mapboxgl.Marker(el)
-              .setLngLat(feature.geometry.coordinates)
-              .setPopup(
-                new mapboxgl.Popup({ offset: 25 }) // add popups
-                  .setHTML(
-                    `<h3>${feature.properties.time}</h3><br/><p>From: ${feature.properties.start}</p><p>To: ${feature.properties.end}</p> <p>via: ${feature.properties.via}</p> `
-                  )
-              )
-              .addTo(map);
+        // Check if the data is for the specific trip
+        const stringWithoutSlash = queryString[1].replace("/", "");
+        if (data.tripID === stringWithoutSlash) {
+          console.log("Got coords for Hardy", data);
+          let via;
+          if (data.viaLocation) {
+            via = data.viaLocation;
           }
 
-          // Fly the map to the updated location
+          // Update the marker's location
+          busMarker.setLngLat([data.longitude, data.latitude]);
+
+          // Update the bus path with the new coordinates
+          const busPath = map.getSource("busPath");
+          const pathCoordinates = busPath._data.geometry.coordinates;
+          pathCoordinates.push([data.longitude, data.latitude]);
+          busPath.setData({
+            type: "Feature",
+            properties: {},
+            geometry: {
+              type: "LineString",
+              coordinates: pathCoordinates,
+            },
+          });
+
+          // Update the popup content
+          busMarker
+            .getPopup()
+            .setHTML(
+              "<h3>Bus Details</h3>" +
+                "<p>Driver's Current Location</p>" +
+                `<p>From: ${data.sourceLocation}</p>` +
+                `<p>To: ${data.destinationLocation}</p>` +
+                `<p>Via: ${via}</p>` +
+                `<p>Time: ${data.currentTime}</p>`
+            );
+
+          // Fly to the updated location with a smooth transition
           map.flyTo({
-            center: coordinates,
+            center: [data.longitude, data.latitude],
             speed: 0.5,
           });
         }
-
-        // Listen for WebSocket updates from the server
-        socket.on("broadcastDriverData", (data) => {
-          console.log("checking", data, queryString[1], data.tripId);
-          const stringWithoutSlash = queryString[1].replace("/", "");
-          if (data.tripID === stringWithoutSlash) {
-            console.log("Got coords for Hardy", data);
-            let via;
-            if (data.viaLocation) {
-              via = data.viaLocation;
-            }
-            updateBusMarker(
-              [data.longitude, data.latitude],
-              data.sourceLocation,
-              data.destinationLocation,
-              data.currentTime,
-              via
-            );
-          }
-        });
       });
     </script>
   </body>