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

---
 app/assets/javascripts/dashboard.js    |  5 ++--
 app/assets/javascripts/diary_entry.js  |  6 ++--
 app/assets/javascripts/maplibre.map.js | 15 ----------
 app/assets/javascripts/maplibre/map.js | 39 ++++++++++++++++++++++++++
 app/assets/javascripts/user.js         |  5 ++--
 5 files changed, 45 insertions(+), 25 deletions(-)
 create mode 100644 app/assets/javascripts/maplibre/map.js

diff --git a/app/assets/javascripts/dashboard.js b/app/assets/javascripts/dashboard.js
index 6971c6637..45aab874e 100644
--- a/app/assets/javascripts/dashboard.js
+++ b/app/assets/javascripts/dashboard.js
@@ -1,4 +1,5 @@
 //= require maplibre.map
+//= require maplibre/map
 //= require maplibre/controls
 //= require maplibre/dom_util
 
@@ -6,14 +7,12 @@ $(function () {
   let map;
 
   if ($("#map").length) {
-    map = new maplibregl.Map(OSM.MapLibre.defaultSecondaryMapOptions);
+    map = new OSM.MapLibre.SecondaryMap();
 
     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
     const navigationControl = new OSM.MapLibre.NavigationControl();
     const geolocateControl = new OSM.MapLibre.GeolocateControl();
     map.addControl(new OSM.MapLibre.CombinedControlGroup([navigationControl, geolocateControl]), position);
-    map.touchZoomRotate.disableRotation();
-    map.keyboard.disableRotation();
 
     const markerObjects = $("[data-user]")
       .filter(function () {
diff --git a/app/assets/javascripts/diary_entry.js b/app/assets/javascripts/diary_entry.js
index ba9c745d6..e033265aa 100644
--- a/app/assets/javascripts/diary_entry.js
+++ b/app/assets/javascripts/diary_entry.js
@@ -1,4 +1,5 @@
 //= require maplibre.map
+//= require maplibre/map
 //= require maplibre/controls
 //= require maplibre/dom_util
 
@@ -32,8 +33,7 @@ $(function () {
     $("#usemap").hide();
 
     const params = $("#map").data();
-    map = new maplibregl.Map({
-      ...OSM.MapLibre.defaultSecondaryMapOptions,
+    map = new OSM.MapLibre.SecondaryMap({
       center: [params.lon, params.lat],
       zoom: params.zoom - 1
     });
@@ -41,8 +41,6 @@ $(function () {
     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
     const navigationControl = new OSM.MapLibre.NavigationControl();
     map.addControl(navigationControl, position);
-    map.touchZoomRotate.disableRotation();
-    map.keyboard.disableRotation();
 
     // Create marker if coordinates exist when map is shown
     if ($("#latitude").val() && $("#longitude").val()) {
diff --git a/app/assets/javascripts/maplibre.map.js b/app/assets/javascripts/maplibre.map.js
index 3c86fa657..1b8e9af43 100644
--- a/app/assets/javascripts/maplibre.map.js
+++ b/app/assets/javascripts/maplibre.map.js
@@ -21,18 +21,3 @@ OSM.MapLibre.Styles.Mapnik = {
     }
   ]
 };
-
-OSM.MapLibre.defaultHomeZoom = 11;
-OSM.MapLibre.defaultSecondaryMapOptions = {
-  container: "map",
-  style: OSM.MapLibre.Styles.Mapnik,
-  attributionControl: false,
-  locale: OSM.MapLibre.Locale,
-  rollEnabled: false,
-  dragRotate: false,
-  pitchWithRotate: false,
-  bearingSnap: 180,
-  maxPitch: 0,
-  center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
-  zoom: OSM.home ? OSM.MapLibre.defaultHomeZoom : 0
-};
diff --git a/app/assets/javascripts/maplibre/map.js b/app/assets/javascripts/maplibre/map.js
new file mode 100644
index 000000000..79cafdcb4
--- /dev/null
+++ b/app/assets/javascripts/maplibre/map.js
@@ -0,0 +1,39 @@
+OSM.MapLibre.Map = class extends maplibregl.Map {
+  constructor({ allowRotation, ...options } = {}) {
+    const rotationOptions = {};
+    if (allowRotation === false) {
+      Object.assign(rotationOptions, {
+        rollEnabled: false,
+        dragRotate: false,
+        pitchWithRotate: false,
+        bearingSnap: 180
+      });
+    }
+    const map = super({
+      ...rotationOptions,
+      ...options
+    });
+    if (allowRotation === false) {
+      map.touchZoomRotate.disableRotation();
+      map.keyboard.disableRotation();
+    }
+    return map;
+  }
+};
+
+OSM.MapLibre.SecondaryMap = class extends OSM.MapLibre.Map {
+  constructor(options = {}) {
+    const defaultHomeZoom = 11;
+    super({
+      container: "map",
+      style: OSM.MapLibre.Styles.Mapnik,
+      attributionControl: false,
+      locale: OSM.MapLibre.Locale,
+      allowRotation: false,
+      maxPitch: 0,
+      center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
+      zoom: OSM.home ? defaultHomeZoom : 0,
+      ...options
+    });
+  }
+};
diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
index 120ba2160..a10846de7 100644
--- a/app/assets/javascripts/user.js
+++ b/app/assets/javascripts/user.js
@@ -1,4 +1,5 @@
 //= require maplibre.map
+//= require maplibre/map
 //= require maplibre/controls
 //= require maplibre/dom_util
 //= require ./home_location_name-endpoint
@@ -51,7 +52,7 @@ $(function () {
   }
 
   if ($("#map").length) {
-    map = new maplibregl.Map(OSM.MapLibre.defaultSecondaryMapOptions);
+    map = new OSM.MapLibre.SecondaryMap();
 
     savedLat = $("#home_lat").val();
     savedLon = $("#home_lon").val();
@@ -61,8 +62,6 @@ $(function () {
     const navigationControl = new OSM.MapLibre.NavigationControl();
     const geolocateControl = new OSM.MapLibre.GeolocateControl();
     map.addControl(new OSM.MapLibre.CombinedControlGroup([navigationControl, geolocateControl]), position);
-    map.touchZoomRotate.disableRotation();
-    map.keyboard.disableRotation();
 
     marker = new OSM.MapLibre.Marker();
 
-- 
2.39.5