feat: fix the map is not quite centered

src/components/Map/MapAdditionalActions/utils/useAdditionalActions.test.ts

 /* eslint-disable no-magic-numbers */
 import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { modelsFixture } from '@/models/fixtures/modelsFixture';
 import { MAP_DATA_INITIAL_STATE } from '@/redux/map/map.constants';
+import { initialMapDataFixture } from '@/redux/map/map.fixtures';
 import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
 import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { renderHook } from '@testing-library/react';
 import Map from 'ol/Map';
-import { initialMapDataFixture } from '@/redux/map/map.fixtures';
-import { modelsFixture } from '@/models/fixtures/modelsFixture';
 import { useAddtionalActions } from './useAdditionalActions';
 import { useVisibleBioEntitiesPolygonCoordinates } from './useVisibleBioEntitiesPolygonCoordinates';
 
@@ -185,7 +185,7 @@ describe('useAddtionalActions - hook', () => {
         const position = store.getState().map?.data.position;
         expect(position?.last).toEqual(MAP_CONFIG.position);
         expect(actions[0]).toEqual({
-          payload: { x: 1750, y: 1000, z: 5 },
+          payload: { x: 1750, y: 1000, z: 4 },
           type: 'map/setMapPosition',
         });
       });

src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts

@@ -3,6 +3,9 @@ import { OPTIONS } from '@/constants/map';
 import { currentBackgroundImagePathSelector } from '@/redux/backgrounds/background.selectors';
 import { mapDataSizeSelector } from '@/redux/map/map.selectors';
 import { projectDataSelector } from '@/redux/project/project.selectors';
+import { Point } from '@/types/map';
+import { usePointToProjection } from '@/utils/map/usePointToProjection';
+import { Extent, boundingExtent } from 'ol/extent';
 import BaseLayer from 'ol/layer/Base';
 import TileLayer from 'ol/layer/Tile';
 import { XYZ } from 'ol/source';
