Starting to add some style to trksegs.

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(() => {