From 2eb9a6cb472e7d22c1f845f556958e2beb614276 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 14 Sep 2022 10:26:27 +0200
Subject: [PATCH] Adding scale support in the computeStateFromScope method.

---
 src/store/map.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/store/map.ts b/src/store/map.ts
index 942abc3..5356ac1 100644
--- a/src/store/map.ts
+++ b/src/store/map.ts
@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import _ from 'lodash';
+import _, { round } from 'lodash';
 import { tileSize } from '../components/map/tiled-map';
 import { geoPoint, Point, lon2tile, lat2tile } from '../lib/geo';
 
@@ -11,8 +11,8 @@ export interface MapScope {
   zoom: number;
 }
 const initialMapScope: MapScope = {
-  center: { lat: -37.8372, lon: 77.5513 },
-  zoom: 13,
+  center: { lat:  -37.8403508, lon: 77.5539501 },
+  zoom: 13.49,
 };
 
 // Derived properties
@@ -66,11 +66,14 @@ const computeStateFromScope = (scope: MapScope) => {
   state.scope = newScope;
   state.tiles = {} as TilesDescription;
   state.slippy = {} as SlippyState;
-  state.tiles.nb = {
-    x: _.ceil(window.innerWidth / tileSize + 4),
-    y: _.ceil(window.innerHeight / tileSize + 4),
-  };
   state.tiles.zoom = _.round(state.scope.zoom);
+  const softZoom = state.scope.zoom - state.tiles.zoom;
+  state.slippy.scale = 2 ** softZoom;
+  const visibleTileSize = tileSize * state.slippy.scale;
+  state.tiles.nb = {
+    x: _.ceil(window.innerWidth / visibleTileSize + 4),
+    y: _.ceil(window.innerHeight / visibleTileSize + 4),
+  };
   const tilesCenter: Point = {
     x: lon2tile(state.scope.center.lon, state.tiles.zoom),
     y: lat2tile(state.scope.center.lat, state.tiles.zoom),
@@ -84,14 +87,13 @@ const computeStateFromScope = (scope: MapScope) => {
     y: window.innerHeight / 2,
   };
   const tilesCenterActualLocation: Point = {
-    x: (tilesCenter.x - state.tiles.first.x) * tileSize,
-    y: (tilesCenter.y - state.tiles.first.y) * tileSize,
+    x: (tilesCenter.x - state.tiles.first.x) * visibleTileSize,
+    y: (tilesCenter.y - state.tiles.first.y) * visibleTileSize,
   };
   state.slippy.translation = {
     x: tilesCenterTargetLocation.x - tilesCenterActualLocation.x,
     y: tilesCenterTargetLocation.y - tilesCenterActualLocation.y,
   };
-  state.slippy.scale = 1;
 
   return state;
 };
@@ -105,9 +107,7 @@ const mapSlice = createSlice({
     resize: (state) => {
       return computeStateFromScope(state.scope);
     },
-    shift: (state, action) => {
-     
-    },
+    shift: (state, action) => {},
     scale: (state, action) => {},
   },
 });