From 81e22107794876ec17f8781b50a495c45dae5a75 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 19 Sep 2023 14:44:35 -0400 Subject: [PATCH 1/3] Remove check map bbox, add bbox validation --- .../components/common/mapbox/layers/utils.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/app/scripts/components/common/mapbox/layers/utils.ts b/app/scripts/components/common/mapbox/layers/utils.ts index d7300b357..b12ac0ca5 100644 --- a/app/scripts/components/common/mapbox/layers/utils.ts +++ b/app/scripts/components/common/mapbox/layers/utils.ts @@ -434,6 +434,17 @@ export function useLayerInteraction({ type OptionalBbox = number[] | undefined | null; +/** + * MapboxGL requires maxX value to be 180, minX -180, maxY 90, minY -90 + * @param bounds Bounding box to fit layer + * @returns Boolean + */ + +function isBboxToFitValid(bounds) { + const [minX, minY, maxX, maxY] = bounds; + return minX >= -180 && maxX <= 180 && minY >= -90 && maxY <= 90; +} + /** * Centers on the given bounds if the current position is not within the bounds, * and there's no user defined position (via user initiated map movement). Gives @@ -458,7 +469,7 @@ export function useFitBbox( | [number, number, number, number] | undefined; - if (bounds?.length && checkFitBoundsFromLayer(bounds, mapInstance)) { + if (bounds?.length && isBboxToFitValid(bounds)) { mapInstance.fitBounds(bounds, { padding: FIT_BOUNDS_PADDING }); } }, [mapInstance, isUserPositionSet, initialBbox, stacBbox]); From dc31237b0461094423780cc797e65e716f761dea Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Wed, 20 Sep 2023 14:54:06 -0400 Subject: [PATCH 2/3] Remove checkFitBoundsFromLayer function --- .../components/common/mapbox/layers/utils.ts | 24 ------------------- 1 file changed, 24 deletions(-) diff --git a/app/scripts/components/common/mapbox/layers/utils.ts b/app/scripts/components/common/mapbox/layers/utils.ts index b12ac0ca5..2e33ba3b4 100644 --- a/app/scripts/components/common/mapbox/layers/utils.ts +++ b/app/scripts/components/common/mapbox/layers/utils.ts @@ -372,30 +372,6 @@ export function getMergedBBox(features: StacFeature[]) { export const FIT_BOUNDS_PADDING = 32; -export function checkFitBoundsFromLayer( - layerBounds?: [number, number, number, number], - mapInstance?: MapboxMap -) { - if (!layerBounds || !mapInstance) return false; - - const [minXLayer, minYLayer, maxXLayer, maxYLayer] = layerBounds; - const [[minXMap, minYMap], [maxXMap, maxYMap]] = mapInstance - .getBounds() - .toArray(); - const isOutside = - maxXLayer < minXMap || - minXLayer > maxXMap || - maxYLayer < minYMap || - minYLayer > maxYMap; - const layerExtentSmaller = - maxXLayer - minXLayer < maxXMap - minXMap && - maxYLayer - minYLayer < maxYMap - minYMap; - - // only fitBounds if layer extent is smaller than viewport extent (ie zoom to area of interest), - // or if layer extent does not overlap at all with viewport extent (ie pan to area of interest) - return layerExtentSmaller || isOutside; -} - interface LayerInteractionHookOptions { layerId: string; mapInstance: MapboxMap; From 87403b561d6e5401b468438f6883f955285cd1d0 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Thu, 21 Sep 2023 11:20:24 -0400 Subject: [PATCH 3/3] Clamp bbox --- .../components/common/mapbox/layers/utils.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/app/scripts/components/common/mapbox/layers/utils.ts b/app/scripts/components/common/mapbox/layers/utils.ts index 2e33ba3b4..97fecce74 100644 --- a/app/scripts/components/common/mapbox/layers/utils.ts +++ b/app/scripts/components/common/mapbox/layers/utils.ts @@ -1,7 +1,7 @@ import { FunctionComponent, useEffect } from 'react'; import { Feature } from 'geojson'; import { Map as MapboxMap } from 'mapbox-gl'; -import { defaultsDeep } from 'lodash'; +import { defaultsDeep, clamp } from 'lodash'; import axios, { Method } from 'axios'; import { eachDayOfInterval, @@ -412,13 +412,21 @@ type OptionalBbox = number[] | undefined | null; /** * MapboxGL requires maxX value to be 180, minX -180, maxY 90, minY -90 + * While some of the datasets having bbox going above it. * @param bounds Bounding box to fit layer * @returns Boolean */ -function isBboxToFitValid(bounds) { +function clampBbox( + bounds: [number, number, number, number] +): [number, number, number, number] { const [minX, minY, maxX, maxY] = bounds; - return minX >= -180 && maxX <= 180 && minY >= -90 && maxY <= 90; + return [ + clamp(minX, -180, 180), + clamp(minY, -90, 90), + clamp(maxX, -180, 180), + clamp(maxY, -90, 90) + ]; } /** @@ -445,8 +453,9 @@ export function useFitBbox( | [number, number, number, number] | undefined; - if (bounds?.length && isBboxToFitValid(bounds)) { - mapInstance.fitBounds(bounds, { padding: FIT_BOUNDS_PADDING }); + if (bounds?.length) { + const clampedBbox = clampBbox(bounds); + mapInstance.fitBounds(clampedBbox, { padding: FIT_BOUNDS_PADDING }); } }, [mapInstance, isUserPositionSet, initialBbox, stacBbox]); }