Using tiles.

src/components/map/map.tsx

@@ -2,6 +2,13 @@ import react, { useMemo, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import _ from 'lodash';
 import { MapState, mapActions } from '../../store/map';
+import { slippyActions } from '../../store/slippy';
+import { lat2tile, lon2tile } from '../../lib/geo';
+import Tile from './tile';
+
+import '../../theme/map.css';
+
+export const tileSize = 256;
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -22,86 +29,43 @@ const Map: react.FC<{}> = (props: {}) => {
     window.addEventListener('resize', debouncedResizeHandler);
   }, []);
 
+  const nbTilesY = _.ceil(mapState.viewport.height / tileSize) + 3;
+  const nbTilesX = _.ceil(mapState.viewport.width / tileSize) + 3;
+  const [tileCenterY, reminderY] = lat2tile(
+    mapState.scope.center.lat,
+    mapState.scope.zoom
+  );
+  const [tileCenterX, reminderX] = lon2tile(
+    mapState.scope.center.lon,
+    mapState.scope.zoom
+  );
+  const firstTileY = tileCenterY - _.round(nbTilesY / 2);
+  const firstTileX = tileCenterX - _.round(nbTilesX / 2);
+  const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
+  const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
+  const targetLocationY = mapState.viewport.height / 2;
+  const targetLocationX = mapState.viewport.width / 2;
+  const deltaY = targetLocationY - locationY;
+  const deltaX = targetLocationX - locationX;
+
+  dispatch(slippyActions.set({ scale: 1, translation: { x: deltaX, y: deltaY } }));
+
   return (
-    <div>
-      <div style={{ height: '256px' }}>
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11720/10052.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11721/10052.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11722/10052.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11723/10052.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-      </div>
-      <div style={{ height: '256px' }}>
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11720/10053.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11721/10053.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11722/10053.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11723/10053.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-      </div>
-      <div style={{ height: '256px' }}>
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11720/10054.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11721/10054.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11722/10054.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-        <img
-          alt=''
-          role='presentation'
-          src='https://tile.openstreetmap.org/14/11723/10054.png'
-          style={{ width: '256px', height: '256px', opacity: 1 }}
-        />
-      </div>
+    <div className='tiles'>
+      {_.range(nbTilesY).map((iy) => (
+        <div key={'y' + iy} className='tilesRow'>
+          {_.range(nbTilesX).map((ix) => (
+            <Tile
+              key={'x' + ix + 'y' + iy}
+              iy={iy}
+              ix={ix}
+              x={firstTileX + ix}
+              y={firstTileY + iy}
+              zoom={mapState.scope.zoom}
+            />
+          ))}
+        </div>
+      ))}
     </div>
   );
 };

src/components/map/tile.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { tileSize } from './map';
+
+const tileProvider = (zoom: number, x: number, y: number) =>
+  'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png';
+
+const Tile: React.FC<{
+  ix: number;
+  iy: number;
+  x: number;
+  y: number;
+  zoom: number;
+}> = (props: {
+  ix: number;
+  iy: number;
+  x: number;
+  y: number;
+  zoom: number;
+}) => {
+  return (
+    <img
+      src={tileProvider(props.zoom, props.x, props.y)}
+      className='tile'
+      alt=''
+    />
+  );
+};
+
+export default Tile;

src/components/slippy/slippy.tsx

@@ -9,21 +9,6 @@ import WheelHandler from './wheel-handler';
 import { useSelector } from 'react-redux';
 import { MapState } from '../../store/map';
 
-export interface Point {
-  x: number;
-  y: number;
-}
-
-export interface Translation {
-  translate: Point;
-}
-
-export interface Scale {
-  scale: {
-    center: Point;
-    factor: number;
-  };
-}
 
 const Slippy: react.FC<{}> = () => {
   //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);