Bbox saved in url

client/src/app/(app)/layout.tsx

@@ -1,15 +1,9 @@
 import { PropsWithChildren } from "react";
 
-import MapSettingsManagerPanel from "@/containers/map-settings";
-import MapSettingsManager from "@/containers/map-settings/manager";
+import Map from "@/containers/map";
 import Navigation from "@/containers/navigation";
 import Sidebar from "@/containers/sidebar";
 
-import Map from "@/components/map";
-import Controls from "@/components/map/controls";
-import SettingsControl from "@/components/map/controls/settings";
-import ZoomControl from "@/components/map/controls/zoom";
-
 import LayoutProviders from "./layout-providers";
 
 export default async function AppLayout({ children }: PropsWithChildren) {
@@ -18,15 +12,7 @@ export default async function AppLayout({ children }: PropsWithChildren) {
       <main className="flex h-[100svh] w-full justify-between">
         <Navigation />
         <Sidebar>{children}</Sidebar>
-        <Map>
-          <Controls className="absolute right-6 top-4">
-            <ZoomControl />
-            <SettingsControl>
-              <MapSettingsManagerPanel />
-            </SettingsControl>
-          </Controls>
-          <MapSettingsManager />
-        </Map>
+        <Map />
       </main>
     </LayoutProviders>
   );

client/src/app/url-query-params.ts

@@ -1,7 +1,11 @@
-import { useQueryState } from "next-usequerystate";
+import { parseAsArrayOf, parseAsFloat, useQueryState } from "next-usequerystate";
 import { parseAsJson } from "next-usequerystate/parsers";
 
-import { DEFAULT_MAP_SETTINGS } from "@/components/map/constants";
+import { DEFAULT_BBOX, DEFAULT_MAP_SETTINGS } from "@/constants/map";
+
+export const useSyncBbox = () => {
+  return useQueryState("bbox", parseAsArrayOf(parseAsFloat).withDefault(DEFAULT_BBOX));
+};
 
 export const useSyncMapSettings = () => {
   return useQueryState(

client/src/components/map/index.tsx

@@ -16,7 +16,8 @@ import env from "@/env.mjs";
 
 import { cn } from "@/lib/classnames";
 
-import { DEFAULT_VIEW_STATE } from "./constants";
+import { DEFAULT_VIEW_STATE } from "../../constants/map";
+
 import type { CustomMapProps } from "./types";
 
 export const Map: FC<CustomMapProps> = ({

client/src/components/map/constants.ts → client/src/constants/map.ts

@@ -6,6 +6,10 @@ export const DEFAULT_VIEW_STATE: Partial<ViewState> = {
   longitude: 0,
 };
 
+export const DEFAULT_BBOX: [number, number, number, number] = [
+  -118.3665, 1.1768, -53.9775, 32.7186,
+];
+
 export const BASEMAPS = [
   {
     label: "Light",

client/src/containers/map-settings/basemaps/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { BASEMAPS } from "@/components/map/constants";
+import { BASEMAPS } from "@/constants/map";
 
 import BasemapItem from "./item";
 

client/src/containers/map-settings/basemaps/item/index.tsx

@@ -8,7 +8,7 @@ import { cn } from "@/lib/classnames";
 
 import { useSyncMapSettings } from "@/app/url-query-params";
 
-import { BASEMAPS } from "@/components/map/constants";
+import { BASEMAPS } from "@/constants/map";
 
 const BasemapItem = ({
   label,

client/src/containers/map-settings/labels/index.tsx

@@ -4,7 +4,8 @@ import { useCallback } from "react";
 
 import { useSyncMapSettings } from "@/app/url-query-params";
 
-import { LABELS } from "@/components/map/constants";
+import { LABELS } from "@/constants/map";
+
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 

client/src/containers/map-settings/manager/index.tsx

@@ -8,7 +8,7 @@ import { AnyLayer } from "mapbox-gl";
 
 import { useSyncMapSettings } from "@/app/url-query-params";
 
-import { BASEMAPS } from "@/components/map/constants";
+import { BASEMAPS } from "@/constants/map";
 
 type AnyLayerWithMetadata = AnyLayer & {
   metadata: Record<string, unknown>;

client/src/containers/map/index.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { LngLatBoundsLike, useMap } from "react-map-gl";
+
+import { useSyncBbox } from "@/app/url-query-params";
+
+import { DEFAULT_BBOX } from "@/constants/map";
+
+import MapSettingsManagerPanel from "@/containers/map-settings";
+import MapSettingsManager from "@/containers/map-settings/manager";
+
+import Map from "@/components/map";
+import Controls from "@/components/map/controls";
+import SettingsControl from "@/components/map/controls/settings";
+import ZoomControl from "@/components/map/controls/zoom";
+
+export default function MapContainer({ id = "default" }: { id?: string }) {
+  const { [id]: map } = useMap();
+  const [bbox, setBbox] = useSyncBbox();
+
+  const onMapViewStateChange = () => {
+    if (map) {
+      const b = map
+        .getBounds()
+        .toArray()
+        .flat()
+        .map((v: number) => {
+          return parseFloat(v.toFixed(2));
+        });
+      setBbox(b);
+      // setTmpBbox(undefined);
+    }
+  };
+
+  return (
+    <Map
+      id={id}
+      initialViewState={{
+        bounds: bbox as LngLatBoundsLike,
+      }}
+      maxBounds={DEFAULT_BBOX}
+      onMapViewStateChange={onMapViewStateChange}
+    >
+      <Controls className="absolute right-6 top-4">
+        <ZoomControl />
+        <SettingsControl>
+          <MapSettingsManagerPanel />
+        </SettingsControl>
+      </Controls>
+      <MapSettingsManager />
+    </Map>
+  );
+}

client/src/containers/popup/index.tsx

@@ -7,7 +7,7 @@ import { LuChevronLeft } from "react-icons/lu";
 import { cn } from "@/lib/classnames";
 
 const Popup = ({ children }: PropsWithChildren): JSX.Element => {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
 
   const toggleOpen = () => setOpen((prev) => !prev);