From 8a8e33e5a3a25cbe04555966c3b5e579230b34b2 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Thu, 11 Dec 2025 23:33:46 +0100
Subject: [PATCH] Add `OSM.MapLibre` and `OSM.MapLibre.Styles`

---
 app/assets/javascripts/dashboard.js                    | 10 +++++-----
 .../javascripts/maplibre.combinedcontrolgroup.js       |  2 +-
 app/assets/javascripts/maplibre.i18n.js                |  2 +-
 app/assets/javascripts/maplibre.map.js                 |  6 +++---
 app/assets/javascripts/osm.js.erb                      |  4 ++++
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/dashboard.js b/app/assets/javascripts/dashboard.js
index 30b9b8fed..cd1031f21 100644
--- a/app/assets/javascripts/dashboard.js
+++ b/app/assets/javascripts/dashboard.js
@@ -9,9 +9,9 @@ $(function () {
   if ($("#map").length) {
     map = new maplibregl.Map({
       container: "map",
-      style: OSM.Mapnik,
+      style: OSM.MapLibre.Styles.Mapnik,
       attributionControl: false,
-      locale: OSM.MaplibreLocale,
+      locale: OSM.MapLibre.Locale,
       center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
       zoom: OSM.home ? defaultHomeZoom : 0
     });
@@ -24,14 +24,14 @@ $(function () {
       },
       trackUserLocation: true
     });
-    map.addControl(new OSM.CombinedControlGroup([navigationControl, geolocateControl]), position);
+    map.addControl(new OSM.MapLibre.CombinedControlGroup([navigationControl, geolocateControl]), position);
 
     $("[data-user]").each(function () {
       const user = $(this).data("user");
       if (user.lon && user.lat) {
-        OSM.createMapLibreMarker({ icon: "dot", color: user.color })
+        OSM.MapLibre.getMarker({ icon: "dot", color: user.color })
           .setLngLat([user.lon, user.lat])
-          .setPopup(OSM.createMapLibrePopup(user.description))
+          .setPopup(OSM.MapLibre.getPopup(user.description))
           .addTo(map);
       }
     });
diff --git a/app/assets/javascripts/maplibre.combinedcontrolgroup.js b/app/assets/javascripts/maplibre.combinedcontrolgroup.js
index d4efe598e..94310286d 100644
--- a/app/assets/javascripts/maplibre.combinedcontrolgroup.js
+++ b/app/assets/javascripts/maplibre.combinedcontrolgroup.js
@@ -31,4 +31,4 @@ class CombinedControlGroup {
   }
 }
 
-OSM.CombinedControlGroup = CombinedControlGroup;
+OSM.MapLibre.CombinedControlGroup = CombinedControlGroup;
diff --git a/app/assets/javascripts/maplibre.i18n.js b/app/assets/javascripts/maplibre.i18n.js
index 5451395f8..b2473863c 100644
--- a/app/assets/javascripts/maplibre.i18n.js
+++ b/app/assets/javascripts/maplibre.i18n.js
@@ -1,6 +1,6 @@
 //= require i18n
 
-OSM.MaplibreLocale = {
+OSM.MapLibre.Locale = {
   "GeolocateControl.FindMyLocation": OSM.i18n.t("javascripts.map.locate.title"),
   "GeolocateControl.LocationNotAvailable": OSM.i18n.t("javascripts.map.locate.not_available"),
   "NavigationControl.ZoomIn": OSM.i18n.t("javascripts.map.zoom.in"),
diff --git a/app/assets/javascripts/maplibre.map.js b/app/assets/javascripts/maplibre.map.js
index 0b2093731..9814e5acd 100644
--- a/app/assets/javascripts/maplibre.map.js
+++ b/app/assets/javascripts/maplibre.map.js
@@ -1,6 +1,6 @@
 //= require maplibre-gl/dist/maplibre-gl
 
-OSM.Mapnik = {
+OSM.MapLibre.Styles.Mapnik = {
   version: 8,
   sources: {
     osm: {
@@ -23,7 +23,7 @@ OSM.Mapnik = {
 
 // 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.createMapLibreMarker = function ({ icon = "dot", color = "var(--marker-red)", ...options }) {
+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";
@@ -58,7 +58,7 @@ OSM.createMapLibreMarker = function ({ icon = "dot", color = "var(--marker-red)"
 };
 
 // Helper function to create MapLibre popups that don't overlap with Leaflets' markers
-OSM.createMapLibrePopup = function (content) {
+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
diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb
index 56b6bd88e..b821301ad 100644
--- a/app/assets/javascripts/osm.js.erb
+++ b/app/assets/javascripts/osm.js.erb
@@ -228,5 +228,9 @@ OSM = {
     modalBody.textContent = message;
     const alertModal = new bootstrap.Modal(document.getElementById("osm_alert_modal"));
     alertModal.show();
+  },
+
+  MapLibre: {
+    Styles: {}
   }
 };
-- 
2.39.5