Re-implementing basic scale and shift actions (without reevaluating the scope).

src/components/map/map.tsx

@@ -1,5 +1,5 @@
 import react, { useMemo, useEffect, Fragment } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 import _ from 'lodash';
 

src/store/map.ts

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import _, { round } from 'lodash';
+import _ from 'lodash';
 import { tileSize } from '../components/map/tiled-map';
 import { geoPoint, Point, lon2tile, lat2tile } from '../lib/geo';
 
@@ -11,7 +11,7 @@ export interface MapScope {
   zoom: number;
 }
 const initialMapScope: MapScope = {
-  center: { lat:  -37.8403508, lon: 77.5539501 },
+  center: { lat: -37.8403508, lon: 77.5539501 },
   zoom: 13.49,
 };
 
@@ -107,8 +107,25 @@ const mapSlice = createSlice({
     resize: (state) => {
       return computeStateFromScope(state.scope);
     },
-    shift: (state, action) => {},
-    scale: (state, action) => {},
+    shift: (state, action) => {
+      state.slippy.translation = {
+        x: state.slippy.translation.x + action.payload.x,
+        y: state.slippy.translation.y + action.payload.y,
+      };
+    },
+    scale: (state, action) => {
+      state.slippy.scale = state.slippy.scale * action.payload.factor;
+      state.slippy.translation = {
+        x:
+          state.slippy.translation.x +
+          (state.slippy.translation.x - action.payload.center.x) *
+            (action.payload.factor - 1),
+        y:
+          state.slippy.translation.y +
+          (state.slippy.translation.y - action.payload.center.y) *
+            (action.payload.factor - 1),
+      };
+    },
   },
 });