From ce466bfc1fc241af094fe2ab59ed95c28b6c3b95 Mon Sep 17 00:00:00 2001 From: barbara-chaves Date: Mon, 29 Jul 2024 14:25:30 +0200 Subject: [PATCH] Fix globe bbox bug --- client/src/components/map/constants.ts | 14 +++++--- client/src/containers/globe/filters/item.tsx | 6 ++-- client/src/containers/globe/index.tsx | 32 ++++++++++++++++--- .../story/steps/layouts/map-step.tsx | 13 ++++---- 4 files changed, 46 insertions(+), 19 deletions(-) diff --git a/client/src/components/map/constants.ts b/client/src/components/map/constants.ts index 43f7f6d..88fd049 100644 --- a/client/src/components/map/constants.ts +++ b/client/src/components/map/constants.ts @@ -1,11 +1,15 @@ -import type { ViewState } from 'react-map-gl'; - import { CustomMapProps } from './types'; -export const DEFAULT_VIEW_STATE: Partial = { +export const DEFAULT_VIEW_STATE = { zoom: 2, - latitude: 0, - longitude: 0, + pitch: 0, + bearing: 0, + padding: { + top: 50, + bottom: 50, + left: 50, + right: 50, + }, }; export const DEFAULT_PROPS: CustomMapProps = { diff --git a/client/src/containers/globe/filters/item.tsx b/client/src/containers/globe/filters/item.tsx index f5076fa..7820f11 100644 --- a/client/src/containers/globe/filters/item.tsx +++ b/client/src/containers/globe/filters/item.tsx @@ -34,15 +34,15 @@ const FilterItem = ({ filter: { id, options, title } }: FilterItemProps) => { } }; - const isMoreThanOneSelected = !!filter && filter.length > 1; + const isMoreThanOneSelected = filter?.length === options.length; const handleSelectAll = () => { if (isMoreThanOneSelected) { setFilter([]); } else { setFilter( - options.reduce((acc, { attributes }) => { - return !!attributes?.name ? [...acc, attributes?.name] : acc; + options.reduce<(number | string)[]>((acc, { id }) => { + return !!id ? [...acc, id] : acc; }, []) ); } diff --git a/client/src/containers/globe/index.tsx b/client/src/containers/globe/index.tsx index 4492404..29ed85c 100644 --- a/client/src/containers/globe/index.tsx +++ b/client/src/containers/globe/index.tsx @@ -2,8 +2,11 @@ import { useEffect } from 'react'; +import { useMap } from 'react-map-gl'; + import { useSetAtom } from 'jotai'; import { ExternalLinkIcon } from 'lucide-react'; +import mapboxgl from 'mapbox-gl'; import { cn } from '@/lib/classnames'; @@ -13,8 +16,7 @@ import { useSyncStep } from '@/store/stories'; import useStories from '@/hooks/stories/useStories'; -import { DEFAULT_MAP_BBOX, DEFAULT_MAP_STATE } from '@/constants/map'; - +import { DEFAULT_VIEW_STATE } from '@/components/map/constants'; import { Button } from '@/components/ui/button'; import Card from '@/components/ui/card'; import GradientLine from '@/components/ui/gradient-line'; @@ -27,6 +29,13 @@ import Filters from './filters'; import SearchStories from './search'; import TopStories from './top-stories'; +type StoryMarker = { + markers: { + lat: number; + lng: number; + }[]; +}; + export default function Home() { const setTmpBbox = useSetAtom(tmpBboxAtom); const setLayers = useSetAtom(layersAtom); @@ -35,11 +44,24 @@ export default function Home() { const { data: storiesData } = useStories(); const storiesLength = storiesData?.data?.length; + const { default: map } = useMap(); useEffect(() => { - const tmpbbox: [number, number, number, number] = DEFAULT_MAP_BBOX; - setTmpBbox({ bbox: tmpbbox, options: DEFAULT_MAP_STATE }); - }, [setTmpBbox]); + const bounds = new mapboxgl.LngLatBounds(); + storiesData?.data?.forEach(({ attributes }) => { + if (!(attributes?.marker as StoryMarker)?.markers?.length) return; + const { lat, lng } = (attributes?.marker as StoryMarker)?.markers?.[0] || {}; + if (typeof lat != 'number' || typeof lng != 'number') return; + bounds.extend([lng, lat]); + }); + if (bounds.isEmpty() || !map) return; + const center = bounds.getCenter(); + + setTmpBbox({ + bbox: bounds.toArray().flat() as [number, number, number, number], + options: { ...DEFAULT_VIEW_STATE, latitude: center.lat, longitude: center.lng }, + }); + }, [map, setTmpBbox, storiesData?.data]); useEffect(() => { setLayers([]); diff --git a/client/src/containers/story/steps/layouts/map-step.tsx b/client/src/containers/story/steps/layouts/map-step.tsx index ff8f18e..47e55ad 100644 --- a/client/src/containers/story/steps/layouts/map-step.tsx +++ b/client/src/containers/story/steps/layouts/map-step.tsx @@ -67,13 +67,16 @@ const MapStepLayout = ({ step, showContent, storySummary }: MapStepLayoutProps)
{storySummary?.map((item) => (
-
+

{item.title}

-
+
{item.content?.map((c) => { return ( -