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} />
+      {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}
+    </>
   );
 };
 

src/icons/flag-finish-b-o-svgrepo-com.svg

@@ -0,0 +1 @@
+<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M50 0a3.5 3.5 0 0 0-3.5 3.5v80A3.5 3.5 0 0 0 50 87a3.5 3.5 0 0 0 3.5-3.5V47h43a3.5 3.5 0 0 0 3.5-3.5v-40A3.5 3.5 0 0 0 96.5 0h-46a3.5 3.5 0 0 0-.254.01A3.5 3.5 0 0 0 50 0zm13.8 7h9.8v7.43h9.8V7H93v7.43h-9.6v9.799H93v9.8h-9.6V40h-9.8v-5.97h-9.8V40H54v-5.97h9.8v-9.801H54v-9.8h9.8V7zm0 7.43v9.799h9.8v-9.8h-9.8zm9.8 9.799v9.8h9.8v-9.8h-9.8z" fill="currentColor"></path><path d="M38.004 76.792C27.41 78.29 20 81.872 20 87.143C20 94.243 32.381 100 50 100s30-5.756 30-12.857c0-5.272-7.41-8.853-18.003-10.35l-1.468 2.499C68.514 80.399 74 82.728 74 85.429c0 3.787-10.745 6.857-24 6.857s-24-3.07-24-6.857c-.001-2.692 5.45-5.018 13.459-6.13c-.484-.836-.97-1.67-1.455-2.507z" fill="currentColor"></path></svg>

src/icons/flag-start-b-svgrepo-com.svg

@@ -0,0 +1 @@
+<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M50 0a3.5 3.5 0 0 0-3.5 3.5v80A3.5 3.5 0 0 0 50 87a3.5 3.5 0 0 0 3.5-3.5V47h43a3.5 3.5 0 0 0 3.5-3.5v-40A3.5 3.5 0 0 0 96.5 0h-46a3.5 3.5 0 0 0-.254.01A3.5 3.5 0 0 0 50 0z" fill="currentColor"></path><path d="M38.004 76.792C27.41 78.29 20 81.872 20 87.143C20 94.243 32.381 100 50 100s30-5.756 30-12.857c0-5.272-7.41-8.853-18.003-10.35l-1.468 2.499C68.514 80.399 74 82.728 74 85.429c0 3.787-10.745 6.857-24 6.857s-24-3.07-24-6.857c-.001-2.692 5.45-5.018 13.459-6.13c-.484-.836-.97-1.67-1.455-2.507z" fill="currentColor"></path></svg>