feat(geoportal): panorama viewer with street-view navigation

apps/belis/desktop/src/components/ui/FilePreview.tsx

@@ -15,9 +15,7 @@ import {
   CloseCircleFilled,
   PlusCircleFilled,
 } from "@ant-design/icons";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { LightBoxDispatchContext } from "react-cismap/contexts/LightBoxContextProvider";
+import { LightBoxDispatchContext } from "@carma-mapping/lightbox";
 import {
   getDocumentBlobUrl,
   getSecureDocumentUrl,

apps/belis/desktop/src/main.tsx

@@ -21,6 +21,7 @@ import store from "./store";
 import persistStore from "redux-persist/es/persistStore";
 import { PersistGate } from "redux-persist/integration/react";
 import TopicMapContextProvider from "react-cismap/contexts/TopicMapContextProvider";
+import { CarmaLightBox } from "@carma-mapping/lightbox";
 import MainPage from "./components/pages/MainPage";
 import KeyTablesPage from "./components/pages/KeyTablesPage";
 import ArbeitsauftraegeePage from "./components/pages/ArbeitsauftraegeePage";
@@ -160,7 +161,9 @@ root.render(
                   <MapSelectionProvider>
                     <MapHighlightProvider>
                       <DatasheetProvider>
-                        <RouterProvider router={router} />
+                        <CarmaLightBox>
+                          <RouterProvider router={router} />
+                        </CarmaLightBox>
                       </DatasheetProvider>
                     </MapHighlightProvider>
                   </MapSelectionProvider>

apps/belis/online/src/App.jsx

@@ -2,6 +2,7 @@ import { ConfigProvider } from "antd";
 import deDE from "antd/lib/locale/de_DE";
 import React from "react";
 import TopicMapContextProvider from "react-cismap/contexts/TopicMapContextProvider";
+import { LightBoxContextProvider } from "@carma-mapping/lightbox";
 import { defaultLayerConf } from "react-cismap/tools/layerFactory";
 import { ErrorBoundary } from "react-error-boundary";
 import { Provider } from "react-redux";
@@ -190,7 +191,9 @@ function App() {
                       offlinelayers: ["vectorLayerOfflineEnabled"],
                     }}
                   >
-                    <RouterProvider router={router} />
+                    <LightBoxContextProvider>
+                      <RouterProvider router={router} />
+                    </LightBoxContextProvider>
                   </TopicMapContextProvider>
                 </div>
               </SelectionProvider>

apps/belis/online/src/components/commons/InfoBox.jsx

@@ -5,7 +5,7 @@ import React, { useContext, useEffect } from "react";
 import Button from "react-bootstrap/Button";
 import Icon from "react-cismap/commons/Icon";
 import IconLink from "react-cismap/commons/IconLink";
-import { LightBoxDispatchContext } from "react-cismap/contexts/LightBoxContextProvider";
+import { LightBoxDispatchContext } from "@carma-mapping/lightbox";
 import {
   UIContext,
   UIDispatchContext,

apps/belis/online/src/components/commons/secondaryinfo/SecondaryInfo.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { LightBoxDispatchContext } from "react-cismap/contexts/LightBoxContextProvider";
+import { LightBoxDispatchContext } from "@carma-mapping/lightbox";
 import { version as reactCismapVersion } from "react-cismap/meta";
 import { useDispatch, useSelector } from "react-redux";
 

apps/belis/online/src/containers/MobileApp.jsx

@@ -3,7 +3,7 @@ import useComponentSize from "@rehooks/component-size";
 import useOnlineStatus from "@rehooks/online-status";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { UIDispatchContext } from "react-cismap/contexts/UIContextProvider";
-import PhotoLightBox from "react-cismap/topicmaps/PhotoLightbox";
+import { PhotoLightBox } from "@carma-mapping/lightbox";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
 

apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx

@@ -1129,6 +1129,7 @@ const GeoportalMapInner = ({ height, width, allow3d }: MapProps) => {
           locatorControl={false}
           fullScreenControl={false}
           zoomControls={false}
+          photoLightBox={false}
           mapStyle={{
             width,
             height,

apps/geoportal/src/app/components/GeoportalMap/hooks/useCreateCismapLayer.ts

@@ -584,6 +584,18 @@ export const useCreateCismapLayers = (
               });
             },
             onSelectionChanged: (e) => {
+              // [PANORAMA] debug: the RAW native maplibre features for this
+              // layer, before carma maps them into the redux selectedFeature.
+              // Stashed on window for interactive inspection.
+              console.log("[PANORAMA] native maplibre features", {
+                layerId: layer.id,
+                hits: e.hits,
+                hit: e.hit,
+                properties: (e.hits ?? []).map((h) => h.properties),
+              });
+              (
+                window as typeof window & { __panoramaHits?: unknown }
+              ).__panoramaHits = e.hits;
               const currentLayer =
                 layersRef.current.find((l) => l.id === layer.id) || layer;
               const clickKey = e.latlng