more work on print view

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

@@ -3,13 +3,16 @@
     import { currentUser } from "$lib/stores/user_store";
     import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
     import type { Map, Marker } from "leaflet";
-    import { onMount } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     export let trail: Trail;
     export let markers: Marker[] = [];
+    export let map: Map | null = null;
+    export let options = {};
+
+    const dispatch = createEventDispatcher();
 
     let L: any;
-    let map: Map;
     let controlElevation: any;
 
     $: if (trail.expand.gpx_data && controlElevation) {
@@ -23,14 +26,21 @@
         //@ts-ignore
         await import("$lib/vendor/leaflet-elevation/src/index.js");
 
-        map = L.map("map").setView([trail.lat ?? 0, trail.lon ?? 0], 14);
-        map.attributionControl.setPrefix(false)
+        map = L.map("map", { preferCanvas: true }).setView(
+            [trail.lat ?? 0, trail.lon ?? 0],
+            14,
+        );
+        map!.attributionControl.setPrefix(false);
 
+        map!.on("zoomend", function () {
+            dispatch("zoomend", map);
+        });
+        
         L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
             attribution: "© OpenStreetMap contributors",
         }).addTo(map);
 
-        const elevation_options = {
+        const default_elevation_options = {
             height: 200,
 
             theme: "lightblue-theme",
@@ -84,11 +94,16 @@
             },
         };
 
+        const elevation_options = Object.assign(
+            default_elevation_options,
+            options,
+        );
+
         controlElevation = L.control.elevation(elevation_options).addTo(map);
 
         for (const waypoint of trail.expand.waypoints) {
             const marker = createMarkerFromWaypoint(L, waypoint);
-            marker.addTo(map);
+            marker.addTo(map!);
             markers.push(marker);
         }
     });
@@ -96,16 +111,8 @@
 
 <div id="map-container" class="flex flex-col">
     <div id="map" class="rounded-xl z-0 basis-full"></div>
-    <div id="elevation"></div>
+    <div class="flex items-center justify-between">
+        <slot />
+        <div class="basis-full min-w-[300px]" id="elevation"></div>
+    </div>
 </div>
-
-<style>
-    #map-container {
-        height: calc(100vh - 180px);
-    }
-    @media only screen and (min-width: 768px) {
-        #map-container {
-            height: calc(100vh - 124px);
-        }
-    }
-</style>