diff --git a/client/package.json b/client/package.json index 2d8cdffcf..1c467af1d 100644 --- a/client/package.json +++ b/client/package.json @@ -55,6 +55,7 @@ "@tanstack/react-query": "^4.2.1", "@tanstack/react-table": "8.13.2", "@tanstack/react-virtual": "3.0.1", + "@turf/bbox": "^6.5.0", "autoprefixer": "10.2.5", "axios": "1.3.4", "chroma-js": "2.1.2", diff --git a/client/src/containers/analysis-eudr/map/component.tsx b/client/src/containers/analysis-eudr/map/component.tsx index 9131ca3ab..9a8989636 100644 --- a/client/src/containers/analysis-eudr/map/component.tsx +++ b/client/src/containers/analysis-eudr/map/component.tsx @@ -1,12 +1,13 @@ -import { useState, useCallback } from 'react'; +import { useState, useCallback, useEffect } from 'react'; import DeckGL from '@deck.gl/react/typed'; import { BitmapLayer, GeoJsonLayer } from '@deck.gl/layers/typed'; import Map from 'react-map-gl/maplibre'; -import { MapView } from '@deck.gl/core/typed'; +import { MapView, WebMercatorViewport } from '@deck.gl/core/typed'; import { TileLayer } from '@deck.gl/geo-layers/typed'; import { CartoLayer, setDefaultCredentials, MAP_TYPES, API_VERSIONS } from '@deck.gl/carto/typed'; import { useParams } from 'next/navigation'; import { format } from 'date-fns'; +import bbox from '@turf/bbox'; import ZoomControl from './zoom'; import LegendControl from './legend'; @@ -200,6 +201,25 @@ const EUDRMap = () => { setViewState({ ...viewState, zoom }); }, [viewState]); + useEffect(() => { + if (!plotGeometries.data || !plotGeometries.isLoading) return; + const dataBounds = bbox(plotGeometries.data); + const newViewport = new WebMercatorViewport(viewState); + if (newViewport) { + const { latitude, longitude, zoom } = newViewport.fitBounds( + [ + [dataBounds[0], dataBounds[1]], + [dataBounds[2], dataBounds[3]], + ], + { + padding: 10, + }, + ); + setViewState({ ...viewState, latitude, longitude, zoom }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [plotGeometries.data, plotGeometries.isLoading]); + return ( <>