Managing TiledLayer from Map.

package.json

@@ -69,6 +69,7 @@
   },
   "devDependencies": {
     "@capacitor/cli": "4.3.0",
+    "@ionic/cli": "6.20.3",
     "@types/lodash": "^4.14.186"
   },
   "description": "An Ionic project"

src/components/map/Handlers.tsx

@@ -22,7 +22,6 @@ export interface HandlersProperties {
  * * mouseLeave, mouseDown and mouseUp to track the mouse state
  * * mouseMove to shift the map if the mouse is down
  *
- * TODO: Check that using clientX instead of pageX (to pass unit tests) works.
  */
 export const Handlers: react.FC<HandlersProperties> = (
   props: HandlersProperties

src/components/map/Map.tsx

@@ -48,6 +48,25 @@ export const Map: react.FC<MapProperties> = (props: MapProperties) => {
     setCoordinateSystem(newCoordinateSystem);
   };
 
+  const viewPort = {
+    topLeft: {
+      x: Math.floor(-coordinateSystem.shift.x / coordinateSystem.zoom / 256),
+      y: Math.floor(-coordinateSystem.shift.y / coordinateSystem.zoom / 256),
+    },
+    bottomRight: {
+      x: Math.ceil(
+        (-coordinateSystem.shift.x + window.innerWidth) /
+          coordinateSystem.zoom /
+          256
+      ),
+      y: Math.ceil(
+        (-coordinateSystem.shift.y + window.innerHeight) /
+          coordinateSystem.zoom /
+          256
+      ),
+    },
+  };
+
   return (
     <>
       <Handlers transformMap={transformMap} />
@@ -58,10 +77,7 @@ export const Map: react.FC<MapProperties> = (props: MapProperties) => {
           <g transform='scale(256)'>
             <TiledLayer
               keyObject={{ provider: 'osm', zoomLevel: 16, x: 33485, y: 23936 }}
-              viewPort={{
+              viewPort={viewPort}
-                topLeft: { x: 0, y: 0 },
-                bottomRight: { x: 10, y: 10 },
-              }}
               tileFactory={simpleTileFactory}
             />
           </g>

src/components/map/config.ts

@@ -1,5 +1,5 @@
 /**The handlers configuration */
 export const handlersConfig = {
     /**Controls the activity of the mouse mouse event */
-    mouseMoveThrottleDelay: 100,
+    mouseMoveThrottleDelay: 1000,
 }