Continuing to re-plug the handlers.

src/components/map/Handlers.tsx

@@ -81,10 +81,10 @@ export const Handlers: react.FC<HandlersProperties> = (
     if (
       mouseState.current.down &&
       Date.now() - mouseState.current.timestamp >
-        handlersConfig.mouseMoveThrottleDelay &&
+        handlersConfig.mouseMoveThrottleDelay /* &&
       (event.clientX - mouseState.current.starting.x) ** 2 +
         (event.clientY - mouseState.current.starting.y) ** 2 >
-        100
+        100 */
     ) {
       genericHandler(event);
       if (mouseState.current.down) {
@@ -227,15 +227,6 @@ export const Handlers: react.FC<HandlersProperties> = (
         );
         const factor = newDistance / touchState.current.distance;
         //     console.log(`+++++++++ ZOOM Factor is ${factor} ++++++++++`);
-        touchState.current = {
-          state: 'double',
-          touches: [
-            { x: event.touches[0].screenX, y: event.touches[0].screenY },
-            { x: event.touches[1].screenX, y: event.touches[1].screenY },
-          ],
-          distance: newDistance,
-          timestamp: Date.now(),
-        };
         const previousCenter = {
           x:
             (touchState.current.touches[0].x +
@@ -257,10 +248,19 @@ export const Handlers: react.FC<HandlersProperties> = (
           },
           deltaZoom: factor,
           zoomCenter: {
-            x: currentCenter.x - previousCenter.x,
+            x: (currentCenter.x + previousCenter.x) / 2,
-            y: currentCenter.y - previousCenter.y,
+            y: (currentCenter.y + previousCenter.y) / 2,
           },
         });
+        touchState.current = {
+          state: 'double',
+          touches: [
+            { x: event.touches[0].screenX, y: event.touches[0].screenY },
+            { x: event.touches[1].screenX, y: event.touches[1].screenY },
+          ],
+          distance: newDistance,
+          timestamp: Date.now(),
+        };
       }
     } else if (
       touchState.current.state === 'pointer' &&

src/components/map/LiveMap.tsx

@@ -81,7 +81,8 @@ export const LiveMap: react.FC<LiveMapProperties> = (
   const [scope, setScope] = useState(props.scope);
   console.log(`LiveMap rendering: ${JSON.stringify(scope)}`);
   const transform = (t: Transformation) => {
-    const deltaZoom = t.deltaZoom === null ? 0 : Math.log2(t.deltaZoom);
+    const deltaZoom = t.deltaZoom === null ? 1 : t.deltaZoom;
+    const deltaZoomLevel = Math.log2(deltaZoom);
 
     const tileProvider = tileProviders[scope.tileProvider];
 
@@ -93,17 +94,37 @@ export const LiveMap: react.FC<LiveMapProperties> = (
     const relativeScale = 2 ** softZoom;
     const visibleTileSize = tileProvider.tileSize * relativeScale;
 
+    // Values in pixels
+    const actualDeltaShift =
+      t.deltaShift === null ? { x: 0, y: 0 } : t.deltaShift;
+    const actualZoomCenter =
+      t.zoomCenter === null ? { x: 0, y: 0 } : t.zoomCenter;
+
+    // Values in tiles (for the current zoom level)
+    const actualDeltaShiftTiles = {
+      x: actualDeltaShift.x / visibleTileSize,
+      y: actualDeltaShift.y / visibleTileSize,
+    };
+    const actualZoomCenterTiles = {
+      x: actualZoomCenter.x / visibleTileSize,
+      y: actualZoomCenter.y / visibleTileSize,
+    };
     const tilesCenter: Point = {
       x: lon2tile(scope.center.lon, tilesZoom),
       y: lat2tile(scope.center.lat, tilesZoom),
     };
+
     const newTilesCenter = {
       x:
         tilesCenter.x -
-        (t.deltaShift === null ? 0 : t.deltaShift.x) / visibleTileSize,
+        actualDeltaShiftTiles.x -
+        (window.innerWidth / 2 / visibleTileSize - actualZoomCenterTiles.x) *
+          (deltaZoom - 1),
       y:
         tilesCenter.y -
-        (t.deltaShift === null ? 0 : t.deltaShift.y) / visibleTileSize,
+        actualDeltaShiftTiles.y -
+        (window.innerHeight / 2 / visibleTileSize - actualZoomCenterTiles.y) *
+          (deltaZoom - 1),
     };
 
     const newScope: MapScope = {
@@ -111,7 +132,7 @@ export const LiveMap: react.FC<LiveMapProperties> = (
         lat: tile2lat(newTilesCenter.y, tilesZoom),
         lon: tile2long(newTilesCenter.x, tilesZoom),
       },
-      zoom: deltaZoom + scope.zoom,
+      zoom: deltaZoomLevel + scope.zoom,
       tileProvider: scope.tileProvider,
     };
     console.log(