Using tiles.

src/store/map.ts

@@ -1,10 +1,15 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { geoPoint } from '../lib/geo';
 
 export interface MapState {
   viewport: {
     width: number;
     height: number;
   };
+  scope: {
+    center: geoPoint;
+    zoom: number;
+  };
 }
 
 const initialMapState: MapState = {
@@ -12,6 +17,10 @@ const initialMapState: MapState = {
     width: window.innerWidth,
     height: window.innerHeight,
   },
+  scope: {
+    center: { lat: -37.8372, lon: 77.5513 },
+    zoom: 13,
+  },
 };
 
 const mapSlice = createSlice({
@@ -19,8 +28,8 @@ const mapSlice = createSlice({
   initialState: initialMapState,
   reducers: {
     resize: (state) => {
-        state.viewport.height = window.innerHeight;
-        state.viewport.width = window.innerWidth;
+      state.viewport.height = window.innerHeight;
+      state.viewport.width = window.innerWidth;
     },
   },
 });

src/store/slippy.ts

@@ -1,6 +1,7 @@
+import { actionSheetController } from '@ionic/core';
 import { createSlice } from '@reduxjs/toolkit';
 
-import { Point } from '../components/slippy/slippy';
+import { Point } from '../lib/geo';
 
 export interface SlippyState {
   scale: number;
@@ -16,7 +17,7 @@ const slippySlice = createSlice({
   name: 'slippy',
   initialState: initialSlippyState,
   reducers: {
-    scale(state, action) {
+    scale: (state, action) => {
       console.log(`redux scale: ${JSON.stringify(action.payload)}`);
       state.scale = state.scale * action.payload.factor;
       state.translation.x =
@@ -28,11 +29,14 @@ const slippySlice = createSlice({
         (state.translation.y - action.payload.center.y) *
           (action.payload.factor - 1);
     },
-    translate(state, action) {
+    translate: (state, action) => {
       console.log(`redux translate: action=${JSON.stringify(action)}`);
       state.translation.x = state.translation.x + action.payload.x;
       state.translation.y = state.translation.y + action.payload.y;
     },
+    set: (state, action) => {
+      return action.payload;
+    },
   },
 });