@osm-editor-kit/street-imagery-react 0.1.0-alpha.3 → 0.1.0-alpha.6

package/README.md

@@ -12,6 +12,7 @@ React + MapLibre UI on top of `@osm-editor-kit/street-imagery`:
 - TanStack Query hooks to load provider data for the viewport
 - Lazy Mapillary and Panoramax viewer panels
 - Helpers for selection, thumbnails, and easing the map to a photo
+- Viewpoints + floating photo viewer: suggested views per direction, history, map layer
 
 ## Usage
 
@@ -52,3 +53,115 @@ const hits = queryStreetImageryFeatures(event)
 **Mapillary:** `createStreetImageryConfig({ mapillaryToken })` or `setStreetImageryConfig` at boot (`@osm-editor-kit/street-imagery`). **Panoramax + Vite:** see `app/vite.config.ts` for the consuming-app setup.
 
 Also: `useAllProviderPhotos`, `useProviderPhotos` / `useProviderSequences` / `useProviderMapFeatures`, `usePhotoThumbnails`, `resolveSelectedSequence`, `StreetLevelImageryViewCone`, `useViewerBearing` / `useViewerActions`, `MapillaryPanel`, `PanoramaxPanel`.
+
+## Viewpoints and floating viewer
+
+Click → viewpoints → ranked Mapillary photos per view direction → floating viewer with chips and history.
+
+```tsx
+import { viewpointFromPoint, viewpointsFromLine } from '@osm-editor-kit/street-imagery'
+import {
+  FloatingPhotoViewer,
+  getViewpointSession,
+  useViewpoints,
+  useViewSuggestions,
+  ViewpointLayer,
+  VIEWPOINT_DIRECTION_LAYER_ID,
+  viewDirectionKeyFromFeatures,
+} from '@osm-editor-kit/street-imagery-react'
+
+// On map click (add VIEWPOINT_DIRECTION_LAYER_ID to interactiveLayerIds):
+getViewpointSession().actions.open({ viewpoints: [viewpointFromPoint([lng, lat])] })
+// or for a clicked line: open({ viewpoints: viewpointsFromLine(line, [lng, lat]), line })
+
+const viewpoints = useViewpoints()
+const { suggestions } = useViewSuggestions(viewpoints, { maxAgeYears: 2 })
+// <ViewpointLayer viewpoints={viewpoints} suggestions={suggestions} activeDirectionKey={…} zoom={zoom} />
+// <FloatingPhotoViewer suggestions={suggestions} … >{viewer}</FloatingPhotoViewer>
+```
+
+Render `FloatingPhotoViewer` inside a positioned map container. Photos from suggestions open in
+`StreetLevelImageryViewer` with `lookAtBearing={suggestion.direction.bearing}`.
+
+**Tailwind:** components use Tailwind classes. Tailwind does not scan `node_modules`, so add to your CSS:
+
+```css
+@source '../node_modules/@osm-editor-kit/street-imagery-react';
+```
+
+## Look at a place, outline detections
+
+```tsx
+import { JUNCTION_DETECTION_GROUPS, matchesAnyGroup, PLACE_TARGET } from '@osm-editor-kit/street-imagery'
+import {
+  StreetLevelImageryViewer,
+  useMapillaryImageDetections,
+  useMapillaryMapFeatureImages,
+  useMapillaryMapFeaturesNear,
+} from '@osm-editor-kit/street-imagery-react'
+
+// Turn any Mapillary photo (360° or flat) towards a junction:
+<StreetLevelImageryViewer photo={photo} lookAt={{ lngLat: node, shape: PLACE_TARGET }} … />
+
+// Turn to a detected sign or object and outline it. `value` lets the viewer find the image's own
+// detection when Mapillary linked no outline for this image:
+const { data } = useMapillaryMapFeatureImages(featureId)
+<StreetLevelImageryViewer photo={…} lookAt={{ lngLat: data.feature.lngLat, value: data.feature.value }} … />
+
+// Features around a point, and only the outlines you care about in the shown image:
+const { data: features } = useMapillaryMapFeaturesNear(node, { radiusMeters: 40 })
+const { data: detections } = useMapillaryImageDetections(photo.photoId, {
+  filter: matchesAnyGroup(JUNCTION_DETECTION_GROUPS),
+  filterKey: 'junction',
+})
+<StreetLevelImageryViewer photo={photo} outlines={detections?.map((d) => ({ id: d.id, outline: d.outline }))} … />
+```
+
+- Map layers: `filter.mapFeatureValue` limits which signs/objects are drawn (`matchesAnyGroup(SIGN_GROUPS)`).
+- Suggested views: `useViewSuggestions(viewpoints, { sources: [mapillaryPhotoSource, streetViewPhotoSource] })`.
+- `turnMapillaryViewerTo` / `setMapillaryViewerOutlines` work on a mapillary-js `Viewer` you own.
+
+## Pick a place on the map to open elsewhere
+
+A button arms a location opener (see `@osm-editor-kit/street-imagery`), the next map click opens the clicked place in that service and disarms; Escape cancels.
+
+```tsx
+import {
+  LocationPickOnMap,
+  useArmedLocationOpenerId,
+  useLocationPickActions,
+} from '@osm-editor-kit/street-imagery-react'
+
+const armed = useArmedLocationOpenerId() // show it: pressed button, crosshair cursor, a hint on the map
+const { toggle, disarm } = useLocationPickActions()
+
+{
+  getLocationOpeners().map((opener) => (
+    <button key={opener.id} aria-pressed={armed === opener.id} onClick={() => toggle(opener.id)}>
+      Open in {opener.label}
+    </button>
+  ))
+}
+;<Map cursor={armed ? 'crosshair' : undefined}>
+  <LocationPickOnMap />
+</Map>
+```
+
+The map's own click handlers still run; skip them while `armed` is set if the click should only open the place. When the place is known already (a selected feature), call `openLocationInNewTab` directly instead.
+
+## Photo details dialog (optional)
+
+A modal with everything known about the shown photo: capture, camera, position, source and raw EXIF. It lives in its own entry, so apps that do not import it do not bundle it.
+
+```tsx
+import { FloatingViewerInfoButton } from '@osm-editor-kit/street-imagery-react'
+import { PHOTO_DETAILS_LABELS, PhotoDetailsDialog } from '@osm-editor-kit/street-imagery-react/photo-details'
+
+<FloatingPhotoViewer
+  titleActions={<FloatingViewerInfoButton label={PHOTO_DETAILS_LABELS.en.open} onClick={() => setOpen(true)} />}
+  …
+/>
+<PhotoDetailsDialog open={open} photo={viewerPhoto} onClose={() => setOpen(false)} />
+```
+
+`viewerPhoto` is what `onViewerPhoto` of the viewer gives (Mapillary, Panoramax).

