import { Component, createEffect, For, onCleanup, Suspense, } from 'solid-js'; import OlMap from 'ol/Map'; import Trk from '../trk'; import VectorSource from 'ol/source/Vector'; import VectorLayer from 'ol/layer/Vector'; import style from './styles'; import Wpt from '../wpt'; import Rte from '../rte'; import { createCachedSignal, destroyCachedSignal, } from '../../workers/cached-signals'; interface Props { gpxId: string; map: () => OlMap | null; } export const Gpx: Component = ({ map, gpxId }) => { const params = { id: gpxId, method: 'getGpx', }; const gpx = createCachedSignal(params); onCleanup(() => { destroyCachedSignal(params); }); const vectorSource = new VectorSource(); const vectorLayer = new VectorLayer({ source: vectorSource, style, declutter: true, }); createEffect(() => map()?.addLayer(vectorLayer)); createEffect(() => { console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayer }); }); return ( <> {(trkId: string) => { console.log({ caller: 'Gpx / loop', trkId }); return ( ); }} {(rteId: string) => { console.log({ caller: 'Gpx / loop', rteId }); return ( ); }} {(wptId: string) => { console.log({ caller: 'Gpx / loop', wptId }); return ( ); }} ); }; export default Gpx;