Add a map popup to select from multiple features if they are overlapping

client/src/components/MapView/FeatureSelectPopup.tsx

@@ -0,0 +1,37 @@
+import { Table } from 'react-bootstrap';
+import { Popup, LngLat, MapGeoJSONFeature } from 'react-map-gl/maplibre';
+
+export function FeatureSelectPopup({
+  coordinates,
+  features,
+  onClose,
+  setShowPropsPopup,
+}: {
+  coordinates: LngLat;
+  features: MapGeoJSONFeature[];
+  onClose: () => void;
+  setShowPropsPopup: ({ coordinates, feature }: { coordinates: LngLat; feature: MapGeoJSONFeature }) => void;
+}) {
+  return (
+    <Popup latitude={coordinates.lat} longitude={coordinates.lng} onClose={onClose}>
+      <p style={{ fontWeight: 'bold' }}>Overlapping features</p>
+      <Table>
+        <tbody>
+          {features.map((feature, index) => (
+            <tr className="feature-select-item" key={index}>
+              <th scope="row">{index}</th>
+              <td
+                onClick={() => {
+                  onClose();
+                  setShowPropsPopup({ coordinates, feature });
+                }}
+              >
+                {feature.properties.name || feature.properties.class}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </Popup>
+  );
+}

client/src/components/MapView/MapView.tsx

@@ -18,10 +18,12 @@ import { ContextMenuPopup } from './ContextMenuPopup.tsx';
 import { GeometryPropertyPopup } from './GeometryPropertyPopup.tsx';
 import RightMenu from './RightMenu.tsx';
 import { findSelectedDebugLayers } from '../../util/map.ts';
+import { FeatureSelectPopup } from './FeatureSelectPopup.tsx';
 
 const styleUrl = import.meta.env.VITE_DEBUG_STYLE_URL;
 
 type PopupData = { coordinates: LngLat; feature: MapGeoJSONFeature };
+type FeatureSelectData = { coordinates: LngLat; features: MapGeoJSONFeature[] };
 
 export function MapView({
   tripQueryVariables,
@@ -39,6 +41,7 @@ export function MapView({
   const onMapDoubleClick = useMapDoubleClick({ tripQueryVariables, setTripQueryVariables });
   const [showContextPopup, setShowContextPopup] = useState<LngLat | null>(null);
   const [showPropsPopup, setShowPropsPopup] = useState<PopupData | null>(null);
+  const [showFeatureSelectPopup, setShowFeatureSelectPopup] = useState<FeatureSelectData | null>(null);
   const [interactiveLayerIds, setInteractiveLayerIds] = useState<string[]>([]);
   const [cursor, setCursor] = useState<string>('auto');
   const onMouseEnter = useCallback(() => setCursor('pointer'), []);
@@ -49,11 +52,14 @@ export function MapView({
     },
   ) => {
     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 });
+      // if there are more than one feature, show a selection popup
+      if (e.features.length == 1) {
+        const feature = e.features[0];
+        setShowPropsPopup({ coordinates: e.lngLat, feature: feature });
+      }
+      if (e.features.length > 1) {
+        setShowFeatureSelectPopup({ coordinates: e.lngLat, features: e.features });
+      }
     }
   };
   const panToWorldEnvelopeIfRequired = (e: MapEvent) => {
@@ -141,6 +147,13 @@ export function MapView({
             onClose={() => setShowPropsPopup(null)}
           />
         )}
+        {showFeatureSelectPopup && (
+          <FeatureSelectPopup
+            {...showFeatureSelectPopup}
+            setShowPropsPopup={setShowPropsPopup}
+            onClose={() => setShowFeatureSelectPopup(null)}
+          />
+        )}
       </Map>
     </div>
   );

client/src/style.css

@@ -210,6 +210,13 @@
   padding: 0 5px;
 }
 
+/* feature select popup */
+
+.feature-select-item td:hover {
+  background-color: #d5d5d5;
+  cursor: pointer;
+}
+
 /* debug layer selector */
 
 .maplibregl-ctrl-group.layer-select {