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 { Circle, Fill, Icon, Stroke, Style } from 'ol/style'; import startIcon from '../../icons/flag-start-b-svgrepo-com.svg'; interface Props { gpxId: string; map: () => OlMap | null; } console.log({ caller: startIcon }); const style = [ new Style({ stroke: new Stroke({ color: 'blue', width: 2, }), image: new Icon({ src: startIcon, color: 'green', scale: 0.2, opacity: 0.6, }), }), ]; 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 ( // @ts-ignore {(trkId: string) => { console.log({ caller: 'Gpx / loop', trkId }); return ; }} ); }; export default Gpx;