From 2f1f54dce2363c69688f5a00e47c788911932377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?= Date: Tue, 24 Oct 2023 10:17:01 +0200 Subject: [PATCH] Bbox saved in url --- client/src/app/(app)/layout.tsx | 18 +------ client/src/app/url-query-params.ts | 8 ++- client/src/components/map/index.tsx | 3 +- .../map/constants.ts => constants/map.ts} | 4 ++ .../map-settings/basemaps/index.tsx | 2 +- .../map-settings/basemaps/item/index.tsx | 2 +- .../containers/map-settings/labels/index.tsx | 3 +- .../containers/map-settings/manager/index.tsx | 2 +- client/src/containers/map/index.tsx | 53 +++++++++++++++++++ client/src/containers/popup/index.tsx | 2 +- 10 files changed, 73 insertions(+), 24 deletions(-) rename client/src/{components/map/constants.ts => constants/map.ts} (94%) create mode 100644 client/src/containers/map/index.tsx diff --git a/client/src/app/(app)/layout.tsx b/client/src/app/(app)/layout.tsx index acbb60e2..8b3a8126 100644 --- a/client/src/app/(app)/layout.tsx +++ b/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) {
{children} - - - - - - - - - +
); diff --git a/client/src/app/url-query-params.ts b/client/src/app/url-query-params.ts index cd410a12..d82208b2 100644 --- a/client/src/app/url-query-params.ts +++ b/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( diff --git a/client/src/components/map/index.tsx b/client/src/components/map/index.tsx index e3966b8d..c348273b 100644 --- a/client/src/components/map/index.tsx +++ b/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 = ({ diff --git a/client/src/components/map/constants.ts b/client/src/constants/map.ts similarity index 94% rename from client/src/components/map/constants.ts rename to client/src/constants/map.ts index c61207a7..c88f475f 100644 --- a/client/src/components/map/constants.ts +++ b/client/src/constants/map.ts @@ -6,6 +6,10 @@ export const DEFAULT_VIEW_STATE: Partial = { longitude: 0, }; +export const DEFAULT_BBOX: [number, number, number, number] = [ + -118.3665, 1.1768, -53.9775, 32.7186, +]; + export const BASEMAPS = [ { label: "Light", diff --git a/client/src/containers/map-settings/basemaps/index.tsx b/client/src/containers/map-settings/basemaps/index.tsx index c0c49adc..266b807c 100644 --- a/client/src/containers/map-settings/basemaps/index.tsx +++ b/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"; diff --git a/client/src/containers/map-settings/basemaps/item/index.tsx b/client/src/containers/map-settings/basemaps/item/index.tsx index 653ec440..a8bd75f1 100644 --- a/client/src/containers/map-settings/basemaps/item/index.tsx +++ b/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, diff --git a/client/src/containers/map-settings/labels/index.tsx b/client/src/containers/map-settings/labels/index.tsx index 022d213c..c76748b2 100644 --- a/client/src/containers/map-settings/labels/index.tsx +++ b/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"; diff --git a/client/src/containers/map-settings/manager/index.tsx b/client/src/containers/map-settings/manager/index.tsx index 5efec5d0..aa42d406 100644 --- a/client/src/containers/map-settings/manager/index.tsx +++ b/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; diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx new file mode 100644 index 00000000..d5b01fcd --- /dev/null +++ b/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 ( + + + + + + + + + + ); +} diff --git a/client/src/containers/popup/index.tsx b/client/src/containers/popup/index.tsx index 3f6ce4b1..00be7161 100644 --- a/client/src/containers/popup/index.tsx +++ b/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);