+ const storePosition = React.useCallback(() => {
+ if (!viewer || !viewer.viewport) return;
+ const center = viewer.viewport.getCenter();
+ const zoom = viewer.viewport.getZoom();
+ setSearchParams({ x: center.x, y: center.y, z: zoom }, { replace: true });
+ }, [setSearchParams, viewer]);
+
+ const setActiveMap = React.useCallback(map => {
+ if (viewer && viewer.viewport) {
+ const center = viewer.viewport.getCenter();
+ const zoom = viewer.viewport.getZoom();
+ const params = { x: center.x, y: center.y, z: zoom };
+ navigate(
+ { pathname: `../${map}`, search: `?${createSearchParams(params)}` },
+ { replace: true },
+ );
+ } else {
+ navigate(`../${map}`, { replace: true });
+ }
+ }, [navigate, viewer]);
+
+ React.useEffect(() => {
+ if (!viewer || !viewer.viewport) return;
+ if (searchParams.has('x') && searchParams.has('y')) {
+ viewer.viewport.panTo(new OpenSeadragon.Point(
+ parseFloat(searchParams.get('x')),
+ parseFloat(searchParams.get('y')),
+ ));
+ }
+ if (searchParams.has('z')) {
+ viewer.viewport.zoomTo(parseFloat(searchParams.get('z')));
+ }
+ }, [searchParams, viewer]);
+