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

---
 app/assets/javascripts/dashboard.js         |  2 +-
 app/assets/javascripts/diary_entry.js       |  2 +-
 app/assets/javascripts/maplibre.map.js      | 36 ---------------------
 app/assets/javascripts/maplibre/dom_util.js | 36 +++++++++++++++++++++
 app/assets/javascripts/user.js              |  3 +-
 5 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/app/assets/javascripts/dashboard.js b/app/assets/javascripts/dashboard.js
index 78d396bf1..756d2e0bc 100644
--- a/app/assets/javascripts/dashboard.js
+++ b/app/assets/javascripts/dashboard.js
@@ -28,7 +28,7 @@ $(function () {
       .map(function () {
         const { lat, lon, color, description } = $(this).data("user");
 
-        const marker = OSM.MapLibre.getMarker({ icon: "dot", color })
+        const marker = new OSM.MapLibre.Marker({ color })
           .setLngLat([lon, lat])
           .setPopup(new OSM.MapLibre.Popup().setHTML(description));
 
diff --git a/app/assets/javascripts/diary_entry.js b/app/assets/javascripts/diary_entry.js
index b40c0d7ff..c9e4b7e70 100644
--- a/app/assets/javascripts/diary_entry.js
+++ b/app/assets/javascripts/diary_entry.js
@@ -15,7 +15,7 @@ $(function () {
     if (marker) {
       marker.setLngLat(coords);
     } else {
-      marker = OSM.MapLibre.getMarker({ draggable: true })
+      marker = new OSM.MapLibre.Marker({ draggable: true })
         .setLngLat(coords)
         .setPopup(new OSM.MapLibre.Popup().setHTML(OSM.i18n.t("diary_entries.edit.marker_text")))
         .addTo(map);
diff --git a/app/assets/javascripts/maplibre.map.js b/app/assets/javascripts/maplibre.map.js
index 70620d293..3c86fa657 100644
--- a/app/assets/javascripts/maplibre.map.js
+++ b/app/assets/javascripts/maplibre.map.js
@@ -36,39 +36,3 @@ OSM.MapLibre.defaultSecondaryMapOptions = {
   center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
   zoom: OSM.home ? OSM.MapLibre.defaultHomeZoom : 0
 };
-
-// Helper function to create Leaflet style (SVG comes from Leaflet) markers for MapLibre
-// new maplibregl.Marker({ color: color }) is simpler, but does not have the exact same gradient
-OSM.MapLibre.getMarker = function ({ icon = "dot", color = "var(--marker-red)", ...options }) {
-  const el = document.createElement("div");
-  el.className = "maplibre-gl-marker";
-  el.style.width = "25px";
-  el.style.height = "40px";
-
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 25 40");
-  svg.setAttribute("width", "25");
-  svg.setAttribute("height", "40");
-  svg.classList.add("pe-none");
-  svg.style.overflow = "visible";
-
-  // Use the marker icons from NoteMarker.svg
-  const use1 = document.createElementNS("http://www.w3.org/2000/svg", "use");
-  use1.setAttribute("href", "#pin-shadow");
-
-  const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
-  use2.setAttribute("href", `#pin-${icon}`);
-  use2.setAttribute("color", color);
-  use2.classList.add("pe-auto");
-
-  svg.appendChild(use1);
-  svg.appendChild(use2);
-  el.appendChild(svg);
-
-  return new maplibregl.Marker({
-    element: el,
-    anchor: "bottom",
-    offset: [0, 0],
-    ...options
-  });
-};
diff --git a/app/assets/javascripts/maplibre/dom_util.js b/app/assets/javascripts/maplibre/dom_util.js
index f8c8e7b1e..0a3c913f8 100644
--- a/app/assets/javascripts/maplibre/dom_util.js
+++ b/app/assets/javascripts/maplibre/dom_util.js
@@ -1,3 +1,39 @@
+OSM.MapLibre.Marker = class extends maplibregl.Marker {
+  constructor({ icon = "dot", color = "var(--marker-red)", ...options } = {}) {
+    const element = document.createElement("div");
+    element.className = "maplibre-gl-marker";
+    element.style.width = "25px";
+    element.style.height = "40px";
+
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 0 25 40");
+    svg.setAttribute("width", "25");
+    svg.setAttribute("height", "40");
+    svg.classList.add("pe-none");
+    svg.style.overflow = "visible";
+
+    // Use the marker icons from NoteMarker.svg
+    const use1 = document.createElementNS("http://www.w3.org/2000/svg", "use");
+    use1.setAttribute("href", "#pin-shadow");
+
+    const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
+    use2.setAttribute("href", `#pin-${icon}`);
+    use2.setAttribute("color", color);
+    use2.classList.add("pe-auto");
+
+    svg.appendChild(use1);
+    svg.appendChild(use2);
+    element.appendChild(svg);
+
+    super({
+      element,
+      anchor: "bottom",
+      offset: [0, 0],
+      ...options
+    });
+  }
+};
+
 OSM.MapLibre.Popup = class extends maplibregl.Popup {
   constructor(options) {
     // General offset 5px for each side, but the offset depends on the popup position:
diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
index ced7d9665..cc741fc4c 100644
--- a/app/assets/javascripts/user.js
+++ b/app/assets/javascripts/user.js
@@ -1,5 +1,6 @@
 //= require maplibre.map
 //= require maplibre.combinedcontrolgroup
+//= require maplibre/dom_util
 //= require ./home_location_name-endpoint
 
 $(function () {
@@ -68,7 +69,7 @@ $(function () {
     map.touchZoomRotate.disableRotation();
     map.keyboard.disableRotation();
 
-    marker = OSM.MapLibre.getMarker({});
+    marker = new OSM.MapLibre.Marker();
 
     if (OSM.home) {
       marker.setLngLat([OSM.home.lon, OSM.home.lat]);
-- 
2.39.5