brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more route drawing

Browse Source
This commit is contained in:
Christian Beutel
2024-04-23 16:11:49 +02:00
parent 8a3894106f
commit b3ed2b1098
10 changed files with 261 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/lib/components/trail/map_with_elevation.svelte
View File

@@ -21,9 +21,14 @@
let L: any;
let controlElevation: any;
$: if (trail?.expand.gpx_data !== undefined && controlElevation) {
$: gpxData = trail?.expand.gpx_data;
$: if (gpxData && controlElevation) {
controlElevation.clear();
controlElevation.load(trail.expand.gpx_data);
controlElevation.load(gpxData);
}
$: if(options) {
controlElevation?.updateOptions(options)
}
onMount(async () => {
@@ -38,7 +43,7 @@
map = L.map("map", { preferCanvas: true }).setView(
[trail?.lat ?? 0, trail?.lon ?? 0],
16,
3,
);
map!.attributionControl.setPrefix(false);
@@ -77,9 +82,9 @@
ruler: false,
legend: true,
// Toggle "leaflet-almostover" integration
almostOver: true,
almostOver: false,
// Toggle "leaflet-distance-markers" integration
distanceMarkers: false,
distanceMarkers: { lazy: false, distance: false, direction: true, offset: 500 },
// Toggle "leaflet-edgescale" integration
edgeScale: false,
// Toggle "leaflet-hotline" integration
@@ -91,11 +96,14 @@
wptLabels: false,
preferCanvas: true,
trkStart: {
interactive: false,
className: "hihi",
icon: L.AwesomeMarkers.icon({
icon: "circle-half-stroke",
prefix: "fa",
markerColor: "cadetblue",
iconColor: "white",
className: "awesome-marker pointer-events-none"
}),
},
trkEnd: {
@@ -104,9 +112,11 @@
prefix: "fa",
markerColor: "cadetblue",
iconColor: "white",
className: "awesome-marker pointer-events-none"
}),
},
graticule: false,
drawing: false
};
const elevation_options = Object.assign(

11
web/src/lib/models/valhalla.ts
View File

@@ -1,3 +1,5 @@
import type { LatLng, Marker } from "leaflet";
interface ValhallaRouteResponse {
trip: {
legs: {
@@ -10,4 +12,11 @@ interface ValhallaHeightResponse {
height: number[];
}
export { type ValhallaRouteResponse, type ValhallaHeightResponse }
interface ValhallaAnchor {
id: string,
lat: number,
lon: number,
marker?: Marker
}
export { type ValhallaRouteResponse, type ValhallaHeightResponse, type ValhallaAnchor }

9
web/src/lib/stores/valhalla_store.ts
View File

@@ -2,16 +2,21 @@ import GPX from "$lib/models/gpx/gpx";
import type Track from "$lib/models/gpx/track";
import TrackSegment from "$lib/models/gpx/track-segment";
import Waypoint from "$lib/models/gpx/waypoint";
import { type ValhallaHeightResponse, type ValhallaRouteResponse } from "$lib/models/valhalla";
import { type ValhallaAnchor, type ValhallaHeightResponse, type ValhallaRouteResponse } from "$lib/models/valhalla";
import { ClientResponseError } from "pocketbase";
const emtpyTrack: Track = { trkseg: [] }
export let route: GPX = new GPX({ trk: [emtpyTrack] });
export let anchors: ValhallaAnchor[] = [];
export function clearRoute() {
route = new GPX({ trk: [emtpyTrack] });
anchors = [];
}
export function setRoute(newRoute: GPX) {
route = newRoute
}
export async function calculateRouteBetween(startLat: number, startLon: number, endLat: number, endLon: number) {

2
web/src/lib/util/gpx_util.ts
View File

@@ -47,7 +47,7 @@ export async function gpx2trail(gpxString: string) {
trail.elevation_gain = totals.elevationGain;
trail.distance = totals.distance
return trail
return {gpx: gpx, trail: trail}
}
export function fromKML(kmlData: string) {

27
web/src/lib/util/leaflet_util.ts
View File

@@ -1,5 +1,5 @@
import type { Waypoint } from "$lib/models/waypoint";
import type { Icon, LeafletEvent, Map, Marker } from "leaflet";
import type { Icon, LatLng, LeafletEvent, Map, Marker } from "leaflet";
export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?: (event: LeafletEvent) => void): Marker {
const fontAwesomeIcon = L.AwesomeMarkers.icon({
@@ -32,6 +32,31 @@ export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?:
return marker;
}
export function createAnchorMarker(L: any, lat: number, lon: number, index: number, onDeleteClick: () => void, onDragEnd: (event: LeafletEvent) => void): Marker {
const anchorIconElement = document.createElement("span")
anchorIconElement.textContent = "" + index
const anchorIcon = L.divIcon({
html: anchorIconElement,
iconSize: [24, 24],
className: "leaflet-anchor"
});
const deleteButton = document.createElement("button");
deleteButton.className = "btn-icon fa fa-trash text-red-500";
deleteButton.addEventListener("click", onDeleteClick)
const marker = L.marker([lat, lon], {
icon: anchorIcon,
draggable: true,
})
.bindPopup(
deleteButton
);
marker.on("dragend", onDragEnd);
return marker
}
export function calculatePixelPerMeter(map: Map, meters: number) {
const y = map.getSize().y;
const x = map.getSize().x;

19
web/src/lib/vendor/leaflet-elevation/src/control.js vendored
View File

@@ -1,5 +1,5 @@
import * as _ from './utils';
import { Options } from './options';
import * as _ from './utils';
// "leaflet-i18n" fallback
if (!L._ || !L.i18n) {
@@ -26,6 +26,15 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
__modulesFolder: '/vendor/leaflet-elevation/src/handlers/',
__btnIcon: '/vendor/leaflet-elevation/images/elevation.svg',
updateOptions(options) {
Object.assign(this.options, options)
if (!this.options.showStartEnd) {
this._circleMarkers.remove();
} else if (this._data.length) {
this._circleMarkers.addTo(this._map);
}
},
/*
* Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
*/
@@ -171,7 +180,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
* Initialize chart control "options" and "container".
*/
initialize(opts) {
// opts = L.setOptions(this, opts);
// Fixes: https://github.com/Raruto/leaflet-elevation/pull/240
@@ -198,7 +206,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
if (opts.trkStart) this._start.addTo(this._circleMarkers);
if (opts.trkEnd) this._end.addTo(this._circleMarkers);
this._markedSegments.setStyle(opts.polylineSegments);
// Leaflet canvas renderer colors
@@ -488,7 +495,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
]).then(() => {
if (this.options.polyline) {
this._layers.addLayer(layer.addTo(map)); // hotfix for: https://github.com/Raruto/leaflet-elevation/issues/233
this._circleMarkers.addTo(map);
if (this.options.showStartEnd) {
this._circleMarkers.addTo(map);
}
}
if (this.options.autofitBounds) {
this.fitBounds(layer.getBounds());
@@ -1254,7 +1263,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
* Update the position/height indicator marker drawn onto the map
*/
_updateMarker(item) {
if (this._marker) {
if (this._marker && this.options.mapTooltip) {
this._marker.update({
map: this._map,
item: item,

11
web/src/lib/vendor/leaflet-elevation/src/index.css vendored
View File

@@ -348,3 +348,14 @@
width: max-content !important;
max-width: 100%;
}
.leaflet-anchor {
background-color: #fff;
border: 2px solid black;
width: 24px;
height: 24px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
}

2
web/src/lib/vendor/leaflet-elevation/src/options.js vendored
View File

@@ -50,6 +50,8 @@ export var Options = {
time: true,
timeFactor: 3600,
timestamps: false,
showStartEnd: true,
mapTooltip: true,
trkStart: { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false },
trkEnd: { className: 'end-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#ff0606', fillOpacity: 1, interactive: false },
waypoints: true,

6
web/src/routes/api/v1/trail/upload/+server.ts
View File

@@ -7,13 +7,13 @@ import { ClientResponseError } from "pocketbase";
export async function PUT(event: RequestEvent) {
try {
const data = await event.request.blob();
const gpx = await data.text();
if (!gpx.length) {
const gpxString = await data.text();
if (!gpxString.length) {
throw new ClientResponseError({ status: 400, response: { message: "Empty file" } })
}
let trail: Trail;
try {
trail = await gpx2trail(gpx);
trail = (await gpx2trail(gpxString)).trail;
} catch (e: any) {
throw new ClientResponseError({ status: 400, response: { message: "Invalid GPX file" } })
}

248
web/src/routes/trail/edit/[id]/+page.svelte
View File

@@ -13,9 +13,11 @@
import PhotoPicker from "$lib/components/trail/photo_picker.svelte";
import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
import WaypointModal from "$lib/components/waypoint/waypoint_modal.svelte";
import GPX from "$lib/models/gpx/gpx";
import type { List } from "$lib/models/list";
import { SummitLog } from "$lib/models/summit_log";
import { Trail } from "$lib/models/trail";
import type { ValhallaAnchor } from "$lib/models/valhalla";
import { Waypoint } from "$lib/models/waypoint";
import { categories } from "$lib/stores/category_store";
import {
@@ -32,12 +34,14 @@
trails_update,
} from "$lib/stores/trail_store";
import {
anchors,
appendToRoute,
calculateRouteBetween,
clearRoute,
deleteFromRoute,
editRoute,
route,
setRoute,
} from "$lib/stores/valhalla_store";
import { waypoint } from "$lib/stores/waypoint_store";
import { getFileURL } from "$lib/util/file_util";
@@ -47,10 +51,13 @@
formatTimeHHMM,
} from "$lib/util/format_util";
import { fromKML, fromTCX, gpx2trail } from "$lib/util/gpx_util";
import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
import {
createAnchorMarker,
createMarkerFromWaypoint,
} from "$lib/util/leaflet_util";
import { createForm } from "$lib/vendor/svelte-form-lib";
import cryptoRandomString from "crypto-random-string";
import type { LeafletMouseEvent, Map } from "leaflet";
import type { DivIcon, LatLng, LeafletMouseEvent, Map } from "leaflet";
import { onMount } from "svelte";
import { _ } from "svelte-i18n";
import { array, number, object, string } from "yup";
@@ -73,6 +80,7 @@
let gpxFile: File | Blob | null = null;
let drawingActive = false;
let overwriteGPX = false;
const trailSchema = object<Trail>({
id: string().optional(),
@@ -126,6 +134,13 @@
submittedTrail.photos = submittedTrail.photos.filter(
(p) => !p.startsWith("data:image/svg+xml;base64"),
);
if ($form.expand.gpx_data && overwriteGPX) {
gpxFile = new Blob([$form.expand.gpx_data], {
type: "text/xml",
});
}
if (!submittedTrail.id) {
const createdTrail = await trails_create(
submittedTrail,
@@ -165,8 +180,18 @@
L = (await import("leaflet")).default;
await import("leaflet.awesome-markers");
$form.lat = 47.74604748696788;
$form.lon = 11.588988304138185;
// $form.lat = 47.74604748696788;
// $form.lon = 11.588988304138185;
clearAnchorMarker();
clearRoute();
if ($form.expand.gpx_data) {
const gpx = await GPX.parse($form.expand.gpx_data);
if (!(gpx instanceof Error)) {
setRoute(gpx);
initRouteAnchors(gpx);
}
}
});
function openFileBrowser() {
@@ -183,7 +208,10 @@
}
clearWaypoints();
clearAnchorMarker();
clearRoute();
drawingActive = false;
overwriteGPX = false;
var reader = new FileReader();
reader.readAsText(selectedFile);
@@ -202,9 +230,13 @@
gpxFile = selectedFile;
}
try {
$form = await gpx2trail(gpxData);
const parseResult = await gpx2trail(gpxData);
$form = parseResult.trail;
$form.expand.gpx_data = gpxData;
setRoute(parseResult.gpx);
initRouteAnchors(parseResult.gpx);
for (const waypoint of $form.expand.waypoints) {
saveWaypoint(waypoint);
}
@@ -245,6 +277,32 @@
$form.waypoints = [];
}
function clearAnchorMarker() {
for (const anchor of anchors) {
anchor.marker?.remove();
}
}
function initRouteAnchors(gpx: GPX) {
const segments = gpx.trk?.at(0)?.trkseg ?? [];
for (let i = 0; i < segments.length; i++) {
const segment = segments[i];
const points = segment.trkpt ?? [];
if (points.length > 0) {
addAnchor(points[0].$.lat!, points[0].$.lon!, false);
}
if (i == segments.length - 1) {
addAnchor(
points[points.length - 1].$.lat!,
points[points.length - 1].$.lon!,
false,
);
}
}
}
function openMarkerPopup(waypoint: Waypoint) {
waypoint.marker?.openPopup();
}
@@ -273,28 +331,6 @@
$form.expand.waypoints.splice(index, 1);
$form.waypoints.splice(index, 1);
$form.expand.waypoints = $form.expand.waypoints;
if (drawingActive) {
if (index == 0) {
deleteFromRoute(index);
updateTrailWithRouteData();
const nextWaypoint = $form.expand.waypoints[index];
nextWaypoint.icon = "circle-half-stroke";
saveWaypoint(nextWaypoint);
} else if (index == $form.expand.waypoints.length) {
deleteFromRoute(index - 1);
updateTrailWithRouteData();
if ($form.expand.waypoints.length > 1) {
const previousWaypoint = $form.expand.waypoints[index - 1];
previousWaypoint.icon = "flag-checkered";
saveWaypoint(previousWaypoint);
}
} else {
deleteFromRoute(index - 1);
recalculateRoute(index);
}
}
}
function saveWaypoint(savedWaypoint: Waypoint) {
@@ -320,10 +356,6 @@
editableWaypoint!.lat = position.lat;
editableWaypoint!.lon = position.lng;
$form.expand.waypoints = [...$form.expand.waypoints];
if (drawingActive) {
recalculateRoute(editableWaypointIndex);
}
});
marker.addTo(map);
@@ -386,42 +418,37 @@
function startDrawing() {
drawingActive = true;
if (!route.trk?.at(0)?.trkseg?.at(0)?.trkpt?.length) {
$form.expand.gpx_data = "";
clearWaypoints();
}
for (const anchor of anchors) {
anchor.marker?.addTo(map);
}
}
function stopDrawing() {
drawingActive = false;
for (const anchor of anchors) {
anchor.marker?.remove();
}
}
async function handleMapClick(e: LeafletMouseEvent) {
if (!drawingActive) {
return;
}
const waypointCount = $form.expand.waypoints.length;
const wp = new Waypoint(e.latlng.lat, e.latlng.lng, {
name: `${$_("waypoints", { values: { n: 1 } })} ${waypointCount + 1}`,
icon: waypointCount ? "flag-checkered" : "circle-half-stroke",
});
if (waypointCount == 0) {
saveWaypoint(wp);
const anchorCount = anchors.length;
if (anchorCount == 0) {
addAnchor(e.latlng.lat, e.latlng.lng);
} else {
const previousWaypoint = $form.expand.waypoints[waypointCount - 1];
const previousAnchor = anchors[anchorCount - 1];
try {
const routeWaypoints = await calculateRouteBetween(
previousWaypoint.lat,
previousWaypoint.lon,
previousAnchor.lat,
previousAnchor.lon,
e.latlng.lat,
e.latlng.lng,
);
appendToRoute(routeWaypoints);
saveWaypoint(wp);
if (waypointCount > 1) {
previousWaypoint.icon = "circle";
saveWaypoint(previousWaypoint);
}
addAnchor(e.latlng.lat, e.latlng.lng);
updateTrailWithRouteData();
} catch (e) {
console.error(e);
@@ -434,39 +461,104 @@
}
}
async function recalculateRoute(waypointIndex: number) {
const waypoint = $form.expand.waypoints[waypointIndex];
let nextWaypoints;
let previousWaypoints;
if (waypointIndex < $form.expand.waypoints.length - 1) {
const nextWaypoint = $form.expand.waypoints[waypointIndex + 1];
function addAnchor(lat: number, lon: number, addtoMap: boolean = true) {
const anchor: ValhallaAnchor = {
id: cryptoRandomString({ length: 15 }),
lat: lat,
lon: lon,
};
const marker = createAnchorMarker(
L,
lat,
lon,
anchors.length + 1,
() => {
removeAnchor(anchors.findIndex((a) => a.id == anchor.id));
},
(_) => {
if (!drawingActive) {
return;
}
const position = marker.getLatLng();
anchor.lat = position.lat;
anchor.lon = position.lng;
recalculateRoute(anchors.findIndex((a) => a.id == anchor.id));
},
);
if (addtoMap) {
marker.addTo(map);
}
anchor.marker = marker;
anchors.push(anchor);
}
nextWaypoints = await calculateRouteBetween(
waypoint.lat,
waypoint.lon,
nextWaypoint.lat,
nextWaypoint.lon,
function removeAnchor(anchorIndex: number) {
if (!drawingActive) {
return;
}
anchors[anchorIndex]?.marker?.remove();
anchors.splice(anchorIndex, 1);
for (let i = anchorIndex; i < anchors.length; i++) {
const anchor = anchors[i];
const markerIcon = anchor.marker?.getIcon() as DivIcon | undefined;
if (markerIcon) {
const markerText =
(markerIcon.options.html as HTMLSpanElement).textContent ??
"0";
const markerIndex = parseInt(markerText);
(markerIcon.options.html as HTMLSpanElement).textContent =
markerIndex - 1 + "";
}
}
if (anchorIndex == 0) {
deleteFromRoute(anchorIndex);
updateTrailWithRouteData();
} else if (anchorIndex == anchors.length) {
deleteFromRoute(anchorIndex - 1);
updateTrailWithRouteData();
} else {
deleteFromRoute(anchorIndex - 1);
recalculateRoute(anchorIndex);
}
}
async function recalculateRoute(anchorIndex: number) {
const anchor = anchors[anchorIndex];
if (!anchor) {
return;
}
let nextRouteSegment;
let previousRouteSegment;
if (anchorIndex < anchors.length - 1) {
const nextAnchor = anchors[anchorIndex + 1];
nextRouteSegment = await calculateRouteBetween(
anchor.lat,
anchor.lon,
nextAnchor.lat,
nextAnchor.lon,
);
}
if (waypointIndex > 0) {
const previousWaypoint = $form.expand.waypoints[waypointIndex - 1];
previousWaypoints = await calculateRouteBetween(
previousWaypoint.lat,
previousWaypoint.lon,
waypoint.lat,
waypoint.lon,
if (anchorIndex > 0) {
const previousAnchor = anchors[anchorIndex - 1];
previousRouteSegment = await calculateRouteBetween(
previousAnchor.lat,
previousAnchor.lon,
anchor.lat,
anchor.lon,
);
}
if (nextWaypoints) {
editRoute(waypointIndex, nextWaypoints);
if (nextRouteSegment) {
editRoute(anchorIndex, nextRouteSegment);
}
if (previousWaypoints) {
editRoute(waypointIndex - 1, previousWaypoints);
if (previousRouteSegment) {
editRoute(anchorIndex - 1, previousRouteSegment);
}
updateTrailWithRouteData();
}
function updateTrailWithRouteData() {
overwriteGPX = true;
const totals = route.getTotals();
$form.distance = totals.distance;
$form.duration = totals.duration;
@@ -720,11 +812,11 @@
trail={$form}
crosshair={drawingActive}
options={{
hotline: true,
autofitBounds: false,
trkStart: false,
trkEnd: false,
speed: false,
autofitBounds: !drawingActive,
mapTooltip: !drawingActive,
speed: !drawingActive,
speedFactor: drawingActive ? 0 : 1,
showStartEnd: !drawingActive,
}}
bind:map
on:click={(e) => handleMapClick(e.detail)}
@@ -742,11 +834,11 @@
></ListSelectModal>
<style>
:global(#map) {
#map {
height: calc(400px);
}
@media only screen and (min-width: 768px) {
:global(#map),
#map,
form {
height: calc(100vh - 124px);
}