diff --git a/src/components/gpx/Gpx.tsx b/src/components/gpx/Gpx.tsx index a9ea3f2..43a6f04 100644 --- a/src/components/gpx/Gpx.tsx +++ b/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 = ({ map, gpxId }) => { }); return ( - // @ts-ignore - - {(trkId: string) => { - console.log({ caller: 'Gpx / loop', trkId }); - return ; - }} - + <> + + {(trkId: string) => { + console.log({ caller: 'Gpx / loop', trkId }); + return ; + }} + + + {(wptId: string) => { + console.log({ caller: 'Gpx / loop', wptId }); + return ; + }} + + ); }; diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 7d8d486..e28fc66 100644 --- a/src/components/gpx/styles.ts +++ b/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; diff --git a/src/components/wpt/Wpt.tsx b/src/components/wpt/Wpt.tsx new file mode 100644 index 0000000..cb8616d --- /dev/null +++ b/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 = ({ 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; diff --git a/src/components/wpt/index.ts b/src/components/wpt/index.ts new file mode 100644 index 0000000..8ef5a6b --- /dev/null +++ b/src/components/wpt/index.ts @@ -0,0 +1 @@ +export { default } from './Wpt'; diff --git a/src/db/lib.ts b/src/db/lib.ts index 0b98445..7639a2b 100644 --- a/src/db/lib.ts +++ b/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[]) => { diff --git a/src/db/wpt.ts b/src/db/wpt.ts index fd8c8e0..81f1d62 100644 --- a/src/db/wpt.ts +++ b/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; +}; \ No newline at end of file diff --git a/src/icons/location-pin-svgrepo-com-green.svg b/src/icons/location-pin-svgrepo-com-green.svg new file mode 100644 index 0000000..ecd50ea --- /dev/null +++ b/src/icons/location-pin-svgrepo-com-green.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/src/icons/location-pin-svgrepo-com.svg b/src/icons/location-pin-svgrepo-com.svg new file mode 100644 index 0000000..3315a73 --- /dev/null +++ b/src/icons/location-pin-svgrepo-com.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/src/workers/dispatcher-worker.ts b/src/workers/dispatcher-worker.ts index b7e423a..68d5248 100644 --- a/src/workers/dispatcher-worker.ts +++ b/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 });