ntegration and bug fix
This commit is contained in:
parent
90e2c833a2
commit
7912d0bfe8
|
|
@ -0,0 +1,5 @@
|
|||
.handler {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import react, { useState } from 'react';
|
|||
import { throttle } from 'lodash';
|
||||
import { Point } from './types';
|
||||
import { handlersConfig } from './config';
|
||||
import './Handler.css';
|
||||
|
||||
export interface HandlersProperties {
|
||||
/**Transform the map:
|
||||
|
|
@ -17,7 +18,11 @@ export interface HandlersProperties {
|
|||
/**
|
||||
*
|
||||
* @param props
|
||||
* @returns A div with handlers
|
||||
* @returns A div with the following handlers
|
||||
* * mouseLeave, mouseDown and mouseUp to track the mouse state
|
||||
* * mouseMove to shift the map if the mouse is down
|
||||
*
|
||||
* TODO: Check that using clientX instead of pageX (to pass unit tests) works.
|
||||
*/
|
||||
export const Handlers: react.FC<HandlersProperties> = (
|
||||
props: HandlersProperties
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import react from 'react';
|
||||
import react, { useState } from 'react';
|
||||
import Handlers from './Handlers';
|
||||
import Tile from './Tile';
|
||||
import TiledLayer from './TiledLayer';
|
||||
import { TileFactory } from './types';
|
||||
import { Point, TileFactory } from './types';
|
||||
|
||||
export interface MapProperties {}
|
||||
|
||||
|
|
@ -10,22 +11,63 @@ export interface MapProperties {}
|
|||
* @returns A Map component
|
||||
*/
|
||||
export const Map: react.FC<MapProperties> = (props: MapProperties) => {
|
||||
const [coordinateSystem, setCoordinateSystem] = useState({
|
||||
zoom: 1,
|
||||
shift: { x: 0, y: 0 },
|
||||
});
|
||||
|
||||
const simpleTileFactory: TileFactory = (keyObject) => (
|
||||
<Tile
|
||||
href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
|
||||
/>
|
||||
);
|
||||
|
||||
const transformMap = (
|
||||
deltaShift: Point | null,
|
||||
deltaZoom: number | null,
|
||||
zoomCenter: Point | null
|
||||
) => {
|
||||
const actualDeltaShift = deltaShift === null ? { x: 0, y: 0 } : deltaShift;
|
||||
const actualDeltaZoom = deltaZoom === null ? 1 : deltaZoom;
|
||||
const actualZoomCenter = zoomCenter === null ? { x: 0, y: 0 } : zoomCenter;
|
||||
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,
|
||||
};
|
||||
setCoordinateSystem(newCoordinateSystem);
|
||||
};
|
||||
|
||||
return (
|
||||
<svg width={window.innerWidth} height={window.innerHeight}>
|
||||
<g transform='scale(256)'>
|
||||
<TiledLayer
|
||||
keyObject={{ provider: 'osm', zoomLevel: 16, x: 33488, y: 23939 }}
|
||||
viewPort={{ topLeft: { x: 0, y: 0 }, bottomRight: { x: 10, y: 10 } }}
|
||||
tileFactory={simpleTileFactory}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<>
|
||||
<Handlers transformMap={transformMap} />
|
||||
<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={{
|
||||
topLeft: { x: 0, y: 0 },
|
||||
bottomRight: { x: 10, y: 10 },
|
||||
}}
|
||||
tileFactory={simpleTileFactory}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -26,21 +26,21 @@ describe('The TiledLayer component ', () => {
|
|||
transform="translate(1, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":6,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":6,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(2, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":7,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":7,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(3, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":8,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":8,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -77,42 +77,42 @@ describe('The TiledLayer component ', () => {
|
|||
transform="translate(1, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":6,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":6,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(2, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":7,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":7,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(3, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":8,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":8,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(5, 0)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":10,"y":5}
|
||||
{"provider":"osm","zoomLevel":10,"x":10,"y":8}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(5, 1)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":10,"y":6}
|
||||
{"provider":"osm","zoomLevel":10,"x":10,"y":9}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(5, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":10,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":10,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -148,21 +148,21 @@ describe('The TiledLayer component ', () => {
|
|||
transform="translate(5, 0)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":11,"x":10,"y":5}
|
||||
{"provider":"osm","zoomLevel":11,"x":10,"y":8}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(5, 1)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":11,"x":10,"y":6}
|
||||
{"provider":"osm","zoomLevel":11,"x":10,"y":9}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(5, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":11,"x":10,"y":7}
|
||||
{"provider":"osm","zoomLevel":11,"x":10,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -189,56 +189,56 @@ describe('The TiledLayer component ', () => {
|
|||
transform="translate(-3, -1)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":2,"y":4}
|
||||
{"provider":"osm","zoomLevel":10,"x":2,"y":7}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-2, -1)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":3,"y":4}
|
||||
{"provider":"osm","zoomLevel":10,"x":3,"y":7}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-3, 0)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":2,"y":5}
|
||||
{"provider":"osm","zoomLevel":10,"x":2,"y":8}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-2, 0)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":3,"y":5}
|
||||
{"provider":"osm","zoomLevel":10,"x":3,"y":8}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-3, 1)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":2,"y":6}
|
||||
{"provider":"osm","zoomLevel":10,"x":2,"y":9}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-2, 1)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":3,"y":6}
|
||||
{"provider":"osm","zoomLevel":10,"x":3,"y":9}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-3, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":2,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":2,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-2, 2)"
|
||||
>
|
||||
<text>
|
||||
{"provider":"osm","zoomLevel":10,"x":3,"y":7}
|
||||
{"provider":"osm","zoomLevel":10,"x":3,"y":10}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
|
|||
provider: props.keyObject.provider,
|
||||
zoomLevel: props.keyObject.zoomLevel,
|
||||
x: props.keyObject.x + col,
|
||||
y: props.keyObject.x + row,
|
||||
y: props.keyObject.y + row,
|
||||
};
|
||||
const key = tileUri(keyObject);
|
||||
if (!Object.hasOwn(tiles.current, key)) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue