@osm-editor-kit/street-imagery-react 0.1.0-alpha.13 → 0.1.0-alpha.14

package/README.md

@@ -106,6 +106,58 @@ const { suggestions } = useViewSuggestions(viewpoints, { maxAgeYears: 2 })
 Render `FloatingPhotoViewer` inside a positioned map container. Photos from suggestions open in
 `StreetLevelImageryViewer` with `lookAtBearing={suggestion.direction.bearing}`.
 
+A host without suggested views leaves out `suggestions`, `activeDirectionKey` and `onSelectSuggestion`; the chips are then not shown. Its own buttons and links go in `titleActions`. They keep their size next to a long title and do not start a drag.
+
+For a free window over the whole page, use the viewport as container and let the box leave it until a share of it shows:
+
+```tsx
+<FloatingPhotoViewer position="fixed" minVisibleShare={0.2} onClose={close} title="Photo">
+  {viewer}
+</FloatingPhotoViewer>
+```
+
+`position="fixed"` (default `absolute`) needs an ancestor without `transform` or `filter`, and a stacking order that puts the box above the page. `minVisibleShare` (0–1) never lets the box go over the top edge, because the header is what moves it. The limit also holds when the box or the container changes size, and a minimized viewer stays within reach. Without `minVisibleShare` the box keeps 8px from the right and bottom edge.
+
+To ask "who sees this spot" instead of "what looks north here", use `usePhotosLookingAt`: flat photos within `maxDistanceMeters` (50) whose heading points at the place within `maxFlatAngleDeg` (35), and 360° photos within the distance, best first. Each candidate has `bearingToPlace`.
+
+```tsx
+const [place, setPlace] = useState<LngLat | null>(null) // set on map click
+const [index, setIndex] = useState(0)
+const { candidates } = usePhotosLookingAt(place, { maxAgeYears: 2, enabled: place != null })
+const candidate = candidates[index]
+
+{candidate ? (
+  <FloatingPhotoViewer
+    title="Photos of this place"
+    onClose={() => setPlace(null)}
+    step={{
+      onPrevious: index > 0 ? () => setIndex(index - 1) : undefined,
+      onNext: index < candidates.length - 1 ? () => setIndex(index + 1) : undefined,
+      previousLabel: 'Previous photo',
+      nextLabel: 'Next photo',
+    }}
+  >
+    <StreetLevelImageryViewer
+      photo={candidate.photo}
+      lookAtBearing={candidate.bearingToPlace}
+      … />
+  </FloatingPhotoViewer>
+) : null}
+```
+
+The list needs no chips: `step` gives the `<` `>` buttons and Alt + arrow keys. `lookAtBearing` turns Mapillary 360° photos only. The pure ranking is `rankPhotosLookingAt(place, photos, options)` in the core package.
+
+For a link that opens the same photo with the same zoom and pan, keep the view the viewer reports and pass it to `providerExternalLink`:
+
+```tsx
+const [view, setView] = useState<PhotoView | null>(null)
+
+<StreetLevelImageryViewer onViewerView={setView} … />
+<a href={providerExternalLink(photo, view)}>Open on Mapillary</a>
+```
+
+`onViewerView` runs when the view has stopped moving and when the photo changes, not during a drag, for Mapillary (`x`, `y`, `zoom`) and Panoramax (`heading`, `pitch`, `zoom`). A view of another photo is ignored by the link. What a link shows also depends on the size of the window it opens in. Panoramax in the default panel: the viewers differ, so direction and height of the view carry over, not every pixel.
+
 **Tailwind:** components use Tailwind classes. Tailwind does not scan `node_modules`, so add to your CSS:
 
 ```css
@@ -181,7 +233,7 @@ const { photos } = useAllProviderPhotos(providers, bbox, zoom) // no date: all p
 />
 ```
 
