speed improvements for map (tbc)

This commit is contained in:
Christian Beutel
2025-08-02 22:02:59 +02:00
parent 396e64b5a6
commit 1c10e90db7
14 changed files with 230 additions and 113 deletions

View File

@@ -89,11 +89,8 @@
$data.distance = undefined;
return;
}
const gpxObject = await GPX.parse(trailData);
if (gpxObject instanceof Error) {
throw gpxObject;
}
const gpxObject = GPX.parse(trailData);
const totals = gpxObject.features;
$data.duration = totals.duration / 1000;

View File

@@ -58,7 +58,7 @@
};
}
trail = (await gpx2trail(log.expand.gpx_data!)).trail;
trail = gpx2trail(log.expand.gpx_data!).trail;
trail.id = log.id;
trail.expand!.gpx_data = log.expand.gpx_data;

View File

@@ -1,12 +1,12 @@
<script lang="ts">
import { page } from "$app/state";
import directionCaret from "$lib/assets/svgs/caret-right-solid.svg";
import GPX from "$lib/models/gpx/gpx";
import type { Trail } from "$lib/models/trail";
import type { Waypoint } from "$lib/models/waypoint";
import { theme } from "$lib/stores/theme_store";
import { fetchGPX } from "$lib/stores/trail_store";
import { findStartAndEndPoints } from "$lib/util/geojson_util";
import { toGeoJson } from "$lib/util/gpx_util";
import {
createMarkerFromWaypoint,
createPopupFromTrail,
@@ -15,24 +15,17 @@
import type { ElevationProfileControl } from "$lib/vendor/maplibre-elevation-profile/elevationprofile-control";
import { FullscreenControl } from "$lib/vendor/maplibre-fullscreen/fullscreen-control";
import MaplibreGraticule from "$lib/vendor/maplibre-graticule/maplibre-graticule";
import {
baseMapStyles,
overlays,
pois,
} from "$lib/vendor/maplibre-layer-manager/layers";
import { baseMapStyles } from "$lib/vendor/maplibre-layer-manager/layers";
import { LayerManager } from "$lib/vendor/maplibre-layer-manager/maplibre-layer-manager";
import {
StyleSwitcherControl,
type StyleSwitcherControlOptions,
} from "$lib/vendor/maplibre-style-switcher/style-switcher-control";
import { StyleSwitcherControl } from "$lib/vendor/maplibre-style-switcher/style-switcher-control";
import type { Feature, FeatureCollection, GeoJSON } from "geojson";
import * as M from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { onDestroy, onMount, untrack } from "svelte";
import type { RadioItem } from "../base/radio_group.svelte";
interface Props {
trails?: Trail[];
gpx?: GPX;
waypoints?: Waypoint[];
markers?: M.Marker[];
map?: M.Map | null;
@@ -160,10 +153,10 @@
toggleEpcTheme();
});
$effect(() => {
if (drawing && map) {
startDrawing();
} else if (!drawing && map) {
stopDrawing();
if (drawing) {
untrack(() => startDrawing());
} else {
untrack(() => stopDrawing());
}
});
$effect(() => {
@@ -203,9 +196,11 @@
let cD: FeatureCollection = { type: "FeatureCollection", features: [] };
let r: GeoJSON[] = [];
trails.forEach((t) => {
if (t.expand?.gpx_data) {
r.push(toGeoJson(t.expand.gpx_data) as GeoJSON);
for (const t of trails) {
if (t.expand?.gpx) {
r.push(t.expand.gpx.toGeoJSON());
} else if (t.expand?.gpx_data) {
r.push(GPX.parse(t.expand.gpx_data).toGeoJSON());
}
if (clusterTrails && t.lat !== null && t.lon !== null) {
cD.features.push({
@@ -220,7 +215,7 @@
},
} as Feature);
}
});
}
return [r, cD];
}
@@ -653,9 +648,9 @@
clusterPopup = createPopupFromTrail(trail);
clusterPopup.setLngLat([trail.lon!, trail.lat!]).addTo(map);
const geojson = await fetchGPX(trail);
const gpx = await fetchGPX(trail);
addClusterHighlightLayer(toGeoJson(geojson));
addClusterHighlightLayer(GPX.parse(gpx).toGeoJSON());
clusterPopup.on("close", () => {
unHighlightCluster(false);
@@ -814,7 +809,7 @@
}
function showWaypoints() {
if (!map) {
if (!map || drawing) {
return;
}
@@ -1030,23 +1025,23 @@
type: "hillshade",
});
}
trails.forEach((t, i) => {
const layerId = t.id!;
if (map?.getLayer(layerId)) {
return;
}
addTrailLayer(t, layerId, i, data[i]);
});
if (
activeTrail !== null &&
!map?.getLayer("direction-carets")
) {
addCaretLayer(trails[activeTrail].id!);
}
} catch (e) {}
}
trails.forEach((t, i) => {
const layerId = t.id!;
if (map?.getLayer(layerId)) {
return;
}
addTrailLayer(t, layerId, i, data[i]);
});
if (
activeTrail !== null &&
trails[activeTrail] &&
!map?.getLayer("direction-carets")
) {
addCaretLayer(trails[activeTrail].id!);
}
});
map.on("moveend", (e) => {

View File

@@ -1,7 +1,8 @@
<script lang="ts">
import * as M from "maplibre-gl";
import { fromFile, toGeoJson } from "$lib/util/gpx_util";
import GPX from "$lib/models/gpx/gpx";
import { fromFile } from "$lib/util/gpx_util";
import { onMount } from "svelte";
interface Props {
trailFile: File | undefined | null;
@@ -76,7 +77,12 @@
const sourceId = "trail-picker-geojson-source";
const layerId = "trail-picker-geojson-layer";
const geojson = toGeoJson(trailData);
const gpx = GPX.parse(trailData)
if(gpx instanceof Error) {
throw gpx;
}
const geojson = gpx.toGeoJSON()
if (layer) {
map.removeLayer(layerId);