dyomedea/src/components/map/Map.tsx

import react, { useCallback } from 'react';
import { atom, useAtom } from 'jotai';

import Handlers from './Handlers';
import Tile from './Tile';
import TiledLayer from './TiledLayer';
import { Point, TileFactory } from './types';

export interface MapProperties {}

/**
 * Definition of a coordinate system
 *
 * The coordinate system is shifted and zoomed (from the viewport origin)
 *
 */
export interface CoordinateSystem {
  /** Zoom relative to the origin */
  zoom: number;
  /** Origin's shift (in pixels) */
  shift: Point;
}

const initialCoordinateSystem: CoordinateSystem = {
  zoom: 1,
  shift: { x: 0, y: 0 },
};

/** An atom to store the map coordinates system */
export const coordinateSystemAtom = atom(initialCoordinateSystem);

/**
 * Description of coordinates system transformation
 */
export interface Transformation {
  /** New translation to apply */
  deltaShift: Point | null;
  /** Zoom factor to apply */
  deltaZoom: number | null;
  /** Center of the new zoom to apply */
  zoomCenter: Point | null;
}

/**
 * A write only atom to translate and zoom the coordinate system
 */
export const relativeCoordinateSystemAtom = atom(
  null,
  (get, set, t: Transformation) => {
    const actualDeltaShift =
      t.deltaShift === null ? { x: 0, y: 0 } : t.deltaShift;
    const actualDeltaZoom = t.deltaZoom === null ? 1 : t.deltaZoom;
    const actualZoomCenter =
      t.zoomCenter === null ? { x: 0, y: 0 } : t.zoomCenter;
    const coordinateSystem = get(coordinateSystemAtom);
    var newCoordinateSystem = {
      shift: {
        x:
          coordinateSystem.shift.x +
          actualDeltaShift.x +
          (coordinateSystem.shift.x - actualZoomCenter.x) *
            (actualDeltaZoom - 1),
        y:
          coordinateSystem.shift.y +
          actualDeltaShift.y +
          (coordinateSystem.shift.y - actualZoomCenter.y) *
            (actualDeltaZoom - 1),
      },
      zoom: coordinateSystem.zoom * actualDeltaZoom,
    };
    set(coordinateSystemAtom, newCoordinateSystem);
  }
);

/**
 *
 * @returns A Map component
 */
export const Map: react.FC<MapProperties> = (props: MapProperties) => {
  const [coordinateSystem, setCoordinateSystem] = useAtom(coordinateSystemAtom);

  const simpleTileFactory: TileFactory = useCallback(
    (keyObject) => (
      <Tile
        href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
      />
    ),
    []
  );

  const viewPort = {
    topLeft: {
      x: Math.floor(-coordinateSystem.shift.x / coordinateSystem.zoom / 256),
      y: Math.floor(-coordinateSystem.shift.y / coordinateSystem.zoom / 256),
    },
    bottomRight: {
      x: Math.ceil(
        (-coordinateSystem.shift.x + window.innerWidth) /
          coordinateSystem.zoom /
          256
      ),
      y: Math.ceil(
        (-coordinateSystem.shift.y + window.innerHeight) /
          coordinateSystem.zoom /
          256
      ),
    },
  };

  return (
    <>
      <Handlers />
      <svg width={window.innerWidth} height={window.innerHeight}>
        <g
          transform={`translate(${coordinateSystem.shift.x}, ${coordinateSystem.shift.y}) scale(${coordinateSystem.zoom})`}
        >
          <g transform='scale(256)'>
            <TiledLayer
              keyObject={{ provider: 'osm', zoomLevel: 16, x: 33485, y: 23936 }}
              viewPort={viewPort}
              tileFactory={simpleTileFactory}
            />
          </g>
        </g>
      </svg>
    </>
  );
};

export default Map;