@@ -16,6 +19,21 @@ export const useOlMapTileLayer = (): BaseLayer => {
   const mapSize = useSelector(mapDataSizeSelector);
   const currentBackgroundImagePath = useSelector(currentBackgroundImagePathSelector);
   const project = useSelector(projectDataSelector);
+  const pointToProjection = usePointToProjection();
+
+  const tileExtent = useMemo((): Extent => {
+    const topLeftPoint: Point = {
+      x: mapSize.width,
+      y: mapSize.height,
+    };
+
+    const bottomRightPoint: Point = {
+      x: 0,
+      y: 0,
+    };
+
+    return boundingExtent([topLeftPoint, bottomRightPoint].map(pointToProjection));
+  }, [pointToProjection, mapSize]);
 
   const sourceUrl = useMemo(
     () => getMapTileUrl({ projectDirectory: project?.directory, currentBackgroundImagePath }),
@@ -39,8 +57,9 @@ export const useOlMapTileLayer = (): BaseLayer => {
       new TileLayer({
         visible: true,
         source,
+        extent: tileExtent,
       }),
-    [source],
+    [source, tileExtent],
   );
 
   return tileLayer;

src/components/Map/MapViewer/utils/config/useOlMapView.test.ts

@@ -48,7 +48,7 @@ describe('useOlMapView - util', () => {
     });
 
     const setViewSpy = jest.spyOn(hohResult.current.mapInstance as Map, 'setView');
-    const CALLED_ONCE = 1;
+    const CALLED_TWICE = 2;
 
     await act(() => {
       store.dispatch(
@@ -63,7 +63,7 @@ describe('useOlMapView - util', () => {
       wrapper: Wrapper,
     });
 
-    await waitFor(() => expect(setViewSpy).toBeCalledTimes(CALLED_ONCE));
+    await waitFor(() => expect(setViewSpy).toBeCalledTimes(CALLED_TWICE));
   });
 
   it('should return valid View instance', async () => {

src/components/Map/MapViewer/utils/config/useOlMapView.ts

 /* eslint-disable no-magic-numbers */
-import { OPTIONS } from '@/constants/map';
-import { mapDataInitialPositionSelector } from '@/redux/map/map.selectors';
+import { EXTENT_PADDING_MULTIPLICATOR, OPTIONS } from '@/constants/map';
+import { mapDataInitialPositionSelector, mapDataSizeSelector } from '@/redux/map/map.selectors';
 import { MapInstance, Point } from '@/types/map';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
 import { View } from 'ol';
+import { Extent, boundingExtent } from 'ol/extent';
 import { useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { MapConfig } from '../../MapViewer.types';
@@ -14,8 +15,28 @@ interface UseOlMapViewInput {
 
 export const useOlMapView = ({ mapInstance }: UseOlMapViewInput): MapConfig['view'] => {
   const mapInitialPosition = useSelector(mapDataInitialPositionSelector);
+  const mapSize = useSelector(mapDataSizeSelector);
   const pointToProjection = usePointToProjection();
 
+  const extent = useMemo((): Extent => {
+    const extentPadding = {
+      horizontal: mapSize.width * EXTENT_PADDING_MULTIPLICATOR,
+      vertical: mapSize.height * EXTENT_PADDING_MULTIPLICATOR,
+    };
+
+    const topLeftPoint: Point = {
+      x: mapSize.width + extentPadding.horizontal,
+      y: mapSize.height + extentPadding.vertical,
+    };
+
+    const bottomRightPoint: Point = {
+      x: -extentPadding.horizontal,
+      y: -extentPadding.vertical,
+    };
+
+    return boundingExtent([topLeftPoint, bottomRightPoint].map(pointToProjection));
+  }, [pointToProjection, mapSize]);
+
   const center = useMemo((): Point => {
     const centerPoint: Point = {
       x: mapInitialPosition.x,
@@ -35,8 +56,9 @@ export const useOlMapView = ({ mapInstance }: UseOlMapViewInput): MapConfig['vie
       center: [center.x, center.y],
       zoom: mapInitialPosition.z,
       showFullExtent: OPTIONS.showFullExtent,
+      extent,
     }),
-    [center.x, center.y, mapInitialPosition.z],
+    [mapInitialPosition.z, center, extent],
   );
 
   const view = useMemo(() => new View(viewConfig), [viewConfig]);

src/constants/map.ts

@@ -5,11 +5,12 @@ import { HALF_SECOND_MS, ONE_HUNDRED_MS } from './time';
 export const DEFAULT_TILE_SIZE = 256;
 export const DEFAULT_MIN_ZOOM = 2;
 export const DEFAULT_MAX_ZOOM = 9;
-export const DEFAULT_ZOOM = 5;
+export const DEFAULT_ZOOM = 4;
 export const DEFAULT_CENTER_X = 0;
 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_CENTER_POINT: Point = {
   x: DEFAULT_CENTER_X,

src/redux/map/map.thunks.test.ts

@@ -2,16 +2,16 @@ import { MODELS_MOCK } from '@/models/mocks/modelsMock';
 /* eslint-disable no-magic-numbers */
 import { QueryData } from '@/types/query';
 import { BACKGROUNDS_MOCK, BACKGROUND_INITIAL_STATE_MOCK } from '../backgrounds/background.mock';
-import { RootState } from '../store';
-import { INITIAL_STORE_STATE_MOCK } from '../root/root.fixtures';
 import { MODELS_INITIAL_STATE_MOCK } from '../models/models.mock';
+import { INITIAL_STORE_STATE_MOCK } from '../root/root.fixtures';
+import { RootState } from '../store';
+import { initialMapDataFixture, initialMapStateFixture } from './map.fixtures';
 import {
   getBackgroundId,
   getInitMapPosition,
   getInitMapSizeAndModelId,
   getOpenedMaps,
 } from './map.thunks';
-import { initialMapDataFixture, initialMapStateFixture } from './map.fixtures';
 
 const EMPTY_QUERY_DATA: QueryData = {
   modelId: undefined,
@@ -84,8 +84,8 @@ describe('map thunks - utils', () => {
     it('should return valid map position if query params do not include position', () => {
       const position = getInitMapPosition(STATE_WITH_MODELS, EMPTY_QUERY_DATA);
       expect(position).toEqual({
-        initial: { x: 13389.625, y: 6751.5, z: 5 },
-        last: { x: 13389.625, y: 6751.5, z: 5 },
+        initial: { x: 13389.625, y: 6751.5, z: 4 },
+        last: { x: 13389.625, y: 6751.5, z: 4 },
       });
     });
     it('should return default map position', () => {