@osm-editor-kit/street-imagery-react 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/index.js

@@ -1,9 +1,7 @@
-import { useStreetImageryI18n } from './chunk-EE7V3OIZ.js';
-export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-EE7V3OIZ.js';
-export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-53RA4OSJ.js';
-export { PanoramaxPanel } from './chunk-EQ2JKLGT.js';
+import { useStreetImageryI18n } from './chunk-6EMFFIL2.js';
+export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-6EMFFIL2.js';
 export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat } from './chunk-25UGGXIE.js';
-import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, viewConeGeoJson, viewShapeRadiusMeters, setStreetImageryConfig, viewfieldLayerId, photoLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoMatchesFilters, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, formatLocalDateTime, formatMonth, formatRelativeDate, formatDateTooltip, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, fetchImageDetections, findLocationOpener, mapillaryValueName, mapillaryIconUrl, openLocationInNewTab, alignLineToPoints, coneRadiusMeters, mapFeaturesToFeatureCollection, emptyPointCollection, buildMapFeatureLayerFilter, featureSourceId, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, VIEWFIELD_MIN_ZOOM } from '@osm-editor-kit/street-imagery';
+import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, fetchedSequencesMinZoom, viewConeGeoJson, viewShapeRadiusMeters, setStreetImageryConfig, viewfieldLayerId, photoLayerId, photoTargetLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoMatchesFilters, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, formatLocalDateTime, formatMonth, formatRelativeDate, formatDateTooltip, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, fetchImageDetections, bestTargetImage, findLocationOpener, MAP_FEATURE_COLOR, mapillaryValueName, mapillaryIconUrl, dateRangeToSliderPositions, sliderPositionsToDateRange, dateSliderBins, dateSliderPosition, yearsAgoMs, parseIsoDateStartMs, openLocationInNewTab, formatDate, isIsoDate, alignLineToPoints, coneRadiusMeters, mapFeaturesToFeatureCollection, emptyPointCollection, buildMapFeatureLayerFilter, featureSourceId, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceTilesSourceId, renameExpressionProperties, sequenceTilesLayerId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, VIEWFIELD_MIN_ZOOM } from '@osm-editor-kit/street-imagery';
 import { Source, Layer, useMap } from 'react-map-gl/maplibre';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { lazy, useEffect, Fragment as Fragment$1, Suspense, useState, useRef, useEffectEvent } from 'react';
