adds mapwithelevationmultiple to map page

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

@@ -214,7 +214,7 @@
     }
 </script>
 
-<div id="map-container" class="flex flex-col h-full">
+<div id="map-container" class="flex flex-col h-full relative">
     <div
         id="map"
         class="rounded-xl z-0 basis-full min-h-96 md:min-h-0"

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

@@ -81,10 +81,6 @@
         await import("$lib/vendor/leaflet-elevation/src/index.js");
         await import("$lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup");
 
-        const AutoGraticule = (
-            await import("$lib/vendor/leaflet-graticule/leaflet-auto-graticule")
-        ).default;
-
         map = L.map("map", {
             preferCanvas: true,
             plugins: ["/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js"],
@@ -95,6 +91,8 @@
             ],
             3,
         );
+
+        dispatch("init", map);
         map!.attributionControl.setPrefix(false);
 
         map!.on("zoomend", function () {
@@ -105,6 +103,10 @@
             dispatch("click", e);
         });
 
+        map!.on("moveend", function (e: any) {
+            dispatch("moveend", e);
+        });
+
         const baseLayer = L.tileLayer(
             "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
             {
@@ -203,12 +205,11 @@
 
         gpxGroup = L.gpxGroup(gpxData, {
             points: [],
-            // points_options: opts.points,
             elevation: true,
             elevation_options: elevation_options,
-            flyToBounds: true,
+            flyToBounds: options.flyToBounds,
             distanceMarkers: true,
-            removeElevationOnDeselect: options.removeElevationOnDeselect,
+            itinerary: options.itinerary,
         });
 
         const markerLayerGroup = L.layerGroup().addTo(map);
@@ -234,8 +235,11 @@
         });
 
         gpxGroup.on("route_loaded", ({ route }: { route: any }) => {
-            
-            const trail = trails.find((t) => gpxGroup?._hashCode(t.expand.gpx_data) == route.options.hash)
+            const trail = trails.find(
+                (t) =>
+                    gpxGroup?._hashCode(t.expand.gpx_data) ==
+                    route.options.hash,
+            );
 
             if (!trail) {
                 return;
@@ -275,6 +279,14 @@
         gpxGroup.select(index);
     }
 
+    export function openPopup(index: number) {
+        gpxGroup.openPopup(index);
+    }
+
+    export function closePopup(index: number) {
+        gpxGroup.closePopup(index);
+    }
+
     function switchHotline(metric: "altitude" | "slope" | "speed" | false) {
         if (metric === selectedMetric) {
             return;
@@ -293,10 +305,10 @@
     }
 </script>
 
-<div id="map-container" class="flex flex-col h-full">
+<div id="map-container" class="h-full relative">
     <div
         id="map"
-        class="rounded-xl z-0 basis-full min-h-96 md:min-h-0"
+        class="rounded-xl z-0 h-full min-h-96 md:min-h-0"
         style="position: relative; outline-style: none;"
     >
         <div class="absolute top-20 right-3 text-sm" style="z-index: 500">
@@ -314,8 +326,5 @@
             </Dropdown>
         </div>
     </div>
-    <div class="flex items-center justify-between">
-        <slot />
-        <div class="basis-[300px] flex-grow flex-shrink-0" id="elevation"></div>
-    </div>
+    <div class="absolute bottom-0 bg-background/80 w-full" id="elevation"></div>
 </div>

web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js

@@ -147,6 +147,23 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
 
     this.setSelection(this._routes[index])
   },
+
+  openPopup(index) {
+    if (index > this._routes.length - 1) {
+      return
+    }
+
+    this._routes[index].openPopup();
+  },
+
+  closePopup(index) {
+    if (index > this._routes.length - 1) {
+      return
+    }
+
+    this._routes[index].closePopup();
+  },
+
   _addTrack: function (track) {
     if (track instanceof Object) {
       this._loadGeoJSON(track);
@@ -156,7 +173,7 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
     }
   },
 
-  _hashCode: (s) => s.split('').reduce((a,b) => (((a << 5) - a) + b.charCodeAt(0))|0, 0),
+  _hashCode: (s) => s.split('').reduce((a, b) => (((a << 5) - a) + b.charCodeAt(0)) | 0, 0),
 
   clear: function () {
     this._elevation.clear()
@@ -181,8 +198,8 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
   },
 
   _loadGeoJSON: function (geojson, hash, fallbackName) {
-    if (geojson) {    
-      geojson.hash = hash  
+    if (geojson) {
+      geojson.hash = hash
       geojson.name = geojson.name || (geojson[0] && geojson[0].properties.name) || fallbackName;
       this._loadRoute(geojson);
     }
@@ -190,14 +207,13 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
 
   _loadRoute: function (data) {
     if (!data) return;
-
     var line_style = {
-      color: this._uniqueColors(this._tracks.length)[this._count++],
+      color: this._hashToColor(data.hash),
       opacity: 0.75,
       weight: 5,
       distanceMarkers: this.options.distanceMarkers_options,
     };
-    
+
     var route = L.geoJson(data, {
       name: data.name || '',
       style: (feature) => line_style,
@@ -214,7 +230,7 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
 
       route.eachLayer((layer) => this._onEachRouteLayer(route, layer));
 
-      
+
       this._onEachRouteLoaded(route);
     });
 
@@ -239,9 +255,9 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
       html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
       className: 'end-icon'
     });
-    const latlngs = polyline.getLatLngs();    
+    const latlngs = polyline.getLatLngs();
 
-    if (this._loadedCount == 0) {
+    if (this._loadedCount == 0 || !this.options.itinerary) {
       L.marker(latlngs[0], { icon: startIcon }).addTo(this._markers)
     }
 
@@ -333,18 +349,25 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
     }
   },
 
-  _uniqueColors: function (count) {
-    return count === 1 ? ['#0058ca'] : new Array(count).fill(null).map((_, i) => this._hsvToHex(i * (1 / count), 1, 0.7));
-  },
+  _hashToColor(hash) {
+    // Ensure hash is a positive integer
+    hash = Math.abs(hash);
 
-  _hsvToHex: function (h, s, v) {
-    var i = Math.floor(h * 6);
-    var f = h * 6 - i;
-    var p = v * (1 - s);
-    var q = v * (1 - f * s);
-    var t = v * (1 - (1 - f) * s);
-    var rgb = { 0: [v, t, p], 1: [q, v, p], 2: [p, v, t], 3: [p, q, v], 4: [t, p, v], 5: [v, p, q] }[i % 6];
-    return rgb.map(d => d * 255).reduce((hex, byte) => hex + ((byte >> 4) & 0x0F).toString(16) + (byte & 0x0F).toString(16), "#");
+    // Define the maximum brightness (e.g., 200 ensures the color is not too light)
+    const maxBrightness = 200;
+
+    // Convert the hash to a color in a reduced RGB range to prevent light colors
+    const r = (hash >> 16) & 0xFF; // Extract the red component
+    const g = (hash >> 8) & 0xFF;  // Extract the green component
+    const b = hash & 0xFF;         // Extract the blue component
+
+    // Adjust the RGB values to be within the allowed range (0 to maxBrightness)
+    const red = Math.floor((r / 255) * maxBrightness);
+    const green = Math.floor((g / 255) * maxBrightness);
+    const blue = Math.floor((b / 255) * maxBrightness);
+
+    // Format as HEX color
+    return `#${(1 << 24 | red << 16 | green << 8 | blue).toString(16).slice(1).toUpperCase()}`;
   },
 
   removeFrom: function (map) {