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

Add support for gpx rendering
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-12-22 12:19:10 +01:00
parent 5c9bba2af5
commit c9faabc945
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,7 @@
const pianelloCoordinates = [43.14, 12.53]; const pianelloCoordinates = [43.14, 12.53];
let mapElement: string | HTMLElement; let mapElement: string | HTMLElement;
let leaflet; let leaflet;
let leafletGPX;
let map; let map;
let layerGroup; let layerGroup;
let latitude; let latitude;
@ -66,9 +67,10 @@
layerGroup = leaflet.layerGroup(); layerGroup = leaflet.layerGroup();
// Startup Map // Startup Map
map = leaflet.map(mapElement, { map = leaflet.map(mapElement, {
dragging: leaflet.Browser.mobile, //dragging: leaflet.Browser.mobile,
tap: leaflet.Browser.mobile, //tap: leaflet.Browser.mobile,
}); });
map.setView(pianelloCoordinates, 13); map.setView(pianelloCoordinates, 13);
@ -78,11 +80,21 @@
.addTo(map); .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 () => { onMount(async () => {
await watchPosition(); await watchPosition();
leaflet = await import('leaflet'); leaflet = await import('leaflet');
const {GPX} = await import('leaflet-gpx');
leafletGPX = GPX;
renderMap(); renderMap();
renderGPX();
}); });
onDestroy(async () => { onDestroy(async () => {