pianello/pianello-web-app
pianello/pianello-web-app
2
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases Packages 1 Wiki Activity

Compare commits

base: pianello:76d9f46fa518152cc5547000d567616d881087d4
Branches Tags
pianello:main
pianello:maybeitworked
pianello:develop
...
compare: pianello:c9faabc9454ac618b8f28bbf03332f0611d37f78
Branches Tags
pianello:main
pianello:maybeitworked
pianello:develop

2 commits
76d9f46fa5 ... c9faabc945

Author SHA1 Message Date
Alessio Davoli
c9faabc945 Add support for gpx rendering
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details
2023-12-22 12:19:10 +01:00
Alessio Davoli
5c9bba2af5 npm i leaflet-gpx 2023-12-22 12:19:00 +01:00
3 changed files with 21 additions and 2 deletions
Show stats Expand all files Collapse all files

6
frontend/package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "0.6.0",
"dependencies": {
"leaflet": "^1.9.4",
"leaflet-gpx": "^1.7.0",
"svelte-preprocess": "^5.1.3"
},
"devDependencies": {
@ -2367,6 +2368,11 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
},
"node_modules/leaflet-gpx": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/leaflet-gpx/-/leaflet-gpx-1.7.0.tgz",
"integrity": "sha512-5NS5WKfp5zaAHMB2KM6OUaIng+SZ3e/UHK2++ABl2wELojYlmLqIL8t1Mj6DaZGkIh3kld+mAUvMGdIzC1yGRA=="
},
"node_modules/levn": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",

1
frontend/package.json
View file

@ -33,6 +33,7 @@
"type": "module",
"dependencies": {
"leaflet": "^1.9.4",
"leaflet-gpx": "^1.7.0",
"svelte-preprocess": "^5.1.3"
}
}

16
frontend/src/lib/components/tabs/MapTab.svelte
View file

@ -7,6 +7,7 @@
const pianelloCoordinates = [43.14, 12.53];
let mapElement: string | HTMLElement;
let leaflet;
let leafletGPX;
let map;
let layerGroup;
let latitude;
@ -66,9 +67,10 @@
layerGroup = leaflet.layerGroup();
// Startup Map
map = leaflet.map(mapElement, {
dragging: leaflet.Browser.mobile,
tap: leaflet.Browser.mobile,
//dragging: leaflet.Browser.mobile,
//tap: leaflet.Browser.mobile,
});
map.setView(pianelloCoordinates, 13);
@ -78,11 +80,21 @@
.addTo(map);
}
const renderGPX = () => {
const gpx = "/gpx/tidone.gpx"; // URL to your GPX file or the GPX itself
new leafletGPX(gpx, {async: true}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
}
onMount(async () => {
await watchPosition();
leaflet = await import('leaflet');
const {GPX} = await import('leaflet-gpx');
leafletGPX = GPX;
renderMap();
renderGPX();
});
onDestroy(async () => {