Add stop layer to new Debug UI

client-next/src/components/MapView/MapView.tsx

@@ -1,12 +1,12 @@
-import { LngLat, Map, NavigationControl } from 'react-map-gl';
+import { LngLat, Map, MapboxGeoJSONFeature, NavigationControl, Popup } from 'react-map-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { TripPattern, TripQuery, TripQueryVariables } from '../../gql/graphql.ts';
 import { NavigationMarkers } from './NavigationMarkers.tsx';
 import { LegLines } from './LegLines.tsx';
 import { useMapDoubleClick } from './useMapDoubleClick.ts';
-import { mapStyle } from './mapStyle.ts';
 import { useState } from 'react';
 import { ContextMenuPopup } from './ContextMenuPopup.tsx';
+import { Table } from 'react-bootstrap';
 
 // TODO: this should be configurable
 const initialViewState = {
@@ -15,6 +15,8 @@ const initialViewState = {
   zoom: 4,
 };
 
+type PopupData = { coordinates: LngLat; feature: MapboxGeoJSONFeature };
+
 export function MapView({
   tripQueryVariables,
   setTripQueryVariables,
@@ -29,20 +31,33 @@ export function MapView({
   loading: boolean;
 }) {
   const onMapDoubleClick = useMapDoubleClick({ tripQueryVariables, setTripQueryVariables });
-  const [showPopup, setShowPopup] = useState<LngLat | null>(null);
+  const [showContextPopup, setShowContextPopup] = useState<LngLat | null>(null);
+  const [showPropsPopup, setShowPropsPopup] = useState<PopupData | null>(null);
 
   return (
     <div className="map-container below-content">
       <Map
         // @ts-ignore
         mapLib={import('maplibre-gl')}
         // @ts-ignore
-        mapStyle={mapStyle}
+        mapStyle="http://localhost:8080/otp/routers/default/inspector/vectortile/style.json"
         initialViewState={initialViewState}
         onDblClick={onMapDoubleClick}
         onContextMenu={(e) => {
-          setShowPopup(e.lngLat);
+          setShowContextPopup(e.lngLat);
+        }}
+        interactiveLayerIds={['regular-stop']}
+        onClick={(e) => {
+          if (e.features) {
+            const props = e.features[0];
+            setShowPropsPopup({ coordinates: e.lngLat, feature: props });
+          }
         }}
+        // put lat/long in URL and pan to it on page reload
+        hash={true}
+        // disable pitching and rotating the map
+        touchPitch={false}
+        dragRotate={false}
       >
         <NavigationControl position="top-left" />
         <NavigationMarkers
@@ -53,14 +68,33 @@ export function MapView({
         {tripQueryResult?.trip.tripPatterns.length && (
           <LegLines tripPattern={tripQueryResult.trip.tripPatterns[selectedTripPatternIndex] as TripPattern} />
         )}
-        {showPopup && (
+        {showContextPopup && (
           <ContextMenuPopup
             tripQueryVariables={tripQueryVariables}
             setTripQueryVariables={setTripQueryVariables}
-            coordinates={showPopup}
-            onClose={() => setShowPopup(null)}
+            coordinates={showContextPopup}
+            onClose={() => setShowContextPopup(null)}
           />
         )}
+        {showPropsPopup && showPropsPopup.feature && showPropsPopup.feature.properties && (
+          <Popup
+            latitude={showPropsPopup.coordinates.lat}
+            longitude={showPropsPopup.coordinates.lng}
+            closeButton={true}
+            onClose={() => setShowPropsPopup(null)}
+          >
+            <Table bordered>
+              <tbody>
+                {Object.entries(showPropsPopup.feature.properties).map(([key, value]) => (
+                  <tr key={key}>
+                    <th scope="row">{key}</th>
+                    <td>{value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+          </Popup>
+        )}
       </Map>
     </div>
   );

src/main/java/org/opentripplanner/api/configuration/APIEndpoints.java

@@ -19,13 +19,13 @@
 import java.util.List;
 import org.opentripplanner.api.resource.BikeRental;
 import org.opentripplanner.api.resource.GraphInspectorTileResource;
-import org.opentripplanner.api.resource.GraphInspectorVectorTileResource;
 import org.opentripplanner.api.resource.PlannerResource;
 import org.opentripplanner.api.resource.Routers;
 import org.opentripplanner.api.resource.ServerInfo;
 import org.opentripplanner.api.resource.UpdaterStatusResource;
 import org.opentripplanner.apis.gtfs.GtfsGraphQLAPI;
 import org.opentripplanner.apis.transmodel.TransmodelAPI;
+import org.opentripplanner.apis.vectortiles.GraphInspectorVectorTileResource;
 import org.opentripplanner.ext.actuator.ActuatorAPI;
 import org.opentripplanner.ext.geocoder.GeocoderResource;
 import org.opentripplanner.ext.parkAndRideApi.ParkAndRideResource;

src/main/java/org/opentripplanner/apis/vectortiles/DebugStyleSpec.java

@@ -0,0 +1,48 @@
+package org.opentripplanner.apis.vectortiles;
+
+import java.util.List;
+import org.opentripplanner.apis.vectortiles.model.LayerStyleBuilder;
+import org.opentripplanner.apis.vectortiles.model.StyleSpec;
+import org.opentripplanner.apis.vectortiles.model.TileSource;
+import org.opentripplanner.apis.vectortiles.model.TileSource.RasterSource;
+import org.opentripplanner.apis.vectortiles.model.TileSource.VectorSource;
+
+/**
+ *  A Mapbox/Mapblibre style specification for rendering debug information about transit and
+ *  street data.
+ */
+public class DebugStyleSpec {
+
+  private static final RasterSource BACKGROUND_SOURCE = new RasterSource(
+    "background",
+    List.of("https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"),
+    256,
+    "© OpenStreetMap Contributors"
+  );
+
+  public record VectorSourceLayer(VectorSource vectorSource, String vectorLayer) {}
+
+  static StyleSpec build(VectorSource debugSource, VectorSourceLayer regularStops) {
+    List<TileSource> sources = List.of(BACKGROUND_SOURCE, debugSource);
+    return new StyleSpec(
+      "OTP Debug Tiles",
+      sources,
+      List.of(
+        LayerStyleBuilder
+          .ofId("background")
+          .typeRaster()
+          .source(BACKGROUND_SOURCE)
+          .minZoom(0)
+          .maxZoom(22),
+        LayerStyleBuilder
+          .ofId("regular-stop")
+          .typeCircle()
+          .vectorSourceLayer(regularStops)
+          .circleStroke("#140d0e", 2)
+          .circleColor("#fcf9fa")
+          .minZoom(13)
+          .maxZoom(22)
+      )
+    );
+  }
+}

src/main/java/org/opentripplanner/api/resource/GraphInspectorVectorTileResource.java → src/main/java/org/opentripplanner/apis/vectortiles/GraphInspectorVectorTileResource.java

@@ -1,4 +1,4 @@
-package org.opentripplanner.api.resource;
+package org.opentripplanner.apis.vectortiles;
 
 import static org.opentripplanner.framework.io.HttpUtils.APPLICATION_X_PROTOBUF;
 
@@ -16,13 +16,20 @@
 import java.util.Locale;
 import java.util.Objects;
 import java.util.function.Predicate;
+import java.util.stream.Collectors;
+import javax.annotation.Nonnull;
 import org.glassfish.grizzly.http.server.Request;
 import org.opentripplanner.api.model.TileJson;
-import org.opentripplanner.inspector.vector.AreaStopsLayerBuilder;
+import org.opentripplanner.apis.vectortiles.model.LayerParams;
+import org.opentripplanner.apis.vectortiles.model.LayerType;
+import org.opentripplanner.apis.vectortiles.model.StyleSpec;
+import org.opentripplanner.apis.vectortiles.model.TileSource.VectorSource;
+import org.opentripplanner.framework.io.HttpUtils;
 import org.opentripplanner.inspector.vector.LayerBuilder;
 import org.opentripplanner.inspector.vector.LayerParameters;
 import org.opentripplanner.inspector.vector.VectorTileResponseFactory;
 import org.opentripplanner.inspector.vector.geofencing.GeofencingZonesLayerBuilder;
+import org.opentripplanner.inspector.vector.stop.StopLayerBuilder;
 import org.opentripplanner.model.FeedInfo;
 import org.opentripplanner.standalone.api.OtpServerRequestContext;
 
@@ -33,9 +40,19 @@
 @Path("/routers/{ignoreRouterId}/inspector/vectortile")
 public class GraphInspectorVectorTileResource {
 
+  private static final LayerParams REGULAR_STOPS = new LayerParams(
+    "regularStops",
+    LayerType.RegularStop
+  );
+  private static final LayerParams AREA_STOPS = new LayerParams("areaStops", LayerType.AreaStop);
+  private static final LayerParams GEOFENCING_ZONES = new LayerParams(
+    "geofencingZones",
+    LayerType.GeofencingZones
+  );
   private static final List<LayerParameters<LayerType>> DEBUG_LAYERS = List.of(
-    new LayerParams("areaStops", LayerType.AreaStop),
-    new LayerParams("geofencingZones", LayerType.GeofencingZones)
+    REGULAR_STOPS,
+    AREA_STOPS,
+    GEOFENCING_ZONES
   );
 
   private final OtpServerRequestContext serverContext;
@@ -84,13 +101,7 @@ public TileJson getTileJson(
     @PathParam("layers") String requestedLayers
   ) {
     var envelope = serverContext.worldEnvelopeService().envelope().orElseThrow();
-    List<FeedInfo> feedInfos = serverContext
-      .transitService()
-      .getFeedIds()
-      .stream()
-      .map(serverContext.transitService()::getFeedInfo)
-      .filter(Predicate.not(Objects::isNull))
-      .toList();
+    List<FeedInfo> feedInfos = feedInfos();
 
     return new TileJson(
       uri,
@@ -103,26 +114,54 @@ public TileJson getTileJson(
     );
   }
 
+  @GET
+  @Path("/style.json")
+  @Produces(MediaType.APPLICATION_JSON)
+  public StyleSpec getTileJson(@Context UriInfo uri, @Context HttpHeaders headers) {
+    var base = HttpUtils.getBaseAddress(uri, headers);
+    final String allLayers = DEBUG_LAYERS
+      .stream()
+      .map(LayerParameters::name)
+      .collect(Collectors.joining(","));
+    var url =
+      "%s/otp/routers/%s/inspector/vectortile/%s/tilejson.json".formatted(
+          base,
+          ignoreRouterId,
+          allLayers
+        );
+
+    var vectorSource = new VectorSource("debug", url);
+    return DebugStyleSpec.build(vectorSource, REGULAR_STOPS.toVectorSourceLayer(vectorSource));
+  }
+
+  @Nonnull
+  private List<FeedInfo> feedInfos() {
+    return serverContext
+      .transitService()
+      .getFeedIds()
+      .stream()
+      .map(serverContext.transitService()::getFeedInfo)
+      .filter(Predicate.not(Objects::isNull))
+      .toList();
+  }
+
   private static LayerBuilder<?> createLayerBuilder(
     LayerParameters<LayerType> layerParameters,
     Locale locale,
     OtpServerRequestContext context
   ) {
     return switch (layerParameters.type()) {
-      case AreaStop -> new AreaStopsLayerBuilder(context.transitService(), layerParameters, locale);
+      case RegularStop -> new StopLayerBuilder<>(
+        layerParameters,
+        locale,
+        e -> context.transitService().findRegularStop(e)
+      );
+      case AreaStop -> new StopLayerBuilder<>(
+        layerParameters,
+        locale,
+        e -> context.transitService().findAreaStops(e)
+      );
       case GeofencingZones -> new GeofencingZonesLayerBuilder(context.graph(), layerParameters);
     };
   }
-
-  private enum LayerType {
-    AreaStop,
-    GeofencingZones,
-  }
-
-  private record LayerParams(String name, LayerType type) implements LayerParameters<LayerType> {
-    @Override
-    public String mapper() {
-      return "DebugClient";
-    }
-  }
 }

src/main/java/org/opentripplanner/apis/vectortiles/model/LayerParams.java

@@ -0,0 +1,20 @@
+package org.opentripplanner.apis.vectortiles.model;
+
+import org.opentripplanner.apis.vectortiles.DebugStyleSpec.VectorSourceLayer;
+import org.opentripplanner.apis.vectortiles.model.TileSource.VectorSource;
+import org.opentripplanner.inspector.vector.LayerParameters;
+
+public record LayerParams(String name, LayerType type) implements LayerParameters<LayerType> {
+  @Override
+  public String mapper() {
+    return "DebugClient";
+  }
+
+  /**
+   * Convert these params to a vector source layer so that it can be used in the style for rendering
+   * in the frontend.
+   */
+  public VectorSourceLayer toVectorSourceLayer(VectorSource source) {
+    return new VectorSourceLayer(source, name);
+  }
+}