Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Starting to add some style to trksegs.

This commit is contained in:
Eric van der Vlist 2022-11-27 22:48:35 +01:00
parent bbaf1e798b
commit 12cfa9337a
4 changed files with 45 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/gpx-import/GpxImport.tsx
View File

@ -25,6 +25,7 @@ const GpxImport: Component = () => {
console.log(fileReader.result);
const gpx = GPX.parse(fileReader.result);
console.log(`gpx: ${JSON.stringify(gpx)}`);
if (gpx) {
const startTime = new Date(findStartTime(gpx)!);
dispatch({
action: 'pruneAndSaveImportedGpx',
@ -41,6 +42,13 @@ const GpxImport: Component = () => {
},
});
refetchGpxList();
} else {
console.error({
message: "can't parse GPX file",
xml: fileReader.result,
});
}
// TODO: error handling
},
false
);

21
src/components/gpx/Gpx.tsx
View File

@ -7,12 +7,31 @@ 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<Props> = ({ map, gpxId }) => {
const [gpx] = createResource(
gpxId,
@ -26,7 +45,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
);
const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({ source: vectorSource });
const vectorLayer = new VectorLayer({ source: vectorSource, style });
createEffect(() => map()?.addLayer(vectorLayer));
createEffect(() => {

1
src/icons/flag-finish-b-o-svgrepo-com.svg Normal file
View File

@ -0,0 +1 @@
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M50 0a3.5 3.5 0 0 0-3.5 3.5v80A3.5 3.5 0 0 0 50 87a3.5 3.5 0 0 0 3.5-3.5V47h43a3.5 3.5 0 0 0 3.5-3.5v-40A3.5 3.5 0 0 0 96.5 0h-46a3.5 3.5 0 0 0-.254.01A3.5 3.5 0 0 0 50 0zm13.8 7h9.8v7.43h9.8V7H93v7.43h-9.6v9.799H93v9.8h-9.6V40h-9.8v-5.97h-9.8V40H54v-5.97h9.8v-9.801H54v-9.8h9.8V7zm0 7.43v9.799h9.8v-9.8h-9.8zm9.8 9.799v9.8h9.8v-9.8h-9.8z" fill="currentColor"></path><path d="M38.004 76.792C27.41 78.29 20 81.872 20 87.143C20 94.243 32.381 100 50 100s30-5.756 30-12.857c0-5.272-7.41-8.853-18.003-10.35l-1.468 2.499C68.514 80.399 74 82.728 74 85.429c0 3.787-10.745 6.857-24 6.857s-24-3.07-24-6.857c-.001-2.692 5.45-5.018 13.459-6.13c-.484-.836-.97-1.67-1.455-2.507z" fill="currentColor"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 937 B

1
src/icons/flag-start-b-svgrepo-com.svg Normal file
View File

@ -0,0 +1 @@
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M50 0a3.5 3.5 0 0 0-3.5 3.5v80A3.5 3.5 0 0 0 50 87a3.5 3.5 0 0 0 3.5-3.5V47h43a3.5 3.5 0 0 0 3.5-3.5v-40A3.5 3.5 0 0 0 96.5 0h-46a3.5 3.5 0 0 0-.254.01A3.5 3.5 0 0 0 50 0z" fill="currentColor"></path><path d="M38.004 76.792C27.41 78.29 20 81.872 20 87.143C20 94.243 32.381 100 50 100s30-5.756 30-12.857c0-5.272-7.41-8.853-18.003-10.35l-1.468 2.499C68.514 80.399 74 82.728 74 85.429c0 3.787-10.745 6.857-24 6.857s-24-3.07-24-6.857c-.001-2.692 5.45-5.018 13.459-6.13c-.484-.836-.97-1.67-1.455-2.507z" fill="currentColor"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B