uses map with elevation for edit mode

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

@@ -2,11 +2,14 @@
     import { page } from "$app/stores";
     import type { Trail } from "$lib/models/trail";
     import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import "$lib/vendor/leaflet-elevation/src/index.css";
     import type AutoGraticule from "$lib/vendor/leaflet-graticule/leaflet-auto-graticule";
     import type { Map, Marker } from "leaflet";
+    import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
+    import "leaflet/dist/leaflet.css";
     import { createEventDispatcher, onMount } from "svelte";
 
-    export let trail: Trail;
+    export let trail: Trail | null;
     export let markers: Marker[] = [];
     export let map: Map | null = null;
     export let options = {};
@@ -17,7 +20,8 @@
     let L: any;
     let controlElevation: any;
 
-    $: if (trail.expand.gpx_data && controlElevation) {
+    $: if (trail?.expand.gpx_data && controlElevation) { 
+        controlElevation.clear();       
         controlElevation.load(trail.expand.gpx_data);
     }
 
@@ -30,8 +34,8 @@
         const AutoGraticule = (await import("$lib/vendor/leaflet-graticule/leaflet-auto-graticule")).default;
 
         map = L.map("map", { preferCanvas: true }).setView(
-            [trail.lat ?? 0, trail.lon ?? 0],
-            14,
+            [trail?.lat ?? 0, trail?.lon ?? 0],
+            3,
         );
         map!.attributionControl.setPrefix(false);
 
@@ -105,7 +109,7 @@
 
         controlElevation = L.control.elevation(elevation_options).addTo(map);
 
-        for (const waypoint of trail.expand.waypoints) {
+        for (const waypoint of trail?.expand.waypoints ?? []) {
             const marker = createMarkerFromWaypoint(L, waypoint);
             marker.addTo(map!);
             markers.push(marker);

web/src/lib/components/waypoint/waypoint_modal.svelte

@@ -20,8 +20,9 @@
     const { form, errors, handleChange, handleSubmit } = createForm<Waypoint>({
         initialValues: $waypoint,
         validationSchema: waypointSchema,
-        onSubmit: async (submittedWaypoint) => {
-            dispatch("save", submittedWaypoint);
+        onSubmit: async (submittedWaypoint) => {           
+            dispatch("save", submittedWaypoint);        
+                
             closeModal!();
         },
     });

web/src/lib/util/gpx_util.ts

@@ -2,6 +2,7 @@ import { Trail } from "$lib/models/trail";
 import { Waypoint } from "$lib/models/waypoint";
 import { kml, tcx } from "$lib/vendor/toGeoJSON/toGeoJSON"
 import GeoJsonToGpx from "$lib/vendor/geoJSONToGPX"
+import { browser } from "$app/environment";
 
 function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
     const R = 6371; // Radius of the Earth in km
@@ -17,8 +18,15 @@ function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: numbe
 }
 
 export async function gpx2trail(gpx: string) {
-    const JSDOM = (await import("jsdom")).JSDOM
-    const xml = new JSDOM(gpx).window.document
+    let xml;
+    if (browser) {       
+        const parser = new DOMParser();
+        xml = parser.parseFromString(gpx, "application/xml")
+    } else {        
+        const JSDOM = (await import("jsdom")).JSDOM
+        xml = new JSDOM(gpx).window.document
+    }
+
     const trail = new Trail("");
 
     let name = xml.getElementsByTagName('name');