finishes print maplibre

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

@@ -24,6 +24,8 @@
     export let showElevation: boolean = true;
     export let showInfoPopup: boolean = false;
     export let showGrid: boolean = false;
+    export let fitBounds: "animate" | "instant" | "off" = "instant";
+
     export let elevationProfileContainer: string | HTMLDivElement | undefined =
         undefined;
     export let mapOptions: Partial<M.MapOptions> | undefined = undefined;
@@ -158,8 +160,12 @@
             }
         });
 
-        if (!drawing && data.some((d) => d.bbox !== undefined)) {
+        if (
-            flyToBounds();
+            !drawing &&
+            fitBounds !== "off" &&
+            data.some((d) => d.bbox !== undefined)
+        ) {
+            flyToBounds(fitBounds == "animate");
         }
     }
 
@@ -181,12 +187,12 @@
         return new M.LngLatBounds([minX, minY, maxX, maxY]);
     }
 
-    function flyToBounds() {
+    function flyToBounds(animate: boolean = true) {
         const bounds = data[activeTrail]
             ? (data[activeTrail].bbox as M.LngLatBoundsLike)
             : getBounds();
         map!.fitBounds(bounds, {
-            animate: trails.length > 1,
+            animate: animate,
             padding: {
                 top: 16,
                 left: 16,
@@ -325,13 +331,15 @@
         }
         e?.preventDefault();
         dispatch("select", trail);
-        const index = trails.indexOf(trail);
+        const index = trails.findIndex((t) => t.id == trail.id);
         if (index == -1) {
+            console.log("here");
+
             return;
         }
         activeTrail = index;
+
         highlightTrail(trail.id!);
-        flyToBounds();
         if (data[activeTrail] && showElevation) {
             epc?.setData(
                 data[activeTrail]!,
@@ -339,6 +347,7 @@
             );
             epc?.showProfile();
         }
+        flyToBounds();
     }
 
     export function unFocusTrail(trail: Trail) {

web/src/lib/i18n/locales/de.json

@@ -53,6 +53,7 @@
   "date": "Datum",
   "default-category": "Standard Kategorie",
   "default-location": "Standort",
+  "degrees": "",
   "delete": "Löschen",
   "delete-account": "Konto löschen",
   "delete-list-confirm": "Möchten Sie diese Liste wirklich löschen? Die Routen in der Liste sind danach weiterhin verfügbar.",
@@ -158,6 +159,7 @@
   "new-trail": "Neue Route",
   "no-account": "Du hast noch kein Konto?",
   "no-data": "Keine Daten",
+  "no-grid": "",
   "no-preference": "Keine Präferenz",
   "no-results": "Keine Ergebnisse gefunden",
   "not-a-valid-email-address": "Keine gültige Email-Adresse",

web/src/lib/i18n/locales/en.json

@@ -53,6 +53,7 @@
   "date": "Date",
   "default-category": "Default category",
   "default-location": "Default Location",
+  "degrees": "Degrees",
   "delete": "Delete",
   "delete-account": "Delete Account",
   "delete-list-confirm": "Do you really want to delete this list? The trails in the list will still be available.",
@@ -158,6 +159,7 @@
   "new-trail": "New Trail",
   "no-account": "Don't have an account?",
   "no-data": "No data",
+  "no-grid": "No Grid",
   "no-preference": "No preference",
   "no-results": "No results found",
   "not-a-valid-email-address": "Not a valid email address",

web/src/lib/i18n/locales/fr.json

@@ -53,6 +53,7 @@
   "date": "Date",
   "default-category": "",
   "default-location": "Endroit pas défaut",
+  "degrees": "",
   "delete": "Supprimer",
   "delete-account": "Supprimer le compte",
   "delete-list-confirm": "Voulez-vous vraiment supprimer cette liste ? Les itinéraires de la liste seront toujours disponibles.",
@@ -158,6 +159,7 @@
   "new-trail": "Nouvel itinéraire",
   "no-account": "Pas encore de compte ?",
   "no-data": "",
+  "no-grid": "",
   "no-preference": "Pas de préférence",
   "no-results": "Pas de résultat",
   "not-a-valid-email-address": "Adresse email invalide",

web/src/lib/i18n/locales/hu.json

@@ -53,6 +53,7 @@
   "date": "Dátum",
   "default-category": "",
   "default-location": "Alapértelmezett hely",
+  "degrees": "",
   "delete": "Törlés",
   "delete-account": "Fiók törlése",
   "delete-list-confirm": "Tényleg törölni akarja ezt a listát? A listán szereplő nyomvonalak továbbra is elérhetőek maradnak.",
@@ -158,6 +159,7 @@
   "new-trail": "Új útvonal",
   "no-account": "Nincs még fiókja?",
   "no-data": "",
+  "no-grid": "",
   "no-preference": "Nincs preferált",
   "no-results": "Nincs eredmény",
   "not-a-valid-email-address": "Érvénytelen e-mail cím",

web/src/lib/i18n/locales/it.json

@@ -53,6 +53,7 @@
   "date": "Data",
   "default-category": "",
   "default-location": "Posizione predefinita",
+  "degrees": "",
   "delete": "Elimina",
   "delete-account": "Elimina account",
   "delete-list-confirm": "Vuoi davvero cancellare questa lista? I percorsi presenti nella lista saranno ancora disponibili.",
@@ -158,6 +159,7 @@
   "new-trail": "Nuovo percorso",
   "no-account": "Non hai ancora un account?",
   "no-data": "",
+  "no-grid": "",
   "no-preference": "Nessuna preferenza",
   "no-results": "Nessun risultato trovato",
   "not-a-valid-email-address": "Indirizzo email non valido",

web/src/lib/i18n/locales/nl.json

@@ -53,6 +53,7 @@
   "date": "Datum",
   "default-category": "",
   "default-location": "Standaardlocatie",
+  "degrees": "",
   "delete": "Verwijderen",
   "delete-account": "Account verwijderen",
   "delete-list-confirm": "Weet je zeker dat je deze lijst wilt verwijderen? De wandelroutes worden bewaard.",
@@ -158,6 +159,7 @@
   "new-trail": "Nieuwe wandelroute",
   "no-account": "Heb je nog geen account?",
   "no-data": "",
+  "no-grid": "",
   "no-preference": "Geen voorkeur",
   "no-results": "Er zijn geen zoekresultaten",
   "not-a-valid-email-address": "Het e-mailadres is ongeldig",

web/src/lib/i18n/locales/pl.json

@@ -53,6 +53,7 @@
   "date": "Data",
   "default-category": "",
   "default-location": "Domyślna Lokalizacja",
+  "degrees": "",
   "delete": "Usuń",
   "delete-account": "Usuń Konto",
   "delete-list-confirm": "Czy na pewno chcesz usunąć tę listę? Ścieżki na liście zostaną zachowane.",
@@ -158,6 +159,7 @@
   "new-trail": "Nowa ścieżka",
   "no-account": "Nie masz konta?",
   "no-data": "",
+  "no-grid": "",
   "no-preference": "Brak preferencji",
   "no-results": "Brak wyników",
   "not-a-valid-email-address": "Nieprawidłowy adres email",

web/src/lib/i18n/locales/pt.json

@@ -53,6 +53,7 @@
   "date": "Data",
   "default-category": "",
   "default-location": "Localização padrão",
+  "degrees": "",
   "delete": "Excluir",
   "delete-account": "Excluir conta",
   "delete-list-confirm": "Você realmente quer excluir esta lista? As trilhas na lista ainda estarão disponíveis.",
@@ -158,6 +159,7 @@
   "new-trail": "Nova trilha",
   "no-account": "Não tem uma conta?",
   "no-data": "",
+  "no-grid": "",
   "no-preference": "Nenhuma preferência",
   "no-results": "Nenhum resultado encontrado",
   "not-a-valid-email-address": "Não um endereço de e-mail válido",

web/src/lib/i18n/locales/zh.json

@@ -53,6 +53,7 @@
   "date": "日期",
   "default-category": "",
   "default-location": "默认地点",
+  "degrees": "",
   "delete": "删除",
   "delete-account": "注销账户",
   "delete-list-confirm": "您确认要删除当前列表？列表中所有行程仍然继续保留不会被删除。",
@@ -158,6 +159,7 @@
   "new-trail": "创建新路线",
   "no-account": "还未注册？",
   "no-data": "",
+  "no-grid": "",
   "no-preference": "尚未规划",
   "no-results": "没有找到结果",
   "not-a-valid-email-address": "无效电子邮箱地址",

web/src/routes/lists/+page.svelte

@@ -173,6 +173,7 @@
             bind:map
             bind:this={mapWithElevation}
             bind:markers
+            fitBounds="animate"
             on:select={(e) => {
                 selectedTrail = e.detail;
             }}

web/src/routes/map/+page.svelte

@@ -246,6 +246,7 @@
             showElevation={false}
             showInfoPopup={true}
             activeTrail={-1}
+            fitBounds="off"
             minZoom={MIN_ZOOM}
             bind:map
             bind:this={mapWithElevation}

web/src/routes/map/trail/[id]/print/+page.svelte

@@ -70,8 +70,8 @@
     let selectedOrientation: "portrait" | "landscape" = orientations[0].value;
 
     const gridOptions = [
-        { text: "Degrees", value: "degree" },
+        { text: $_("degrees"), value: "degree" },
-        { text: "No Grid", value: "off" },
+        { text: $_("no-grid"), value: "off" },
     ];
     let selectedGrid = gridOptions[0].value;
 
@@ -121,8 +121,18 @@
             let ratio = img.height / img.width;
             img.src = map.getCanvas().toDataURL();
 
-            doc.addImage(img.src, "png", 8, 8, 0, (width - 16) * ratio);
+            const imgPadding = 8;
-            currentHeight += (width - 16) * ratio + 11;
+            const docImgWidth = width - 2 * imgPadding;
+            const docImgHeight = docImgWidth * ratio;
+            doc.addImage(
+                img.src,
+                "png",
+                imgPadding,
+                imgPadding,
+                0,
+                docImgHeight,
+            );
+            currentHeight += docImgHeight + 11;
             const elevationProfileHeight = currentHeight - 11;
 
             // Waypoints
@@ -142,15 +152,33 @@
                 const iconContent = window
                     .getComputedStyle(markerIcon, ":before")
                     .getPropertyValue("content");
-                const iconText = String.fromCharCode(parseInt(iconContent.replace(/['"\\]/g, "").trim(), 16)); 
+                const iconText = iconContent.replaceAll('"', "");
 
+                const iconPositionX = docImgWidth * percentX + imgPadding;
+                const iconPositionY = docImgHeight * percentY + imgPadding;
+                const circleRadius = 3;
+
+                doc.setFillColor(107, 114, 128);
+                doc.circle(
+                    iconPositionX + circleRadius,
+                    iconPositionY + circleRadius,
+                    circleRadius,
+                    "F",
+                );
+                doc.setTextColor("#ffffff");
+                doc.setFontSize(9);
                 doc.setFont("fa-solid-900", "normal");
-                doc.text(iconText, width * percentX, height * percentY);
+
+                const { w: letterWidth, h: letterHeight } =
+                    doc.getTextDimensions(iconText);
+
+                doc.text(
+                    iconText,
+                    iconPositionX + circleRadius - letterWidth / 2 + 0.1,
+                    iconPositionY + circleRadius + letterHeight / 2 - 0.1,
+                );
             }
 
-
-            // printLoading = false;
-            // return;
             // QR Code
             doc.addImage(
                 document.getElementById("qrcode") as HTMLImageElement,
@@ -536,9 +564,12 @@
                         >Scale: &nbsp 1 : {Math.round(scale)}</span
                     >
                 </div>
-                <div class="min-w-0 basis-full" id="elevation-profile"></div>
+                <div
+                    class="min-w-0 basis-full relative"
+                    id="elevation-profile"
+                ></div>
             </div>
-            <div class="pt-4 -mt-4 border-t border-t-input-border z-10">
+            <div class="pt-4 border-t border-t-input-border z-10">
                 <div class="float-right"><LogoText height={48}></LogoText></div>
 
                 <h4 class="text-sm font-semibold">{$trail.name}</h4>