From b0ac35232dadb8faebb8349003c507d60b788ae4 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Thu, 20 Jun 2024 18:13:46 +0200
Subject: [PATCH] smaller waypoints

---
 website/src/lib/components/Map.svelte         | 32 ++++++++++++++++++-
 .../src/lib/components/gpx-layer/GPXLayer.ts  |  3 +-
 .../lib/components/gpx-layer/WaypointPopup.ts | 12 ++++++-
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte
index 094519e91..80c51000e 100644
--- a/website/src/lib/components/Map.svelte
+++ b/website/src/lib/components/Map.svelte
@@ -248,8 +248,38 @@
 		@apply shadow-none;
 	}
 
-	div :global(.mapboxgl-popup-tip) {
+	div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
+		@apply border-b-background;
+	}
+
+	div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
+		@apply border-b-background;
+	}
+
+	div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
+		@apply border-b-background;
+	}
+
+	div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
+		@apply border-t-background;
+		@apply drop-shadow-md;
+	}
+
+	div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
+		@apply border-t-background;
 		@apply drop-shadow-md;
+	}
+
+	div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
 		@apply border-t-background;
+		@apply drop-shadow-md;
+	}
+
+	div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
+		@apply border-r-background;
+	}
+
+	div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
+		@apply border-l-background;
 	}
 </style>
diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts
index a40804f2e..b461bbd43 100644
--- a/website/src/lib/components/gpx-layer/GPXLayer.ts
+++ b/website/src/lib/components/gpx-layer/GPXLayer.ts
@@ -178,7 +178,8 @@ export class GPXLayer {
                     Object.defineProperty(this.markers[markerIndex], '_waypoint', { value: waypoint, writable: true });
                 } else {
                     let marker = new mapboxgl.Marker({
-                        draggable: this.draggable
+                        draggable: this.draggable,
+                        scale: 0.8
                     }).setLngLat(waypoint.getCoordinates());
                     Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
                     let dragEndTimestamp = 0;
diff --git a/website/src/lib/components/gpx-layer/WaypointPopup.ts b/website/src/lib/components/gpx-layer/WaypointPopup.ts
index 143a76184..db8696f00 100644
--- a/website/src/lib/components/gpx-layer/WaypointPopup.ts
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.ts
@@ -7,7 +7,17 @@ export const currentPopupWaypoint = writable<[Waypoint, string] | null>(null);
 
 export const waypointPopup = new mapboxgl.Popup({
     closeButton: false,
-    maxWidth: undefined
+    maxWidth: undefined,
+    offset: {
+        'top': [0, 0],
+        'top-left': [0, 0],
+        'top-right': [0, 0],
+        'bottom': [0, -30],
+        'bottom-left': [0, -30],
+        'bottom-right': [0, -30],
+        'left': [0, 0],
+        'right': [0, 0]
+    },
 });
 
 export function deleteWaypoint(fileId: string, waypointIndex: number) {