48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
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';
|
|
|
|
interface Props {
|
|
gpxId: string;
|
|
map: () => OlMap | null;
|
|
}
|
|
|
|
export const Gpx: Component<Props> = ({ map, gpxId }) => {
|
|
const [gpx] = createResource(
|
|
gpxId,
|
|
async () =>
|
|
await dispatch({
|
|
action: 'getGpx',
|
|
params: {
|
|
id: gpxId,
|
|
},
|
|
})
|
|
);
|
|
|
|
const vectorSource = new VectorSource();
|
|
const vectorLayer = new VectorLayer({ source: vectorSource });
|
|
createEffect(() => map()?.addLayer(vectorLayer));
|
|
|
|
createEffect(() => {
|
|
console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayer });
|
|
});
|
|
|
|
return (
|
|
// @ts-ignore
|
|
<For each={gpx() ? gpx().trk || [] : []}>
|
|
{(trkId: string) => {
|
|
console.log({ caller: 'Gpx / loop', trkId });
|
|
return <Trk vectorSource={vectorSource} trkId={trkId} />;
|
|
}}
|
|
</For>
|
|
);
|
|
};
|
|
|
|
export default Gpx;
|