Starting to add some style to trksegs.

src/components/gpx-import/GpxImport.tsx

@@ -25,6 +25,7 @@ const GpxImport: Component = () => {
         console.log(fileReader.result);
         const gpx = GPX.parse(fileReader.result);
         console.log(`gpx: ${JSON.stringify(gpx)}`);
+        if (gpx) {
           const startTime = new Date(findStartTime(gpx)!);
           dispatch({
             action: 'pruneAndSaveImportedGpx',
@@ -41,6 +42,13 @@ const GpxImport: Component = () => {
             },
           });
           refetchGpxList();
+        } else {
+          console.error({
+            message: "can't parse GPX file",
+            xml: fileReader.result,
+          });
+        }
+        // TODO: error handling
       },
       false
     );

src/components/gpx/Gpx.tsx

@@ -7,12 +7,31 @@ import Trk from '../trk';
 import getUri from '../../lib/ids';
 import VectorSource from 'ol/source/Vector';
 import VectorLayer from 'ol/layer/Vector';
+import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
+import startIcon from '../../icons/flag-start-b-svgrepo-com.svg';
 
 interface Props {
   gpxId: string;
   map: () => OlMap | null;
 }
 
+console.log({ caller: startIcon });
+
+const style = [
+  new Style({
+    stroke: new Stroke({
+      color: 'blue',
+      width: 2,
+    }),
+    image: new Icon({
+      src: startIcon,
+      color: 'green',
+      scale: 0.2,
+      opacity: 0.6,
+    }),
+  }),
+];
+
 export const Gpx: Component<Props> = ({ map, gpxId }) => {
   const [gpx] = createResource(
     gpxId,
@@ -26,7 +45,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
   );
 
   const vectorSource = new VectorSource();
-  const vectorLayer = new VectorLayer({ source: vectorSource });
+  const vectorLayer = new VectorLayer({ source: vectorSource, style });
   createEffect(() => map()?.addLayer(vectorLayer));
 
   createEffect(() => {

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>