Diffrent flags for start and finish

src/components/gpx/Gpx.tsx

@@ -7,31 +7,15 @@ 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';
+
+
+import style from './styles';
 
 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,

src/components/gpx/styles.ts

@@ -0,0 +1,40 @@
+import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
+import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
+import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
+import { Feature } from 'ol';
+
+const trackStrokeStyle = new Stroke({
+  color: 'blue',
+  width: 2,
+});
+
+const trtksegStartImageStyle = new Icon({
+  src: startIcon,
+  scale: 0.2,
+  opacity: 0.6,
+});
+
+const trtksegFinishImageStyle = new Icon({
+  src: finishIcon,
+  scale: 0.2,
+  opacity: 0.6,
+});
+
+const trtksegStyle = new Style({ stroke: trackStrokeStyle });
+const trtksegStartStyle = new Style({ image: trtksegStartImageStyle });
+const trtksegFinishStyle = new Style({ image: trtksegFinishImageStyle });
+
+export const style = (feature: Feature, resolution: number) => {
+  const type = feature.get('type');
+  if (type === 'trkseg') {
+    return trtksegStyle;
+  }
+  if (type === 'trkseg-start') {
+    return trtksegStartStyle;
+  }
+  if (type === 'trkseg-finish') {
+    return trtksegFinishStyle;
+  }
+};
+
+export default style;