Adapting "slippy graphics" to the new structure.

src/components/map/LayerStack.tsx

@@ -125,7 +125,7 @@ export const LayerStack: react.FC<LayerStackProperties> = (
           // 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<LayerStackProperties> = (
                 viewPort: viewPort,
               })
             )}
-            {console.log('TiledLayer: adding slippyGraphics')},
+            {console.log('LayerStack: adding slippyGraphics')},
           </>
-        ) : null} */}
+        ) : null}
       </g>
     </svg>
   );

src/components/map/Marker.tsx

@@ -36,7 +36,11 @@ export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
     return null;
   }
   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}
     </g>
   );

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<TrksegProperties> = (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<TrksegProperties> = (props: TrksegProperties) => {
   // style={{ strokeWidth: widthFactor() / 256 / props.zoom }}
   return (
     <g>
-      <path
-        d={d}
-        pointerEvents='none'
-        className={css.track}
-        
-      />
+      <path d={d} pointerEvents='none' className={css.track} />
     </g>
   );
 };