Merge pull request #129 from usdot-jpo-ode/crosswalks

Styling Crosswalks
usdot-jpo-ode · Dec 24, 2024 · 9123601 · 9123601
2 parents d784597 + 73aca30
commit 9123601
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 16 deletions.
diff --git a/gui/public/icons/crosswalk.png b/gui/public/icons/crosswalk.png
diff --git a/gui/src/components/map/map-component.tsx b/gui/src/components/map/map-component.tsx
@@ -27,7 +27,7 @@ import mbStyle from "../../intersectionMapStyle.json";
 
 const { publicRuntimeConfig } = getConfig();
 
-const allInteractiveLayerIds = ["mapMessage", "connectingLanes", "signalStates", "bsm"];
+const allInteractiveLayerIds = ["mapMessage", "connectingLanes", "signalStates", "bsm", "mapMessageCrosswalk"];
 
 const mapMessageLayer: LineLayer = {
   id: "mapMessage",
@@ -38,6 +38,15 @@ const mapMessageLayer: LineLayer = {
   },
 };
 
+const mapMessageCrosswalkLayer: LineLayer = {
+  id: "mapMessageCrosswalk",
+  type: "line",
+  paint: {
+    "line-width": ["interpolate", ["exponential", 2], ["zoom"], 0, 0, 14, 10, 19, 40, 20, 60, 21, 150, 22, 300],
+    "line-pattern": "crosswalk",
+  },
+};
+
 const mapMessageLabelsLayer: SymbolLayer = {
   id: "mapMessageLabels",
   type: "symbol",
@@ -389,6 +398,7 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
       laneColors: {
         Ingress: "#eb34e8",
         Egress: "#0004ff",
+        Crosswalk: "#00E9FF",
       },
       travelConnectionColors: {
         UNAVAILABLE: ["#797979", [2, 1]],
@@ -853,6 +863,18 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
       };
     };
 
