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';

src/db/lib.ts

@@ -40,7 +40,7 @@ export const getFamily = async (key: string, options: any = {}) => {
 };
 
 export const get = async (id: string) => {
-  await db.get(id);
+  return await db.get(id);
 };
 
 export const putAll = async (docs: any[]) => {

src/db/wpt.ts

@@ -1,6 +1,6 @@
 import getUri from '../lib/ids';
 import { putNewGpx } from './gpx';
-import { put } from './lib';
+import { get, put } from './lib';
 
 export const emptyWpt: Wpt = {
   $: { lat: 0, lon: 0 },
@@ -42,3 +42,10 @@ export const putNewWpt = async (id?: IdGpx | IdWpt) => {
   );
   return finalId as IdWpt;
 };
+
+
+export const getWpt = async (params: any) => {
+  const { id } = params;
+  const doc = await get(id);
+  return doc.doc;
+};

src/icons/location-pin-svgrepo-com-green.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="297" height="297" >
+<g color='#228b22' fill='#228b22' >
+	<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
+		c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
+		C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892
+		c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
+	<path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
+		c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901
+		c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104
+		C179.265,127.948,165.464,141.901,148.5,141.901z"/>
+</g>
+</svg>

src/icons/location-pin-svgrepo-com.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="297" height="297" >
+<g color='black' stroke='black' >
+	<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
+		c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
+		C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892
+		c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
+	<path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
+		c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901
+		c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104
+		C179.265,127.948,165.464,141.901,148.5,141.901z"/>
+</g>
+</svg>

src/workers/dispatcher-worker.ts

@@ -10,6 +10,7 @@ import {
 } from '../db/gpx';
 import { getTrk, putNewTrk } from '../db/trk';
 import { getTrkseg } from '../db/trkseg';
+import { getWpt } from '../db/wpt';
 
 //const self = globalThis as unknown as WorkerGlobalScope;
 
@@ -24,6 +25,7 @@ const actions = {
   getGpx,
   getTrk,
   getTrkseg,
+  getWpt
 };
 
 console.log({ caller: 'dispatcher-worker', actions });