Starting to add some style to trksegs.

src/components/gpx-import/GpxImport.tsx

@@ -25,22 +25,30 @@ const GpxImport: Component = () => {
         console.log(fileReader.result);
         const gpx = GPX.parse(fileReader.result);
         console.log(`gpx: ${JSON.stringify(gpx)}`);
-        const startTime = new Date(findStartTime(gpx)!);
-        dispatch({
-          action: 'pruneAndSaveImportedGpx',
-          params: {
-            id: { gpx: intToGpxId(startTime.valueOf()) },
-            gpx: gpx,
-            tech: {
-              lastModified: new Date(file.lastModified).toISOString(),
-              importDate: new Date().toISOString(),
-              name: file.name,
-              size: file.size,
-              type: file.type,
+        if (gpx) {
+          const startTime = new Date(findStartTime(gpx)!);
+          dispatch({
+            action: 'pruneAndSaveImportedGpx',
+            params: {
+              id: { gpx: intToGpxId(startTime.valueOf()) },
+              gpx: gpx,
+              tech: {
+                lastModified: new Date(file.lastModified).toISOString(),
+                importDate: new Date().toISOString(),
+                name: file.name,
+                size: file.size,
+                type: file.type,
+              },
             },
-          },
-        });
-        refetchGpxList();
+          });
+          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(() => {