Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Changed the zoom relative level for the SVG overlay to avoid issues at higher zoom levels (probably due to rounding errors).

This commit is contained in:
Eric van der Vlist 2022-09-21 15:47:57 +02:00
parent 7808b7db7e
commit f0cf255f14
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/map/whiteboard.tsx
View File

@ -1,6 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { MapState } from '../../store/map'; import { MapState, zoom0 } from '../../store/map';
interface WhiteboardProps { interface WhiteboardProps {
children?: any; children?: any;
@ -17,11 +17,10 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`} transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
> >
<circle <circle
cx='0.7154276391666667' cx={0.7154276391666667 * 2**zoom0}
cy='0.6137091783430285' cy={0.6137091783430285 * 2**zoom0}
r={10 / whiteBoardState.scale} r={10 / whiteBoardState.scale}
fill='green' fill='green'
vector-effect='non-scaling-size'
></circle> ></circle>
{props.children} {props.children}
</g> </g>

6
src/store/map.ts
View File

@ -10,6 +10,8 @@ import {
tile2long, tile2long,
} from '../lib/geo'; } from '../lib/geo';
export const zoom0 = 10;
// Top level properties (the other properties can be derived from them) // Top level properties (the other properties can be derived from them)
// The map itself // The map itself
@ -19,7 +21,7 @@ export interface MapScope {
} }
var initialMapScope: MapScope = { var initialMapScope: MapScope = {
center: { lat: -37.8403508, lon: 77.5539501 }, center: { lat: -37.8403508, lon: 77.5539501 },
zoom: 4, zoom: 17,
}; };
// Derived properties // Derived properties
@ -109,7 +111,7 @@ const evaluateWhiteboardViewBox = (
) => { ) => {
// Update the whiteboard SVG viewBox // Update the whiteboard SVG viewBox
const scaleFactor = 2 ** state.scope.zoom; const scaleFactor = 2 ** (state.scope.zoom - zoom0);
state.whiteboard.scale = scaleFactor * tileSize; state.whiteboard.scale = scaleFactor * tileSize;
state.whiteboard.translation.x = state.whiteboard.translation.x =