package/dist/MapillaryPanel-N45NQY4C.js

@@ -0,0 +1,2 @@
+export { MapillaryPanel } from './chunk-53RA4OSJ.js';
+import './chunk-25UGGXIE.js';

package/dist/PanoramaxPanel-MFI4L67Z.js

@@ -0,0 +1,2 @@
+export { PanoramaxPanel } from './chunk-EQ2JKLGT.js';
+import './chunk-25UGGXIE.js';

package/dist/StreetLevelImagerySelectionOverlay.d.ts

@@ -1,9 +1,26 @@
-import type { Bbox, NormalizedPhoto, NormalizedSequence } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, NormalizedSequence } from '@osm-editor-kit/street-imagery';
+/** Lines and photo dots: near black. The shown photo's line is thicker, its marker larger. */
+export declare const BASE_COLOR = "#171717";
+/** The shown photo: fill of its marker and camera pin (black outline), and the line between. */
+export declare const SELECTION_COLOR = "#f97316";
+/** Width of the shown photo's sequence line; other lines are 1.25. */
+export declare const ACTIVE_LINE_WIDTH = 2.5;
 export type StreetLevelImagerySelectionOverlayProps = {
     selectedPhoto?: NormalizedPhoto | null;
     selectedSequence?: NormalizedSequence | null;
+    /**
+     * Where the viewer says the camera was (Mapillary: the computed position, which the view cone
+     * starts at). When it differs from the photo dot, a pin marks it and a line connects both.
+     */
+    cameraLngLat?: [number, number] | null;
+    /** Layer to draw the sequence line below, so photo dots stay on top of it. */
+    sequenceBeforeId?: string;
 };
