Adding <Wpt>

src/components/gpx/Gpx.tsx

@@ -8,8 +8,8 @@ import getUri from '../../lib/ids';
 import VectorSource from 'ol/source/Vector';
 import VectorLayer from 'ol/layer/Vector';
 
-
 import style from './styles';
+import Wpt from '../wpt';
 
 interface Props {
   gpxId: string;
@@ -37,13 +37,20 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
   });
 
   return (
-    // @ts-ignore
-    <For each={gpx() ? gpx().trk || [] : []}>
-      {(trkId: string) => {
-        console.log({ caller: 'Gpx / loop', trkId });
-        return <Trk vectorSource={vectorSource} trkId={trkId} />;
-      }}
-    </For>
+    <>
+      <For each={gpx() ? gpx().trk || [] : []}>
+        {(trkId: string) => {
+          console.log({ caller: 'Gpx / loop', trkId });
+          return <Trk vectorSource={vectorSource} trkId={trkId} />;
+        }}
+      </For>
+      <For each={gpx() ? gpx().wpt || [] : []}>
+        {(wptId: string) => {
+          console.log({ caller: 'Gpx / loop', wptId });
+          return <Wpt vectorSource={vectorSource} wptId={wptId} />;
+        }}
+      </For>
+    </>
   );
 };
 

src/components/gpx/styles.ts

@@ -1,6 +1,7 @@
 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 wptIcon from '../../icons/location-pin-svgrepo-com.svg';
 import { Feature } from 'ol';
 
 const trackStrokeStyle = new Stroke({
@@ -12,18 +13,29 @@ const trtksegStartImageStyle = new Icon({
   src: startIcon,
   scale: 0.2,
   opacity: 0.6,
+  anchor: [0.5, 1],
 });
 
 const trtksegFinishImageStyle = new Icon({
   src: finishIcon,
   scale: 0.2,
   opacity: 0.6,
+  anchor: [0.5, 1],
+});
+
+const wptImageStyle = new Icon({
+  src: wptIcon,
+  scale: 0.1,
+  opacity: 0.8,
+  anchor: [0.5, 1],
 });
 
 const trtksegStyle = new Style({ stroke: trackStrokeStyle });
 const trtksegStartStyle = new Style({ image: trtksegStartImageStyle });
 const trtksegFinishStyle = new Style({ image: trtksegFinishImageStyle });
 
+const wptStyle = new Style({ image: wptImageStyle });
+
 export const style = (feature: Feature, resolution: number) => {
   const type = feature.get('type');
   if (type === 'trkseg') {
@@ -35,6 +47,9 @@ export const style = (feature: Feature, resolution: number) => {
   if (type === 'trkseg-finish') {
     return trtksegFinishStyle;
   }
+  if (type === 'wpt') {
+    return wptStyle;
+  }
 };
 
 export default style;

src/components/wpt/Wpt.tsx

@@ -0,0 +1,54 @@
+import { Component, createEffect, createResource } from 'solid-js';
+
+import OlMap from 'ol/Map';
+
+import dispatch from '../../workers/dispatcher-main';
+import getUri from '../../lib/ids';
+import VectorSource from 'ol/source/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
+
+interface Props {
+  wptId: string;
+  vectorSource: VectorSource;
+}
+
+export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
+  const [wpt] = createResource(
+    wptId,
+    async () =>
+      await dispatch({
+        action: 'getWpt',
+        params: {
+          id: wptId,
+        },
+      })
+  );
+
+  createEffect(() => {
+    console.log({ caller: 'Wpt', vectorSource, wptId, wpt: wpt() });
+
+    if (wpt()) {
+      let geo: any = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [wpt().$.lon, wpt().$.lat],
+            },
+            properties: { type: 'wpt' },
+          },
+        ],
+      };
+
+      const features = new GeoJSON().readFeatures(geo);
+      console.log({ caller: 'Wpt', features });
+      vectorSource.addFeatures(features);
+    }
+  });
+
+  return <></>;
+};
+
+export default Wpt;

src/components/wpt/index.ts

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