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

Adapting "slippy graphics" to the new structure.

This commit is contained in:
Eric van der Vlist 2022-11-17 15:26:29 +01:00
parent 812849cdef
commit e4621e4651
3 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/map/LayerStack.tsx
View File

@ -125,7 +125,7 @@ export const LayerStack: react.FC<LayerStackProperties> = (
// And the active one // And the active one
getTiledLayer(activeTiledLayer, viewPort) getTiledLayer(activeTiledLayer, viewPort)
} }
{/* {props.slippyGraphics !== undefined ? ( {props.slippyGraphics !== undefined ? (
// Slippy graphics (if needed) // Slippy graphics (if needed)
<> <>
{props.slippyGraphics.map((slippyGraphic) => {props.slippyGraphics.map((slippyGraphic) =>
@ -135,9 +135,9 @@ export const LayerStack: react.FC<LayerStackProperties> = (
viewPort: viewPort, viewPort: viewPort,
}) })
)} )}
{console.log('TiledLayer: adding slippyGraphics')}, {console.log('LayerStack: adding slippyGraphics')},
</> </>
) : null} */} ) : null}
</g> </g>
</svg> </svg>
); );

6
src/components/map/Marker.tsx
View File

@ -36,7 +36,11 @@ export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
return null; return null;
} }
return ( return (
<g transform={`translate(${x}, ${y}) scale(${1 / props.zoom})`}> <g
transform={`translate(${(x - props.keyObject.x) * 256}, ${
(y - props.keyObject.y) * 256
}) scale(${256 / props.zoom})`}
>
{props.icon} {props.icon}
</g> </g>
); );

20
src/components/map/Trkseg.tsx
View File

@ -1,7 +1,7 @@
import react, { useEffect, useState } from 'react'; import react, { useEffect, useState } from 'react';
import { lon2tile, lat2tile } from '../../lib/geo'; import { lon2tile, lat2tile } from '../../lib/geo';
import dispatch from '../../workers/dispatcher-main'; import dispatch from '../../workers/dispatcher-main';
import { TileKeyObject, Rectangle } from './types'; import { TileKeyObject, Rectangle, Point } from './types';
import css from './Trkseg.module.css'; import css from './Trkseg.module.css';
@ -33,10 +33,13 @@ export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
.reduce((previous: string, current: any, index: number) => { .reduce((previous: string, current: any, index: number) => {
const action = index === 0 ? 'M' : index === 1 ? 'L' : ''; const action = index === 0 ? 'M' : index === 1 ? 'L' : '';
const trkpt = current.doc.doc; const trkpt = current.doc.doc;
return `${previous} ${action} ${lon2tile( return `${previous} ${action} ${
trkpt.$.lon, (lon2tile(trkpt.$.lon, props.keyObject.zoomLevel) - props.keyObject.x) *
props.keyObject.zoomLevel 256
)}, ${lat2tile(trkpt.$.lat, props.keyObject.zoomLevel)}`; }, ${
(lat2tile(trkpt.$.lat, props.keyObject.zoomLevel) - props.keyObject.y) *
256
}`;
}, ''); }, '');
const widthFactor = () => { const widthFactor = () => {
@ -61,12 +64,7 @@ export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
// style={{ strokeWidth: widthFactor() / 256 / props.zoom }} // style={{ strokeWidth: widthFactor() / 256 / props.zoom }}
return ( return (
<g> <g>
<path <path d={d} pointerEvents='none' className={css.track} />
d={d}
pointerEvents='none'
className={css.track}
/>
</g> </g>
); );
}; };