start reading in debug edges

bikehopper · Mar 9, 2024 · df6236f · df6236f
1 parent 156955a
commit df6236f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/src/components/BikehopperMap.jsx b/src/components/BikehopperMap.jsx
@@ -10,9 +10,11 @@ import MapGL, {
   GeolocateControl,
   NavigationControl,
 } from 'react-map-gl/maplibre';
+import { featureCollection } from '@turf/helpers';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import {
   routesToGeoJSON,
+  edgeToGeoJSON,
   EMPTY_GEOJSON,
   BIKEABLE_HIGHWAYS,
 } from '../lib/geometry';
@@ -387,6 +389,8 @@ const BikehopperMap = React.forwardRef((props, mapRef) => {
   }, [routes, activePath, viewingDetails, viewingStep, mapRef]);
 
   const features = routes ? routesToGeoJSON(routes) : EMPTY_GEOJSON;
+  const edges = routes ? routes[activePath].edges?.map(edgeToGeoJSON) : null;
+  const debugEdges = edges ? featureCollection(edges) : null;
 
   const navigationControlStyle = {
     visibility: mapRef.current?.getBearing() !== 0 ? 'visible' : 'hidden',
@@ -473,6 +477,14 @@ const BikehopperMap = React.forwardRef((props, mapRef) => {
           <Layer {...getTransitLabelStyle(activePath)} />
           <Layer {...getBikeLabelStyle(activePath)} />
         </Source>
+        {debugEdges && (
+          <Source id="debug-edges" type="geojson" data={debugEdges}>
+            <Layer
+              beforeId="standardBikeLayer"
+              {...getDebugStyle(activePath)}
+            />
+          </Source>
+        )}
         {startCoords && (
           <Marker
             id="startMarker"
@@ -604,6 +616,19 @@ function getTransitionStyle(activePath) {
   };
 }
 
+function getDebugStyle(activePath) {
+  return {
+    id: 'debugLayer',
+    type: 'line',
+    layout: {},
+    paint: {
+      'line-width': 3,
+      'line-color': 'red',
+      'line-dasharray': [1, 1],
+    },
+  };
+}
+
 function getTransitStyle(activePath) {
   return {
     id: 'transitLayer',

diff --git a/src/lib/geometry.js b/src/lib/geometry.js
@@ -88,6 +88,14 @@ export function routesToGeoJSON(paths) {
   return turf.featureCollection(features);
 }
 
+export function edgeToGeoJSON(edge) {
+  const properties = { ...edge };
+  delete properties.points;
+  const returnFeature = { ...edge.points };
+  returnFeature.properties = properties;
+  return returnFeature;
+}
+
 /**
  * From a details object, generates a coherent set of lines such that no lines overlap.
  *