chore(deps): Bump peter-evans/create-pull-request from 8.0.0 to 8.1.0

Bumps [peter-evans/create-pull-request](https://github.com/peter-evans/create-pull-request) from 8.0.0 to 8.1.0.
- [Release notes](https://github.com/peter-evans/create-pull-request/releases)
- [Commits](98357b18bf...c0f553fe54)

---
updated-dependencies:
- dependency-name: peter-evans/create-pull-request
  dependency-version: 8.1.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/auto-merge-dependabot.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - name: Dependabot metadata
         id: metadata
-        uses: dependabot/fetch-metadata@08eff52bf64351f401fb50d4972fa95b9f2c2d1b # v2.4.0
+        uses: dependabot/fetch-metadata@21025c705c08248db411dc16f3619e6b5f9ea21a # v2.5.0
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
       - name: Approve Dependabot PRs

.github/workflows/ci.yml

@@ -21,9 +21,9 @@ jobs:
         os: [ ubuntu-latest, windows-latest, macos-latest ]
 
     steps:
-      - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with: { persist-credentials: false }
-      - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
       - run: npm ci
@@ -41,9 +41,9 @@ jobs:
     if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
 
     steps:
-      - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with: { persist-credentials: false }
-      - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
       - run: npm ci
@@ -56,7 +56,7 @@ jobs:
 
       # Build and upload desktop CLI artifacts
       - name: Set up Go
-        uses: actions/setup-go@44694675825211faa026b3c33043df3e48a5fa00 # v6.0.0
+        uses: actions/setup-go@4dc6199c7b1a012772edbd06daecab0f50c9053c # v6.1.0
         with:
           go-version: ^1.23.x
           cache-dependency-path: desktop/go.sum
@@ -90,12 +90,12 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with: { persist-credentials: false }
       - 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
@@ -108,7 +108,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with: { persist-credentials: false }
       - run: npm ci
       - name: Cypress run
@@ -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
@@ -129,7 +129,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with: { persist-credentials: false }
       - run: npm ci
       - name: Cypress run
@@ -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

.github/workflows/codeql-analysis.yml

@@ -38,11 +38,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+      uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+      uses: github/codeql-action/init@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
       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@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+      uses: github/codeql-action/autobuild@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
 
     # ℹ️ 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@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+      uses: github/codeql-action/analyze@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7

.github/workflows/create-bump-version-pr.yml

@@ -16,13 +16,13 @@ jobs:
       run:
         shell: bash
     steps:
-      - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
           ref: main
 
       - name: Use Node.js from nvmrc
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
 
@@ -32,7 +32,7 @@ jobs:
           ./build/bump-version-changelog.js ${{ inputs.version }}
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
+        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
         with:
           commit-message: Bump version to ${{ inputs.version }}
           branch: bump-version-to-${{ inputs.version }}

.github/workflows/deploy.yml

@@ -12,11 +12,11 @@ jobs:
       contents: write
     if: ${{ github.event_name == 'push' }}
     steps:
-      - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with: { persist-credentials: false }
 
       - name: Use Node.js from nvmrc
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
 
@@ -50,6 +50,6 @@ jobs:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - run: docker build -t ghcr.io/maplibre/maputnik:main .
       - run: docker push ghcr.io/maplibre/maputnik:main

.github/workflows/release.yml

@@ -15,14 +15,14 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
           ref: main
           persist-credentials: false
 
       - name: Use Node.js from nvmrc
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
 
@@ -42,19 +42,19 @@ jobs:
       run:
         shell: bash
     steps:
-      - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
           ref: main
 
       - name: Use Node.js from nvmrc
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           registry-url: "https://registry.npmjs.org"
 
       - name: Set up Go for desktop build
-        uses: actions/setup-go@44694675825211faa026b3c33043df3e48a5fa00 # v6.0.0
+        uses: actions/setup-go@4dc6199c7b1a012772edbd06daecab0f50c9053c # v6.1.0
         with:
           go-version: ^1.23.x
           cache-dependency-path: desktop/go.sum

CHANGELOG.md

@@ -12,6 +12,8 @@
 - 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..._
 
 ### 🐞 Bug fixes
@@ -25,6 +27,7 @@
 - Fix issue with missing bottom error panel
 - Fixed headers in left panes (Layers list and Layer editor) to remain visible when scrolling
 - Fix error when using a source from localhost
+- Fix an issue with scrolling when using the code editor
 - _...Add new stuff here..._
 
 ## 3.0.0

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");

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,
   };
 

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) {

cypress/e2e/modals.cy.ts

@@ -178,11 +178,11 @@ describe("modals", () => {
     });
 
     it("sprite object", () => {
-      when.setTextInJsonEditor(JSON.stringify([{id: "1", url: "2"}]));
+      when.setTextInJsonEditor(JSON.stringify([{ id: "1", url: "2" }]));
 
       when.click("modal:settings.name");
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        sprite: [{ id: "1", url: "2"}],
+        sprite: [{ id: "1", url: "2" }],
       });
     });
 
