Displaying routes.

src/components/gpx/Gpx.tsx

@@ -18,6 +18,7 @@ import VectorLayer from 'ol/layer/Vector';
 
 import style from './styles';
 import Wpt from '../wpt';
+import Rte from '../rte';
 
 interface Props {
   gpxId: string;
@@ -83,6 +84,16 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
           );
         }}
       </For>
+      <For each={gpx() ? gpx().rte || [] : []}>
+        {(rteId: string) => {
+          console.log({ caller: 'Gpx / loop', rteId });
+          return (
+            <Suspense>
+              <Rte vectorSource={vectorSource} rteId={rteId} />
+            </Suspense>
+          );
+        }}
+      </For>
       <For each={gpx() ? gpx().wpt || [] : []}>
         {(wptId: string) => {
           console.log({ caller: 'Gpx / loop', wptId });

src/components/gpx/styles.ts

@@ -113,6 +113,28 @@ const styles = {
         anchor: [0.5, 1],
       }),
     },
+    rte: {
+      stroke: new Stroke({
+        color: 'green',
+        width: 5,
+      }),
+    },
+    'rte-start': {
+      image: new Icon({
+        src: startIcon,
+        scale: 0.3,
+        opacity: 0.6,
+        anchor: [0.5, 1],
+      }),
+    },
+    'rte-finish': {
+      image: new Icon({
+        src: finishIcon,
+        scale: 0.3,
+        opacity: 0.6,
+        anchor: [0.5, 1],
+      }),
+    },
     wpt: {
       image: (feature: Feature, zoom: number) => {
         const minZoom = feature.get('extensions')?.['dyo:minZoom'];
@@ -145,6 +167,12 @@ const styles = {
         width: 3,
       }),
     },
+    rte: {
+      stroke: new Stroke({
+        color: 'red',
+        width: 5,
+      }),
+    },
     wpt: {
       image: new Icon({
         src: wptIconSel,