From 2eb9a6cb472e7d22c1f845f556958e2beb614276 Mon Sep 17 00:00:00 2001 From: evlist 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) => {}, }, });