diff --git a/src/store/map.ts b/src/store/map.ts index 4b7b428..8bdf237 100644 --- a/src/store/map.ts +++ b/src/store/map.ts @@ -93,20 +93,22 @@ export const evaluateStateFromScope = (state: MapState) => { console.log('<<<<<<<<<<<< evaluateStateFromScope'); 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), - }; + + state.tiles.nb.x = _.ceil(window.innerWidth / visibleTileSize + 4); + state.tiles.nb.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), }; - state.tiles.first = { - x: _.floor(tilesCenter.x - state.tiles.nb.x / 2), - y: _.floor(tilesCenter.y - state.tiles.nb.y / 2), - }; + + state.tiles.first.x = _.floor(tilesCenter.x - state.tiles.nb.x / 2); + state.tiles.first.y = _.floor(tilesCenter.y - state.tiles.nb.y / 2); + const tilesCenterTargetLocation: Point = { x: window.innerWidth / 2, y: window.innerHeight / 2, @@ -115,10 +117,11 @@ export const evaluateStateFromScope = (state: MapState) => { 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.translation.x = + tilesCenterTargetLocation.x - tilesCenterActualLocation.x; + state.slippy.translation.y = + tilesCenterTargetLocation.y - tilesCenterActualLocation.y; }; evaluateStateFromScope(initialMapState); @@ -129,7 +132,7 @@ export const reevaluateState = (state: MapState) => { x: window.innerWidth / 2, y: window.innerHeight / 2, }; - const visibleTileSize = tileSize / state.slippy.scale; + const visibleTileSize = tileSize * state.slippy.scale; const centerTiles = { x: state.tiles.first.x + @@ -138,10 +141,11 @@ export const reevaluateState = (state: MapState) => { state.tiles.first.y + (centerPX.y - state.slippy.translation.y) / visibleTileSize, }; - state.scope.center = { - lat: tile2lat(centerTiles.y, state.tiles.zoom), - lon: tile2long(centerTiles.x, state.tiles.zoom), - }; + state.scope.center.lat = tile2lat(centerTiles.y, state.tiles.zoom); + state.scope.center.lon = tile2long(centerTiles.x, state.tiles.zoom); + + state.scope.zoom = state.tiles.zoom + Math.log2(state.slippy.scale); + // TODO: zoom level if ( -state.slippy.translation.x < visibleTileSize || @@ -149,7 +153,9 @@ export const reevaluateState = (state: MapState) => { -state.slippy.translation.x > (state.tiles.nb.x - 1) * visibleTileSize - window.innerWidth || -state.slippy.translation.y > - (state.tiles.nb.y - 1) * visibleTileSize - window.innerHeight + (state.tiles.nb.y - 1) * visibleTileSize - window.innerHeight || + state.slippy.scale > Math.SQRT2 || + state.slippy.scale < Math.SQRT1_2 ) { evaluateStateFromScope(state); } @@ -163,24 +169,23 @@ const mapSlice = createSlice({ evaluateStateFromScope(state); }, shift: (state, action) => { - state.slippy.translation = { - x: state.slippy.translation.x + action.payload.x, - y: state.slippy.translation.y + action.payload.y, - }; + state.slippy.translation.x = + state.slippy.translation.x + action.payload.x; + state.slippy.translation.y = + state.slippy.translation.y + action.payload.y; reevaluateState(state); }, 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), - }; + state.slippy.translation.x = + state.slippy.translation.x + + (state.slippy.translation.x - action.payload.center.x) * + (action.payload.factor - 1); + state.slippy.translation.y = + state.slippy.translation.y + + (state.slippy.translation.y - action.payload.center.y) * + (action.payload.factor - 1); + reevaluateState(state); }, },