import { Component, createEffect, createResource, For } from 'solid-js'; import OlMap from 'ol/Map'; import dispatch from '../../workers/dispatcher-main'; import Trk from '../trk'; 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; map: () => OlMap | null; } export const Gpx: Component = ({ map, gpxId }) => { const [gpx] = createResource( gpxId, async () => await dispatch({ action: 'getGpx', params: { id: gpxId, }, }) ); const vectorSource = new VectorSource(); const vectorLayer = new VectorLayer({ source: vectorSource, style }); 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 ; }} {(wptId: string) => { console.log({ caller: 'Gpx / loop', wptId }); return ; }} ); }; export default Gpx;