Merge pull request #5602 from leonardehrenfried/vector-debug

Add stop layer to new Debug UI

client-next/.env

@@ -1 +1,2 @@
-VITE_API_URL=/otp/routers/default/transmodel/index/graphql
+VITE_API_URL=/otp/routers/default/transmodel/index/graphql
+VITE_DEBUG_STYLE_URL=/otp/routers/default/inspector/vectortile/style.json

client-next/.env.development

@@ -1 +1,2 @@
-VITE_API_URL=http://localhost:8080/otp/routers/default/transmodel/index/graphql
+VITE_API_URL=http://localhost:8080/otp/routers/default/transmodel/index/graphql
+VITE_DEBUG_STYLE_URL=http://localhost:8080/otp/routers/default/inspector/vectortile/style.json

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

@@ -0,0 +1,27 @@
+import { LngLat, Popup } from 'react-map-gl';
+import { Table } from 'react-bootstrap';
+
+export function GeometryPropertyPopup({
+  coordinates,
+  properties,
+  onClose,
+}: {
+  coordinates: LngLat;
+  properties: { [s: string]: string };
+  onClose: () => void;
+}) {
+  return (
+    <Popup latitude={coordinates.lat} longitude={coordinates.lng} closeButton={true} onClose={() => onClose()}>
+      <Table bordered>
+        <tbody>
+          {Object.entries(properties).map(([key, value]) => (
+            <tr key={key}>
+              <th scope="row">{key}</th>
+              <td>{value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </Popup>
+  );
+}

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

@@ -1,12 +1,12 @@
-import { LngLat, Map, NavigationControl } from 'react-map-gl';
+import { LngLat, Map, MapboxGeoJSONFeature, NavigationControl } 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 { GeometryPropertyPopup } from './GeometryPropertyPopup.tsx';
 
 // TODO: this should be configurable
 const initialViewState = {
@@ -15,6 +15,10 @@ const initialViewState = {
   zoom: 4,
 };
 
+const styleUrl = import.meta.env.VITE_DEBUG_STYLE_URL;
+
+type PopupData = { coordinates: LngLat; feature: MapboxGeoJSONFeature };
+
 export function MapView({
   tripQueryVariables,
   setTripQueryVariables,
@@ -29,20 +33,41 @@ 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);
+  const showFeaturePropPopup = (
+    e: mapboxgl.MapMouseEvent & {
+      features?: mapboxgl.MapboxGeoJSONFeature[] | undefined;
+    },
+  ) => {
+    if (e.features) {
+      // if you click on a cluster of map features it's possible that there are multiple
+      // to select from. we are using the first one instead of presenting a selection UI.
+      // you can always zoom in closer if you want to make a more specific click.
+      const feature = e.features[0];
+      setShowPropsPopup({ coordinates: e.lngLat, feature: feature });
+    }
+  };
 
   return (
     <div className="map-container below-content">
       <Map
         // @ts-ignore
         mapLib={import('maplibre-gl')}
         // @ts-ignore
-        mapStyle={mapStyle}
+        mapStyle={styleUrl}
         initialViewState={initialViewState}
         onDblClick={onMapDoubleClick}
         onContextMenu={(e) => {
-          setShowPopup(e.lngLat);
+          setShowContextPopup(e.lngLat);
         }}
+        interactiveLayerIds={['regular-stop']}
+        onClick={showFeaturePropPopup}
+        // 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,12 +78,19 @@ 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?.feature?.properties && (
+          <GeometryPropertyPopup
+            coordinates={showPropsPopup?.coordinates}
+            properties={showPropsPopup?.feature?.properties}
+            onClose={() => setShowPropsPopup(null)}
           />
         )}
       </Map>