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;

src/icons/flag-finish-b-o-svgrepo-com-green.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="#228b22"></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="#228b22"></path></svg>

src/icons/flag-finish-b-o-svgrepo-com-red.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="red"></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="red"></path></svg>

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

@@ -0,0 +1,17 @@
+<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="#228b22"
+  /><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="#228b22"
+  /></svg>