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,

src/components/rte/Rte.tsx

@@ -0,0 +1,100 @@
+import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
+
+import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
+import VectorSource from 'ol/source/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
+
+interface Props {
+  rteId: string;
+  vectorSource: VectorSource;
+}
+
+export const Rte: Component<Props> = ({ vectorSource, rteId }) => {
+  const [rte, setRte] = createSignal<Rte>();
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+
+  const rteCallBack = (error: any, result: any, id?: number) => {
+    if (error) {
+      console.error({ caller: 'rteCallBack', error });
+    } else {
+      console.log({ caller: 'rteCallBack', result });
+      setRte(result);
+    }
+    if (id) {
+      setDispatchId(id);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
+      params: {
+        id: rteId,
+        method: 'getRte',
+      },
+    },
+    rteCallBack,
+    true
+  );
+
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: rteId,
+        method: 'getRte',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
+  createEffect(() => {
+    console.log({ caller: 'Rte', vectorSource, rteId, rte: rte() });
+
+    if (rte()) {
+      let geo: any = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [rte().rtept[0].$.lon, rte().rtept[0].$.lat],
+            },
+            properties: { type: 'rte-start', id: rteId },
+          },
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'LineString',
+              coordinates: rte().rtept.map((rtept: any) => [
+                rtept.$.lon,
+                rtept.$.lat,
+              ]),
+            },
+            properties: { type: 'rte', id: rteId },
+          },
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [
+                rte().rtept.at(-1).$.lon,
+                rte().rtept.at(-1).$.lat,
+              ],
+            },
+            properties: { type: 'rte-finish', id: rteId },
+          },
+        ],
+      };
+
+      const features = new GeoJSON().readFeatures(geo);
+      console.log({ caller: 'Rte', features });
+      vectorSource.addFeatures(features);
+    }
+  });
+
+  return <></>;
+};
+
+export default Rte;

src/components/rte/index.tsx

@@ -0,0 +1 @@
+export { default } from './Rte';