feat: traveled route in grey for traffic polyline (#208)

* build: "no-unused-vars": "warn"

* feat: use cloud style with no POI marker distractions

* feat: traveled route in grey

Author: regeter

.eslintrc.json

@@ -21,6 +21,7 @@
   "plugins": ["react", "jest"],
   "rules": {
     "no-var": "error",
+    "no-unused-vars": "warn",
     "prefer-arrow-callback": "error",
     "react/prop-types": "off",
     "react/jsx-key": "off",

src/Map.js

@@ -231,10 +231,16 @@ function MyMapComponent(props) {
             "request.vehicle.currentroutesegmenttraffic.trafficrendering"
           );
 
+          const rawLocation = _.get(
+            props.selectedRow.lastlocation,
+            "rawlocation"
+          );
+
           const trafficPolyline = new TrafficPolyline({
             path: validWaypoints,
             zIndex: 2,
-            trafficRendering: trafficRendering,
+            trafficRendering: structuredClone(trafficRendering),
+            currentLatLng: rawLocation,
             map: map,
           });
           setPolylines((prev) => [...prev, ...trafficPolyline.polylines]);

src/TrafficPolyline.js

@@ -10,10 +10,11 @@ export const TRAFFIC_COLORS = {
 };
 
 export class TrafficPolyline {
-  constructor({ path, zIndex, trafficRendering, map }) {
+  constructor({ path, zIndex, trafficRendering, currentLatLng, map }) {
     this.polylines = [];
     this.path = path;
     this.zIndex = zIndex;
+    this.currentLatLng = currentLatLng;
     this.map = map;
     this.segments = this.calculateSegments(trafficRendering);
     this.createPolylines();
@@ -31,12 +32,56 @@ export class TrafficPolyline {
     }
 
     try {
-      // If no traffic rendering or no road stretches, return a single NO_DATA segment
-      if (!trafficRendering?.roadstretch?.length) {
+      if (!trafficRendering) {
+        trafficRendering = { roadstretch: [] };
+      }
+
+      // Add traveled route as NO_DATA if we have currentLatLng
+      if (
+        this.currentLatLng &&
+        this.currentLatLng.longitude &&
+        this.currentLatLng.latitude
+      ) {
+        const line = turf.lineString(
+          this.path.map((point) => [point.lng, point.lat])
+        );
+        const currentPoint = turf.point([
+          this.currentLatLng.longitude,
+          this.currentLatLng.latitude,
+        ]);
+        const startPoint = turf.point(line.geometry.coordinates[0]);
+
+        try {
+          const traveledLine = turf.lineSlice(startPoint, currentPoint, line);
+          const distanceInMeters =
+            turf.length(traveledLine, { units: "kilometers" }) * 1000;
+
+          // Add the traveled segment at the start of roadstretch array
+          if (distanceInMeters > 0) {
+            trafficRendering.roadstretch = [
+              {
+                style: "STYLE_NO_DATA",
+                offsetmeters: 0,
+                lengthmeters: distanceInMeters,
+              },
+              ...(trafficRendering.roadstretch || []),
+            ];
+
+            log("Added traveled route segment:", {
+              lengthMeters: distanceInMeters,
+              segments: trafficRendering.roadstretch.length,
+            });
+          }
+        } catch (error) {
+          log("Error calculating traveled route segment:", error);
+        }
+      }
+
+      if (!trafficRendering.roadstretch?.length) {
         return [
           {
             path: this.path,
-            style: "STYLE_NO_DATA",
+            style: "STYLE_NORMAL",
           },
         ];
       }

src/TrafficPolyline.test.js

@@ -48,15 +48,15 @@ describe("TrafficPolyline", () => {
     { lat: 1, lng: 1 },
   ];
 
-  test("creates NO_DATA polyline when no traffic data provided", () => {
+  test("creates STYLE_NORMAL polyline when no traffic data provided", () => {
     const polyline = new TrafficPolyline({
       path: samplePath,
       map: {},
     });
 
     expect(polyline.polylines.length).toBe(1);
     expect(polyline.polylines[0].options.strokeColor).toBe(
-      TRAFFIC_COLORS.STYLE_NO_DATA
+      TRAFFIC_COLORS.STYLE_NORMAL
     );
   });
 
@@ -69,7 +69,7 @@ describe("TrafficPolyline", () => {
 
     expect(polyline.polylines.length).toBe(1);
     expect(polyline.polylines[0].options.strokeColor).toBe(
-      TRAFFIC_COLORS.STYLE_NO_DATA
+      TRAFFIC_COLORS.STYLE_NORMAL
     );
   });
 

src/constants.js

@@ -1,4 +1,4 @@
 // constants.js
 
 export const DEFAULT_API_KEY = "";
-export const DEFAULT_MAP_ID = "";
+export const DEFAULT_MAP_ID = "e6ead35a6ace8599";