From f5ce103cb3f1334ba9b9b88604c9aa0e49f88f7a Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Tue, 27 Sep 2022 15:10:23 +0200
Subject: [PATCH] Checking zoom and tiles boundaries (#6)

---
 src/components/map/tile.tsx | 24 ++++++++++++++++--------
 src/store/map.ts            | 15 +++++++++++++--
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/map/tile.tsx b/src/components/map/tile.tsx
index 1a2666f..99772df 100644
--- a/src/components/map/tile.tsx
+++ b/src/components/map/tile.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { useSelector } from 'react-redux';
 import { MapState } from '../../store/map';
 
@@ -116,13 +116,21 @@ const Tile: React.FC<{
     (state: { map: MapState }) => state.map.scope.tileProvider
   ) as keyof typeof tileProviders;
 
-  return (
-    <img
-      src={tileProviders[tileProvider].getTileUrl(props.zoom, props.x, props.y)}
-      className='tile'
-      alt=''
-    />
-  );
+  const x = props.x % 2 ** props.zoom;
+  const canRender = props.y >= 0 && props.y <= 2 ** props.zoom - 1;
+
+  if (canRender) {
+    return (
+      canRender && (
+        <img
+          src={tileProviders[tileProvider].getTileUrl(props.zoom, x, props.y)}
+          className='tile'
+          alt=''
+        />
+      )
+    );
+  }
+  return <Fragment />;
 };
 
 export default Tile;
diff --git a/src/store/map.ts b/src/store/map.ts
index e1c91d6..fa45e14 100644
--- a/src/store/map.ts
+++ b/src/store/map.ts
@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import _ from 'lodash';
+import { tileProviders } from '../components/map/tile';
 import { tileSize } from '../components/map/tiled-map';
 import {
   geoPoint,
@@ -121,6 +122,13 @@ const evaluateWhiteboardViewBox = (
 export const evaluateStateFromScope = (state: MapState) => {
   console.log('<<<<<<<<<<<< evaluateStateFromScope');
   state.tiles.zoom = _.round(state.scope.zoom);
+  if (state.tiles.zoom < tileProviders[state.scope.tileProvider].minZoom) {
+    state.tiles.zoom = tileProviders[state.scope.tileProvider].minZoom;
+  }
+  if (state.tiles.zoom > tileProviders[state.scope.tileProvider].maxZoom) {
+    state.tiles.zoom = tileProviders[state.scope.tileProvider].maxZoom;
+  }
+
   const softZoom = state.scope.zoom - state.tiles.zoom;
 
   state.slippy.scale = 2 ** softZoom;
@@ -186,8 +194,11 @@ export const reevaluateState = (state: MapState) => {
       (state.tiles.nb.x - 1) * visibleTileSize - window.innerWidth ||
     -state.slippy.translation.y >
       (state.tiles.nb.y - 1) * visibleTileSize - window.innerHeight ||
-    state.slippy.scale > Math.SQRT2 ||
-    state.slippy.scale < Math.SQRT1_2
+    (state.slippy.scale > Math.SQRT2 &&
+      state.tiles.zoom + 1 <=
+        tileProviders[state.scope.tileProvider].maxZoom) ||
+    (state.slippy.scale < Math.SQRT1_2 &&
+      state.tiles.zoom - 1 >= tileProviders[state.scope.tileProvider].minZoom)
   ) {
     evaluateStateFromScope(state);
   } else {