diff --git a/src/components/Map/MapViewer/utils/config/useOlMapView.ts b/src/components/Map/MapViewer/utils/config/useOlMapView.ts index d76947fdfa250784062178211202a1f7a3fff1d8..a639ebd1dfe90648dfab7edc89855b406a6d565b 100644 --- a/src/components/Map/MapViewer/utils/config/useOlMapView.ts +++ b/src/components/Map/MapViewer/utils/config/useOlMapView.ts @@ -1,5 +1,5 @@ /* eslint-disable no-magic-numbers */ -import { DEFAULT_EXTENT_PADDING, OPTIONS, ZOOM_RESCALING_FACTOR } from '@/constants/map'; +import { EXTENT_PADDING_MULTIPLICATOR, OPTIONS, ZOOM_RESCALING_FACTOR } from '@/constants/map'; import { mapDataInitialPositionSelector, mapDataSizeSelector } from '@/redux/map/map.selectors'; import { MapInstance, Point } from '@/types/map'; import { usePointToProjection } from '@/utils/map/usePointToProjection'; @@ -19,32 +19,23 @@ export const useOlMapView = ({ mapInstance }: UseOlMapViewInput): MapConfig['vie const pointToProjection = usePointToProjection(); const extent = useMemo((): Extent => { - let widthPadding = 0; - let heightPadding = 0; - let mapInstanceWidthToHeightRatio = 2.15; - const mapInstanceSize = mapInstance?.getSize(); - if (mapInstanceSize) { - mapInstanceWidthToHeightRatio = mapInstanceSize[0] / mapInstanceSize[1]; - } - const mapWidthToHeightRatio = mapSize.width / mapSize.height; + const extentPadding = { + horizontal: mapSize.width * EXTENT_PADDING_MULTIPLICATOR, + vertical: mapSize.height * EXTENT_PADDING_MULTIPLICATOR, + }; - if (mapWidthToHeightRatio < mapInstanceWidthToHeightRatio) { - widthPadding = mapSize.height * mapInstanceWidthToHeightRatio - mapSize.width; - } else { - heightPadding = mapSize.width / mapInstanceWidthToHeightRatio - mapSize.height; - } const topLeftPoint: Point = { - x: mapSize.width + widthPadding / 2 + DEFAULT_EXTENT_PADDING, - y: mapSize.height + heightPadding / 2 + DEFAULT_EXTENT_PADDING, + x: mapSize.width + extentPadding.horizontal, + y: mapSize.height + extentPadding.vertical, }; const bottomRightPoint: Point = { - x: -widthPadding / 2 - DEFAULT_EXTENT_PADDING, - y: -heightPadding / 2 - DEFAULT_EXTENT_PADDING, + x: -extentPadding.horizontal, + y: -extentPadding.vertical, }; return boundingExtent([topLeftPoint, bottomRightPoint].map(pointToProjection)); - }, [mapSize.width, mapSize.height, mapInstance, pointToProjection]); + }, [pointToProjection, mapSize]); const center = useMemo((): Point => { const centerPoint: Point = { diff --git a/src/constants/map.ts b/src/constants/map.ts index c995fdad5c637c292fc4162dd24dc6ac07e1021d..a77a62c899663ebf1e75c6c84c9353ccaf238c8d 100644 --- a/src/constants/map.ts +++ b/src/constants/map.ts @@ -11,7 +11,6 @@ export const DEFAULT_CENTER_Y = 0; // eslint-disable-next-line no-magic-numbers export const LATLNG_FALLBACK: LatLng = [0, 0]; export const EXTENT_PADDING_MULTIPLICATOR = 1; -export const DEFAULT_EXTENT_PADDING = 20; export const ZOOM_RESCALING_FACTOR = 1; export const DEFAULT_CENTER_POINT: Point = {