@@ -21,7 +19,8 @@ var StreetLevelImagerySelectionOverlay = ({
   selectedPhoto,
   selectedSequence,
   cameraLngLat,
-  sequenceBeforeId
+  sequenceBeforeId,
+  beforeId
 }) => {
   const photoLngLat = selectedPhoto?.lngLat;
   const cameraDiffers = photoLngLat != null && cameraLngLat != null && distanceMeters(photoLngLat, cameraLngLat) > SAME_POSITION_METERS;
@@ -73,7 +72,7 @@ var StreetLevelImagerySelectionOverlay = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
-        beforeId: sequenceBeforeId,
+        beforeId: sequenceBeforeId ?? beforeId,
         id: "sequence-highlight-layer",
         type: "line",
         source: SEQUENCE_HIGHLIGHT_SOURCE_ID,
@@ -85,6 +84,7 @@ var StreetLevelImagerySelectionOverlay = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: "selection-connector-layer",
         type: "line",
         source: CONNECTOR_SOURCE_ID,
@@ -95,6 +95,7 @@ var StreetLevelImagerySelectionOverlay = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: "selection-highlight-layer",
         type: "circle",
         source: POINTS_SOURCE_ID,
@@ -110,6 +111,7 @@ var StreetLevelImagerySelectionOverlay = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: "selection-camera-layer",
         type: "circle",
         source: POINTS_SOURCE_ID,
@@ -137,10 +139,10 @@ var withinBbox = (bbox) => (item) => {
   const [lng, lat] = item.lngLat;
   return lng >= bbox[0] && lng <= bbox[2] && lat >= bbox[1] && lat <= bbox[3];
 };
-var useProviderPhotos = (providerId, bbox, zoom) => {
+var useProviderPhotos = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
   const meta = providerById[providerId];
-  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= meta.minZoom && adapter?.fetchPhotos != null;
+  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(meta.minZoom, minZoom) && adapter?.fetchPhotos != null;
   return useQuery({
     queryKey: ["provider-photos", providerId, bboxKey(bbox), zoom],
     queryFn: async ({ signal }) => {
@@ -151,11 +153,11 @@ var useProviderPhotos = (providerId, bbox, zoom) => {
     placeholderData: (previous) => previous
   });
 };
-var useProviderSequences = (providerId, bbox, zoom) => {
+var useProviderSequences = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
   const meta = providerById[providerId];
-  const sequencesMinZoom = meta.sequencesMinZoom;
-  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= sequencesMinZoom && adapter?.fetchSequences != null;
+  const sequencesMinZoom = fetchedSequencesMinZoom(providerId);
+  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(sequencesMinZoom, minZoom) && adapter?.fetchSequences != null;
   return useQuery({
     queryKey: ["provider-sequences", providerId, bboxKey(bbox), zoom],
     queryFn: ({ signal }) => adapter?.fetchSequences?.(bbox, zoom, signal) ?? [],
@@ -163,10 +165,10 @@ var useProviderSequences = (providerId, bbox, zoom) => {
     placeholderData: (previous) => previous
   });
 };
-var useProviderMapFeatures = (providerId, bbox, zoom) => {
+var useProviderMapFeatures = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
   const meta = providerById[providerId];
-  const enabled = meta.kind === "mapFeature" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= meta.minZoom && adapter?.fetchMapFeatures != null;
+  const enabled = meta.kind === "mapFeature" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(meta.minZoom, minZoom) && adapter?.fetchMapFeatures != null;
   return useQuery({
     queryKey: ["provider-map-features", providerId, bboxKey(bbox), zoom],
     queryFn: async ({ signal }) => {
@@ -194,7 +196,8 @@ var StreetLevelImageryViewCone = ({
   zoom,
   viewerPov,
   color = SELECTION_COLOR,
-  scale = 2.5
+  scale = 2.5,
+  beforeId
 }) => {
   const apex = viewerPov?.lngLat ?? selectedPhoto.lngLat;
   const isPano = selectedPhoto.isPano === true;
@@ -207,6 +210,9 @@ var StreetLevelImageryViewCone = ({
   } else if (selectedPhoto.providerId === "panoramax") {
     bearing = viewerPov?.bearing ?? selectedPhoto.heading;
     fov = 30;
+  } else if (selectedPhoto.providerId === "mapillary") {
+    bearing = viewerPov?.bearing ?? selectedPhoto.heading;
+    fov = viewerPov?.hfov ?? 30;
   } else {
     bearing = selectedPhoto.heading;
     fov = 30;
@@ -224,6 +230,7 @@ var StreetLevelImageryViewCone = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: CONE_FILL_LAYER_ID,
         type: "fill",
         source: CONE_SOURCE_ID,
@@ -271,6 +278,7 @@ var AGE_SHADE = [
     BASE_COLOR
   ]
 ];
+var PHOTO_TARGET_RADIUS_PX = 10;
 var PHOTO_SORT_KEY = ["coalesce", ["get", "capturedAt"], 0];
 var FEATURE_SORT_KEY = ["coalesce", ["get", "lastSeenAt"], 0];
 var PhotoProviderLayer = ({
@@ -283,15 +291,20 @@ var PhotoProviderLayer = ({
   photoCircleColor,
   activeSequenceId,
   hasActiveSequence,
-  shownPhotoId
+  shownPhotoId,
+  beforeId,
+  minZoom
 }) => {
   const adapter = adapterById[providerId];
   const meta = providerById[providerId];
-  const { data: photos = [] } = useProviderPhotos(providerId, bbox, zoom);
-  const { data: sequences = [] } = useProviderSequences(providerId, bbox, zoom);
-  const visiblePhotos = zoom >= meta.minZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
+  const photosMinZoom = Math.max(meta.minZoom, minZoom);
+  const fetchedLinesMinZoom = fetchedSequencesMinZoom(providerId);
+  const sequencesMinZoom = Math.max(fetchedLinesMinZoom, minZoom);
+  const { data: photos = [] } = useProviderPhotos(providerId, bbox, zoom, { minZoom });
+  const { data: sequences = [] } = useProviderSequences(providerId, bbox, zoom, { minZoom });
+  const visiblePhotos = zoom >= photosMinZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
   const drawBbox = bbox ? padBbox(bbox, 0.25) : null;
-  const photoCollection = zoom >= meta.minZoom ? photosToFeatureCollection(
+  const photoCollection = zoom >= photosMinZoom ? photosToFeatureCollection(
     drawBbox ? visiblePhotos.filter((photo) => lngLatInBbox(photo.lngLat, drawBbox)) : visiblePhotos
   ) : emptyPointCollection();
   const viewfieldsActive = showViewfields && zoom >= VIEWFIELD_MIN_ZOOM;
@@ -342,7 +355,7 @@ var PhotoProviderLayer = ({
       sequenceCapturedAtById.set(photo.sequenceId, photo.capturedAt);
     }
   }
-  const filteredSequences = showSequences && zoom >= meta.sequencesMinZoom ? sequences.map((sequence) => {
+  const filteredSequences = showSequences && zoom >= sequencesMinZoom ? sequences.map((sequence) => {
     if (sequence.capturedAt != null) return sequence;
     const fromPhotos = sequenceCapturedAtById.get(sequence.sequenceId);
     return fromPhotos != null ? { ...sequence, capturedAt: fromPhotos } : sequence;
@@ -385,6 +398,8 @@ var PhotoProviderLayer = ({
       }
     };
   });
+  const sequenceTiles = showSequences ? adapter?.sequenceTiles?.() : null;
+  const sequenceTilesMinZoom = sequenceTiles ? Math.max(sequenceTiles.minZoom, minZoom) : 0;
   const sequenceCollection = alignedSequences.length > 0 ? sequencesToFeatureCollection(alignedSequences) : emptyLineCollection();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     meta.coverageTiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -401,6 +416,7 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: `coverage-tiles-${providerId}`,
           minzoom: meta.coverageTiles.minZoom,
           paint: { "raster-opacity": 0.7 },
@@ -409,6 +425,48 @@ var PhotoProviderLayer = ({
         }
       )
     ] }) : null,
+    sequenceTiles && sequenceTilesMinZoom < fetchedLinesMinZoom ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Source,
+        {
+          id: sequenceTilesSourceId(providerId),
+          type: "vector",
+          tiles: sequenceTiles.tiles,
+          minzoom: sequenceTiles.minZoom,
+          maxzoom: sequenceTiles.maxZoom
+        },
+        sequenceTilesSourceId(providerId)
+      ),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          beforeId,
+          id: sequenceTilesLayerId(providerId),
+          type: "line",
+          source: sequenceTilesSourceId(providerId),
+          "source-layer": sequenceTiles.sourceLayer,
+          minzoom: sequenceTilesMinZoom,
+          maxzoom: fetchedLinesMinZoom,
+          filter: renameExpressionProperties(photoFilter, sequenceTiles.properties),
+          layout: {
+            "line-cap": "round",
+            "line-join": "round",
+            "line-sort-key": renameExpressionProperties(
+              ["case", inActiveSequence, 1, 0],
+              sequenceTiles.properties
+            )
+          },
+          paint: {
+            "line-color": renameExpressionProperties(photoCircleColor, sequenceTiles.properties),
+            "line-width": renameExpressionProperties(
+              ["case", inActiveSequence, ACTIVE_LINE_WIDTH, 1.25],
+              sequenceTiles.properties
+            ),
+            "line-opacity": renameExpressionProperties(lineOpacity, sequenceTiles.properties)
+          }
+        }
+      )
+    ] }) : null,
     adapter?.fetchSequences && showSequences ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Source,
@@ -422,6 +480,7 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: sequenceLayerId(providerId),
           type: "line",
           source: sequenceSourceId(providerId),
@@ -451,6 +510,7 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: viewfieldLayerId(providerId),
           type: "fill",
           source: viewfieldSrcId,
@@ -465,6 +525,7 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: viewfieldLineLayerId(providerId),
           type: "line",
           source: viewfieldSrcId,
@@ -490,6 +551,19 @@ var PhotoProviderLayer = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
+        id: photoTargetLayerId(providerId),
+        type: "circle",
+        source: photoSrcId,
+        filter: photoFilter,
+        layout: { "circle-sort-key": PHOTO_SORT_KEY },
+        paint: { "circle-radius": PHOTO_TARGET_RADIUS_PX, "circle-opacity": 0 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        beforeId,
         id: photoLayerId(providerId),
         type: "circle",
         source: photoSrcId,
@@ -508,12 +582,14 @@ var MapFeatureProviderLayer = ({
   bbox,
   zoom,
   filter,
-  mapFeatureCircleColor
+  mapFeatureCircleColor,
+  beforeId,
+  minZoom
 }) => {
   const meta = providerById[providerId];
-  const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom);
+  const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom, { minZoom });
   const valueFilter = filter?.mapFeatureValue;
-  const featureCollection = zoom >= meta.minZoom ? mapFeaturesToFeatureCollection(
+  const featureCollection = zoom >= Math.max(meta.minZoom, minZoom) ? mapFeaturesToFeatureCollection(
     valueFilter ? features.filter((feature) => valueFilter(feature.value)) : features
   ) : emptyPointCollection();
   const featureFilter = buildMapFeatureLayerFilter(filter?.date);
@@ -532,6 +608,7 @@ var MapFeatureProviderLayer = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: featureLayerId(providerId),
         type: "circle",
         source: featureSrcId,
@@ -567,7 +644,9 @@ var StreetLevelImagerySourcesAndLayers = ({
     viewConeColor,
     viewConeScale,
     photoCircleColor,
-    mapFeatureCircleColor
+    mapFeatureCircleColor,
+    beforeId,
+    minZoom = 0
   } = options;
   useEffect(
     function applyStreetImageryConfig() {
@@ -594,6 +673,8 @@ var StreetLevelImagerySourcesAndLayers = ({
     providers.map((providerId) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
       ProviderLayer,
       {
+        beforeId,
+        minZoom,
         bbox,
         filter,
         mapFeatureCircleColor,
@@ -610,6 +691,7 @@ var StreetLevelImagerySourcesAndLayers = ({
     showViewCone && selectedPhoto ? /* @__PURE__ */ jsx(
       StreetLevelImageryViewCone,
       {
+        beforeId,
         color: viewConeColor ?? SELECTION_COLOR,
         scale: viewConeScale,
         selectedPhoto,
@@ -620,6 +702,7 @@ var StreetLevelImagerySourcesAndLayers = ({
     showSelectionHighlight ? /* @__PURE__ */ jsx(
       StreetLevelImagerySelectionOverlay,
       {
+        beforeId,
         cameraLngLat: viewerPov?.lngLat,
         selectedPhoto,
         selectedSequence: providerDrawsSequences ? null : selectedSequence,
@@ -628,13 +711,13 @@ var StreetLevelImagerySourcesAndLayers = ({
     ) : null
   ] });
 };
-var MapillaryPanel2 = lazy(
-  () => import('./MapillaryPanel-N45NQY4C.js').then((module) => ({
+var MapillaryPanel = lazy(
+  () => import('./MapillaryPanel-FAXVZH37.js').then((module) => ({
     default: module.MapillaryPanel
   }))
 );
-var PanoramaxPanel2 = lazy(
-  () => import('./PanoramaxPanel-MFI4L67Z.js').then((module) => ({
+var PanoramaxPanel = lazy(
+  () => import('./PanoramaxPanel-BTHEMKYY.js').then((module) => ({
     default: module.PanoramaxPanel
   }))
 );
@@ -655,7 +738,7 @@ var StreetLevelImageryViewer = ({
 }) => {
   if (photo.providerId === "mapillary") {
     return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
-      MapillaryPanel2,
+      MapillaryPanel,
       {
         groupPhotos,
         hideAttribution,
@@ -671,7 +754,7 @@ var StreetLevelImageryViewer = ({
   }
   if (photo.providerId === "panoramax") {
     return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
-      PanoramaxPanel2,
+      PanoramaxPanel,
       {
         groupPhotos,
         hideLegend: hideAttribution,
@@ -686,6 +769,7 @@ var StreetLevelImageryViewer = ({
 };
 var streetImageryInteractiveLayerIds = (providers) => [
   ...providers.map((providerId) => photoLayerId(providerId)),
+  ...providers.map((providerId) => photoTargetLayerId(providerId)),
   ...providers.map((providerId) => viewfieldLayerId(providerId)),
   ...providers.map((providerId) => featureLayerId(providerId))
 ];
@@ -694,6 +778,10 @@ var parseProviderIdFromLayerId = (layerId) => {
   if (photoMatch) {
     return photoMatch[1];
   }
+  const targetMatch = layerId.match(/^photo-targets-(.+)$/);
+  if (targetMatch) {
+    return targetMatch[1];
+  }
   const viewfieldMatch = layerId.match(/^viewfields-(.+)$/);
   if (viewfieldMatch) {
     return viewfieldMatch[1];
@@ -718,7 +806,7 @@ var queryStreetImageryFeatures = (event) => {
       continue;
     }
     const props = feature.properties ?? {};
-    if (layerId.startsWith("photos-") || layerId.startsWith("viewfields-")) {
+    if (layerId.startsWith("photos-") || layerId.startsWith("photo-targets-") || layerId.startsWith("viewfields-")) {
       const photoId = props.photoId;
       if (photoId == null) {
         continue;
@@ -880,6 +968,13 @@ var viewSuggestionLabel = ({ viewpoint, direction }, messages) => messages.viewD
 var DEFAULT_LAYOUT = { right: 16, bottom: 32, width: 420, minimized: false };
 var MIN_WIDTH = 280;
 var EDGE = 8;
+var hasStoredLayout = (storageKey) => {
+  try {
+    return localStorage.getItem(storageKey) != null;
+  } catch {
+    return false;
+  }
+};
 var readLayout = (storageKey) => {
   try {
     const raw = localStorage.getItem(storageKey);
@@ -1024,8 +1119,8 @@ var FloatingPhotoViewer = ({
   activeDirectionKey,
   onSelectSuggestion,
   shownPhotoId,
-  canGoBack,
-  canGoForward,
+  canGoBack = false,
+  canGoForward = false,
   onBack,
   onForward,
   onClose,
@@ -1035,12 +1130,16 @@ var FloatingPhotoViewer = ({
   children,
   footer,
   drawer,
-  storageKey = "street-imagery:floating-viewer"
+  storageKey = "street-imagery:floating-viewer",
+  defaultPosition
 }) => {
   const { messages } = useStreetImageryI18n();
   const severalViewpoints = new Set(suggestions.map((suggestion) => suggestion.viewpoint.id)).size > 1;
   const [layout, setLayout] = useState(() => readLayout(storageKey));
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [moved, setMoved] = useState(() => hasStoredLayout(storageKey));
+  const atTopLeft = defaultPosition?.corner === "top-left" && !moved;
+  const position = atTopLeft ? { left: defaultPosition.left ?? EDGE, top: defaultPosition.top ?? EDGE } : { right: layout.right, bottom: layout.bottom };
   const dragRef = useRef(null);
   const updateLayout = (next) => {
     setLayout(next);
@@ -1054,9 +1153,9 @@ var FloatingPhotoViewer = ({
     if (event.key === "Escape") {
       onClose();
     } else if (event.key === "[" && canGoBack) {
-      onBack();
+      onBack?.();
     } else if (event.key === "]" && canGoForward) {
-      onForward();
+      onForward?.();
     } else if (event.key === "ArrowLeft" && event.altKey) {
       step?.onPrevious?.();
     } else if (event.key === "ArrowRight" && event.altKey) {
@@ -1072,7 +1171,16 @@ var FloatingPhotoViewer = ({
       return;
     }
     event.currentTarget.setPointerCapture(event.pointerId);
-    dragRef.current = { x: event.clientX, y: event.clientY, layout, mode };
+    const box = event.currentTarget.closest("section");
+    const container = box?.offsetParent;
+    const start = atTopLeft && box && container ? {
+      ...layout,
+      right: container.clientWidth - box.offsetLeft - box.offsetWidth,
+      bottom: container.clientHeight - box.offsetTop - box.offsetHeight
+    } : layout;
+    setLayout(start);
+    setMoved(true);
+    dragRef.current = { x: event.clientX, y: event.clientY, layout: start, mode };
   };
   const onDrag = (event) => {
     const drag = dragRef.current;
@@ -1102,7 +1210,7 @@ var FloatingPhotoViewer = ({
       {
         className: "absolute z-10 inline-flex items-center gap-2 rounded-full bg-white px-3 py-1.5 text-sm font-medium text-slate-800 shadow-lg ring-1 ring-slate-200 hover:bg-slate-50",
         onClick: () => updateLayout({ ...layout, minimized: false }),
-        style: { right: layout.right, bottom: layout.bottom },
+        style: position,
         type: "button",
         children: [
           /* @__PURE__ */ jsx(Icon, { path: ICONS.expand }),
@@ -1117,8 +1225,7 @@ var FloatingPhotoViewer = ({
       "aria-label": messages.viewer.regionLabel,
       className: "absolute z-10 flex max-h-[calc(100%-1rem)] flex-col overflow-hidden rounded-xl bg-white shadow-xl ring-1 ring-slate-200",
       style: {
-        right: layout.right,
-        bottom: layout.bottom,
+        ...position,
         width: `min(${layout.width}px, calc(100% - 1rem))`
       },
       children: [
@@ -1162,16 +1269,26 @@ var FloatingPhotoViewer = ({
                 /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate px-1 text-sm font-semibold text-slate-800", children: title }),
                 titleActions
               ] }),
-              /* @__PURE__ */ jsx(ToolbarButton, { disabled: !canGoBack, label: messages.viewer.backInHistory, onClick: onBack, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.undo }) }),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  disabled: !canGoForward,
-                  label: messages.viewer.forwardInHistory,
-                  onClick: onForward,
-                  children: /* @__PURE__ */ jsx(Icon, { path: ICONS.redo })
-                }
-              ),
+              onBack && onForward ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    disabled: !canGoBack,
+                    label: messages.viewer.backInHistory,
+                    onClick: onBack,
+                    children: /* @__PURE__ */ jsx(Icon, { path: ICONS.undo })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    disabled: !canGoForward,
+                    label: messages.viewer.forwardInHistory,
+                    onClick: onForward,
+                    children: /* @__PURE__ */ jsx(Icon, { path: ICONS.redo })
+                  }
+                )
+              ] }) : null,
               /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
@@ -1484,6 +1601,20 @@ var useMapillaryImageDetections = (imageId, { filter, filterKey } = {}) => useQu
   enabled: !!imageId,
   staleTime: STALE_TIME
 });
+var useSelectedMapillaryFeature = ({
+  featureId,
+  shownPhotoId,
+  minCapturedAt,
+  shape
+}) => {
+  const { data, isLoading, isError } = useMapillaryMapFeatureImages(featureId, { shape });
+  const shownImage = data?.images.find((image) => image.id === shownPhotoId) ?? null;
+  const firstImage = data ? bestTargetImage(data.images, data.feature.lngLat, {
+    minCapturedAt: minCapturedAt ?? void 0,
+    shape
+  }) ?? null : null;
+  return { data: data ?? null, isLoading, isError, shownImage, firstImage };
+};
 var useLocationPickStore = create()((set) => ({
   armedOpenerId: null,
   actions: {
@@ -1535,6 +1666,70 @@ var LocationPickOnMap = ({ onPick }) => {
   );
   return null;
 };
+var SelectedMapFeatureLayer = ({
+  data,
+  shownImage,
+  providers,
+  bbox,
+  zoom,
+  color = MAP_FEATURE_COLOR
+}) => {
+  const drawnFeatures = useAllProviderMapFeatures(providers, bbox, zoom);
+  const target = data ? drawnFeatures.find((feature) => feature.featureId === data.feature.id)?.lngLat ?? data.feature.lngLat : null;
+  const camera = shownImage?.lngLat;
+  const points = {
+    type: "FeatureCollection",
+    features: target ? [{ type: "Feature", properties: {}, geometry: { type: "Point", coordinates: target } }] : []
+  };
+  const line = {
+    type: "FeatureCollection",
+    features: target && camera ? [
+      {
+        type: "Feature",
+        properties: {},
+        geometry: { type: "LineString", coordinates: [camera, target] }
+      }
+    ] : []
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Source, { data: line, id: "selected-map-feature-line", type: "geojson" }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "selected-map-feature-line",
+        paint: { "line-color": SELECTION_COLOR, "line-width": 1.5, "line-dasharray": [2, 1.5] },
+        source: "selected-map-feature-line",
+        type: "line"
+      }
+    ),
+    /* @__PURE__ */ jsx(Source, { data: points, id: "selected-map-feature-point", type: "geojson" }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "selected-map-feature-disk",
+        paint: {
+          "circle-radius": 17,
+          "circle-color": color,
+          "circle-opacity": VIEW_SHAPE_FILL_OPACITY
+        },
+        source: "selected-map-feature-point",
+        type: "circle"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "selected-map-feature-dot",
+        paint: {
+          "circle-radius": ["interpolate", ["linear"], ["zoom"], 10, 1.8, 14, 3.6, 18, 4.8],
+          "circle-color": color
+        },
+        source: "selected-map-feature-point",
+        type: "circle"
+      }
+    )
+  ] });
+};
 var MAPILLARY_FEATURE_BAR_LABELS = {
   en: {
     name: (value) => mapillaryValueName(value, "en"),
@@ -1630,5 +1825,234 @@ ${labels.dayPhotos(day.images.length, active && day.images.length > 1)}`,
     )
   ] });
 };
+var DEFAULT_YEAR_LINES = [1, 2, 3, 4];
+var BINS = 60;
+var STEP = 1e-3;
+var CHART_HEIGHT_PX = 36;
+var RED = "#dc2626";
+var HANDLE_CLASS = "pointer-events-none absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none bg-transparent focus:outline-none [&::-webkit-slider-runnable-track]:appearance-none [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-slate-800 [&::-webkit-slider-thumb]:shadow [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-slate-800 [&::-moz-range-thumb]:shadow focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-sky-500 focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-sky-500";
+var percent = (position) => `${position * 100}%`;
+var PhotoDateRangeFilter = ({
+  value,
+  onChange,
+  capturedAt,
+  yearLines = DEFAULT_YEAR_LINES,
+  recommendedMaxAgeYears,
+  markers = [],
+  maxYears,
+  now: nowProp,
+  dateInputs = "collapsed",
+  className,
+  allDatesAction = true
+}) => {
+  const { locale, messages } = useStreetImageryI18n();
+  const text = messages.dateFilter;
+  const [startNow] = useState(() => Date.now());
+  const now = nowProp ?? startNow;
+  const scale = { now, maxYears };
+  const [dragged, setDragged] = useState(null);
+  const fromInput = useRef(null);
+  const toInput = useRef(null);
+  const positions = dragged ?? dateRangeToSliderPositions(value, scale);
+  const shownRange = dragged ? sliderPositionsToDateRange(dragged, scale) : value;
+  const readPositions = (moved) => {
+    const from = Number(fromInput.current?.value ?? positions.from);
+    const to = Number(toInput.current?.value ?? positions.to);
+    return moved === "from" ? { from: Math.min(from, to), to } : { from, to: Math.max(from, to) };
+  };
+  const commitOnRelease = (moved) => (input) => {
+    if (!input) {
+      return void 0;
+    }
+    const commit = () => {
+      setDragged(null);
+      const next = sliderPositionsToDateRange(readPositions(moved), scale);
+      const other = moved === "from" ? "to" : "from";
+      onChange({ ...next, [other]: value[other] });
+    };
+    input.addEventListener("change", commit);
+    return () => {
+      input.removeEventListener("change", commit);
+    };
+  };
+  const trackDrag = (moved, event) => {
+    if (event.type === "input") {
+      setDragged(readPositions(moved));
+    }
+  };
+  const bins = capturedAt ? dateSliderBins(capturedAt, scale, BINS) : [];
+  const maxCount = Math.max(1, ...bins);
+  const years = [
+    ...new Set(recommendedMaxAgeYears ? [...yearLines, recommendedMaxAgeYears] : yearLines)
+  ].map((count) => ({ count, position: dateSliderPosition(yearsAgoMs(count, now), scale) })).filter(({ position }) => position > 0 && position < 1);
+  const shownMarkers = markers.map((marker) => {
+    const time = typeof marker.date === "number" ? marker.date : parseIsoDateStartMs(marker.date);
+    return { ...marker, position: dateSliderPosition(time, scale) };
+  }).filter(({ position }) => position > 0 && position < 1);
+  const day = (isoDate) => formatDate(parseIsoDateStartMs(isoDate), locale);
+  const rangeLabel = shownRange.from && shownRange.to ? text.between(day(shownRange.from), day(shownRange.to)) : shownRange.from ? text.since(day(shownRange.from)) : shownRange.to ? text.until(day(shownRange.to)) : text.allDates;
+  const setYears = (count) => {
+    onChange({ from: new Date(yearsAgoMs(count, now)).toISOString().slice(0, 10) });
+  };
+  const setDay = (key, input) => {
+    if (input === "") {
+      onChange({ ...value, [key]: void 0 });
+    } else if (isIsoDate(input)) {
+      onChange({ ...value, [key]: input });
+    }
+  };
+  const isAllDates = !shownRange.from && !shownRange.to;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative",
+        style: { height: CHART_HEIGHT_PX, marginTop: shownMarkers.length > 0 ? 14 : 0 },
+        children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 flex items-end", children: bins.map((count, index) => {
+            const start = index / BINS;
+            const inRange = start + 1 / BINS > positions.from && start < positions.to;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `flex-1 rounded-t-[1px] ${inRange ? "bg-slate-500" : "bg-slate-300"}`,
+                style: {
+                  height: count === 0 ? 0 : Math.max(2, Math.log1p(count) / Math.log1p(maxCount) * CHART_HEIGHT_PX)
+                },
+                title: count > 0 ? text.photoCount(count) : void 0
+              },
+              index
+            );
+          }) }),
+          years.map(({ count, position }) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 w-px -translate-x-1/2",
+              style: {
+                left: percent(position),
+                backgroundColor: count === recommendedMaxAgeYears ? RED : "rgb(148 163 184 / 0.7)"
+              }
+            },
+            count
+          )),
+          shownMarkers.map((marker) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-y-0 w-0 border-l-2 border-dashed",
+              style: { left: percent(marker.position), borderColor: marker.color ?? RED },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute -top-3.5 -translate-x-1/2 text-[10px] leading-none whitespace-nowrap",
+                  style: { color: marker.color ?? RED },
+                  children: marker.label
+                }
+              )
+            },
+            `${marker.date}-${marker.label}`
+          ))
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative h-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 top-1/2 h-1 -translate-y-1/2 rounded-full bg-slate-200", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-y-0 rounded-full bg-slate-700",
+          style: {
+            left: percent(positions.from),
+            right: percent(1 - positions.to)
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-label": text.fromHandle,
+          "aria-valuetext": shownRange.from ? day(shownRange.from) : text.allDates,
+          className: HANDLE_CLASS,
+          max: 1,
+          min: 0,
+          onChange: (event) => {
+            trackDrag("from", event.nativeEvent);
+          },
+          ref: (input) => {
+            fromInput.current = input;
+            return commitOnRelease("from")(input);
+          },
+          step: STEP,
+          type: "range",
+          value: positions.from
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-label": text.toHandle,
+          "aria-valuetext": shownRange.to ? day(shownRange.to) : text.allDates,
+          className: HANDLE_CLASS,
+          max: 1,
+          min: 0,
+          onChange: (event) => {
+            trackDrag("to", event.nativeEvent);
+          },
+          ref: (input) => {
+            toInput.current = input;
+            return commitOnRelease("to")(input);
+          },
+          step: STEP,
+          type: "range",
+          value: positions.to
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative mx-2 h-4", children: years.map(({ count, position }) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `absolute top-0 -translate-x-1/2 rounded px-0.5 text-[10px] leading-4 whitespace-nowrap hover:underline ${count === recommendedMaxAgeYears ? "font-semibold text-red-600" : "text-slate-500 hover:text-slate-900"}`,
+        onClick: () => {
+          setYears(count);
+        },
+        style: { left: percent(position) },
+        title: count === recommendedMaxAgeYears ? text.recommendedMaxAge(count) : text.lastYears(count),
+        type: "button",
+        children: text.yearsShort(count)
+      },
+      count
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline justify-between gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-700", children: rangeLabel }),
+      isAllDates || !allDatesAction ? null : /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "shrink-0 font-medium text-slate-600 underline decoration-slate-300 underline-offset-2 hover:text-slate-900",
+          onClick: () => {
+            onChange({});
+          },
+          type: "button",
+          children: text.allDates
+        }
+      )
+    ] }),
+    dateInputs === "none" ? null : /* @__PURE__ */ jsxs("details", { className: "mt-1 text-xs text-slate-600", open: dateInputs === "open" || void 0, children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none hover:text-slate-900", children: text.exactDates }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1.5 grid grid-cols-2 gap-2", children: ["from", "to"].map((key) => /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
+        text[key],
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "rounded-md border border-slate-200 px-2 py-1.5 text-sm text-slate-800",
+            onChange: (event) => {
+              setDay(key, event.target.value);
+            },
+            type: "date",
+            value: value[key] ?? ""
+          }
+        )
+      ] }, key)) })
+    ] })
+  ] });
+};
 
-export { BASE_COLOR, FloatingPhotoViewer, FloatingViewerInfoButton, LocationPickOnMap, MAPILLARY_FEATURE_BAR_LABELS, MapillaryFeatureBar, PhotoCount, PhotoDate, SELECTION_COLOR, StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, VIEW_SHAPE_FILL_OPACITY, ViewpointLayer, getViewpointSession, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useActiveDirectionKey, useAllProviderMapFeatures, useAllProviderPhotos, useArmedLocationOpenerId, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useLocationPickActions, useMapViewportBbox, useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useViewSuggestions, useViewpointLine, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel };
+export { BASE_COLOR, FloatingPhotoViewer, FloatingViewerInfoButton, LocationPickOnMap, MAPILLARY_FEATURE_BAR_LABELS, MapillaryFeatureBar, PhotoCount, PhotoDate, PhotoDateRangeFilter, SELECTION_COLOR, SelectedMapFeatureLayer, StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, VIEW_SHAPE_FILL_OPACITY, ViewpointLayer, getViewpointSession, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useActiveDirectionKey, useAllProviderMapFeatures, useAllProviderPhotos, useArmedLocationOpenerId, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useLocationPickActions, useMapViewportBbox, useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useSelectedMapillaryFeature, useViewSuggestions, useViewpointLine, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel };