From 3437104402ebe47f9be85132f5de3946aea49d5b Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Tue, 2 Dec 2025 07:14:35 +0100
Subject: [PATCH] Add a supergrouping mechanism for overriding how map controls
 are laid out

Co-authored-by: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
---
 app/assets/javascripts/dashboard.js           |  7 ++--
 .../maplibre.combinedcontrolgroup.js          | 34 +++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/maplibre.combinedcontrolgroup.js

diff --git a/app/assets/javascripts/dashboard.js b/app/assets/javascripts/dashboard.js
index e7a9ae6a0..30b9b8fed 100644
--- a/app/assets/javascripts/dashboard.js
+++ b/app/assets/javascripts/dashboard.js
@@ -1,5 +1,6 @@
 //= require maplibre.map
 //= require maplibre.i18n
+//= require maplibre.combinedcontrolgroup
 
 $(function () {
   const defaultHomeZoom = 11;
@@ -16,14 +17,14 @@ $(function () {
     });
 
     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
-    map.addControl(new maplibregl.NavigationControl({ showCompass: false }), position);
-    const geolocate = new maplibregl.GeolocateControl({
+    const navigationControl = new maplibregl.NavigationControl({ showCompass: false });
+    const geolocateControl = new maplibregl.GeolocateControl({
       positionOptions: {
         enableHighAccuracy: true
       },
       trackUserLocation: true
     });
-    map.addControl(geolocate, position);
+    map.addControl(new OSM.CombinedControlGroup([navigationControl, geolocateControl]), position);
 
     $("[data-user]").each(function () {
       const user = $(this).data("user");
diff --git a/app/assets/javascripts/maplibre.combinedcontrolgroup.js b/app/assets/javascripts/maplibre.combinedcontrolgroup.js
new file mode 100644
index 000000000..d4efe598e
--- /dev/null
+++ b/app/assets/javascripts/maplibre.combinedcontrolgroup.js
@@ -0,0 +1,34 @@
+class CombinedControlGroup {
+  constructor(controls) {
+    // array of MapLibre controls
+    this.controls = controls;
+    // DOM containers returned by onAdd()
+    this.containers = [];
+  }
+
+  onAdd(map) {
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+
+    for (const ctrl of this.controls) {
+      const ctrlContainer = ctrl.onAdd(map);
+      this.containers.push(ctrlContainer);
+
+      // Extract buttons from the control's container and add to our wrapper
+      const buttons = ctrlContainer.querySelectorAll("button");
+      buttons.forEach(button => {
+        this._container.appendChild(button);
+      });
+    }
+
+    return this._container;
+  }
+
+  onRemove() {
+    for (const ctrl of this.controls) ctrl.onRemove?.();
+
+    if (this._container) this._container.remove();
+  }
+}
+
+OSM.CombinedControlGroup = CombinedControlGroup;
-- 
2.39.5