ntegration and bug fix

src/components/map/Handler.css

@@ -0,0 +1,5 @@
+.handler {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}

src/components/map/Handlers.tsx

@@ -2,6 +2,7 @@ import react, { useState } from 'react';
 import { throttle } from 'lodash';
 import { Point } from './types';
 import { handlersConfig } from './config';
+import './Handler.css';
 
 export interface HandlersProperties {
   /**Transform the map:
@@ -17,7 +18,11 @@ export interface HandlersProperties {
 /**
  *
  * @param props
- * @returns A div with handlers
+ * @returns A div with the following handlers
+ * * 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

@@ -1,7 +1,8 @@
-import react from 'react';
+import react, { useState } from 'react';
+import Handlers from './Handlers';
 import Tile from './Tile';
 import TiledLayer from './TiledLayer';
-import { TileFactory } from './types';
+import { Point, TileFactory } from './types';
 
 export interface MapProperties {}
 
@@ -10,22 +11,63 @@ export interface MapProperties {}
  * @returns A Map component
  */
 export const Map: react.FC<MapProperties> = (props: MapProperties) => {
+  const [coordinateSystem, setCoordinateSystem] = useState({
+    zoom: 1,
+    shift: { x: 0, y: 0 },
+  });
+
   const simpleTileFactory: TileFactory = (keyObject) => (
     <Tile
       href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
     />
   );
 
+  const transformMap = (
+    deltaShift: Point | null,
+    deltaZoom: number | null,
+    zoomCenter: Point | null
+  ) => {
+    const actualDeltaShift = deltaShift === null ? { x: 0, y: 0 } : deltaShift;
+    const actualDeltaZoom = deltaZoom === null ? 1 : deltaZoom;
+    const actualZoomCenter = zoomCenter === null ? { x: 0, y: 0 } : zoomCenter;
+    var newCoordinateSystem = {
+      shift: {
+        x:
+          coordinateSystem.shift.x +
+          actualDeltaShift.x +
+          (coordinateSystem.shift.x - actualZoomCenter.x) *
+            (actualDeltaZoom - 1),
+        y:
+          coordinateSystem.shift.y +
+          actualDeltaShift.y +
+          (coordinateSystem.shift.y - actualZoomCenter.y) *
+            (actualDeltaZoom - 1),
+      },
+      zoom: coordinateSystem.zoom * actualDeltaZoom,
+    };
+    setCoordinateSystem(newCoordinateSystem);
+  };
+
   return (
+    <>
+      <Handlers transformMap={transformMap} />
       <svg width={window.innerWidth} height={window.innerHeight}>
+        <g
+          transform={`translate(${coordinateSystem.shift.x}, ${coordinateSystem.shift.y}) scale(${coordinateSystem.zoom})`}
+        >
           <g transform='scale(256)'>
             <TiledLayer
-          keyObject={{ provider: 'osm', zoomLevel: 16, x: 33488, y: 23939 }}
+              keyObject={{ provider: 'osm', zoomLevel: 16, x: 33485, y: 23936 }}
-          viewPort={{ topLeft: { x: 0, y: 0 }, bottomRight: { x: 10, y: 10 } }}
+              viewPort={{
+                topLeft: { x: 0, y: 0 },
+                bottomRight: { x: 10, y: 10 },
+              }}
               tileFactory={simpleTileFactory}
             />
           </g>
+        </g>
       </svg>
+    </>
   );
 };
 

src/components/map/TiledLayer.test.tsx

@@ -26,21 +26,21 @@ describe('The TiledLayer component ', () => {
         transform="translate(1, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":6,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":6,"y":10}
         </text>
       </g>
       <g
         transform="translate(2, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":7,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":7,"y":10}
         </text>
       </g>
       <g
         transform="translate(3, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":8,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":8,"y":10}
         </text>
       </g>
     </svg>
@@ -77,42 +77,42 @@ describe('The TiledLayer component ', () => {
         transform="translate(1, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":6,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":6,"y":10}
         </text>
       </g>
       <g
         transform="translate(2, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":7,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":7,"y":10}
         </text>
       </g>
       <g
         transform="translate(3, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":8,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":8,"y":10}
         </text>
       </g>
       <g
         transform="translate(5, 0)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":10,"y":5}
+          {"provider":"osm","zoomLevel":10,"x":10,"y":8}
         </text>
       </g>
       <g
         transform="translate(5, 1)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":10,"y":6}
+          {"provider":"osm","zoomLevel":10,"x":10,"y":9}
         </text>
       </g>
       <g
         transform="translate(5, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":10,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":10,"y":10}
         </text>
       </g>
     </svg>
@@ -148,21 +148,21 @@ describe('The TiledLayer component ', () => {
         transform="translate(5, 0)"
       >
         <text>
-          {"provider":"osm","zoomLevel":11,"x":10,"y":5}
+          {"provider":"osm","zoomLevel":11,"x":10,"y":8}
         </text>
       </g>
       <g
         transform="translate(5, 1)"
       >
         <text>
-          {"provider":"osm","zoomLevel":11,"x":10,"y":6}
+          {"provider":"osm","zoomLevel":11,"x":10,"y":9}
         </text>
       </g>
       <g
         transform="translate(5, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":11,"x":10,"y":7}
+          {"provider":"osm","zoomLevel":11,"x":10,"y":10}
         </text>
       </g>
     </svg>
@@ -189,56 +189,56 @@ describe('The TiledLayer component ', () => {
         transform="translate(-3, -1)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":2,"y":4}
+          {"provider":"osm","zoomLevel":10,"x":2,"y":7}
         </text>
       </g>
       <g
         transform="translate(-2, -1)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":3,"y":4}
+          {"provider":"osm","zoomLevel":10,"x":3,"y":7}
         </text>
       </g>
       <g
         transform="translate(-3, 0)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":2,"y":5}
+          {"provider":"osm","zoomLevel":10,"x":2,"y":8}
         </text>
       </g>
       <g
         transform="translate(-2, 0)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":3,"y":5}
+          {"provider":"osm","zoomLevel":10,"x":3,"y":8}
         </text>
       </g>
       <g
         transform="translate(-3, 1)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":2,"y":6}
+          {"provider":"osm","zoomLevel":10,"x":2,"y":9}
         </text>
       </g>
       <g
         transform="translate(-2, 1)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":3,"y":6}
+          {"provider":"osm","zoomLevel":10,"x":3,"y":9}
         </text>
       </g>
       <g
         transform="translate(-3, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":2,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":2,"y":10}
         </text>
       </g>
       <g
         transform="translate(-2, 2)"
       >
         <text>
-          {"provider":"osm","zoomLevel":10,"x":3,"y":7}
+          {"provider":"osm","zoomLevel":10,"x":3,"y":10}
         </text>
       </g>
     </svg>

src/components/map/TiledLayer.tsx

@@ -46,7 +46,7 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
             provider: props.keyObject.provider,
             zoomLevel: props.keyObject.zoomLevel,
             x: props.keyObject.x + col,
-            y: props.keyObject.x + row,
+            y: props.keyObject.y + row,
           };
           const key = tileUri(keyObject);
           if (!Object.hasOwn(tiles.current, key)) {