From e9c5cae48a5df9532b18454fbddfcbc11a4a5ea6 Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Mon, 19 Jan 2026 16:01:30 +0000
Subject: [PATCH] Extend MapLibre Popup class

---
 app/assets/javascripts/dashboard.js         |  3 ++-
 app/assets/javascripts/diary_entry.js       |  3 ++-
 app/assets/javascripts/maplibre.map.js      | 19 -------------------
 app/assets/javascripts/maplibre/dom_util.js | 19 +++++++++++++++++++
 4 files changed, 23 insertions(+), 21 deletions(-)
 create mode 100644 app/assets/javascripts/maplibre/dom_util.js

diff --git a/app/assets/javascripts/dashboard.js b/app/assets/javascripts/dashboard.js
index 4a9bf9f88..78d396bf1 100644
--- a/app/assets/javascripts/dashboard.js
+++ b/app/assets/javascripts/dashboard.js
@@ -1,5 +1,6 @@
 //= require maplibre.map
 //= require maplibre.combinedcontrolgroup
+//= require maplibre/dom_util
 
 $(function () {
   let map;
@@ -29,7 +30,7 @@ $(function () {
 
         const marker = OSM.MapLibre.getMarker({ icon: "dot", color })
           .setLngLat([lon, lat])
-          .setPopup(OSM.MapLibre.getPopup(description));
+          .setPopup(new OSM.MapLibre.Popup().setHTML(description));
 
         return { marker, lat, lon };
       })
diff --git a/app/assets/javascripts/diary_entry.js b/app/assets/javascripts/diary_entry.js
index a2b6bee07..b40c0d7ff 100644
--- a/app/assets/javascripts/diary_entry.js
+++ b/app/assets/javascripts/diary_entry.js
@@ -1,4 +1,5 @@
 //= require maplibre.map
+//= require maplibre/dom_util
 
 $(function () {
   let marker, map;
@@ -16,7 +17,7 @@ $(function () {
     } else {
       marker = OSM.MapLibre.getMarker({ draggable: true })
         .setLngLat(coords)
-        .setPopup(OSM.MapLibre.getPopup(OSM.i18n.t("diary_entries.edit.marker_text")))
+        .setPopup(new OSM.MapLibre.Popup().setHTML(OSM.i18n.t("diary_entries.edit.marker_text")))
         .addTo(map);
       marker.on("dragend", updateFormFieldsFromMarkerPosition);
     }
diff --git a/app/assets/javascripts/maplibre.map.js b/app/assets/javascripts/maplibre.map.js
index de4a890ed..70620d293 100644
--- a/app/assets/javascripts/maplibre.map.js
+++ b/app/assets/javascripts/maplibre.map.js
@@ -72,22 +72,3 @@ OSM.MapLibre.getMarker = function ({ icon = "dot", color = "var(--marker-red)",
     ...options
   });
 };
-
-// Helper function to create MapLibre popups that don't overlap with Leaflets' markers
-OSM.MapLibre.getPopup = function (content) {
-  // General offset 5px for each side, but the offset depends on the popup position:
-  // Popup above the marker -> lift it by height + 5px = 45px
-  // Popup left the marker -> lift it by width/2 + 5px = 22.5px ~= 17px
-  const offset = {
-    "bottom": [0, -45],
-    "bottom-left": [0, -45],
-    "bottom-right": [0, -45],
-    "top": [0, 5],
-    "top-left": [0, 5],
-    "top-right": [0, 5],
-    // our marker is bigger at the top, but this does not attach there -> tucked 2px more
-    "right": [-15, -10],
-    "left": [15, -10]
-  };
-  return new maplibregl.Popup({ offset }).setHTML(content);
-};
diff --git a/app/assets/javascripts/maplibre/dom_util.js b/app/assets/javascripts/maplibre/dom_util.js
new file mode 100644
index 000000000..f8c8e7b1e
--- /dev/null
+++ b/app/assets/javascripts/maplibre/dom_util.js
@@ -0,0 +1,19 @@
+OSM.MapLibre.Popup = class extends maplibregl.Popup {
+  constructor(options) {
+    // General offset 5px for each side, but the offset depends on the popup position:
+    // Popup above the marker -> lift it by height + 5px = 45px
+    // Popup left the marker -> lift it by width/2 + 5px = 22.5px ~= 17px
+    const offset = {
+      "bottom": [0, -45],
+      "bottom-left": [0, -45],
+      "bottom-right": [0, -45],
+      "top": [0, 5],
+      "top-left": [0, 5],
+      "top-right": [0, 5],
+      // our marker is bigger at the top, but this does not attach there -> tucked 2px more
+      "right": [-15, -10],
+      "left": [15, -10]
+    };
+    super({ offset, ...options });
+  }
+};
-- 
2.39.5