feat: Use Violet-Pink Gradient for expansion edges to have them visib…

…le on top of the traffic information
kinkard · Oct 15, 2024 · 07f7955 · 07f7955
1 parent 9e90ce5
commit 07f7955
Showing 1 changed file with 34 additions and 42 deletions.
diff --git a/web/index.html b/web/index.html
@@ -105,81 +105,73 @@
         layout: {},
         paint: {
           "line-color": "#007AFF",
-          "line-width": 7,
+          "line-width": 9,
         }
       });
 
-      // This source will be filled by data later in the button callback handler
-      map.addSource("expansion", {
+      // Source for drawing traffic lines based on information from /locate response
+      map.addSource("traffic-lines", {
         type: "geojson",
         data: {
           type: "FeatureCollection",
           features: [],
         },
       });
       map.addLayer({
-        id: "expansion-edges",
+        id: "traffic-lines",
         type: "line",
-        source: "expansion",
+        source: "traffic-lines",
         layout: {},
         paint: {
+          // Set the line color based on the jam factor
           "line-color": [
             "interpolate",
             ["linear"],
-            ["get", "progress"],
-            0,
-            "#FF4500", // Start color
-            1.0, // progress is changing from 0.0 to 1.0
-            "#45FF00", // End color
-          ],
-          // Interpolate width to show if same line is covered multiple times
-          "line-width": [
-            "interpolate",
-            ["linear"],
-            ["get", "progress"],
-            0,
-            5, // Start width
-            1.0, // progress is changing from 0.0 to 1.0
-            1, // End width
+            ["get", "jamFactor"], // Access the jam factor property
+            0.0, "#33cc33", // Green for no traffic
+            2.5, "#ffcc00", // Yellow for moderate traffic
+            5.0, "#ffb700", // Orange for medium traffic
+            7.5, "#ff0000", // Red for heavy traffic
+            10., "#000000", // Black for blocked roads
           ],
-        },
+          "line-width": 5,
+        }
       });
 
-      // Source for drawing traffic lines based on information from /locate response
-      map.addSource("traffic-lines", {
+      // This source will be filled by data later in the button callback handler
+      map.addSource("expansion", {
         type: "geojson",
         data: {
           type: "FeatureCollection",
           features: [],
         },
       });
       map.addLayer({
-        id: "traffic-lines",
+        id: "expansion-edges",
         type: "line",
-        source: "traffic-lines",
+        source: "expansion",
         layout: {},
         paint: {
-          // Set the line color based on the jam factor
           "line-color": [
             "interpolate",
             ["linear"],
-            ["get", "jamFactor"], // Access the jam factor property
-            0.0, "#33cc33", // Green for no traffic
-            2.5, "#ffcc00", // Yellow for moderate traffic
-            5.0, "#ffb700", // Orange for medium traffic
-            7.5, "#ff0000", // Red for heavy traffic
-            10., "#000000", // Black for blocked roads
+            ["get", "progress"],
+            // From Violet-Pink Gradient color scheme for progress
+            0.0, "#6B0772", // Start color
+            0.5, "#AF1281",
+            1.0, "#CF268A", // End color
           ],
-          "line-width": 5,
-          // todo: Use different width depending on the edge level
-          // "line-width": [
-          //   "interpolate",
-          //   ["linear"],
-          //   ["get", "jamFactor"],
-          //   0, 2, // Thin lines for free-flowing traffic
-          //   1.0, 6 // Thicker lines for heavy traffic
-          // ],
-        }
+          // Interpolate width to show if same line is covered multiple times
+          "line-width": [
+            "interpolate",
+            ["linear"],
+            ["get", "progress"],
+            0,
+            3, // Start width
+            1.0, // progress is changing from 0.0 to 1.0
+            1, // End width
+          ],
+        },
       });
 
       let locations;