From 3f3ca9a13b3390163550db1da41ee2a94fdc7786 Mon Sep 17 00:00:00 2001
From: shkomg <serhiy.khvashchuk@gmail.com>
Date: Tue, 3 Nov 2026 07:16:19 +0100
Subject: [PATCH] Fix debug modal options missing for the mbgljs renderer
 (#2293)

Fixes #1548

The Debug modal only listed the map options for `mlgljs`, so an `mbgljs`
style got an empty "Options". It now checks `renderer !== "ol"`, as
suggested in the issue, which is how `App.tsx` picks the map anyway.

## Launch Checklist

 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

Added an e2e case with a small `mbgljs` fixture.

## Video

Debug modal for an `mbgljs` style on this branch:


https://github.com/user-attachments/assets/41a7bc71-85cf-44ae-a56e-91af7fbb3904

Fix written with Claude Code; video is an automated browser run of this
branch recorded by User Stories Bot.
---
 CHANGELOG.md                                         |  1 +
 e2e/fixtures/example-style-with-mbgljs-renderer.json | 10 ++++++++++
 e2e/maputnik-driver.ts                               |  3 +++
 e2e/modals.spec.ts                                   |  8 ++++++++
 src/components/modals/ModalDebug.tsx                 |  2 +-
 5 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 e2e/fixtures/example-style-with-mbgljs-renderer.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3199d7c..b86d60f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - The `maputnik` desktop binary now opens the default browser automatically on startup (opt out with `--no-browser`)
 - Keyboard shortcuts now keep working while the map has focus, instead of going dead until the map is blurred
 - The map no longer stays blank on load until it is moved, when the style loads before the map is ready
+- The debug modal now shows the MapLibre options for any renderer other than OpenLayers (e.g. `mbgljs`)
 - _...Add new stuff here..._
 
 ## 3.1.0
diff --git a/e2e/fixtures/example-style-with-mbgljs-renderer.json b/e2e/fixtures/example-style-with-mbgljs-renderer.json
new file mode 100644
index 00000000..79b997ad
--- /dev/null
+++ b/e2e/fixtures/example-style-with-mbgljs-renderer.json
@@ -0,0 +1,10 @@
+{
+    "id": "test-style",
+    "version": 8,
+    "name": "Test Style",
+    "metadata": {
+        "maputnik:renderer": "mbgljs"
+    },
+    "sources": {},
+    "layers": []
+}
diff --git a/e2e/maputnik-driver.ts b/e2e/maputnik-driver.ts
index cfced9e5..cd0f2d7c 100644
--- a/e2e/maputnik-driver.ts
+++ b/e2e/maputnik-driver.ts
@@ -41,6 +41,7 @@ export class MaputnikDriver {
         "example-style-with-zoom-5-and-center-50-50.json",
         "access-token-style.json",
         "grouped-layers-style.json",
+        "example-style-with-mbgljs-renderer.json",
       ];
       for (const fixture of styleFixtures) {
         await this.helper.given.interceptAndMockResponse({
@@ -93,6 +94,7 @@ export class MaputnikDriver {
         | "zoom_7_center_0_51"
         | "access_tokens"
         | "grouped_layers"
+        | "mbgljs_renderer"
         | "",
       zoom?: number
     ) => {
@@ -106,6 +108,7 @@ export class MaputnikDriver {
         zoom_7_center_0_51: "example-style-with-zoom-7-and-center-0-51.json",
         access_tokens: "access-token-style.json",
         grouped_layers: "grouped-layers-style.json",
+        mbgljs_renderer: "example-style-with-mbgljs-renderer.json",
       };
 
       const url = new URL(baseUrl);
diff --git a/e2e/modals.spec.ts b/e2e/modals.spec.ts
index 9d4bf88d..a3b3c6d5 100644
--- a/e2e/modals.spec.ts
+++ b/e2e/modals.spec.ts
@@ -88,6 +88,14 @@ describe("modals", () => {
     });
   });
 
+  describe("debug with a renderer other than mlgljs or ol", () => {
+    test("shows the map options", async () => {
+      await when.setStyle("mbgljs_renderer");
+      await when.typeKeys("!");
+      await then(get.elementByTestId("modal:debug.max-zoom")).shouldBeVisible();
+    });
+  });
+
   describe("export", () => {
     beforeEach(async () => {
       await when.click("nav:export");
diff --git a/src/components/modals/ModalDebug.tsx b/src/components/modals/ModalDebug.tsx
index c3ec2390..086bf4f9 100644
--- a/src/components/modals/ModalDebug.tsx
+++ b/src/components/modals/ModalDebug.tsx
@@ -50,7 +50,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
     >
       <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <h1>{t("Options")}</h1>
-        {this.props.renderer === "mlgljs" &&
+        {this.props.renderer !== "ol" &&
           <>
             <ul>
               {Object.entries(this.props.maplibreGlDebugOptions!).filter((entry): entry is [string, boolean] => typeof entry[1] === "boolean").map(([key, val]) => {