-A handle at its end means no limit, so the left end also shows photos older than the slider spans (`maxYears`, default 10). The scale itself is in the core package (`dateSliderPosition`, `dateSliderBins`, …) for a host that draws its own chart. The texts are in `messages.dateFilter`.
+A click or tap on the chart moves the nearer handle to that exact place, and a press on the chart can go on as a drag. Handles on the same spot come apart in the direction of the drag. Handles stay separate targets for mouse and touch, at least 44px high and wide, and a vertical swipe on a phone scrolls the page. A handle at its end means no limit, so the left end also shows photos older than the slider spans (`maxYears`, default 10). The scale itself is in the core package (`dateSliderPosition`, `dateSliderBins`, …) for a host that draws its own chart. The texts are in `messages.dateFilter`.
 
 ## Pick a place on the map to open elsewhere
 

package/dist/MapillaryPanel-SOHGB7JA.js

@@ -0,0 +1,3 @@
+export { MapillaryPanel } from './chunk-LZR5SZDS.js';
+import './chunk-XLBFXACK.js';
+import './chunk-GYUS2JVV.js';

package/dist/PanoramaxPanel-NAKCJHT5.js

@@ -0,0 +1,3 @@
+export { PanoramaxPanel } from './chunk-BZGY6BZC.js';
+import './chunk-XLBFXACK.js';
+import './chunk-GYUS2JVV.js';

package/dist/StreetLevelImageryViewer.d.ts

@@ -1,4 +1,4 @@
-import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
 import { type ComponentType } from 'react';
 import type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
 import type { PanoramaxPanelProps } from './panels/PanoramaxPanel';
