Checking zoom and tiles boundaries (#6)

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;