more route drawing

web/src/lib/components/trail/map_with_elevation.svelte

@@ -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(

web/src/lib/models/valhalla.ts

@@ -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 }

web/src/lib/stores/valhalla_store.ts

@@ -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) {

web/src/lib/util/gpx_util.ts

@@ -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) {

web/src/lib/util/leaflet_util.ts

@@ -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({
@@ -28,10 +28,35 @@ export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?:
     if (onDragEnd) {
         marker.on("dragend", 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;
@@ -65,7 +90,7 @@ export function calculateScaleFactor(map: Map) {
     );
 
     const screenMetersPer100Pixels = _pxTOmm()(100) / 1000;
-        
+
     const scaleFactor = realWorlMetersPer100Pixels / screenMetersPer100Pixels
 
     return scaleFactor

web/src/lib/vendor/leaflet-elevation/src/control.js

@@ -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,

web/src/lib/vendor/leaflet-elevation/src/index.css

@@ -347,4 +347,15 @@
 .leaflet-popup-content {
   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;
 }

web/src/lib/vendor/leaflet-elevation/src/options.js

@@ -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,