@@ -10,6 +10,12 @@ type StreetLevelImageryViewerProps = {
     onEaseMapToPoint: (lng: number, lat: number) => void;
     /** Mapillary, Panoramax: full photo data (creator, licence …) for each image the viewer shows. */
     onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /**
+     * Mapillary, Panoramax: the view inside the shown photo (pan and zoom), after it has stopped
+     * moving and when the photo changes. Pass it to `providerExternalLink` for a link that opens the
+     * same view on the provider's site.
+     */
+    onViewerView?: (view: PhotoView) => 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`. */
@@ -28,5 +34,5 @@ type StreetLevelImageryViewerProps = {
      */
     panoramaxPanel?: ComponentType<PanoramaxPanelProps>;
 };
-export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, panoramaxPanel: PanoramaxPanelOverride, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
+export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, lookAtBearing, lookAt, outlines, hideAttribution, panoramaxPanel: PanoramaxPanelOverride, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
 export {};

package/dist/{chunk-5D7YCQUN.js → chunk-BZGY6BZC.js}

@@ -1,3 +1,4 @@
+import { watchMapillaryJsView, panoramaxZoomLevel } from './chunk-XLBFXACK.js';
 import { useViewerActions } from './chunk-GYUS2JVV.js';
 import { c } from 'react/compiler-runtime';
 import { providerExternalLink, getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
@@ -14,6 +15,7 @@ var toMs = (iso) => {
 };
 var orientation = (item) => item.properties?.["pers:interior_orientation"];
 var isPanoramaxItemSpherical = (item) => orientation(item)?.field_of_view === 360;
+var panoramaxItemFieldOfView = (item) => orientation(item)?.field_of_view ?? DEFAULT_FIELD_OF_VIEW_DEG;
 var panoramaxItemSize = (item) => orientation(item)?.sensor_array_dimensions ?? (isPanoramaxItemSpherical(item) ? [2, 1] : [4, 3]);
 var panoramaxItemNeighbour = (item, rel) => item.links?.find((link) => link.rel === rel)?.id ?? null;
 var SD_WIDTH = 2048;
@@ -354,17 +356,19 @@ var PanoramaxDataProvider = class extends DataProviderBase {
   }
 };
 var PanoramaxPanel = (t0) => {
-  const $ = c(25);
+  const $ = c(33);
   const {
     photo,
     onPhotoSelected,
     onEaseMapToPoint,
     onViewerPhoto,
+    onViewerView,
     hideAttribution: t1
   } = t0;
   const hideAttribution = t1 === void 0 ? false : t1;
   const containerRef = useRef(null);
   const viewerRef = useRef(null);
+  const dataProviderRef = useRef(null);
   const navigableRef = useRef(false);
   const pendingImageIdRef = useRef(null);
   const lastViewerPhotoIdRef = useRef(null);
@@ -416,6 +420,7 @@ var PanoramaxPanel = (t0) => {
       const dataProvider = new PanoramaxDataProvider({
         endpoint: `${getStreetImageryConfig().panoramaxApiBase}/api`
       });
+      dataProviderRef.current = dataProvider;
       const viewer = new Viewer({
         container,
         dataProvider,
@@ -535,70 +540,120 @@ var PanoramaxPanel = (t0) => {
   }
   useEffect(t5, t6);
   let t7;
+  if ($[14] !== onViewerView) {
+    t7 = (view) => onViewerView?.(view);
+    $[14] = onViewerView;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  const emitViewerView = useEffectEvent(t7);
+  const reportsView = onViewerView !== void 0;
   let t8;
-  if ($[14] !== actions || $[15] !== photo.photoId) {
-    t7 = function syncExternalPhotoSelection() {
+  if ($[16] !== emitViewerView || $[17] !== reportsView) {
+    t8 = function reportViewInPhoto() {
       const viewer_0 = viewerRef.current;
-      if (!viewer_0 || photo.photoId === lastViewerPhotoIdRef.current) {
+      if (!viewer_0 || !reportsView) {
+        return;
+      }
+      const read = async () => {
+        const [image_0, t92, fov_0] = await Promise.all([viewer_0.getImage(), viewer_0.getPointOfView(), viewer_0.getFieldOfView()]);
+        const {
+          bearing,
+          tilt
+        } = t92;
+        const item_0 = dataProviderRef.current?.getItem(image_0.id);
+        return item_0 ? {
+          providerId: "panoramax",
+          photoId: image_0.id,
+          heading: bearing,
+          pitch: tilt,
+          zoom: panoramaxZoomLevel(fov_0, panoramaxItemFieldOfView(item_0))
+        } : null;
+      };
+      return watchMapillaryJsView(viewer_0, read, (view_0) => emitViewerView(view_0));
+    };
+    $[16] = emitViewerView;
+    $[17] = reportsView;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== actions || $[20] !== reportsView) {
+    t9 = [actions, reportsView];
+    $[19] = actions;
+    $[20] = reportsView;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  useEffect(t8, t9);
+  let t10;
+  let t11;
+  if ($[22] !== actions || $[23] !== photo.photoId) {
+    t10 = function syncExternalPhotoSelection() {
+      const viewer_1 = viewerRef.current;
+      if (!viewer_1 || photo.photoId === lastViewerPhotoIdRef.current) {
         return;
       }
       actions.reset();
       lastViewerPhotoIdRef.current = photo.photoId;
       if (navigableRef.current) {
-        viewer_0.moveTo(photo.photoId).catch(_temp3);
+        viewer_1.moveTo(photo.photoId).catch(_temp3);
       } else {
         pendingImageIdRef.current = photo.photoId;
       }
     };
-    t8 = [actions, photo.photoId];
-    $[14] = actions;
-    $[15] = photo.photoId;
-    $[16] = t7;
-    $[17] = t8;
+    t11 = [actions, photo.photoId];
+    $[22] = actions;
+    $[23] = photo.photoId;
+    $[24] = t10;
+    $[25] = t11;
   } else {
-    t7 = $[16];
-    t8 = $[17];
+    t10 = $[24];
+    t11 = $[25];
   }
-  useEffect(t7, t8);
+  useEffect(t10, t11);
   const attribution = hideAttribution ? null : shownPhoto;
   const license = attribution?.details?.license;
-  let t10;
-  let t9;
-  if ($[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t9 = {
+  let t12;
+  let t13;
+  if ($[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t12 = {
       aspectRatio: "4 / 3"
     };
-    t10 = /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full" });
-    $[18] = t10;
-    $[19] = t9;
+    t13 = /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full" });
+    $[26] = t12;
+    $[27] = t13;
   } else {
-    t10 = $[18];
-    t9 = $[19];
+    t12 = $[26];
+    t13 = $[27];
   }
-  let t11;
-  if ($[20] !== attribution || $[21] !== license) {
-    t11 = attribution ? /* @__PURE__ */ jsxs("div", { className: "absolute right-0 bottom-0 flex gap-1.5 rounded-tl bg-black/50 px-1.5 py-0.5 text-[11px] leading-4 text-white", children: [
+  let t14;
+  if ($[28] !== attribution || $[29] !== license) {
+    t14 = attribution ? /* @__PURE__ */ jsxs("div", { className: "absolute right-0 bottom-0 flex gap-1.5 rounded-tl bg-black/50 px-1.5 py-0.5 text-[11px] leading-4 text-white", children: [
       /* @__PURE__ */ jsx("a", { className: "underline-offset-2 hover:underline", href: providerExternalLink(attribution), rel: "noreferrer", target: "_blank", children: ["Panoramax", attribution.creatorName].filter(Boolean).join(" \xB7 ") }),
       license ? attribution.details?.licenseUrl ? /* @__PURE__ */ jsx("a", { className: "underline-offset-2 hover:underline", href: attribution.details.licenseUrl, rel: "noreferrer", target: "_blank", children: license }) : /* @__PURE__ */ jsx("span", { children: license }) : null
     ] }) : null;
-    $[20] = attribution;
-    $[21] = license;
-    $[22] = t11;
+    $[28] = attribution;
+    $[29] = license;
+    $[30] = t14;
   } else {
-    t11 = $[22];
+    t14 = $[30];
   }
-  let t12;
-  if ($[23] !== t11) {
-    t12 = /* @__PURE__ */ jsxs("div", { className: "relative min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: t9, children: [
-      t10,
-      t11
+  let t15;
+  if ($[31] !== t14) {
+    t15 = /* @__PURE__ */ jsxs("div", { className: "relative min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: t12, children: [
+      t13,
+      t14
     ] });
-    $[23] = t11;
-    $[24] = t12;
+    $[31] = t14;
+    $[32] = t15;
   } else {
-    t12 = $[24];
+    t15 = $[32];
   }
-  return t12;
+  return t15;
 };
 function _temp() {
 }

package/dist/{chunk-QBBIFF2C.js → chunk-LZR5SZDS.js}

@@ -1,3 +1,4 @@
+import { watchMapillaryJsView } from './chunk-XLBFXACK.js';
 import { useViewerActions } from './chunk-GYUS2JVV.js';
 import { c } from 'react/compiler-runtime';
 import { viewFromOutline, SIGN_TARGET, viewFromFlatCamera, cameraPitch, panoX, bearingDeg, viewFromLocation, getStreetImageryConfig, fetchImageDetections } from '@osm-editor-kit/street-imagery';
@@ -112,12 +113,13 @@ var setMapillaryViewerOutlines = (viewer, outlines) => {
 };
 var panoCenterX = (bearing, compassAngle) => ((0.5 + (bearing - compassAngle) / 360) % 1 + 1) % 1;
 var MapillaryPanel = (t0) => {
-  const $ = c(41);
+  const $ = c(49);
   const {
     photo,
     onPhotoSelected,
     onEaseMapToPoint,
     onViewerPhoto,
+    onViewerView,
     lookAtBearing,
     lookAt,
     outlines,
@@ -340,99 +342,147 @@ var MapillaryPanel = (t0) => {
     t8 = $[22];
   }
   useEffect(t7, t8);
-  let t10;
   let t9;
-  if ($[23] !== actions || $[24] !== photo.photoId) {
-    t9 = function syncExternalPhotoSelection() {
+  if ($[23] !== onViewerView) {
+    t9 = (view) => onViewerView?.(view);
+    $[23] = onViewerView;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  const emitViewerView = useEffectEvent(t9);
+  const reportsView = onViewerView !== void 0;
+  let t10;
+  if ($[25] !== emitViewerView || $[26] !== reportsView) {
+    t10 = function reportViewInPhoto() {
       const viewer_2 = viewerRef.current;
-      if (!viewer_2 || photo.photoId === lastViewerPhotoIdRef.current) {
+      if (!viewer_2 || !reportsView) {
+        return;
+      }
+      const read = async () => {
+        const [image_1, t112, zoom] = await Promise.all([viewer_2.getImage(), viewer_2.getCenter(), viewer_2.getZoom()]);
+        const [t122, t132] = t112;
+        const x = t122 === void 0 ? 0.5 : t122;
+        const y = t132 === void 0 ? 0.5 : t132;
+        return {
+          providerId: "mapillary",
+          photoId: image_1.id,
+          x,
+          y,
+          zoom
+        };
+      };
+      return watchMapillaryJsView(viewer_2, read, (view_0) => emitViewerView(view_0));
+    };
+    $[25] = emitViewerView;
+    $[26] = reportsView;
+    $[27] = t10;
+  } else {
+    t10 = $[27];
+  }
+  let t11;
+  if ($[28] !== actions || $[29] !== reportsView) {
+    t11 = [actions, reportsView];
+    $[28] = actions;
+    $[29] = reportsView;
+    $[30] = t11;
+  } else {
+    t11 = $[30];
+  }
+  useEffect(t10, t11);
+  let t12;
+  let t13;
+  if ($[31] !== actions || $[32] !== photo.photoId) {
+    t12 = function syncExternalPhotoSelection() {
+      const viewer_3 = viewerRef.current;
+      if (!viewer_3 || photo.photoId === lastViewerPhotoIdRef.current) {
         return;
       }
       actions.reset();
       lastViewerPhotoIdRef.current = photo.photoId;
       if (navigableRef.current) {
-        viewer_2.moveTo(photo.photoId).catch(_temp4);
+        viewer_3.moveTo(photo.photoId).catch(_temp4);
       } else {
         pendingImageIdRef.current = photo.photoId;
       }
     };
-    t10 = [actions, photo.photoId];
-    $[23] = actions;
-    $[24] = photo.photoId;
-    $[25] = t10;
-    $[26] = t9;
+    t13 = [actions, photo.photoId];
+    $[31] = actions;
+    $[32] = photo.photoId;
+    $[33] = t12;
+    $[34] = t13;
   } else {
-    t10 = $[25];
-    t9 = $[26];
+    t12 = $[33];
+    t13 = $[34];
   }
-  useEffect(t9, t10);
-  let t11;
-  if ($[27] !== lookAt || $[28] !== lookAtBearing) {
-    t11 = lookAt ? `${lookAt.lngLat.join(",")}|${lookAt.outline?.length ?? 0}|${lookAt.value ?? ""}` : String(lookAtBearing);
-    $[27] = lookAt;
-    $[28] = lookAtBearing;
-    $[29] = t11;
+  useEffect(t12, t13);
+  let t14;
+  if ($[35] !== lookAt || $[36] !== lookAtBearing) {
+    t14 = lookAt ? `${lookAt.lngLat.join(",")}|${lookAt.outline?.length ?? 0}|${lookAt.value ?? ""}` : String(lookAtBearing);
+    $[35] = lookAt;
+    $[36] = lookAtBearing;
+    $[37] = t14;
   } else {
-    t11 = $[29];
+    t14 = $[37];
   }
-  const lookAtKey = t11;
-  let t12;
-  if ($[30] !== photo.photoId || $[31] !== turnToWantedBearing) {
-    t12 = function turnToTargetOnChange() {
-      const viewer_3 = viewerRef.current;
-      if (!viewer_3 || lastViewerPhotoIdRef.current !== photo.photoId) {
+  const lookAtKey = t14;
+  let t15;
+  if ($[38] !== photo.photoId || $[39] !== turnToWantedBearing) {
+    t15 = function turnToTargetOnChange() {
+      const viewer_4 = viewerRef.current;
+      if (!viewer_4 || lastViewerPhotoIdRef.current !== photo.photoId) {
         return;
       }
-      viewer_3.getImage().then((image_1) => turnToWantedBearing(viewer_3, image_1)).catch(_temp5);
+      viewer_4.getImage().then((image_2) => turnToWantedBearing(viewer_4, image_2)).catch(_temp5);
     };
-    $[30] = photo.photoId;
-    $[31] = turnToWantedBearing;
-    $[32] = t12;
+    $[38] = photo.photoId;
+    $[39] = turnToWantedBearing;
+    $[40] = t15;
   } else {
-    t12 = $[32];
+    t15 = $[40];
   }
-  let t13;
-  if ($[33] !== lookAtKey || $[34] !== photo.photoId) {
-    t13 = [lookAtKey, photo.photoId];
-    $[33] = lookAtKey;
-    $[34] = photo.photoId;
-    $[35] = t13;
+  let t16;
+  if ($[41] !== lookAtKey || $[42] !== photo.photoId) {
+    t16 = [lookAtKey, photo.photoId];
+    $[41] = lookAtKey;
+    $[42] = photo.photoId;
+    $[43] = t16;
   } else {
-    t13 = $[35];
+    t16 = $[43];
   }
-  useEffect(t12, t13);
-  let t14;
-  if ($[36] !== drawOutlines) {
-    t14 = function redrawOutlinesOnChange() {
-      const viewer_4 = viewerRef.current;
-      if (viewer_4 && navigableRef.current) {
-        drawOutlines(viewer_4);
+  useEffect(t15, t16);
+  let t17;
+  if ($[44] !== drawOutlines) {
+    t17 = function redrawOutlinesOnChange() {
+      const viewer_5 = viewerRef.current;
+      if (viewer_5 && navigableRef.current) {
+        drawOutlines(viewer_5);
       }
     };
-    $[36] = drawOutlines;
-    $[37] = t14;
+    $[44] = drawOutlines;
+    $[45] = t17;
   } else {
-    t14 = $[37];
+    t17 = $[45];
   }
-  let t15;
-  if ($[38] !== outlines) {
-    t15 = [outlines];
-    $[38] = outlines;
-    $[39] = t15;
+  let t18;
+  if ($[46] !== outlines) {
+    t18 = [outlines];
+    $[46] = outlines;
+    $[47] = t18;
   } else {
-    t15 = $[39];
+    t18 = $[47];
   }
-  useEffect(t14, t15);
-  let t16;
-  if ($[40] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t16 = /* @__PURE__ */ jsx("div", { ref: containerRef, className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: {
+  useEffect(t17, t18);
+  let t19;
+  if ($[48] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t19 = /* @__PURE__ */ jsx("div", { ref: containerRef, className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: {
       aspectRatio: "4 / 3"
     } });
-    $[40] = t16;
+    $[48] = t19;
   } else {
-    t16 = $[40];
+    t19 = $[48];
   }
-  return t16;
+  return t19;
 };
 function _temp() {
 }

package/dist/chunk-XLBFXACK.js

@@ -0,0 +1,56 @@
+// src/panels/photoView.ts
+var REPORT_DELAY_MS = 200;
+var PANORAMAX_MIN_FOV = 5;
+var PANORAMAX_MAX_FOV = 90;
+var tanOfHalf = (degrees) => Math.tan(degrees * Math.PI / 360);
+var panoramaxZoomLevel = (verticalFov, horizontalFovOfPicture) => {
+  const maxFov = Math.min(horizontalFovOfPicture * 3 / 4, PANORAMAX_MAX_FOV);
+  const fov = horizontalFovOfPicture >= 360 ? verticalFov : tanOfHalf(verticalFov) / tanOfHalf(horizontalFovOfPicture) * horizontalFovOfPicture;
+  const level = (maxFov - fov) / (maxFov - PANORAMAX_MIN_FOV) * 100;
+  return Math.min(100, Math.max(0, level));
+};
+var viewKey = (view) => JSON.stringify(view, (_, value) => typeof value === "number" ? Number(value.toFixed(4)) : value);
+var createPhotoViewReporter = (read, report, delayMs = REPORT_DELAY_MS) => {
+  let timer;
+  let last = null;
+  let stopped = false;
+  const send = () => {
+    void read().then((view) => {
+      if (view && !stopped && viewKey(view) !== last) {
+        last = viewKey(view);
+        report(view);
+      }
+    }).catch(() => {
+    });
+  };
+  return {
+    viewChanged: () => {
+      clearTimeout(timer);
+      timer = setTimeout(send, delayMs);
+    },
+    stop: () => {
+      stopped = true;
+      clearTimeout(timer);
+    }
+  };
+};
+var watchMapillaryJsView = (viewer, read, report) => {
+  const reporter = createPhotoViewReporter(read, report);
+  const {
+    viewChanged
+  } = reporter;
+  viewer.on("image", viewChanged);
+  viewer.on("pov", viewChanged);
+  viewer.on("fov", viewChanged);
+  viewer.on("moveend", viewChanged);
+  viewChanged();
+  return () => {
+    reporter.stop();
+    viewer.off("image", viewChanged);
+    viewer.off("pov", viewChanged);
+    viewer.off("fov", viewChanged);
+    viewer.off("moveend", viewChanged);
+  };
+};
+
+export { createPhotoViewReporter, panoramaxZoomLevel, watchMapillaryJsView };

package/dist/filters/PhotoDateRangeFilter.d.ts

@@ -10,7 +10,10 @@ export type PhotoDateMarker = {
 export type PhotoDateRangeFilterProps = {
     /** The chosen range, days as `YYYY-MM-DD`. No `from` and no `to`: all dates. */
     value: DateRange;
-    /** Called when a handle is released, a year label is clicked or a date input changes. */
+    /**
+     * Called when a handle is released, the chart is clicked, a year label is clicked or a date
+     * input changes.
+     */
     onChange: (range: DateRange) => void;
     /**
      * Capture times (ms) of the photos to show as marks above the slider, usually all photos in

package/dist/filters/dateSliderPointer.d.ts

@@ -0,0 +1,21 @@
+import type { DateSliderPositions } from '@osm-editor-kit/street-imagery';
+export type DateSliderHandle = 'from' | 'to';
+/** Size of one step of the slider, in positions: about a day to a month, depending on the age. */
+export declare const DATE_SLIDER_STEP = 0.001;
+/** The handles as they show. */
+export declare const HANDLE_PX = 16;
+/** Position of a point `leftPx` from the start of the track, in steps like the native handles. */
+export declare const positionOnTrack: (leftPx: number, widthPx: number) => number;
+/**
+ * The handle a press takes. `null` when the handles overlap under the press: they can only move
+ * apart, so the direction of the drag decides (`handleOfDrag`), also when both are at one end.
+ */
+export declare const pressedHandle: (positions: DateSliderPositions, press: number, widthPx: number) => DateSliderHandle | null;
+export declare const handleOfDrag: (deltaPx: number) => DateSliderHandle;
+/** A drag keeps the distance between a grabbed handle and the pointer: the handle does not jump. */
+export declare const dragPositions: (start: DateSliderPositions, press: number, handle: DateSliderHandle, deltaPx: number, widthPx: number) => DateSliderPositions;
+/** A click or tap moves the nearer handle there, or does nothing on a handle itself. */
+export declare const tapPositions: (start: DateSliderPositions, press: number, widthPx: number) => {
+    handle: DateSliderHandle;
+    positions: DateSliderPositions | null;
+};

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, ViewpointLayer,
 export { viewSuggestionLabel } from './viewpoints/viewDirectionLabels';
 export * from './viewpoints/useViewpointSessionStore';
 export * from './viewpoints/useViewSuggestions';
+export * from './viewpoints/usePhotosLookingAt';
 export type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
 export * from './mapillary/useMapillaryFeatures';
 export { LocationPickOnMap, type LocationPickOnMapProps } from './openers/LocationPickOnMap';