diff --git a/src/components/map/LayerStack.tsx b/src/components/map/LayerStack.tsx index 2cb040b..7be0e4e 100644 --- a/src/components/map/LayerStack.tsx +++ b/src/components/map/LayerStack.tsx @@ -125,7 +125,7 @@ export const LayerStack: react.FC = ( // And the active one getTiledLayer(activeTiledLayer, viewPort) } - {/* {props.slippyGraphics !== undefined ? ( + {props.slippyGraphics !== undefined ? ( // Slippy graphics (if needed) <> {props.slippyGraphics.map((slippyGraphic) => @@ -135,9 +135,9 @@ export const LayerStack: react.FC = ( viewPort: viewPort, }) )} - {console.log('TiledLayer: adding slippyGraphics')}, + {console.log('LayerStack: adding slippyGraphics')}, - ) : null} */} + ) : null} ); diff --git a/src/components/map/Marker.tsx b/src/components/map/Marker.tsx index 48fac9f..59d1785 100644 --- a/src/components/map/Marker.tsx +++ b/src/components/map/Marker.tsx @@ -36,7 +36,11 @@ export const Marker: react.FC = (props: MarkerProperties) => { return null; } return ( - + {props.icon} ); diff --git a/src/components/map/Trkseg.tsx b/src/components/map/Trkseg.tsx index 169c65f..e442020 100644 --- a/src/components/map/Trkseg.tsx +++ b/src/components/map/Trkseg.tsx @@ -1,7 +1,7 @@ import react, { useEffect, useState } from 'react'; import { lon2tile, lat2tile } from '../../lib/geo'; import dispatch from '../../workers/dispatcher-main'; -import { TileKeyObject, Rectangle } from './types'; +import { TileKeyObject, Rectangle, Point } from './types'; import css from './Trkseg.module.css'; @@ -33,10 +33,13 @@ export const Trkseg: react.FC = (props: TrksegProperties) => { .reduce((previous: string, current: any, index: number) => { const action = index === 0 ? 'M' : index === 1 ? 'L' : ''; const trkpt = current.doc.doc; - return `${previous} ${action} ${lon2tile( - trkpt.$.lon, - props.keyObject.zoomLevel - )}, ${lat2tile(trkpt.$.lat, props.keyObject.zoomLevel)}`; + return `${previous} ${action} ${ + (lon2tile(trkpt.$.lon, props.keyObject.zoomLevel) - props.keyObject.x) * + 256 + }, ${ + (lat2tile(trkpt.$.lat, props.keyObject.zoomLevel) - props.keyObject.y) * + 256 + }`; }, ''); const widthFactor = () => { @@ -61,12 +64,7 @@ export const Trkseg: react.FC = (props: TrksegProperties) => { // style={{ strokeWidth: widthFactor() / 256 / props.zoom }} return ( - + ); };