+    const getLaneTypeEnum = (laneType: J2735LaneTypeAttributes): LaneTypeEnum => {
+      if (laneType.vehicle) return "vehicle";
+      if (laneType.crosswalk) return "crosswalk";
+      if (laneType.bikeLane) return "bikeLane";
+      if (laneType.sidewalk) return "sidewalk";
+      if (laneType.median) return "median";
+      if (laneType.striping) return "striping";
+      if (laneType.trackedVehicle) return "trackedVehicle";
+      if (laneType.parking) return "parking";
+      return "vehicle";
+    };
+
     const handleImportedMessageData = ({
       mapData,
       bsmData,
@@ -865,8 +887,8 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
       notificationData: any;
     }) => {
       const sortedSpatData = spatData.sort((x, y) => x.utcTimeStamp - y.utcTimeStamp);
-      const startTime = new Date(sortedSpatData[0].utcTimeStamp);
-      const endTime = new Date(sortedSpatData[sortedSpatData.length - 1].utcTimeStamp);
+      const startTime = new Date(sortedSpatData[0]?.utcTimeStamp ?? Date.now());
+      const endTime = new Date(sortedSpatData[sortedSpatData.length - 1]?.utcTimeStamp ?? Date.now() + 1);
       setImportedMessageData({ mapData, bsmData, spatData, notificationData });
       setQueryParams({
         startDate: startTime,
@@ -993,6 +1015,15 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
 
       // ######################### MAP Data #########################
       const latestMapMessage: ProcessedMap = rawMap.at(-1)!;
+      latestMapMessage.mapFeatureCollection.features = latestMapMessage.mapFeatureCollection.features.map(
+        (feature) => ({
+          ...feature,
+          properties: {
+            ...feature.properties,
+            laneTypeEnum: getLaneTypeEnum(feature.properties.laneType),
+          },
+        })
+      );
       const mapCoordinates: OdePosition3D = latestMapMessage?.properties.refPoint;
 
       setConnectingLanes(latestMapMessage.connectingLanesFeatureCollection);
@@ -1904,6 +1935,7 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
                 "traffic-light-icon-yellow-red-1",
                 "traffic-light-icon-green-1",
                 "traffic-light-icon-yellow-1",
+                "crosswalk",
               ];
               for (const image_name of images) {
                 map.loadImage(`/icons/${image_name}.png`, (error, image) => {
@@ -1948,7 +1980,28 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
               setHoveredFeature(undefined);
             }}
           >
-            <Source type="geojson" data={mapData?.mapFeatureCollection ?? { type: "FeatureCollection", features: [] }}>
+            <Source
+              type="geojson"
+              data={{
+                type: "FeatureCollection",
+                features:
+                  mapData?.mapFeatureCollection?.features?.filter(
+                    (feature) => feature.properties.laneTypeEnum == "crosswalk"
+                  ) ?? [],
+              }}
+            >
+              <Layer {...mapMessageCrosswalkLayer} />
+            </Source>
+            <Source
+              type="geojson"
+              data={{
+                type: "FeatureCollection",
+                features:
+                  mapData?.mapFeatureCollection?.features?.filter(
+                    (feature) => feature.properties.laneTypeEnum == "vehicle"
+                  ) ?? [],
+              }}
+            >
               <Layer {...mapMessageLayer} />
             </Source>
             <Source

diff --git a/gui/src/components/map/popup.tsx b/gui/src/components/map/popup.tsx
@@ -26,18 +26,23 @@ export const getSelectedLayerPopupContent = (feature: any) => {
           />
         </Box>
       );
+    case "mapMessageCrosswalk":
     case "mapMessage":
       let map = feature.properties;
-      let connectedObjs: any[] = [];
+      let optionalObjects: any[] = [];
+      if (map.laneTypeEnum) {
+        optionalObjects.push(["Lane Type", map.laneTypeEnum]);
+      }
       JSON.parse(map?.connectsTo ?? "[]")?.forEach((connectsTo) => {
-        connectedObjs.push(["Connected Lane", connectsTo.connectingLane.lane]);
-        connectedObjs.push(["Signal Group", connectsTo.signalGroup]);
-        connectedObjs.push(["Connection ID", connectsTo.connectionID]);
+        optionalObjects.push(["Connected Lane", connectsTo.connectingLane.lane]);
+        optionalObjects.push(["Signal Group", connectsTo.signalGroup]);
+        optionalObjects.push(["Connection ID", connectsTo.connectionID]);
       });
+
       return (
         <Box>
           <Typography>MAP Lane</Typography>
-          <CustomTable headers={["Field", "Value"]} data={[["Lane Id", map.laneId], ...connectedObjs]} />
+          <CustomTable headers={["Field", "Value"]} data={[["Lane Id", map.laneId], ...optionalObjects]} />
         </Box>
       );
 

diff --git a/gui/src/models/imports/J2735/J2735GenericLane.d.ts b/gui/src/models/imports/J2735/J2735GenericLane.d.ts
@@ -44,13 +44,13 @@ type J2735LaneAttributes = {
 
 type J2735LaneTypeAttributes = {
   vehicle?: J2735BitString; // motor vehicle lanes - J2735LaneAttributesVehicle
-  crosswalk: J2735BitString; // pedestrian crosswalks - J2735LaneAttributesCrosswalk
-  bikeLane: J2735BitString; // bike lanes - J2735LaneAttributesBike
-  sidewalk: J2735BitString; // pedestrian sidewalk paths - J2735LaneAttributesSidewalk
-  median: J2735BitString; // medians & channelization - J2735LaneAttributesBarrier
-  striping: J2735BitString; // roadway markings - J2735LaneAttributesStriping
-  trackedVehicle: J2735BitString; // trains and trolleys - J2735LaneAttributesTrackedVehicle
-  parking: J2735BitString; // parking and stopping lanes - J2735LaneAttributesParking
+  crosswalk?: J2735BitString; // pedestrian crosswalks - J2735LaneAttributesCrosswalk
+  bikeLane?: J2735BitString; // bike lanes - J2735LaneAttributesBike
+  sidewalk?: J2735BitString; // pedestrian sidewalk paths - J2735LaneAttributesSidewalk
+  median?: J2735BitString; // medians & channelization - J2735LaneAttributesBarrier
+  striping?: J2735BitString; // roadway markings - J2735LaneAttributesStriping
+  trackedVehicle?: J2735BitString; // trains and trolleys - J2735LaneAttributesTrackedVehicle
+  parking?: J2735BitString; // parking and stopping lanes - J2735LaneAttributesParking
 };
 
 type J2735BitString = string;

diff --git a/gui/src/models/imports/ProcessedMap.d.ts b/gui/src/models/imports/ProcessedMap.d.ts
@@ -23,6 +23,15 @@ type MapSharedProperties = {
 };
 
 type MapSource = "RSU" | "V2X" | "MMITSS" | "unknown";
+type LaneTypeEnum =
+  | "vehicle"
+  | "crosswalk"
+  | "bikeLane"
+  | "sidewalk"
+  | "median"
+  | "striping"
+  | "trackedVehicle"
+  | "parking";
 
 // enum MapSource {
 //     RSU,
@@ -52,6 +61,8 @@ type MapProperties = {
   nodes: MapNode[];
   laneId: number;
   laneName?: string;
+  laneType: J2735LaneTypeAttributes;
+  laneTypeEnum: str;
   sharedWith: J2735LaneSharing;
   egressApproach: number;
   ingressApproach: number;