Adding start and finish icons to trksegs.

src/components/map/CurrentLocation.tsx

@@ -28,11 +28,11 @@ export const CurrentLocation: react.FC<CurrentLocationProperties> = (
         <circle
           cx={0}
           cy={0}
-          r={8 / 256}
+          r={8}
           fill='blue'
           opacity='90%'
           stroke='white'
-          strokeWidth={3 / 256}
+          strokeWidth={3}
           strokeOpacity='100%'
         />
       }

src/components/map/Marker.tsx

@@ -8,6 +8,7 @@ export interface MarkerProperties {
   keyObject?: TileKeyObject;
   zoom?: number;
   viewPort?: Rectangle;
+  className?: string;
 }
 
 export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
@@ -39,7 +40,8 @@ export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
     <g
       transform={`translate(${(x - props.keyObject.x) * 256}, ${
         (y - props.keyObject.y) * 256
-      }) scale(${256 / props.zoom})`}
+      }) scale(${1 / props.zoom})`}
+      className={props.className}
     >
       {props.icon}
     </g>

src/components/map/Trkseg.module.css

@@ -6,3 +6,10 @@
   stroke: rgba(10, 1, 51, 0.8);
   vector-effect: non-scaling-stroke;
 }
+
+.start {
+  color: green;
+}
+.finish {
+  color: red;
+}

src/components/map/Trkseg.tsx

@@ -1,9 +1,12 @@
 import react, { useEffect, useState } from 'react';
 import { lon2tile, lat2tile } from '../../lib/geo';
 import dispatch from '../../workers/dispatcher-main';
-import { TileKeyObject, Rectangle, Point } from './types';
+import { TileKeyObject, Rectangle, Point, geoPoint } from './types';
 
 import css from './Trkseg.module.css';
+import { ReactComponent as Start } from '../../icons/flag-start-b-svgrepo-com.svg';
+import { ReactComponent as Finish } from '../../icons/flag-finish-b-o-svgrepo-com.svg';
+import Marker from './Marker';
 
 export interface TrksegProperties {
   id: string;
@@ -42,30 +45,45 @@ export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
       }`;
     }, '');
 
-  const widthFactor = () => {
-    return 2;
-    if (props.keyObject.zoomLevel <= 12) {
-      return 2;
-    }
-    if (props.keyObject.zoomLevel <= 17) {
-      return 4;
-    }
-
-    if (props.keyObject.zoomLevel <= 18) {
-      return 8;
-    }
-    if (props.keyObject.zoomLevel <= 19) {
-      return 16;
-    }
-
-    return 64;
-  };
-
-  // style={{ strokeWidth: widthFactor() / 256 / props.zoom }}
   return (
-    <g>
-      <path d={d} pointerEvents='none' className={css.track} />
-    </g>
+    <>
+      {trkseg[1] !== undefined ? (
+        <>
+          <Marker
+            coordinates={trkseg[1].doc.doc.$ as geoPoint}
+            key='start'
+            keyObject={props.keyObject}
+            icon={
+              <g
+                className={css.start}
+                transform=' scale(.5) translate(-50, -100)'
+              >
+                <Start />
+              </g>
+            }
+            viewPort={props.viewPort}
+            zoom={props.zoom}
+          />
+
+          <path d={d} pointerEvents='none' className={css.track} />
+          <Marker
+            coordinates={trkseg.at(-1).doc.doc.$ as geoPoint}
+            key='finish'
+            keyObject={props.keyObject}
+            icon={
+              <g
+                className={css.finish}
+                transform=' scale(.5) translate(-50, -100)'
+              >
+                <Finish />
+              </g>
+            }
+            viewPort={props.viewPort}
+            zoom={props.zoom}
+          />
+        </>
+      ) : null}
+    </>
   );
 };