2026-04-14-2 full 1

apps/web/public/map-demo.html

@@ -463,7 +463,7 @@
 
       if (!coords?.length) throw new Error('No route points returned');
 
-      // Add or update route layer
+      // Add or update MAIN route layer
       const geojson = { type: 'Feature', geometry: { type: 'LineString', coordinates: coords } };
 
       if (map.getSource('route')) {
@@ -478,6 +478,31 @@
         });
       }
 
+      // Add or update ALTERNATIVE route layer
+      if (data.alternatives && data.alternatives.length > 0) {
+        const altCoords = typeof data.alternatives[0].points === 'string'
+          ? decodePoly(data.alternatives[0].points)
+          : data.alternatives[0].points;
+
+        const altGeojson = { type: 'Feature', geometry: { type: 'LineString', coordinates: altCoords } };
+        
+        if (map.getSource('route-alt')) {
+          map.getSource('route-alt').setData(altGeojson);
+        } else {
+          map.addSource('route-alt', { type: 'geojson', data: altGeojson });
+          map.addLayer({
+            id: 'route-line-alt', type: 'line', source: 'route-alt',
+            layout: { 'line-join': 'round', 'line-cap': 'round' },
+            paint:  { 'line-color': '#718096', 'line-width': 5, 'line-opacity': 0.65, 'line-dasharray': [2, 2] }
+          }, 'route-line'); // Draw below main route
+        }
+      } else {
+        // Clear alternative route if none exists
+        if (map.getSource('route-alt')) {
+          map.getSource('route-alt').setData({ type: 'FeatureCollection', features: [] });
+        }
+      }
+
       // Fit map to route
       const bounds = coords.reduce(
         (b, c) => b.extend(c),