dyomedea/src/components/map/LiveMap.tsx

136 lines
3.8 KiB
TypeScript
Raw Normal View History

2022-10-31 17:05:58 +00:00
import react, { useState } from 'react';
import { MapScope, Point } from './types';
import Map from './Map';
import Handlers from './Handlers';
import { atom } from 'jotai';
import { tileProviders } from './tile-providers';
import { lon2tile, lat2tile, tile2lat, tile2long } from '../../lib/geo';
2022-10-31 17:05:58 +00:00
/**
* 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;
}
2022-10-31 17:05:58 +00:00
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);
}
);
export interface LiveMapProperties {
scope: MapScope;
numberOfTiledLayers?: number;
}
export const LiveMap: react.FC<LiveMapProperties> = (
props: LiveMapProperties
) => {
const [scope, setScope] = useState(props.scope);
console.log(`LiveMap rendering: ${JSON.stringify(scope)}`);
const transform = (t: Transformation) => {
const deltaZoom = t.deltaZoom === null ? 0 : Math.log2(t.deltaZoom);
const tileProvider = tileProviders[scope.tileProvider];
const tilesZoom = Math.min(
Math.max(Math.round(scope.zoom), tileProvider.minZoom),
tileProvider.maxZoom
);
const softZoom = scope.zoom - tilesZoom;
const relativeScale = 2 ** softZoom;
const visibleTileSize = tileProvider.tileSize * relativeScale;
const tilesCenter: Point = {
x: lon2tile(scope.center.lon, tilesZoom),
y: lat2tile(scope.center.lat, tilesZoom),
};
const newTilesCenter = {
x:
tilesCenter.x -
(t.deltaShift === null ? 0 : t.deltaShift.x) / visibleTileSize,
y:
tilesCenter.y -
(t.deltaShift === null ? 0 : t.deltaShift.y) / visibleTileSize,
};
const newScope: MapScope = {
center: {
lat: tile2lat(newTilesCenter.y, tilesZoom),
lon: tile2long(newTilesCenter.x, tilesZoom),
},
zoom: deltaZoom + scope.zoom,
tileProvider: scope.tileProvider,
};
console.log(
`LiveMap transform: ${JSON.stringify(t)}, ${JSON.stringify(
scope
)} -> ${JSON.stringify(newScope)}, delta lat: ${
newScope.center.lat - scope.center.lat
}, delta lon: ${newScope.center.lon - scope.center.lon}`
);
setScope(newScope);
};
return (
<>
<Handlers transformMap={transform} />
<Map scope={scope} numberOfTiledLayers={props.numberOfTiledLayers} />
</>
);
};
export default LiveMap;