@@ -342,8 +342,8 @@ describe("modals", () => {
     });
 
     it("add variable", () => {
-      when.click("global-state-add-variable");
       when.wait(100);
+      when.click("global-state-add-variable");
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         state: { key1: { default: "value" } },
       });
@@ -373,6 +373,7 @@ describe("modals", () => {
 
     it("edit variable key", () => {
       when.click("global-state-add-variable");
+      when.wait(100);
       when.setValue("global-state-variable-key:0", "mykey");
       when.typeKeys("{enter}");
       when.wait(100);
@@ -383,6 +384,7 @@ describe("modals", () => {
 
     it("edit variable value", () => {
       when.click("global-state-add-variable");
+      when.wait(100);
       when.setValue("global-state-variable-value:0", "myvalue");
       when.typeKeys("{enter}");
       when.wait(100);

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": []
+}

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": []
+}

i18next-parser.config.ts

@@ -1,6 +1,6 @@
 export default {
   output: "src/locales/$LOCALE/$NAMESPACE.json",
-  locales: [ "de", "fr", "he", "it","ja", "zh" ],
+  locales: ["de", "fr", "he", "it", "ja", "ko", "zh"],
 
   // Because some keys are dynamically generated, i18next-parser can't detect them.
   // We add these keys manually, so we don't want to remove them.

package.json

@@ -28,15 +28,15 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lint": "^6.9.2",
-    "@codemirror/state": "^6.5.2",
+    "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.7",
+    "@codemirror/view": "^6.39.11",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
-    "@maplibre/maplibre-gl-geocoder": "^1.9.1",
-    "@maplibre/maplibre-gl-inspect": "^1.8.0",
+    "@maplibre/maplibre-gl-geocoder": "^1.9.4",
+    "@maplibre/maplibre-gl-inspect": "^1.8.2",
     "@maplibre/maplibre-gl-style-spec": "^24.3.1",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
@@ -44,26 +44,26 @@
     "codemirror": "^6.0.2",
     "color": "^5.0.3",
     "detect-browser": "^5.3.0",
-    "downshift": "^9.0.10",
+    "downshift": "^9.0.13",
     "events": "^3.3.0",
     "file-saver": "^2.0.5",
-    "i18next": "^25.6.3",
+    "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",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^5.13.0",
+    "maplibre-gl": "^5.14.0",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^10.7.0",
-    "ol-mapbox-style": "^13.1.1",
-    "pmtiles": "^4.3.0",
+    "ol-mapbox-style": "^13.2.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.3",
+    "react-i18next": "^16.5.3",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "reconnecting-websocket": "^4.4.0",
@@ -99,10 +99,10 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.7",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@rollup/plugin-replace": "^6.0.2",
-    "@shellygo/cypress-test-utils": "^6.0.4",
+    "@shellygo/cypress-test-utils": "^6.0.6",
     "@stylistic/eslint-plugin": "^5.6.1",
     "@types/codemirror": "^5.60.17",
     "@types/color": "^4.2.0",
@@ -125,29 +125,29 @@
     "@types/react-dom": "^19.2.3",
     "@types/string-hash": "^1.1.3",
     "@types/wicg-file-system-access": "^2023.10.7",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/coverage-v8": "^4.0.10",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "^4.0.17",
     "cors": "^2.8.5",
-    "cypress": "^15.6.0",
+    "cypress": "^15.9.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^9.39.1",
+    "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",
     "postcss": "^8.5.6",
     "react-hot-loader": "^4.13.1",
-    "sass": "^1.94.2",
-    "stylelint": "^16.26.0",
-    "stylelint-config-recommended-scss": "^16.0.2",
-    "stylelint-scss": "^6.12.1",
+    "sass": "^1.97.2",
+    "stylelint": "^17.0.0",
+    "stylelint-config-recommended-scss": "^17.0.0",
+    "stylelint-scss": "^7.0.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
+    "typescript-eslint": "^8.53.0",
     "uuid": "^13.0.0",
-    "vite": "^7.2.4",
+    "vite": "^7.3.0",
     "vite-plugin-istanbul": "^7.2.1",
-    "vitest": "^4.0.10"
+    "vitest": "^4.0.17"
   }
 }

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

src/components/CodeEditor.tsx

@@ -19,6 +19,7 @@ const CodeEditorInternal: React.FC<CodeEditorProps> = (props) => {
       value={props.value}
       onChange={props.onChange}
       className={"maputnik-code-editor"}
+      withScroll={true}
     />;
   </>;
 };

src/components/InputJson.tsx

@@ -7,6 +7,7 @@ import stringifyPretty from "json-stringify-pretty-compact";
 
 import {createEditor} from "../libs/codemirror-editor-factory";
 import type { StylePropertySpecification } from "maplibre-gl";
+import type { TransactionSpec } from "@codemirror/state";
 
 export type InputJsonProps = {
   value: object
@@ -16,6 +17,11 @@ export type InputJsonProps = {
   onBlur?(...args: unknown[]): unknown
   lintType: "layer" | "style" | "expression" | "json"
   spec?: StylePropertySpecification | undefined
+  /**
+   * When setting this and using search and replace, the editor will scroll to the selected text
+   * Use this only when the editor is the only element in the page.
+   */
+  withScroll?: boolean
 };
 type InputJsonInternalProps = InputJsonProps & WithTranslation;
 
@@ -28,6 +34,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   static defaultProps = {
     onFocus: () => {},
     onBlur: () => {},
+    withScroll: false
   };
   _view: EditorView | undefined;
   _el: HTMLDivElement | null = null;
@@ -74,16 +81,18 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   componentDidUpdate(prevProps: InputJsonProps) {
     if (!this.state.isEditing && prevProps.value !== this.props.value) {
       this._cancelNextChange = true;
-      const currentSelection = this._view!.state.selection;
-      this._view!.dispatch({
+      const transactionSpec: TransactionSpec = {
         changes: {
           from: 0,
           to: this._view!.state.doc.length,
           insert: this.getPrettyJson(this.props.value)
-        },
-        selection: currentSelection,
-        scrollIntoView: true
-      });
+        }
+      };
+      if (this.props.withScroll) {
+        transactionSpec.selection = this._view!.state.selection;
+        transactionSpec.scrollIntoView = true;
+      }
+      this._view!.dispatch(transactionSpec);
     }
   }
 

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) {
@@ -139,6 +152,15 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       style: this.props.mapStyle,
       hash: true,
       maxZoom: 24,
+      // make root relative urls in stylefiles work as maplibre gl js does
+      // not support this for everything:
+      // https://github.com/maplibre/maplibre-gl-js/issues/6818
+      transformRequest: (url) => {
+        if (url.startsWith("/")) {
+          url = `${window.location.origin}${url}`;
+        }
+        return { url };
+      },
       // setting to always load glyphs of CJK fonts from server
       // https://maplibre.org/maplibre-gl-js/docs/examples/local-ideographs/
       localIdeographFontFamily: false
@@ -151,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();
 

src/i18n.ts

@@ -10,6 +10,7 @@ export const supportedLanguages = {
   "he": "עברית",
   "it": "Italiano",
   "ja": "日本語",
+  "ko": "한국어",
   "zh": "简体中文"
 } as const;
 

src/libs/urlopen.test.ts

@@ -36,6 +36,12 @@ describe("validate", () => {
     });
   });
 
+  describe("when URL is root relative", () => {
+    it("should return ErrorType.None", () => {
+      expect(validate("/static/style.json")).toBe(ErrorType.None);
+    });
+  });
+
   describe("when window.location.protocol is https:", () => {
     beforeEach(() => {
       Object.defineProperty(window.location, "protocol", {

src/libs/urlopen.ts

@@ -45,8 +45,13 @@ function getProtocolSafe(url: string): { protocol?: string, isLocal?: boolean }
   }
 };
 
-export function validate(url: string): ErrorType {
-  if (url === "") {
+export function validate(url?: string): ErrorType {
+  if (!url) {
+    return ErrorType.None;
+  }
+
+  // allow root-relative URLs ("/static/style.json") but do not allow protocol-relative URLs ("//example.com")
+  if (url.startsWith("/") && !url.startsWith("//")) {
     return ErrorType.None;
   }
 

src/locales/README.md

@@ -49,9 +49,10 @@ The following users can help you with the relevant languages:
 | de       | German             | [@josxha](https://github.com/josxha)       |
 | en       | English            | [@HarelM](https://github.com/HarelM)       |
 | fr       | French             | [@lhapaipai](https://github.com/lhapaipai) |
-| hr       | Hebrew             | [@HarelM](https://github.com/HarelM)       |
+| he       | Hebrew             | [@HarelM](https://github.com/HarelM)       |
 | it       | Italian            | [@napo](https://github.com/napo)           |
 | ja       | Japanese           | [@keichan34](https://github.com/keichan34) |
+| ko       | Korean             | [@jinifor](https://github.com/jinifor)     |
 | zh       | Simplified Chinese | [@jieme](https://github.com/jieme)         |
 
 You can test the UI in different languages using the dropdown in the top menu

src/locales/ko/translation.json

@@ -0,0 +1,210 @@
+{
+  "Input value": "입력 값",
+  "Data value": "데이터 값",
+  "Output value": "값",
+  "Function": "함수",
+  "Select a type of data scale (default is 'categorical').": "데이터 스케일 유형을 선택하세요 (기본값 'categorical')",
+  "Base": "베이스",
+  "Input a data property to base styles off of.": "스타일의 기준이 될 데이터 속성을 입력하세요.",
+  "Default": "기본값",
+  "Stops": "기준점",
+  "Zoom": "줌",
+  "Add stop": "기준점 추가",
+  "Convert to expression": "표현식으로 변환",
+  "Remove zoom level from stop": "기준점에서 줌 레벨 제거",
+  "Revert from expression": "표현식에서 되돌리기",
+  "Delete expression": "표현식 삭제",
+  "Convert property into a zoom function": "속성을 줌 함수로 변환",
+  "Convert property to data function": "속성을 데이터 함수로 변환",
+  "Convert property into a elevation function": "속성을 고도 함수로 변환",
+  "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "레이어 <1>{formatLayerId(layerId)}</1>: {parsed.data.message}",
+  "switch to layer": "레이어 전환",
+  "Map": "맵",
+  "Inspect": "검사",
+  "Deuteranopia filter": "녹색맹 필터",
+  "Protanopia filter": "적색맹 필터",
+  "Tritanopia filter": "청색맹 필터",
+  "Achromatopsia filter": "전색맹 필터",
+  "Layers list": "레이어 목록",
+  "Layer editor": "레이어 편집기",
+  "Map view": "맵 뷰",
+  "Maputnik on GitHub": "GitHub의 Maputnik",
+  "Open": "열기",
+  "Save": "저장",
+  "Code Editor": "코드 편집기",
+  "Data Sources": "데이터 소스",
+  "Style Settings": "스타일 설정",
+  "Global State": "전역 상태",
+  "View": "보기",
+  "Color accessibility": "색상 접근성",
+  "Help": "도움말",
+  "Close": "닫기",
+  "Click to close the editor": "편집기를 닫으려면 클릭하세요",
+  "Comments for the current layer. This is non-standard and not in the spec.": "현재 레이어에 대한 설명입니다. 이것은 비표준이며 사양에 포함되지 않습니다.",
+  "Comments": "주석",
+  "Comment...": "주석 입력...",
+  "Max Zoom": "최대 줌",
+  "Min Zoom": "최소 줌",
+  "Source": "소스",
+  "Source Layer": "소스 레이어",
+  "Type": "유형",
+  "Nested filters are not supported.": "중첩 필터는 지원되지 않습니다.",
+  "Upgrade to expression": "표현식으로 업그레이드",
+  "Filter": "필터",
+  "every filter matches": "모든 필터 일치",
+  "no filter matches": "필터 불일치",
+  "any filter matches": "일부 필터 일치",
+  "Add filter": "필터 추가",
+  "You've entered an old style filter.": "이전 스타일 필터를 입력했습니다.",
+  "Switch to filter editor.": "필터 편집기로 전환합니다.",
+  "Delete filter block": "필터 블록 삭제",
+  "Add value": "값 추가",
+  "Remove array item": "배열 항목 제거",
+  "Must provide protocol: <1>https://</1>": "프로토콜을 포함해주세요: <1>https://</1>",
+  "Must provide protocol: <1>http://</1> or <3>https://</3>": "프로토콜을 포함해주세요: <1>http://</1> 또는 <3>https://</3>",
+  "CORS policy won't allow fetching resources served over http from https, use a <1>https://</1> domain": "CORS 정책으로 인해 https에서 http 리소스를 가져올 수 없습니다. <1>https://</1> 도메인을 사용하세요",
+  "General layout properties": "일반 레이아웃 속성",
+  "Text layout properties": "텍스트 레이아웃 속성",
+  "Icon layout properties": "아이콘 레이아웃 속성",
+  "Text paint properties": "텍스트 페인트 속성",
+  "Icon paint properties": "아이콘 페인트 속성",
+  "Paint properties": "페인트 속성",
+  "Layout properties": "레이아웃 속성",
+  "Layer": "레이어",
+  "JSON Editor": "JSON 편집기",
+  "Delete": "삭제",
+  "Duplicate": "복제",
+  "Show": "표시",
+  "Hide": "숨기기",
+  "Move layer up": "레이어 위로 이동",
+  "Move layer down": "레이어 아래로 이동",
+  "Layer: {{layerId}}": "레이어: {{layerId}}",
+  "Layers": "레이어",
+  "Collapse": "접기",
+  "Expand": "펼치기",
+  "Add Layer": "레이어 추가",
+  "Search": "검색",
+  "Zoom:": "줌:",
+  "Close popup": "팝업 닫기",
+  "cursor:": "커서:",
+  "center:": "중심:",
+  "rotation:": "회전:",
+  "Close modal": "모달 닫기",
+  "Layer ID already exists": "레이어 ID가 이미 존재합니다",
+  "Debug": "디버그",
+  "Options": "옵션",
+  "Links": "링크",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>OSM에서 열기</0>. 현재 뷰를 openstreetmap.org에서 엽니다",
+  "Save Style": "스타일 저장",
+  "Save the JSON style to your computer.": "JSON 스타일을 컴퓨터에 저장합니다.",
+  "Save as": "다른 이름으로 저장",
+  "Create HTML": "HTML 생성",
+  "Key": "키",
+  "Value": "값",
+  "Remove variable": "변수 제거",
+  "Global State Variables": "전역 상태 변수",
+  "No global state variables defined. Add variables to create reusable values in your style.": "전역 상태 변수가 정의되지 않았습니다. 스타일에서 재사용 가능한 값을 생성하려면 변수를 추가하세요.",
+  "Add Variable": "변수 추가",
+  "Cancel": "취소",
+  "Open Style": "스타일 열기",
+  "Open local Style": "로컬 스타일 열기",
+  "Open a local JSON style from your computer.": "컴퓨터에서 로컬 JSON 스타일을 엽니다.",
+  "Load from URL": "URL에서 불러오기",
+  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "URL에서 불러옵니다. URL은 <1>CORS가 활성화</1>되어 있어야 합니다.",
+  "Style URL": "스타일 URL",
+  "Enter URL...": "URL 입력...",
+  "Gallery Styles": "갤러리 스타일",
+  "Open one of the publicly available styles to start from.": "공개 스타일 중 하나를 선택하여 시작하세요.",
+  "Loading style": "스타일 로딩 중",
+  "Loading: {{requestUrl}}": "로딩: {{requestUrl}}",
+  "Name": "이름",
+  "Owner": "소유자",
+  "Owner ID of the style. Used by Mapbox or future style APIs.": "스타일 소유자의 ID입니다. Mapbox 또는 향후 스타일 API에서 사용됩니다.",
+  "Sprite URL": "스프라이트 URL",
+  "Glyphs URL": "글리프 URL",
+  "Center": "중심 좌표",
+  "Bearing": "방위각",
+  "Pitch": "경사각",
+  "Light anchor": "라이트 고정점",
+  "Light color": "라이트 색상",
+  "Light intensity": "라이트 강도",
+  "Light position": "라이트 위치",
+  "Terrain source": "터레인 소스",
+  "Terrain exaggeration": "터레인 고도 배율",
+  "Transition delay": "전환 지연",
+  "Transition duration": "전환 지속시간",
+  "Projection": "투영법",
+  "Open Layers (experimental)": "레이어 열기 (실험적)",
+  "Shortcuts menu": "단축키 메뉴",
+  "Open modal": "모달 열기",
+  "Export modal": "모달 내보내기",
+  "Data Sources modal": "데이터 소스 모달",
+  "Style Settings modal": "스타일 설정 모달",
+  "Toggle inspect": "검사 전환",
+  "Focus map": "포커스 맵",
+  "Debug modal": "디버그 모달",
+  "Increase the zoom level by 1.": "줌 레벨을 1 증가시킵니다.",
+  "Increase the zoom level by 2.": "줌 레벨을 2 증가시킵니다.",
+  "Decrease the zoom level by 1.": "줌 레벨을 1 감소시킵니다.",
+  "Decrease the zoom level by 2.": "줌 레벨을 2 감소시킵니다.",
+  "Pan up by 100 pixels.": "100픽셀 위로 이동합니다.",
+  "Pan down by 100 pixels.": "100픽셀 아래로 이동합니다.",
+  "Pan left by 100 pixels.": "100픽셀 왼쪽으로 이동합니다.",
+  "Pan right by 100 pixels.": "100픽셀 오른쪽으로 이동합니다.",
+  "Increase the rotation by 15 degrees.": "회전을 15도 증가시킵니다.",
+  "Decrease the rotation by 15 degrees.": "회전을 15도 감소시킵니다.",
+  "Increase the pitch by 10 degrees.": "경사각을 10도 증가시킵니다.",
+  "Decrease the pitch by 10 degrees.": "경사각을 10도 감소시킵니다.",
+  "Shortcuts": "단축키",
+  "Press <1>ESC</1> to lose focus of any active elements, then press one of:": "<1>ESC</1>를 눌러 활성 요소의 포커스를 해제한 후, 다음 중 하나를 누르세요:",
+  "If the Map is in focused you can use the following shortcuts": "맵에 포커스가 맞춰진 경우 다음 단축키를 사용할 수 있습니다",
+  "Remove '{{sourceId}}' source": "'{{sourceId}}' 소스 제거",
+  "Source ID": "소스 ID",
+  "Unique ID that identifies the source and is used in the layer to reference the source.": "소스를 식별하고 레이어에서 소스를 참조하는 데 사용되는 고유 ID입니다.",
+  "Source Type": "소스 유형",
+  "GeoJSON (JSON)": "GeoJSON (JSON)",
+  "GeoJSON (URL)": "GeoJSON (URL)",
+  "Vector (TileJSON URL)": "벡터 (TileJSON URL)",
+  "Vector (Tile URLs)": "벡터 (Tile URLs)",
+  "Raster (TileJSON URL)": "래스터 (TileJSON URL)",
+  "Raster (Tile URLs)": "래스터 (Tile URLs)",
+  "Raster DEM (TileJSON URL)": "래스터 DEM (TileJSON URL)",
+  "Raster DEM (XYZ URLs)": "래스터 DEM (XYZ URLs)",
+  "Vector (PMTiles)": "벡터 (PMTiles)",
+  "Image": "이미지",
+  "Video": "비디오",
+  "Add Source": "소스 추가",
+  "Sources": "소스",
+  "Active Sources": "활성 소스",
+  "Choose Public Source": "공개 소스 선택",
+  "Add one of the publicly available sources to your style.": "공개적으로 사용 가능한 소스 중 하나를 스타일에 추가하세요.",
+  "Add New Source": "새 소스 추가",
+  "Add a new source to your style. You can only choose the source type and id at creation time!": "스타일에 새 소스를 추가합니다. 소스 유형과 ID는 생성 시에만 선택할 수 있습니다!",
+  "TileJSON URL": "TileJSON URL",
+  "Tile URL": "타일 URL",
+  "Scheme Type": "스키마 유형",
+  "Coord top left": "좌상단 좌표",
+  "Coord top right": "우상단 좌표",
+  "Coord bottom right": "우하단 좌표",
+  "Coord bottom left": "좌하단 좌표",
+  "Image URL": "이미지 URL",
+  "Video URL": "비디오 URL",
+  "GeoJSON URL": "GeoJSON URL",
+  "GeoJSON": "GeoJSON",
+  "Cluster": "클러스터",
+  "PMTiles URL": "PMTiles URL",
+  "Tile Size": "타일 크기",
+  "Encoding": "인코딩",
+  "Error:": "오류:",
+  "MapTiler Access Token": "MapTiler 액세스 토큰",
+  "Public access token for MapTiler Cloud.": "MapTiler Cloud용 공개 액세스 토큰입니다.",
+  "Learn More": "자세히 알아보기",
+  "Thunderforest Access Token": "Thunderforest 액세스 토큰",
+  "Public access token for Thunderforest services.": "Thunderforest 서비스용 공개 액세스 토큰입니다.",
+  "Stadia Maps API Key": "Stadia Maps API 키",
+  "API key for Stadia Maps.": "Stadia Maps용 API 키 입니다.",
+  "LocationIQ Access Token": "LocationIQ 액세스 토큰",
+  "Public access token for LocationIQ services.": "LocationIQ 서비스용 공개 액세스 토큰입니다.",
+  "Style Renderer": "스타일 렌더러",
+  "Choose the default Maputnik renderer for this style.": "이 스타일의 기본 Maputnik 렌더러를 선택하세요."
+}