-export declare const StreetLevelImagerySelectionOverlay: ({ selectedPhoto, selectedSequence, }: StreetLevelImagerySelectionOverlayProps) => import("react").JSX.Element | null;
+/**
+ * The shown photo on the map, bottom to top: its sequence line (only passed when the provider's
+ * own layers are off; else that layer marks it), a filled marker on its photo dot, and — when the camera position differs from the
+ * dot — a dashed connector and a pin at the camera position.
+ */
+export declare const StreetLevelImagerySelectionOverlay: ({ selectedPhoto, selectedSequence, cameraLngLat, sequenceBeforeId, }: StreetLevelImagerySelectionOverlayProps) => import("react").JSX.Element | null;
 /** Resolve sequence geometry for highlight when only photo + fetched sequences are available. */
 export declare const resolveSelectedSequence: (selectedPhoto: NormalizedPhoto | null | undefined, sequences: NormalizedSequence[], sequenceId: string | null | undefined) => NormalizedSequence | null;
-export type SequenceHighlightBbox = Bbox | null;

package/dist/StreetLevelImagerySourcesAndLayers.d.ts

@@ -6,6 +6,11 @@ import type { DataDrivenPropertyValueSpecification } from 'maplibre-gl';
 export type PhotoFilter = {
     photoTypes?: PhotoTypeFilter[];
     date?: DateRange;
+    /**
+     * Which map features (signs, objects) to draw, by Mapillary value. Use `matchesAnyGroup(...)`
+     * for groups like traffic lights or bike signs. Keep the function identity stable.
+     */
+    mapFeatureValue?: (value: string) => boolean;
 };
 export type StreetLevelImagerySourcesAndLayersProps = {
     providers: ProviderId[];
@@ -15,7 +20,7 @@ export type StreetLevelImagerySourcesAndLayersProps = {
     options: {
         config?: StreetImageryConfig;
         showSequences?: boolean;
-        /** Always-on heading wedges / 360° disks for every photo. Default true. */
+        /** Heading wedges / 360° disks per photo, from zoom 17, capped for dense areas. Default true. */
         showViewfields?: boolean;
         showViewCone?: boolean;
         showSelectionHighlight?: boolean;
@@ -26,7 +31,15 @@ export type StreetLevelImagerySourcesAndLayersProps = {
             hfov?: number | null;
             lngLat?: [number, number] | null;
         } | null;
+        /**
+         * Style colour of a photo (by type, age …). It colours the view-direction shapes; photo dots
+         * and sequence lines are black.
+         */
         photoCircleColor: DataDrivenPropertyValueSpecification<string>;
+        /** Colour of the shown photo's view cone. Default: the selection colour (orange). */
+        viewConeColor?: DataDrivenPropertyValueSpecification<string>;
+        /** Length of the shown photo's view cone, as a multiple of the per-photo shapes. Default 2.5. */
+        viewConeScale?: number;
         mapFeatureCircleColor: DataDrivenPropertyValueSpecification<string>;
     };
 };

package/dist/StreetLevelImageryViewCone.d.ts

@@ -1,4 +1,7 @@
 import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { DataDrivenPropertyValueSpecification } from 'maplibre-gl';
+/** Fill of view-direction shapes: the 360° disks, the flat wedges and the shown photo's cone. */
+export declare const VIEW_SHAPE_FILL_OPACITY = 0.25;
 export type StreetLevelImageryViewConeProps = {
     selectedPhoto: NormalizedPhoto;
     zoom: number;
@@ -7,5 +10,12 @@ export type StreetLevelImageryViewConeProps = {
         hfov?: number | null;
         lngLat?: [number, number] | null;
     } | null;
+    /**
+     * Fill colour; an expression may read the photo's `isPano` and `capturedAt`, so the cone gets
+     * the same colour as the photo's own view-direction shape.
+     */
+    color?: DataDrivenPropertyValueSpecification<string>;
+    /** Cone length as a multiple of the per-photo view-direction shapes. Default 2.5. */
+    scale?: number;
 };
-export declare const StreetLevelImageryViewCone: ({ selectedPhoto, zoom, viewerPov, }: StreetLevelImageryViewConeProps) => import("react").JSX.Element | null;
+export declare const StreetLevelImageryViewCone: ({ selectedPhoto, zoom, viewerPov, color, scale, }: StreetLevelImageryViewConeProps) => import("react").JSX.Element | null;

package/dist/StreetLevelImageryViewer.d.ts

@@ -1,10 +1,24 @@
 import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
 import type { StreetImageryPhotoSelection } from './types';
 type StreetLevelImageryViewerProps = {
     photo: NormalizedPhoto;
     groupPhotos: NormalizedPhoto[];
     onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
     onEaseMapToPoint: (lng: number, lat: number) => void;
+    /** Mapillary, Panoramax: full photo data (creator, licence …) for each image the viewer shows. */
+    onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /** Mapillary 360° photos: initial view bearing (e.g. a suggested view direction). */
+    lookAtBearing?: number | null;
+    /** Mapillary: turn and zoom to a place (sign, traffic light, junction); wins over `lookAtBearing`. */
+    lookAt?: MapillaryLookAt | null;
+    /** Mapillary: outlines to draw in the shown image. */
+    outlines?: MapillaryViewerOutline[];
+    /**
+     * Hide the viewer's own attribution (Mapillary) or legend (Panoramax); the host must then show
+     * creator and licence itself, from `onViewerPhoto`.
+     */
+    hideAttribution?: boolean;
 };
-export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
+export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
 export {};

package/dist/chunk-53RA4OSJ.js

@@ -0,0 +1,304 @@
+import { useViewerActions } from './chunk-25UGGXIE.js';
+import { viewFromOutline, SIGN_TARGET, viewFromFlatCamera, cameraPitch, panoX, bearingDeg, viewFromLocation, getStreetImageryConfig, fetchImageDetections } from '@osm-editor-kit/street-imagery';
+import 'mapillary-js/dist/mapillary.css';
+import { OutlineTag, PolygonGeometry, Viewer } from 'mapillary-js';
+import { useRef, useEffectEvent, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var isSpherical = (image) => image.cameraType === "spherical" || image.cameraType === "equirectangular";
+var mapillaryViewFor = async (viewer, image, { lngLat, shape = SIGN_TARGET, outline }) => {
+  const spherical = isSpherical(image);
+  if (outline?.length) {
+    return viewFromOutline(outline, spherical, shape.maxZoom);
+  }
+  const position = image.lngLat ?? image.originalLngLat;
+  const imageLngLat = [position.lng, position.lat];
+  const compass = image.computedCompassAngle ?? image.compassAngle;
+  if (!spherical) {
+    const focal = image.cameraParameters?.[0];
+    return focal ? viewFromFlatCamera(
+      {
+        focal,
+        width: image.width,
+        height: image.height,
+        compassAngle: compass,
+        pitch: cameraPitch(image.rotation)
+      },
+      imageLngLat,
+      lngLat,
+      shape
+    ) : void 0;
+  }
+  let x = panoX(bearingDeg(imageLngLat, lngLat), compass);
+  try {
+    viewer.setCenter([x, 0.5]);
+    const pixel = await viewer.project({ lng: lngLat[0], lat: lngLat[1] });
+    const basic = pixel ? await viewer.unprojectToBasic(pixel) : null;
+    const projected = basic?.[0];
+    if (projected != null && projected >= 0 && projected <= 1) {
+      x = projected;
+    }
+  } catch {
+  }
+  return viewFromLocation(x, { lngLat: imageLngLat, isPano: true }, lngLat, shape);
+};
+var xDistance = (a, b, spherical) => {
+  const distance = Math.abs(a - b);
+  return spherical ? Math.min(distance, 1 - distance) : distance;
+};
+var findOwnDetection = async (image, value, estimate) => {
+  const spherical = isSpherical(image);
+  const candidates = await fetchImageDetections(image.id, { filter: (v) => v === value }).catch(
+    () => []
+  );
+  const centerX = (detection) => viewFromOutline(detection.outline, spherical)?.center[0] ?? 0.5;
+  return candidates.sort(
+    (a, b) => estimate ? xDistance(centerX(a), estimate.center[0], spherical) - xDistance(centerX(b), estimate.center[0], spherical) : 0
+  )[0];
+};
+var turnMapillaryViewerTo = async (viewer, image, lookAt) => {
+  let outline = lookAt.outline?.length ? lookAt.outline : void 0;
+  let outlineId = `look-at-${image.id}`;
+  let view;
+  if (!outline) {
+    view = await mapillaryViewFor(viewer, image, lookAt);
+    const own = lookAt.value ? await findOwnDetection(image, lookAt.value, view) : void 0;
+    if (own) {
+      outline = own.outline;
+      outlineId = own.id;
+    }
+  }
+  if (outline) {
+    view = viewFromOutline(outline, isSpherical(image), (lookAt.shape ?? SIGN_TARGET).maxZoom);
+  }
+  if (!view) {
+    return false;
+  }
+  viewer.setCenter(view.center);
+  viewer.setZoom(view.zoom);
+  return outline ? { id: outlineId, outline, label: lookAt.label } : null;
+};
+var setMapillaryViewerOutlines = (viewer, outlines) => {
+  const tags = viewer.getComponent("tag");
+  tags.removeAll();
+  tags.add(
+    outlines.filter(({ outline }) => outline.length >= 3).map(({ id, outline, label, color = 16776960 }) => {
+      const first = outline[0];
+      const last = outline[outline.length - 1];
+      const closed = first[0] === last[0] && first[1] === last[1] ? outline : [...outline, first];
+      return new OutlineTag(id, new PolygonGeometry(closed), {
+        text: label,
+        textColor: color,
+        lineColor: color,
+        lineWidth: 2,
+        fillColor: color,
+        fillOpacity: 0.3
+      });
+    })
+  );
+};
+var panoCenterX = (bearing, compassAngle) => ((0.5 + (bearing - compassAngle) / 360) % 1 + 1) % 1;
+var MapillaryPanel = ({
+  photo,
+  onPhotoSelected,
+  onEaseMapToPoint,
+  onViewerPhoto,
+  lookAtBearing,
+  lookAt,
+  outlines,
+  hideAttribution = false
+}) => {
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const navigableRef = useRef(false);
+  const pendingImageIdRef = useRef(null);
+  const lastViewerPhotoIdRef = useRef(null);
+  const bearingRafRef = useRef(null);
+  const pendingBearingRef = useRef(null);
+  const actions = useViewerActions();
+  const initialPhotoIdRef = useRef(photo.photoId);
+  const initialHideAttributionRef = useRef(hideAttribution);
+  const emitPhotoSelected = useEffectEvent(onPhotoSelected);
+  const emitEaseMapToPoint = useEffectEvent(onEaseMapToPoint);
+  const turnToWantedBearing = useEffectEvent((viewer, image) => {
+    if (image.id !== photo.photoId) {
+      return;
+    }
+    if (lookAt) {
+      void turnMapillaryViewerTo(viewer, image, lookAt).then((aimedAt) => {
+        if (aimedAt && !outlines && lastViewerPhotoIdRef.current === image.id) {
+          setMapillaryViewerOutlines(viewer, [aimedAt]);
+        }
+      }).catch(() => {
+      });
+      return;
+    }
+    const spherical = image.cameraType === "spherical" || image.cameraType === "equirectangular";
+    const compass = image.computedCompassAngle ?? image.compassAngle;
+    if (lookAtBearing != null && spherical && compass != null) {
+      viewer.setCenter([panoCenterX(lookAtBearing, compass), 0.5]);
+    }
+  });
+  const drawOutlines = useEffectEvent((viewer) => {
+    setMapillaryViewerOutlines(viewer, outlines ?? []);
+  });
+  const emitViewerPhoto = useEffectEvent(
+    (viewerPhoto) => onViewerPhoto?.(viewerPhoto)
+  );
+  useEffect(
+    function resetViewerStoreOnProviderChange() {
+      return () => {
+        actions.reset();
+      };
+    },
+    [actions, photo.providerId]
+  );
+  useEffect(
+    function mountMapillaryViewer() {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const viewer = new Viewer({
+        accessToken: getStreetImageryConfig().mapillaryToken,
+        container,
+        imageId: initialPhotoIdRef.current,
+        component: {
+          attribution: !initialHideAttributionRef.current,
+          cover: false,
+          sequence: { visible: true },
+          tag: true
+        }
+      });
+      viewerRef.current = viewer;
+      lastViewerPhotoIdRef.current = initialPhotoIdRef.current;
+      const flushPendingMove = () => {
+        const pendingId = pendingImageIdRef.current;
+        if (!pendingId) {
+          return;
+        }
+        pendingImageIdRef.current = null;
+        void viewer.moveTo(pendingId).catch(() => {
+        });
+      };
+      const onNavigable = (event) => {
+        navigableRef.current = event.navigable;
+        if (event.navigable) {
+          flushPendingMove();
+        }
+      };
+      const onImage = (event) => {
+        const { image } = event;
+        lastViewerPhotoIdRef.current = image.id;
+        turnToWantedBearing(viewer, image);
+        drawOutlines(viewer);
+        emitPhotoSelected({
+          provider: "mapillary",
+          sequenceId: image.sequenceId,
+          photoId: image.id
+        });
+        const position = image.lngLat ?? image.originalLngLat;
+        if (!position) {
+          return;
+        }
+        emitViewerPhoto({
+          providerId: "mapillary",
+          photoId: image.id,
+          sequenceId: image.sequenceId,
+          capturedAt: image.capturedAt,
+          isPano: image.cameraType === "spherical" || image.cameraType === "equirectangular",
+          heading: image.computedCompassAngle ?? image.compassAngle,
+          lngLat: [position.lng, position.lat],
+          ...image.creatorUsername ? { creatorName: image.creatorUsername } : {}
+        });
+        actions.setPov({ lngLat: [position.lng, position.lat] });
+        emitEaseMapToPoint(position.lng, position.lat);
+      };
+      const flushBearing = () => {
+        bearingRafRef.current = null;
+        if (pendingBearingRef.current != null) {
+          actions.setPov({ bearing: pendingBearingRef.current });
+          pendingBearingRef.current = null;
+        }
+        void viewer.getFieldOfView().then((fov) => {
+          actions.setPov({ hfov: fov });
+        }).catch(() => {
+        });
+      };
+      const onBearing = (event) => {
+        pendingBearingRef.current = event.bearing;
+        if (bearingRafRef.current == null) {
+          bearingRafRef.current = requestAnimationFrame(flushBearing);
+        }
+      };
+      viewer.on("navigable", onNavigable);
+      viewer.on("image", onImage);
+      viewer.on("bearing", onBearing);
+      const resizeObserver = new ResizeObserver(() => {
+        viewer.resize();
+      });
+      resizeObserver.observe(container);
+      return () => {
+        if (bearingRafRef.current != null) {
+          cancelAnimationFrame(bearingRafRef.current);
+          bearingRafRef.current = null;
+        }
+        resizeObserver.disconnect();
+        viewer.off("navigable", onNavigable);
+        viewer.off("image", onImage);
+        viewer.off("bearing", onBearing);
+        viewer.remove();
+        viewerRef.current = null;
+      };
+    },
+    [actions]
+  );
+  useEffect(
+    function syncExternalPhotoSelection() {
+      const viewer = viewerRef.current;
+      if (!viewer || photo.photoId === lastViewerPhotoIdRef.current) {
+        return;
+      }
+      actions.reset();
+      lastViewerPhotoIdRef.current = photo.photoId;
+      if (navigableRef.current) {
+        void viewer.moveTo(photo.photoId).catch(() => {
+        });
+      } else {
+        pendingImageIdRef.current = photo.photoId;
+      }
+    },
+    [actions, photo.photoId]
+  );
+  const lookAtKey = lookAt ? `${lookAt.lngLat.join(",")}|${lookAt.outline?.length ?? 0}|${lookAt.value ?? ""}` : String(lookAtBearing);
+  useEffect(
+    function turnToTargetOnChange() {
+      const viewer = viewerRef.current;
+      if (!viewer || lastViewerPhotoIdRef.current !== photo.photoId) {
+        return;
+      }
+      void viewer.getImage().then((image) => turnToWantedBearing(viewer, image)).catch(() => {
+      });
+    },
+    [lookAtKey, photo.photoId]
+  );
+  useEffect(
+    function redrawOutlinesOnChange() {
+      const viewer = viewerRef.current;
+      if (viewer && navigableRef.current) {
+        drawOutlines(viewer);
+      }
+    },
+    [outlines]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
+      style: { aspectRatio: "4 / 3" }
+    }
+  );
+};
+
+export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo };