chore(deps): Bump github/codeql-action from 4.31.7 to 4.31.11

Bumps [github/codeql-action](https://github.com/github/codeql-action) from 4.31.7 to 4.31.11. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](cf1bb45a27...19b2f06db2) --- updated-dependencies: - dependency-name: github/codeql-action dependency-version: 4.31.11 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
chore(deps): Bump actions/setup-node from 6.1.0 to 6.2.0 (#1649 )
2026-01-27 15:50:00 +00:00 · 2026-01-26 15:00:09 +00:00 · 2026-01-22 13:52:41 +00:00 · 2026-01-22 09:10:08 +00:00 · 2026-01-22 09:01:57 +00:00 · 2026-01-22 09:01:39 +00:00
15 changed files with 192 additions and 80 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -23,7 +23,7 @@ jobs:
    steps:
      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
        with: { persist-credentials: false }
-      - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: '.nvmrc'
      - run: npm ci
@@ -43,7 +43,7 @@ jobs:
    steps:
      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
        with: { persist-credentials: false }
-      - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: '.nvmrc'
      - run: npm ci
@@ -95,7 +95,7 @@ jobs:
      - run: npm ci
      - run: npm run test-unit-ci
      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
+        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5.5.2
        with:
          files: ${{ github.workspace }}/coverage/coverage-final.json
          verbose: true
@@ -118,7 +118,7 @@ jobs:
          start: npm run start
          browser: chrome
      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
+        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5.5.2
        with:
          files: ${{ github.workspace }}/.nyc_output/out.json
          verbose: true
@@ -139,7 +139,7 @@ jobs:
          start: docker run --rm --network host maputnik --port=8888
          browser: chrome
      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
+        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5.5.2
        with:
          files: ${{ github.workspace }}/.nyc_output/out.json
          verbose: true
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -42,7 +42,7 @@ jobs:

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+      uses: github/codeql-action/init@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
      with:
        languages: ${{ matrix.language }}
        # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
    # If this step fails, then you should remove it and run the build manually (see below)
    - name: Autobuild
-      uses: github/codeql-action/autobuild@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+      uses: github/codeql-action/autobuild@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11

    # ℹ️ Command-line programs to run using the OS shell.
    # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
    #   make release

    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+      uses: github/codeql-action/analyze@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
--- a/.github/workflows/create-bump-version-pr.yml
+++ b/.github/workflows/create-bump-version-pr.yml
@@ -22,7 +22,7 @@ jobs:
          ref: main

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"

--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -16,7 +16,7 @@ jobs:
        with: { persist-credentials: false }

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: '.nvmrc'

--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -22,7 +22,7 @@ jobs:
          persist-credentials: false

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"

@@ -48,7 +48,7 @@ jobs:
          ref: main

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          registry-url: "https://registry.npmjs.org"
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Upgraded codemirror from version 5 to version 6
 - Add code editor to allow editing the entire style
 - Add support for sprite object in setting modal
+- Set the correct map view when opening a new style on an empty map
 - Allow root-relative urls in the stylefile
 - _...Add new stuff here..._

--- a/cypress/e2e/map.cy.ts
+++ b/cypress/e2e/map.cy.ts
@@ -22,6 +22,21 @@ describe("map", () => {
        "Zoom: " + (zoomLevel + 1)
      );
    });
+
+    it("via style file definition", () => {
+      when.setStyle("zoom_7_center_0_51");
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
+        "Zoom: " + (7)
+      );
+      then(get.locationHash().should("contain", "#7/51/0"));
+
+      // opening another stylefile does not update the map view again
+      // as discussed in https://github.com/maplibre/maputnik/issues/1546
+      when.openASecondStyleWithDifferentZoomAndCenter();
+      then(get.locationHash().should("contain", "#7/51/0"));
+
+    });
  });

  describe("search", () => {
@@ -33,6 +48,7 @@ describe("map", () => {
  describe("popup", () => {
    beforeEach(() => {
      when.setStyle("rectangles");
+      then(get.locationHash().should("exist"));
    });
    it("should open on feature click", () => {
      when.clickCenter("maplibre:map");
--- a/cypress/e2e/maputnik-cypress-helper.ts
+++ b/cypress/e2e/maputnik-cypress-helper.ts
@@ -10,6 +10,7 @@ export default class MaputnikCypressHelper {
  };

  public get = {
+    locationHash: (): Cypress.Chainable<string> => cy.location("hash"),
    ...this.helper.get,
  };

--- a/cypress/e2e/maputnik-driver.ts
+++ b/cypress/e2e/maputnik-driver.ts
@@ -92,6 +92,20 @@ export class MaputnikDriver {
          fixture: "example-style-with-fonts.json",
        },
      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "example-style-with-zoom-7-and-center-0-51.json",
+        response: {
+          fixture: "example-style-with-zoom-7-and-center-0-51.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "example-style-with-zoom-5-and-center-50-50.json",
+        response: {
+          fixture: "example-style-with-zoom-5-and-center-50-50.json",
+        },
+      });
      this.helper.given.interceptAndMockResponse({
        method: "GET",
        url: "*example.local/*",
@@ -120,13 +134,20 @@ export class MaputnikDriver {
    waitForExampleFileResponse: () => {
      this.helper.when.waitForResponse("example-style.json");
    },
+    openASecondStyleWithDifferentZoomAndCenter: () => {
+      cy.contains("button", "Open").click();
+      cy.get('[data-wd-key="modal:open.url.input"]')
+        .should("be.enabled")
+        .clear()
+        .type("http://localhost:8888/example-style-with-zoom-5-and-center-50-50.json{enter}");
+    },
    chooseExampleFile: () => {
      this.helper.given.fixture("example-style.json", "example-style.json");
      this.helper.when.openFileByFixture("example-style.json", "modal:open.file.button", "modal:open.file.input");
      this.helper.when.wait(200);
    },
    setStyle: (
-      styleProperties: "geojson" | "raster" | "both" | "layer" | "rectangles" | "font" | "",
+      styleProperties: "geojson" | "raster" | "both" | "layer" | "rectangles" | "font" | "zoom_7_center_0_51" | "",
      zoom?: number
    ) => {
      const url = new URL(baseUrl);
@@ -149,6 +170,9 @@ export class MaputnikDriver {
        case "font":
          url.searchParams.set("style", baseUrl + "example-style-with-fonts.json");
          break;
+        case "zoom_7_center_0_51":
+          url.searchParams.set("style", baseUrl + "example-style-with-zoom-7-and-center-0-51.json");
+          break;
      }

      if (zoom) {
--- a/cypress/fixtures/example-style-with-zoom-5-and-center-50-50.json
+++ b/cypress/fixtures/example-style-with-zoom-5-and-center-50-50.json
@@ -0,0 +1,19 @@
+{
+    "id": "test-style",
+    "center": [50,50],
+    "zoom": 5,
+    "version": 8,
+    "name": "Test Style",
+    "sources": {
+        "rectangles": {
+        "type": "geojson",
+        "data": {
+            "type": "FeatureCollection",
+            "features": []
+        }
+      }
+    },
+    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "layers": []
+}
--- a/cypress/fixtures/example-style-with-zoom-7-and-center-0-51.json
+++ b/cypress/fixtures/example-style-with-zoom-7-and-center-0-51.json
@@ -0,0 +1,17 @@
+{
+    "id": "test-style",
+    "center": [0,51],
+    "zoom": 7,
+    "version": 8,
+    "name": "Test Style",
+    "sources": {
+        "rectangles": {
+        "type": "geojson",
+        "data": {
+            "type": "FeatureCollection",
+            "features": []
+        }
+      }
+    },
+    "layers": []
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,9 @@
      "dependencies": {
        "@codemirror/lang-json": "^6.0.2",
        "@codemirror/lint": "^6.9.2",
-        "@codemirror/state": "^6.5.3",
+        "@codemirror/state": "^6.5.4",
        "@codemirror/theme-one-dark": "^6.1.3",
-        "@codemirror/view": "^6.39.10",
+        "@codemirror/view": "^6.39.11",
        "@dnd-kit/core": "^6.3.1",
        "@dnd-kit/sortable": "^10.0.0",
        "@dnd-kit/utilities": "^3.2.2",
@@ -27,15 +27,15 @@
        "codemirror": "^6.0.2",
        "color": "^5.0.3",
        "detect-browser": "^5.3.0",
-        "downshift": "^9.0.12",
+        "downshift": "^9.0.13",
        "events": "^3.3.0",
        "file-saver": "^2.0.5",
-        "i18next": "^25.7.2",
+        "i18next": "^25.7.4",
        "i18next-browser-languagedetector": "^8.2.0",
        "i18next-resources-to-backend": "^1.2.1",
        "json-stringify-pretty-compact": "^4.0.0",
        "json-to-ast": "^2.1.0",
-        "lodash": "^4.17.21",
+        "lodash": "^4.17.23",
        "lodash.capitalize": "^4.2.1",
        "lodash.clamp": "^4.0.3",
        "lodash.clonedeep": "^4.5.0",
@@ -46,7 +46,7 @@
        "maputnik-design": "github:maputnik/design#172b06c",
        "ol": "^10.7.0",
        "ol-mapbox-style": "^13.2.0",
-        "pmtiles": "^4.3.0",
+        "pmtiles": "^4.3.2",
        "prop-types": "^15.8.1",
        "react": "^19.2.0",
        "react-accessible-accordion": "^5.0.1",
@@ -55,7 +55,7 @@
        "react-collapse": "^5.1.1",
        "react-color": "^2.19.3",
        "react-dom": "^19.2.0",
-        "react-i18next": "^16.3.5",
+        "react-i18next": "^16.5.3",
        "react-icons": "^5.5.0",
        "react-markdown": "^10.1.0",
        "reconnecting-websocket": "^4.4.0",
@@ -99,7 +99,7 @@
        "eslint": "^9.39.2",
        "eslint-plugin-react": "^7.37.5",
        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.4.23",
+        "eslint-plugin-react-refresh": "^0.4.26",
        "i18next-parser": "^9.3.0",
        "istanbul": "^0.4.5",
        "istanbul-lib-coverage": "^3.2.2",
@@ -107,8 +107,8 @@
        "react-hot-loader": "^4.13.1",
        "sass": "^1.97.2",
        "stylelint": "^17.0.0",
-        "stylelint-config-recommended-scss": "^16.0.2",
-        "stylelint-scss": "^6.13.0",
+        "stylelint-config-recommended-scss": "^17.0.0",
+        "stylelint-scss": "^7.0.0",
        "typescript": "^5.9.3",
        "typescript-eslint": "^8.53.0",
        "uuid": "^13.0.0",
@@ -609,9 +609,9 @@
      }
    },
    "node_modules/@codemirror/state": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.3.tgz",
-      "integrity": "sha512-MerMzJzlXogk2fxWFU1nKp36bY5orBG59HnPiz0G9nLRebWa0zXuv2siH6PLIHBvv5TH8CkQRqjBs0MlxCZu+A==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.4.tgz",
+      "integrity": "sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==",
      "license": "MIT",
      "dependencies": {
        "@marijn/find-cluster-break": "^1.0.0"
@@ -630,9 +630,9 @@
      }
    },
    "node_modules/@codemirror/view": {
-      "version": "6.39.10",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.10.tgz",
-      "integrity": "sha512-QfT/PXhiiP76PxMnX0RQVPDQrqfRt9wr9QhInNHnEUu4PWoNS8QwwcIDEneXFChJv22y+Yu/Cz5lFMTPz+h16w==",
+      "version": "6.39.11",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.11.tgz",
+      "integrity": "sha512-bWdeR8gWM87l4DB/kYSF9A+dVackzDb/V56Tq7QVrQ7rn86W0rgZFtlL3g3pem6AeGcb9NQNoy3ao4WpW4h5tQ==",
      "license": "MIT",
      "dependencies": {
        "@codemirror/state": "^6.5.0",
@@ -6212,9 +6212,9 @@
      }
    },
    "node_modules/downshift": {
-      "version": "9.0.12",
-      "resolved": "https://registry.npmjs.org/downshift/-/downshift-9.0.12.tgz",
-      "integrity": "sha512-kFq2pNHm3kmhFfW55RW7+lXliEHg98sKImodICvJfbtvRB6OUiLr138Z8MW5/8t5JaeGZ4Wtomi3Ds72EKVH2Q==",
+      "version": "9.0.13",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-9.0.13.tgz",
+      "integrity": "sha512-fPV+K5jwEzfEAhNhprgCmpWQ23MKwKNzdbtK0QQFiw4hbFcKhMeGB+ccorfWJzmsLR5Dty+CmLDduWlIs74G/w==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.24.5",
@@ -6827,9 +6827,9 @@
      }
    },
    "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.24.tgz",
-      "integrity": "sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==",
+      "version": "0.4.26",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.26.tgz",
+      "integrity": "sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ==",
      "dev": true,
      "license": "MIT",
      "peerDependencies": {
@@ -8457,9 +8457,9 @@
      }
    },
    "node_modules/i18next": {
-      "version": "25.7.2",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.7.2.tgz",
-      "integrity": "sha512-58b4kmLpLv1buWUEwegMDUqZVR5J+rT+WTRFaBGL7lxDuJQQ0NrJFrq+eT2N94aYVR1k1Sr13QITNOL88tZCuw==",
+      "version": "25.7.4",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.7.4.tgz",
+      "integrity": "sha512-hRkpEblXXcXSNbw8mBNq9042OEetgyB/ahc/X17uV/khPwzV+uB8RHceHh3qavyrkPJvmXFKXME2Sy1E0KjAfw==",
      "funding": [
        {
          "type": "individual",
@@ -10056,15 +10056,15 @@
      }
    },
    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
      "license": "MIT"
    },
    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
      "license": "MIT"
    },
    "node_modules/lodash.capitalize": {
@@ -12150,9 +12150,9 @@
      "license": "MIT"
    },
    "node_modules/pmtiles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-4.3.0.tgz",
-      "integrity": "sha512-wnzQeSiYT/MyO63o7AVxwt7+uKqU0QUy2lHrivM7GvecNy0m1A4voVyGey7bujnEW5Hn+ZzLdvHPoFaqrOzbPA==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-4.3.2.tgz",
+      "integrity": "sha512-Ath2F2U2E37QyNXjN1HOF+oLiNIbdrDYrk/K3C9K4Pgw2anwQX10y4WYWEH9O75vPiu0gBbSWIAbSG19svyvZg==",
      "license": "BSD-3-Clause",
      "dependencies": {
        "fflate": "^0.8.2"
@@ -12718,12 +12718,12 @@
      }
    },
    "node_modules/react-i18next": {
-      "version": "16.3.5",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.3.5.tgz",
-      "integrity": "sha512-F7Kglc+T0aE6W2rO5eCAFBEuWRpNb5IFmXOYEgztjZEuiuSLTe/xBIEG6Q3S0fbl8GXMNo+Q7gF8bpokFNWJww==",
+      "version": "16.5.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.5.3.tgz",
+      "integrity": "sha512-fo+/NNch37zqxOzlBYrWMx0uy/yInPkRfjSuy4lqKdaecR17nvCHnEUt3QyzA8XjQ2B/0iW/5BhaHR3ZmukpGw==",
      "license": "MIT",
      "dependencies": {
-        "@babel/runtime": "^7.27.6",
+        "@babel/runtime": "^7.28.4",
        "html-parse-stringify": "^3.0.1",
        "use-sync-external-store": "^1.6.0"
      },
@@ -14102,9 +14102,9 @@
      }
    },
    "node_modules/stylelint-config-recommended": {
-      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-17.0.0.tgz",
-      "integrity": "sha512-WaMSdEiPfZTSFVoYmJbxorJfA610O0tlYuU2aEwY33UQhSPgFbClrVJYWvy3jGJx+XW37O+LyNLiZOEXhKhJmA==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-18.0.0.tgz",
+      "integrity": "sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==",
      "dev": true,
      "funding": [
        {
@@ -14118,29 +14118,29 @@
      ],
      "license": "MIT",
      "engines": {
-        "node": ">=18.12.0"
+        "node": ">=20.19.0"
      },
      "peerDependencies": {
-        "stylelint": "^16.23.0"
+        "stylelint": "^17.0.0"
      }
    },
    "node_modules/stylelint-config-recommended-scss": {
-      "version": "16.0.2",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-16.0.2.tgz",
-      "integrity": "sha512-aUTHhPPWCvFyWaxtckJlCPaXTDFsp4pKO8evXNCsW9OwsaUWyMd6jvcUhSmfGWPrTddvzNqK4rS/UuSLcbVGdQ==",
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-17.0.0.tgz",
+      "integrity": "sha512-VkVD9r7jfUT/dq3mA3/I1WXXk2U71rO5wvU2yIil9PW5o1g3UM7Xc82vHmuVJHV7Y8ok5K137fmW5u3HbhtTOA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "postcss-scss": "^4.0.9",
-        "stylelint-config-recommended": "^17.0.0",
-        "stylelint-scss": "^6.12.1"
+        "stylelint-config-recommended": "^18.0.0",
+        "stylelint-scss": "^7.0.0"
      },
      "engines": {
        "node": ">=20"
      },
      "peerDependencies": {
        "postcss": "^8.3.3",
-        "stylelint": "^16.24.0"
+        "stylelint": "^17.0.0"
      },
      "peerDependenciesMeta": {
        "postcss": {
@@ -14149,9 +14149,9 @@
      }
    },
    "node_modules/stylelint-scss": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.13.0.tgz",
-      "integrity": "sha512-kZPwFUJkfup2gP1enlrS2h9U5+T5wFoqzJ1n/56AlpwSj28kmFe7ww/QFydvPsg5gLjWchAwWWBLtterynZrOw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-7.0.0.tgz",
+      "integrity": "sha512-H88kCC+6Vtzj76NsC8rv6x/LW8slBzIbyeSjsKVlS+4qaEJoDrcJR4L+8JdrR2ORdTscrBzYWiiT2jq6leYR1Q==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -14165,10 +14165,10 @@
        "postcss-value-parser": "^4.2.0"
      },
      "engines": {
-        "node": ">=18.12.0"
+        "node": ">=20.19.0"
      },
      "peerDependencies": {
-        "stylelint": "^16.8.2"
+        "stylelint": "^16.8.2 || ^17.0.0"
      }
    },
    "node_modules/stylelint-scss/node_modules/mdn-data": {
--- a/package.json
+++ b/package.json
@@ -28,9 +28,9 @@
  "dependencies": {
    "@codemirror/lang-json": "^6.0.2",
    "@codemirror/lint": "^6.9.2",
-    "@codemirror/state": "^6.5.3",
+    "@codemirror/state": "^6.5.4",
    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.39.10",
+    "@codemirror/view": "^6.39.11",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
@@ -44,15 +44,15 @@
    "codemirror": "^6.0.2",
    "color": "^5.0.3",
    "detect-browser": "^5.3.0",
-    "downshift": "^9.0.12",
+    "downshift": "^9.0.13",
    "events": "^3.3.0",
    "file-saver": "^2.0.5",
-    "i18next": "^25.7.2",
+    "i18next": "^25.7.4",
    "i18next-browser-languagedetector": "^8.2.0",
    "i18next-resources-to-backend": "^1.2.1",
    "json-stringify-pretty-compact": "^4.0.0",
    "json-to-ast": "^2.1.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
    "lodash.capitalize": "^4.2.1",
    "lodash.clamp": "^4.0.3",
    "lodash.clonedeep": "^4.5.0",
@@ -63,7 +63,7 @@
    "maputnik-design": "github:maputnik/design#172b06c",
    "ol": "^10.7.0",
    "ol-mapbox-style": "^13.2.0",
-    "pmtiles": "^4.3.0",
+    "pmtiles": "^4.3.2",
    "prop-types": "^15.8.1",
    "react": "^19.2.0",
    "react-accessible-accordion": "^5.0.1",
@@ -72,7 +72,7 @@
    "react-collapse": "^5.1.1",
    "react-color": "^2.19.3",
    "react-dom": "^19.2.0",
-    "react-i18next": "^16.3.5",
+    "react-i18next": "^16.5.3",
    "react-icons": "^5.5.0",
    "react-markdown": "^10.1.0",
    "reconnecting-websocket": "^4.4.0",
@@ -133,7 +133,7 @@
    "eslint": "^9.39.2",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.23",
+    "eslint-plugin-react-refresh": "^0.4.26",
    "i18next-parser": "^9.3.0",
    "istanbul": "^0.4.5",
    "istanbul-lib-coverage": "^3.2.2",
@@ -141,8 +141,8 @@
    "react-hot-loader": "^4.13.1",
    "sass": "^1.97.2",
    "stylelint": "^17.0.0",
-    "stylelint-config-recommended-scss": "^16.0.2",
-    "stylelint-scss": "^6.13.0",
+    "stylelint-config-recommended-scss": "^17.0.0",
+    "stylelint-scss": "^7.0.0",
    "typescript": "^5.9.3",
    "typescript-eslint": "^8.53.0",
    "uuid": "^13.0.0",
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -99,6 +99,7 @@ type AppState = {
      lng: number,
      lat: number,
    },
+    _from: "map" | "app"
  },
  maplibreGlDebugOptions: Partial<MapOptions> & {
    showTileBoundaries: boolean,
@@ -148,6 +149,7 @@ export default class App extends React.Component<any, AppState> {
          lng: 0,
          lat: 0,
        },
+        _from: "app"
      },
      isOpen: {
        settings: false,
@@ -335,6 +337,13 @@ export default class App extends React.Component<any, AppState> {
      ...opts,
    };

+
+    // Detect empty style
+    const oldStyle = this.state.mapStyle;
+    const isEmptySources = !oldStyle.sources || Object.keys(oldStyle.sources).length === 0;
+    const isEmptyLayers = !oldStyle.layers || oldStyle.layers.length === 0;
+    const isEmptyStyle = isEmptySources && isEmptyLayers;
+
    // For the style object, find the urls that has "{key}" and insert the correct API keys
    // Without this, going from e.g. MapTiler to OpenLayers and back will lose the maptlier key.

@@ -466,15 +475,25 @@ export default class App extends React.Component<any, AppState> {
      this.saveStyle(newStyle);
    }

+    const zoom = newStyle?.zoom;
+    const center = newStyle?.center;
+
    this.setState({
      mapStyle: newStyle,
      dirtyMapStyle: dirtyMapStyle,
+      mapView: isEmptyStyle && zoom && center ? {
+        zoom: zoom,
+        center: {
+          lng: center[0],
+          lat: center[1],
+        },
+        _from: "app"
+      } : this.state.mapView,
      errors: mappedErrors,
    }, () => {
      this.fetchSources();
      this.setStateInUrl();
    });
-
  };

  onUndo = () => {
@@ -665,6 +684,7 @@ export default class App extends React.Component<any, AppState> {
      lng: number,
      lat: number,
    },
+    _from: "map" | "app"
  }) => {
    this.setState({
      mapView,
@@ -676,6 +696,7 @@ export default class App extends React.Component<any, AppState> {

    const mapProps = {
      mapStyle: (dirtyMapStyle || mapStyle),
+      mapView: this.state.mapView,
      replaceAccessTokens: (mapStyle: StyleSpecification) => {
        return style.replaceAccessTokens(mapStyle, {
          allowFallback: true
--- a/src/components/MapMaplibreGl.tsx
+++ b/src/components/MapMaplibreGl.tsx
@@ -52,6 +52,14 @@ type MapMaplibreGlInternalProps = {
  onDataChange?(event: {map: Map | null}): unknown
  onLayerSelect(index: number): void
  mapStyle: StyleSpecification
+  mapView: {
+    zoom: number,
+    center: {
+      lng: number,
+      lat: number,
+    },
+    _from: "map" | "app"
+  };
  inspectModeEnabled: boolean
  highlightedLayer?: HighlightedLayer
  options?: Partial<MapOptions> & {
@@ -60,7 +68,7 @@ type MapMaplibreGlInternalProps = {
    showOverdrawInspector?: boolean
  }
  replaceAccessTokens(mapStyle: StyleSpecification): StyleSpecification
-  onChange(value: {center: LngLat, zoom: number}): unknown
+  onChange(value: {center: LngLat, zoom: number, _from: "map" | "app"}): unknown
 } & WithTranslation;

 type MapMaplibreGlState = {
@@ -117,6 +125,11 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
      map.showTileBoundaries = this.props.options?.showTileBoundaries!;
      map.showCollisionBoxes = this.props.options?.showCollisionBoxes!;
      map.showOverdrawInspector = this.props.options?.showOverdrawInspector!;
+
+      // set the map view when the prop was updated from outside
+      if (this.props.mapView._from === "app") {
+        map.jumpTo(this.props.mapView);
+      }
    }

    if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
@@ -160,7 +173,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
    const mapViewChange = () => {
      const center = map.getCenter();
      const zoom = map.getZoom();
-      this.props.onChange({center, zoom});
+      this.props.onChange({center, zoom, _from: "map"});
    };
    mapViewChange();