Adding `<Wpt>`

This commit is contained in:
Eric van der Vlist 2022-11-28 11:52:50 +01:00
parent ec5d90f768
commit 6121df68bf
9 changed files with 124 additions and 10 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 1022 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 1020 B

View File

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