Merge 3e7e1e6ce9 into c58191ff62

Bumps
[i18next-browser-languagedetector](https://github.com/i18next/i18next-browser-languageDetector)
from 8.0.2 to 8.0.4.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/i18next/i18next-browser-languageDetector/blob/master/CHANGELOG.md">i18next-browser-languagedetector's
changelog</a>.</em></p>
<blockquote>
<h3>8.0.4</h3>
<ul>
<li>fix localstorage check to try to address <a
href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/297">297</a>
<a
href="https://redirect.github.com/i18next/i18next-browser-languageDetector/pull/300">300</a></li>
</ul>
<h3>8.0.3</h3>
<ul>
<li>change localstorage check to try to address <a
href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/297">297</a></li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/i18next/i18next-browser-languageDetector/commit/131b04be995f0a24b2bfd5a92e15516407a7127f"><code>131b04b</code></a>
8.0.4</li>
<li><a
href="https://github.com/i18next/i18next-browser-languageDetector/commit/421e91df5ae5781a513910f3d5e44027285f583d"><code>421e91d</code></a>
release</li>
<li><a
href="https://github.com/i18next/i18next-browser-languageDetector/commit/c24af003cb58e4c7104c11006dc342bea6dade71"><code>c24af00</code></a>
fix detection of window existence (<a
href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/300">#300</a>)</li>
<li><a
href="https://github.com/i18next/i18next-browser-languageDetector/commit/c7ba07514a897f83add81253a00160e3a1cf6bc7"><code>c7ba075</code></a>
Bump elliptic from 6.6.0 to 6.6.1 (<a
href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/299">#299</a>)</li>
<li><a
href="https://github.com/i18next/i18next-browser-languageDetector/commit/4f5a90ee514f1b3de9e9bf89206655ccbd6187d4"><code>4f5a90e</code></a>
Bump rollup from 2.79.1 to 2.79.2 (<a
href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/298">#298</a>)</li>
<li><a
href="https://github.com/i18next/i18next-browser-languageDetector/commit/a665fe839636530e0c3387e6f9c7756dffccf0aa"><code>a665fe8</code></a>
8.0.3</li>
<li><a
href="https://github.com/i18next/i18next-browser-languageDetector/commit/c24ea1777b81fc2eebb508e443e903880684d1c9"><code>c24ea17</code></a>
change localstorage check to try to address <a
href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/297">#297</a></li>
<li>See full diff in <a
href="https://github.com/i18next/i18next-browser-languageDetector/compare/v8.0.2...v8.0.4">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=i18next-browser-languagedetector&package-manager=npm_and_yarn&previous-version=8.0.2&new-version=8.0.4)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.codesandbox/ci.json

@@ -1,4 +0,0 @@
-{
-  "packages": [],
-  "sandboxes": ["/"]
-}

.eslintrc

@@ -1,46 +0,0 @@
-{
-    "root": true,
-    "env": { 
-      "browser": true, 
-      "es2020": true 
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:react/jsx-runtime",
-      "plugin:react-hooks/recommended",
-    ],
-    "ignorePatterns": [
-      "dist"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": { 
-      "ecmaVersion": "latest", 
-      "sourceType": "module" 
-    },
-    "settings": { 
-      "react": { "version": "16.4" } 
-    },
-    "plugins": [
-      "@typescript-eslint",
-      "react-refresh"],
-    "rules": {
-      "react-refresh/only-export-components": [
-        "warn",
-        { "allowConstantExport": true }
-      ],
-      "@typescript-eslint/no-unused-vars": [
-        "warn",
-        { "argsIgnorePattern": "^_" }
-      ],
-      "no-unused-vars": "off",
-      "react/prop-types": ["off"],
-      // Disable no-undef. It's covered by @typescript-eslint
-      "no-undef": "off",
-      "indent": ["error", 2],
-      "no-var": ["error"]
-    },
-    "globals": {
-      "global": "readonly"
-  }
-}

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,11 @@
+## Launch Checklist
+
+<!-- Thanks for the PR! Feel free to add or remove items from the checklist. -->
+
+
+ - [ ] Briefly describe the changes in this PR.
+ - [ ] Link to related issues.
+ - [ ] Include before/after visuals or gifs if this PR includes visual changes.
+ - [ ] Write tests for all new functionality.
+ - [ ] Add an entry to `CHANGELOG.md` under the `## main` section.
+

.github/dependabot.yml

@@ -1,14 +1,17 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
       interval: "daily"
-    open-pull-requests-limit: 2
+    open-pull-requests-limit: 20
     versioning-strategy: increase
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "daily"
-    open-pull-requests-limit: 2
-    versioning-strategy: increase

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

@@ -0,0 +1,26 @@
+name: Automerge Dependabot
+
+on: pull_request
+
+permissions: write-all
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-latest
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v2.3.0
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Approve Dependabot PRs
+        run: gh pr review --approve "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Enable auto-merge for Dependabot PRs
+        run: gh pr merge --auto --squash "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
-    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:main .
+    - run: docker build -t test-docker-image-build .
 
   # build the editor
   build-node:
@@ -53,59 +53,47 @@ jobs:
         node-version-file: '.nvmrc'
     - run: npm ci
     - run: npm run build
-    - run: npm run build-storybook
-    - name: artifacts/editor
-      uses: actions/upload-artifact@v1
+    - name: artifacts/maputnik
+      uses: actions/upload-artifact@v4
       with:
-        name: editor
+        name: maputnik
         path: dist
-    - name: artifacts/storybook
-      uses: actions/upload-artifact@v1
-      with:
-        name: storybook
-        path: build/storybook
 
     # Build and upload desktop CLI artifacts
     - name: Set up Go
-      uses: actions/setup-go@v3
+      uses: actions/setup-go@v5
       with:
-        go-version: ^1.19.x
+        go-version: ^1.23.x
+        cache-dependency-path: desktop/go.sum
       id: go
 
-    - name: Check out code into the Go module directory
-      uses: actions/checkout@v4
-      with:
-        repository: maputnik/desktop
-        ref: master
-        path: ./src/github.com/maputnik/desktop/
-
-    - name: Make
-      run: cd src/github.com/maputnik/desktop/ && make
+    - name: Build desktop artifacts
+      run: npm run build-desktop
 
     - name: Artifacts/linux
-      uses: actions/upload-artifact@v1
+      uses: actions/upload-artifact@v4
       with:
         name: maputnik-linux
-        path: ./src/github.com/maputnik/desktop/bin/linux/
+        path: ./desktop/bin/linux/
 
     - name: Artifacts/darwin
-      uses: actions/upload-artifact@v1
+      uses: actions/upload-artifact@v4
       with:
         name: maputnik-darwin
-        path: ./src/github.com/maputnik/desktop/bin/darwin/
+        path: ./desktop/bin/darwin/
 
     - name: Artifacts/windows
-      uses: actions/upload-artifact@v1
+      uses: actions/upload-artifact@v4
       with:
         name: maputnik-windows
-        path: ./src/github.com/maputnik/desktop/bin/windows/
+        path: ./desktop/bin/windows/
   
   e2e-tests:
     name: "E2E tests using ${{ matrix.browser }}"
     strategy:
       fail-fast: false
       matrix:
-        browser: [chrome, firefox]
+        browser: [chrome]
 
     runs-on: ubuntu-22.04
     steps:
@@ -119,7 +107,7 @@ jobs:
           start: npm run start
           browser: ${{ matrix.browser }}
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v5
         with:
           files: ${{ github.workspace }}/.nyc_output/out.json
           verbose: true

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,70 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '17 0 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # 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@v3
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3

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

@@ -0,0 +1,39 @@
+name: Create bump version PR
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version to change to.
+        required: true
+        type: string
+
+jobs:
+  bump-version-pr:
+    name: Bump version PR
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: bash
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: main
+
+      - name: Use Node.js from nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Bump version
+        run: |
+          npm version --commit-hooks false --git-tag-version false ${{ inputs.version }}
+          ./build/bump-version-changelog.js ${{ inputs.version }}
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          commit-message: Bump version to ${{ inputs.version }}
+          branch: bump-version-to-${{ inputs.version }}
+          title: Bump version to ${{ inputs.version }}

.github/workflows/deploy.yml

@@ -3,24 +3,49 @@ name: deploy
 on:
   push:
     branches: [ main ]
-    tags:
-    - 'v*'
 
 jobs:
+  deploy-pages:
+    name: deploy/pages
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'push' }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js from nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install
+        run: npm ci
+
+      - name: Build 
+        run: npm run build
+
+      - name: Upload to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: dist
+  
   # publish docker to GitHub registry
   deploy-docker:
     name: deploy/docker
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
 
     if: ${{ github.event_name == 'push' }}
 
     strategy:
       fail-fast: false
-      matrix:
-        os: [ubuntu-latest]
 
     steps:
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     - uses: actions/checkout@v4
-    - run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login docker.pkg.github.com -u orangemug --password-stdin
-    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:main .
-    - run: docker push docker.pkg.github.com/maputnik/editor/editor:main
+    - run: docker build -t ghcr.io/maplibre/maputnik:main .
+    - run: docker push ghcr.io/maplibre/maputnik:main

.github/workflows/release.yml

@@ -0,0 +1,102 @@
+name: Release
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  release-check:
+    name: Check if version changed
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: bash
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: main
+
+      - name: Use Node.js from nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Check if version has been updated
+        id: check
+        uses: EndBug/version-check@v2
+
+    outputs:
+      publish: ${{ steps.check.outputs.changed }}
+
+  release:
+    name: Release
+    needs: release-check
+    if: ${{ needs.release-check.outputs.publish == 'true' }}
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: bash
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: main
+
+      - name: Use Node.js from nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Set up Go for desktop build
+        uses: actions/setup-go@v5
+        with:
+          go-version: ^1.23.x
+          cache-dependency-path: desktop/go.sum
+        id: go
+
+      - name: Get version
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@v1.3.1
+
+      - name: Install
+        run: npm ci
+
+      - name: Build
+        run: |
+          npm run build-desktop
+
+      - name: Tag commit and push
+        id: tag_version
+        uses: mathieudutour/github-tag-action@v6.2
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          custom_tag: ${{ steps.package-version.outputs.current-version }}
+
+      - name: Create Archives
+        run: |
+          zip -r "desktop-${{ steps.package-version.outputs.current-version }}"  desktop/bin/
+
+      - name: Build Release Notes
+        id: release_notes
+        run: |
+          RELEASE_NOTES_PATH="${PWD}/release_notes.txt"
+          ./build/release-notes.js > ${RELEASE_NOTES_PATH}
+          echo "release_notes=${RELEASE_NOTES_PATH}" >> $GITHUB_OUTPUT
+
+      - name: Create GitHub Release
+        id: create_regular_release
+        uses: ncipollo/release-action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag: ${{ steps.tag_version.outputs.new_tag }}
+          name: ${{ steps.tag_version.outputs.new_tag }}
+          bodyFile: ${{ steps.release_notes.outputs.release_notes }}
+          artifacts: "desktop-${{ steps.package-version.outputs.current-version }}.zip"
+          allowUpdates: true
+          draft: false
+          prerelease: false
+

.gitignore

@@ -33,6 +33,14 @@ node_modules
 public
 /errorShots
 /old
-/build
 /cypress/screenshots
 /dist/
+/desktop/version.go
+
+# IDE
+.vscode/
+.idea/
+
+# Window metadata files
+/desktop/winres/winres.json
+/desktop/*.syso

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

.nvmrc

@@ -1 +1 @@
-18.19
+22.13

.storybook/main.js

@@ -1,9 +0,0 @@
-const config = {
-  stories: ['../stories/**/*.stories.jsx'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-a11y/register', '@storybook/addon-storysource'],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {}
-  }
-};
-export default config;

.storybook/manager.js

@@ -1,7 +0,0 @@
-import { addons } from '@storybook/addons';
-import { themes } from '@storybook/theming';
-import theme from './maputnik.theme';
-
-addons.setConfig({
-  theme: theme,
-});

.storybook/maputnik.theme.js

@@ -1,8 +0,0 @@
-import { create } from '@storybook/theming/create';
-
-export default create({
-  base: 'light',
-
-  brandTitle: 'Maputnik',
-  brandUrl: 'https://github.com/maputnik/editor',
-});

CHANGELOG.md

@@ -0,0 +1,35 @@
+## main
+
+### ✨ Features and improvements
+- Add german translation
+- Use same version number for web and desktop versions
+- Add scheme type options for vector/raster tile
+- Add `tileSize` field for raster and raster-dem tile sources
+- Update Protomaps Light gallery style to v4
+- Add support to edit local files on the file system if supported by the browser
+- Upgrade to MapLibre LG JS v5
+- Upgrade Vite 6 and Cypress 14 ([#970](https://github.com/maplibre/maputnik/pull/970))
+- Upgrade OpenLayers from v6 to v10
+- _...Add new stuff here..._
+
+### 🐞 Bug fixes
+
+- Fix incorrect handing of network error response (#944)
+- _...Add new stuff here..._
+
+## 2.1.1
+
+### ✨ Features and improvements
+
+- Add GitHub workflows for releasing new versions
+- Update desktop build to pull from this repo (#922)
+
+## 2.0.0
+
+- Update MapLibre to version 4 (#872)
+- Start continuous deployment of maputnik website
+
+## 1.7.0
+
+- See release notes at https://maputnik.github.io/blog/2020/04/23/release-v1.7.0
+

Dockerfile

@@ -2,12 +2,12 @@ FROM node:18 as builder
 WORKDIR /maputnik
 
 # Only copy package.json to prevent npm install from running on every build
-COPY package.json package-lock.json ./
-RUN npm install
+COPY package.json package-lock.json .npmrc ./
+RUN npm ci
 
 # Build maputnik
 COPY . .
-RUN npm run build
+RUN npx vite build
 
 #---------------------------------------------------------------------------
 # Create a clean nginx-alpine slim image with just the build results

LICENSE

@@ -1,5 +1,6 @@
 The MIT License (MIT)
 
+Copyright (c) 2015 Lukas Martinelli
 Copyright (c) 2024 MapLibre contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

README.md

@@ -1,10 +1,10 @@
 <img width="200" alt="Maputnik logo" src="https://cdn.jsdelivr.net/gh/maputnik/design/logos/logo-color.png" />
 
 # Maputnik
-[![GitHub CI status](https://github.com/maputnik/editor/workflows/ci/badge.svg)][github-action-ci]
+[![GitHub CI status](https://github.com/maplibre/maputnik/workflows/ci/badge.svg)][github-action-ci]
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
 
-[github-action-ci]: https://github.com/maputnik/editor/actions?query=workflow%3Aci
+[github-action-ci]: https://github.com/maplibre/maputnik/actions?query=workflow%3Aci
 [license]:          https://tldrlegal.com/license/mit-license
 
 A free and open visual editor for the [MapLibre GL styles](https://maplibre.org/maplibre-style-spec/)
@@ -14,18 +14,18 @@ targeted at developers and map designers.
 ## Usage
 
 - :link: Design your maps online at **<https://www.maplibre.org/maputnik/>** (all in local storage)
-- :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
+- :link: Use the [Maputnik CLI](https://github.com/maplibre/maputnik/wiki/Maputnik-CLI) for local style development
 - In a Docker, run this command and browse to http://localhost:8888, Ctrl+C to stop the server.
 
 ```bash
-docker run -it --rm -p 8888:8888 maputnik/editor
+docker run -it --rm -p 8888:80 ghcr.io/maplibre/maputnik:main
 ```
 
 ## Documentation
 
-The documentation can be found in the [Wiki](https://github.com/maputnik/editor/wiki). You are welcome to collaborate!
+The documentation can be found in the [Wiki](https://github.com/maplibre/maputnik/wiki). You are welcome to collaborate!
 
-- :link: **Study the [Maputnik Wiki](https://github.com/maputnik/editor/wiki)**
+- :link: **Study the [Maputnik Wiki](https://github.com/maplibre/maputnik/wiki)**
 - :video_camera: Design a map from Scratch https://youtu.be/XoDh0gEnBQo
 
 [![Design Map from Scratch](https://j.gifs.com/g5XMgl.gif)](https://youtu.be/XoDh0gEnBQo)
@@ -36,6 +36,8 @@ Maputnik is written in typescript and is using [React](https://github.com/facebo
 
 We ensure building and developing Maputnik works with the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule).
 
+Check out our [Internationalization guide](./src/locales/README.md) for UI text related changes. 
+
 ### Getting Involved
 Join the #maplibre or #maputnik slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/ Read the the below guide in order to get familiar with how we do things around here.
 
@@ -66,10 +68,10 @@ Lint the JavaScript code.
 ```
 # run linter
 npm run lint
-npm run lint-styles
+npm run lint-css
+npm run sort-styles
 ```
 
-
 ## Tests
 For E2E testing we use [Cypress](https://www.cypress.io/)
 
@@ -93,10 +95,15 @@ You can also see the tests as they run or select which suites to run by executin
 npm run cy:open
 ```
 
+## Release process
 
-## Related Projects
+1. Review [`CHANGELOG.md`](/CHANGELOG.md)
+   - Double-check that all changes included in the release are appropriately documented.
+   - To-be-released changes should be under the "main" header.
+   - Commit any final changes to the changelog.
+2. Run [Create bump version PR](https://github.com/maplibre/maputnik/actions/workflows/create-bump-version-pr.yml) by manual workflow dispatch and set the version number in the input. This will create a PR that changes the changelog and `package.json` file to review and merge.
+3. Once merged, an automatic process will kick in and creates a GitHub release and uploads release assets.
 
-- [maputnik-dev-server](https://github.com/nycplanning/labs-maputnik-dev-server) - An express.js server that allows for quickly loading the style from any mapboxGL map into mapuntnik.
 
 ## Sponsors
 

build/README.md

@@ -0,0 +1,11 @@
+# Build Scripts
+
+This folder holds common build scripts used by some of the Github workflows. 
+
+The scripts are borrowed from [maplibre/maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js/tree/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build).
+
+## Generate Release Notes
+
+`bump-version-changelog.js` Used to update the changelog with the current notes, and set up a space for new notes
+
+`release-notes.js` Used to generate release notes when releasing a new version

build/bump-version-changelog.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+/**
+ * This script updates the changelog.md file with the version given in the arguments
+ * It replaces ## main with ## <version>
+ * Removes _...Add new stuff here..._
+ * And adds on top a ## main with add stuff here.
+ *
+ * Copied from maplibre/maplibre-gl-js
+ * https://github.com/maplibre/maplibre-gl-js/blob/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build/release-notes.js
+ */
+
+import * as fs from 'fs';
+
+const changelogPath = 'CHANGELOG.md';
+let changelog = fs.readFileSync(changelogPath, 'utf8');
+changelog = changelog.replace('## main', `## ${process.argv[2]}`);
+changelog = changelog.replaceAll('- _...Add new stuff here..._\n', '');
+changelog = `## main
+
+### ✨ Features and improvements
+- _...Add new stuff here..._
+
+### 🐞 Bug fixes
+- _...Add new stuff here..._
+
+` + changelog;
+
+fs.writeFileSync(changelogPath, changelog, 'utf8');

build/release-notes.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+// Copied from maplibre/maplibre-gl-js
+// https://github.com/maplibre/maplibre-gl-js/blob/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build/release-notes.js
+
+import * as fs from 'fs';
+
+const changelogPath = 'CHANGELOG.md';
+const changelog = fs.readFileSync(changelogPath, 'utf8');
+
+/*
+  Parse the raw changelog text and split it into individual releases.
+
+  This regular expression:
+    - Matches lines starting with "## x.x.x".
+    - Groups the version number.
+    - Skips the (optional) release date.
+    - Groups the changelog content.
+    - Ends when another "## x.x.x" is found.
+*/
+const regex = /^## (\d+\.\d+\.\d+.*?)\n(.+?)(?=\n^## \d+\.\d+\.\d+.*?\n)/gms;
+
+const releaseNotes = [];
+let match;
+// eslint-disable-next-line no-cond-assign
+while (match = regex.exec(changelog)) {
+  releaseNotes.push({
+    'version': match[1],
+    'changelog': match[2].trim(),
+  });
+}
+
+const latest = releaseNotes[0];
+const previous = releaseNotes[1];
+
+//  Print the release notes template.
+
+let header = 'Changes since previous version'
+if (previous) {
+  header = `https://github.com/maplibre/maputnik
+  [Changes](https://github.com/maplibre/maputnik/compare/v${previous.version}...v${latest.version}) since [Maputnik v${previous.version}](https://github.com/maplibre/maputnik/releases/tag/v${previous.version})`
+}
+const templatedReleaseNotes = `${header}
+
+${latest.changelog}`;
+
+process.stdout.write(templatedReleaseNotes.trimEnd());

cypress/e2e/accessibility.cy.ts

@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 
 describe("accessibility", () => {
-  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
 
   describe("skip links", () => {

cypress/e2e/history.cy.ts

@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 
 describe("history", () => {
-  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
+  const { beforeAndAfter, when, get, then } = new MaputnikDriver();
   beforeAndAfter();
 
   let undoKeyCombo: string;
@@ -87,4 +87,39 @@ describe("history", () => {
       ],
     });
   });
+
+  it("should not redo after undo and value change", () => {
+    when.setStyle("geojson");
+    when.modal.open();
+    when.modal.fillLayers({
+      id: "step 1",
+      type: "background",
+    });
+
+    when.modal.open();
+    when.modal.fillLayers({
+      id: "step 2",
+      type: "background",
+    });
+
+    when.typeKeys(undoKeyCombo);
+    when.typeKeys(undoKeyCombo);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
+
+    when.modal.open();
+    when.modal.fillLayers({
+      id: "step 3",
+      type: "background",
+    });
+
+    when.typeKeys(redoKeyCombo);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "step 3",
+          type: "background",
+        },
+      ],
+    });
+  });
 });

cypress/e2e/i18n.cy.ts

@@ -0,0 +1,35 @@
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("i18n", () => {
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  beforeAndAfter();
+
+  describe("language detector", () => {
+    it("English", () => {
+      const url = "?lng=en";
+      when.visit(url);
+      then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("en");
+    });
+
+    it("Japanese", () => {
+      const url = "?lng=ja";
+      when.visit(url);
+      then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("ja");
+    });
+  });
+
+  describe("language switcher", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+    });
+
+    it("the language switcher switches to Japanese", () => {
+      const selector = "maputnik-lang-select";
+      then(get.elementByTestId(selector)).shouldExist();
+      when.select(selector, "ja");
+      then(get.elementByTestId(selector)).shouldHaveValue("ja");
+
+      then(get.elementByTestId("nav:settings")).shouldHaveText("スタイル設定");
+    });
+  });
+});

cypress/e2e/keyboard.cy.ts

@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 
 describe("keyboard", () => {
-  let { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
+  const { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
   beforeAndAfter();
   describe("shortcuts", () => {
     beforeEach(() => {

cypress/e2e/layers.cy.ts

@@ -2,7 +2,7 @@ import { v1 as uuid } from "uuid";
 import { MaputnikDriver } from "./maputnik-driver";
 
 describe("layers", () => {
-  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
   beforeEach(() => {
     when.setStyle("both");
@@ -101,7 +101,7 @@ describe("layers", () => {
   });
   describe("background", () => {
     it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
         type: "background",
       });
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -117,7 +117,7 @@ describe("layers", () => {
     describe("modify", () => {
       function createBackground() {
         // Setup
-        let id = uuid();
+        const id = uuid();
 
         when.selectWithin("add-layer.layer-type", "background");
         when.setValue("add-layer.layer-id.input", "background:" + id);
@@ -139,11 +139,11 @@ describe("layers", () => {
       describe("layer", () => {
         it("expand/collapse");
         it("id", () => {
-          let bgId = createBackground();
+          const bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
 
-          let id = uuid();
+          const id = uuid();
           when.setValue("layer-editor.layer-id.input", "foobar:" + id);
           when.click("min-zoom");
 
@@ -219,7 +219,7 @@ describe("layers", () => {
 
         describe("comments", () => {
           let bgId: string;
-          let comment = "42";
+          const comment = "42";
 
           beforeEach(() => {
             bgId = createBackground();
@@ -280,6 +280,25 @@ describe("layers", () => {
             });
           });
         });
+
+        describe("opacity", () => {
+          let bgId: string;
+          beforeEach(() => {
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.type("spec-field-input:background-opacity", "0.");
+          });
+
+          it("should keep '.' in the input field", () => {
+            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
+          });
+
+          it("should revert to a valid value when focus out", () => {
+            when.click("layer-list-item:background:" + bgId);
+            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue('0');
+          });
+        });
+
       });
 
       describe("filter", () => {
@@ -301,11 +320,11 @@ describe("layers", () => {
 
         // TODO
         it.skip("parse error", () => {
-          let bgId = createBackground();
+          const bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
 
-          let errorSelector = ".CodeMirror-lint-marker-error";
+          const errorSelector = ".CodeMirror-lint-marker-error";
           then(get.elementByTestId(errorSelector)).shouldNotExist();
 
           when.click(".CodeMirror");
@@ -320,7 +339,7 @@ describe("layers", () => {
 
   describe("fill", () => {
     it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
         type: "fill",
         layer: "example",
       });
@@ -342,7 +361,7 @@ describe("layers", () => {
 
   describe("line", () => {
     it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
         type: "line",
         layer: "example",
       });
@@ -366,7 +385,7 @@ describe("layers", () => {
 
   describe("symbol", () => {
     it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
         type: "symbol",
         layer: "example",
       });
@@ -385,7 +404,7 @@ describe("layers", () => {
 
   describe("raster", () => {
     it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
         type: "raster",
         layer: "raster",
       });
@@ -404,7 +423,7 @@ describe("layers", () => {
 
   describe("circle", () => {
     it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
         type: "circle",
         layer: "example",
       });
@@ -423,7 +442,7 @@ describe("layers", () => {
 
   describe("fill extrusion", () => {
     it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
         type: "fill-extrusion",
         layer: "example",
       });
@@ -475,4 +494,33 @@ describe("layers", () => {
       ).shouldBeVisible();
     });
   });
+
+
+  describe("layereditor jsonlint should error", ()=>{
+    
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "circle",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "circle",
+            source: "example",
+          },
+        ],
+      });
+
+      const sourceText = get.elementByText('"source"');
+      
+      sourceText.click();
+      sourceText.type("\"");
+      
+      const error = get.element('.CodeMirror-lint-marker-error');
+      error.should('exist');
+    });
+  });
 });

cypress/e2e/map.cy.ts

@@ -1,11 +1,11 @@
 import { MaputnikDriver } from "./maputnik-driver";
 
 describe("map", () => {
-  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
   describe("zoom level", () => {
     it("via url", () => {
-      let zoomLevel = 12.37;
+      const zoomLevel = 12.37;
       when.setStyle("geojson", zoomLevel);
       then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
       then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
@@ -14,7 +14,7 @@ describe("map", () => {
     });
 
     it("via map controls", () => {
-      let zoomLevel = 12.37;
+      const zoomLevel = 12.37;
       when.setStyle("geojson", zoomLevel);
       then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
       when.clickZoomIn();
@@ -23,4 +23,10 @@ describe("map", () => {
       );
     });
   });
+  
+  describe("search", () => {
+    it('should exist', () => {
+      then(get.searchControl()).shouldBeVisible();
+    });
+  });
 });

cypress/e2e/maputnik-driver.ts

@@ -1,3 +1,5 @@
+/// <reference types="cypress-plugin-tab" />
+
 import { CypressHelper } from "@shellygo/cypress-test-utils";
 import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
 import MaputnikCypressHelper from "./maputnik-cypress-helper";
@@ -14,7 +16,7 @@ const styleFromWindow = (win: Window) => {
 export class MaputnikAssertable<T> extends Assertable<T> {
   shouldEqualToStoredStyle = () =>
     then(
-      new CypressHelper().get.window().then((win) => {
+      new CypressHelper().get.window().then((win: Window) => {
         const style = styleFromWindow(win);
         then(this.chainable).shouldDeepNestedInclude(style);
       })
@@ -129,7 +131,9 @@ export class MaputnikDriver {
         this.helper.when.acceptConfirm();
       }
       // when methods should not include assertions
-      this.helper.get.elementByTestId("toolbar:link").should("be.visible");
+      const toolbarLink = this.helper.get.elementByTestId("toolbar:link")
+      toolbarLink.scrollIntoView();
+      toolbarLink.should("be.visible");
     },
 
     typeKeys: (keys: string) => this.helper.get.element("body").type(keys),
@@ -177,5 +181,6 @@ export class MaputnikDriver {
     skipTargetLayerEditor: () =>
       this.helper.get.elementByTestId("skip-target-layer-editor"),
     canvas: () => this.helper.get.element("canvas"),
+    searchControl: () => this.helper.get.element('.maplibregl-ctrl-geocoder')
   };
 }

cypress/e2e/modal-driver.ts

@@ -8,8 +8,8 @@ export default class ModalDriver {
     fillLayers: (opts: { type: string; layer?: string; id?: string }) => {
       // Having logic in test code is an anti pattern.
       // This should be splitted to multiple single responsibility functions
-      let type = opts.type;
-      let layer = opts.layer;
+      const type = opts.type;
+      const layer = opts.layer;
       let id;
       if (opts.id) {
         id = opts.id;

cypress/e2e/modals.cy.ts

@@ -1,7 +1,8 @@
 import { MaputnikDriver } from "./maputnik-driver";
+import tokens from "../../src/config/tokens.json" with {type: "json"};
 
 describe("modals", () => {
-  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
+  const { beforeAndAfter, when, get, given, then } = new MaputnikDriver();
   beforeAndAfter();
 
   beforeEach(() => {
@@ -25,7 +26,7 @@ describe("modals", () => {
 
     describe("when click open url", () => {
       beforeEach(() => {
-        let styleFileUrl = get.exampleFileUrl();
+        const styleFileUrl = get.exampleFileUrl();
 
         when.setValue("modal:open.url.input", styleFileUrl);
         when.click("modal:open.url.button");
@@ -61,9 +62,60 @@ describe("modals", () => {
   });
 
   describe("sources", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+      when.click("nav:sources");
+    });
+
     it("active sources");
     it("public source");
-    it("add new source");
+
+    it("add new source", () => {
+      const sourceId = "n1z2v3r";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "tile_vector");
+      when.select("modal:sources.add.scheme_type", "tms");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(
+        get.styleFromLocalStorage().then((style) => style.sources[sourceId])
+      ).shouldInclude({
+        scheme: "tms",
+      });
+    });
+
+    it("add new pmtiles source", () => {
+      const sourceId = "pmtilestest";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "pmtiles_vector");
+      when.setValue("modal:sources.add.source_url", "https://data.source.coop/protomaps/openstreetmap/v4.pmtiles");
+      when.click("modal:sources.add.add_source");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          pmtilestest: {
+            type: "vector",
+            url: "pmtiles://https://data.source.coop/protomaps/openstreetmap/v4.pmtiles",
+          },
+        },
+      });
+    });
+
+    it("add new raster source", () => {
+      const sourceId = "rastertest";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "tile_raster");
+      when.select("modal:sources.add.scheme_type", "xyz");
+      when.setValue("modal:sources.add.tile_size", "128");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(
+        get.styleFromLocalStorage().then((style) => style.sources[sourceId])
+      ).shouldInclude({
+        tileSize: 128,
+      });
+    });
   });
 
   describe("inspect", () => {
@@ -79,12 +131,12 @@ describe("modals", () => {
       when.click("nav:settings");
     });
 
-    describe("when click name", () => {
+    describe("when click name filed spec information", () => {
       beforeEach(() => {
         when.click("field-doc-button-Name");
       });
 
-      it("name", () => {
+      it("should show the spec information", () => {
         then(get.elementsText("spec-field-doc")).shouldInclude(
           "name for the style"
         );
@@ -126,7 +178,7 @@ describe("modals", () => {
       });
     });
     it("glyphs url", () => {
-      let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
+      const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
       when.setValue("modal:settings.glyphs", glyphsUrl);
       when.click("modal:settings.name");
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -135,31 +187,43 @@ describe("modals", () => {
     });
 
     it("maptiler access token", () => {
-      let apiKey = "testing123";
+      const apiKey = "testing123";
       when.setValue(
         "modal:settings.maputnik:openmaptiles_access_token",
         apiKey
       );
       when.click("modal:settings.name");
       then(
-        get.styleFromLocalStorage().pipe((style) => style.metadata)
+        get.styleFromLocalStorage().then((style) => style.metadata)
       ).shouldInclude({
         "maputnik:openmaptiles_access_token": apiKey,
       });
     });
 
     it("thunderforest access token", () => {
-      let apiKey = "testing123";
+      const apiKey = "testing123";
       when.setValue(
         "modal:settings.maputnik:thunderforest_access_token",
         apiKey
       );
       when.click("modal:settings.name");
       then(
-        get.styleFromLocalStorage().pipe((style) => style.metadata)
+        get.styleFromLocalStorage().then((style) => style.metadata)
       ).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
     });
 
+    it("stadia access token", () => {
+      const apiKey = "testing123";
+      when.setValue(
+        "modal:settings.maputnik:stadia_access_token",
+        apiKey
+      );
+      when.click("modal:settings.name");
+      then(
+        get.styleFromLocalStorage().then((style) => style.metadata)
+      ).shouldInclude({ "maputnik:stadia_access_token": apiKey });
+    });
+
     it("style renderer", () => {
       cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
       when.select("modal:settings.maputnik:renderer", "ol");
@@ -172,6 +236,40 @@ describe("modals", () => {
         metadata: { "maputnik:renderer": "ol" },
       });
     });
+
+
+
+    it("inlcude API key when change renderer", () => {
+      
+      when.click("modal:settings.close-modal")
+      when.click("nav:open");
+
+      get.elementByAttribute('aria-label', "MapTiler Basic").should('exist').click();
+
+      when.click("nav:settings");
+      
+      when.select("modal:settings.maputnik:renderer", "mlgljs");
+      then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
+        "mlgljs"
+      );
+
+      when.select("modal:settings.maputnik:renderer", "ol");
+      then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
+        "ol"
+      );
+
+      given.intercept("https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=*", "tileRequest", "GET");
+      
+      when.select("modal:settings.maputnik:renderer", "mlgljs");
+      then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
+        "mlgljs"
+      );
+
+      when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
+      when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
+      when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
+    });
+    
   });
 
   describe("sources", () => {

desktop/.gitignore

@@ -0,0 +1,31 @@
+# Compiled Object files, Static and Dynamic libs (Shared Objects)
+*.o
+*.a
+*.so
+
+# Folders
+_obj
+_test
+editor
+
+# Architecture specific extensions/prefixes
+*.[568vq]
+[568vq].out
+
+*.cgo1.go
+*.cgo2.c
+_cgo_defun.c
+_cgo_gotypes.go
+_cgo_export.*
+
+_testmain.go
+
+*.exe
+*.test
+*.prof
+
+# Binary version of pubilic/editor
+rice-box.go
+
+# Built binary
+maputnik

desktop/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Maputnik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

desktop/Makefile

@@ -0,0 +1,44 @@
+SOURCEDIR=.
+SOURCES := $(shell find $(SOURCEDIR) -name '*.go')
+BINARY=maputnik
+VERSION := $(shell node -p "require('../package.json').version")
+GOPATH := $(if $(GOPATH),$(GOPATH),$(HOME)/go)
+GOBIN := $(if $(GOBIN),$(GOBIN),$(HOME)/go/bin)
+
+all: $(BINARY)
+
+$(BINARY): $(GOBIN)/gox $(GOBIN)/go-winres $(SOURCES) version.go rice-box.go winres/winres.json
+	$(GOBIN)/go-winres make --product-version=$(VERSION)
+	$(GOBIN)/gox -osarch "windows/amd64 linux/amd64 darwin/amd64" -output "bin/{{.OS}}/${BINARY}"
+
+winres/winres.json: winres/winres_template.json
+	sed 's/{{.Version}}/$(VERSION)/g' winres/winres_template.json > $@
+
+$(GOBIN)/go-winres:
+	go install github.com/tc-hib/go-winres@latest
+
+# Copy the current release into ./editor/maputnik so it can be
+# embedded in the binary
+editor/pull_release:
+	mkdir -p editor
+	cp -r ../dist/* editor
+
+$(GOBIN)/gox:
+	go install github.com/mitchellh/gox@v1.0.1
+
+$(GOBIN)/rice:
+	go install github.com/GeertJohan/go.rice/rice@v1.0.3
+
+# Embed the current version number in the executable by writing version.go
+.PHONY: version.go
+version.go:
+	@printf "// DO NOT EDIT: Autogenerated by Makefile\n" > version.go
+	@printf "package main\n" >> version.go
+	@printf "const Version = \"$(VERSION)\"\n" >> version.go
+
+rice-box.go: $(GOBIN)/rice editor/pull_release
+	$(GOBIN)/rice embed-go
+
+.PHONY: clean
+clean:
+	rm -rf editor && rm -f rice-box.go && rm -rf bin

desktop/README.md

@@ -0,0 +1,73 @@
+# Maputnik Desktop [![GitHub CI status](https://github.com/maplibre/maputnik/workflows/ci/badge.svg)][github-action-ci]
+
+---
+
+A Golang based cross platform executable for integrating Maputnik locally.
+This binary packages up the JavaScript and CSS bundle produced by maputnik
+and embeds it in the program for easy distribution. It also allows
+exposing a local style file and work on it both in Maputnik and with your favorite
+editor.
+
+Report issues on [maplibre/maputnik](https://github.com/maplibre/maputnik).
+
+## Install
+
+You can download a zip file containing desktop binaries for Linux, OSX and Windows from [the latest releases of **maplibre/maputnik**](https://github.com/maplibre/maputnik/releases/latest).
+
+### Usage
+
+Simply start up a web server and access the Maputnik editor GUI at `localhost:8000`.
+
+```bash
+maputnik
+```
+
+Expose a local style file to Maputnik allowing the web based editor
+to save to the local filesystem.
+
+```bash
+maputnik --file basic-v9.json
+```
+
+Watch the local style for changes and inform the editor via web socket.
+This makes it possible to edit the style with a local text editor and still
+use Maputnik.
+
+```bash
+maputnik --watch --file basic-v9.json
+```
+
+Choose a local port to listen on, instead of using the default port 8000.
+
+```bash
+maputnik --port 8001
+```
+
+Specify a path to a directory which, if it exists, will be served under http://localhost:8000/static/ .
+Could be used to serve sprites and glyphs.
+
+```bash
+maputnik --static ./localFolder
+```
+
+### API
+
+`maputnik` exposes the configured styles via a HTTP API.
+
+| Method                   | Description                                            |
+| ------------------------ | ------------------------------------------------------ |
+| `GET /styles`            | List the ID of all configured style files              |
+| `GET /styles/{filename}` | Get contents of a single style file                    |
+| `PUT /styles/{filename}` | Update contents of a style file                        |
+| `WEBSOCKET /ws`          | Listen to change events for the configured style files |
+
+### Build
+
+From the root of the [maplibre/maputnik](https://github.com/maplibre/maputnik) project, install the deps and run the desktop-build command.
+
+```
+npm install
+npm run build-desktop
+```
+
+You should now find the `maputnik` binary in your `desktop/bin` directory.

desktop/api.go

@@ -0,0 +1,81 @@
+package main
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"io/ioutil"
+	"log"
+	"net/http"
+
+	"github.com/gorilla/mux"
+)
+
+func StyleFileAccessor(filename string) styleFileAccessor {
+	return styleFileAccessor{filename, styleId(filename)}
+}
+
+func styleId(filename string) string {
+	raw, err := ioutil.ReadFile(filename)
+	if err != nil {
+		log.Panicln(err)
+	}
+
+	var spec styleSpec
+	err = json.Unmarshal(raw, &spec)
+	if err != nil {
+		log.Panicln(err)
+	}
+
+	if spec.Id == "" {
+		fmt.Println("No id in style")
+	}
+	return spec.Id
+}
+
+type styleSpec struct {
+	Id string `json:"id"`
+}
+
+// Allows access to a single style file
+type styleFileAccessor struct {
+	filename string
+	id       string
+}
+
+func (fa styleFileAccessor) ListFiles(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+	encoder := json.NewEncoder(w)
+	encoder.Encode([]string{fa.id})
+}
+
+func (fa styleFileAccessor) ReadFile(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	_ = vars["styleId"]
+
+	//TODO: Choose right file
+	// right now we just return the single file we know of
+	w.Header().Set("Content-Type", "application/json")
+
+	raw, err := ioutil.ReadFile(fa.filename)
+	if err != nil {
+		log.Panicln(err)
+	}
+	w.Write(raw)
+}
+
+func (fa styleFileAccessor) SaveFile(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	_ = vars["styleId"]
+
+	//TODO: Save to right file
+	w.Header().Set("Content-Type", "application/json")
+
+	body, _ := ioutil.ReadAll(r.Body)
+	var out bytes.Buffer
+	json.Indent(&out, body, "", "  ")
+
+	if err := ioutil.WriteFile(fa.filename, out.Bytes(), 0666); err != nil {
+		log.Fatalf("Can not copy from request to file: %s", err.Error())
+	}
+}

desktop/filewatch/filewatch.go

@@ -0,0 +1,69 @@
+package filewatch
+
+import (
+	"io/ioutil"
+	"log"
+	"net/http"
+
+	"github.com/fsnotify/fsnotify"
+	"github.com/gorilla/websocket"
+)
+
+var upgrader = websocket.Upgrader{
+	ReadBufferSize:  1024,
+	WriteBufferSize: 1024,
+	CheckOrigin:     func(r *http.Request) bool { return true },
+}
+
+func writer(ws *websocket.Conn, filename string) {
+	watcher, err := fsnotify.NewWatcher()
+	if err != nil {
+		log.Fatal(err)
+	}
+	defer watcher.Close()
+
+	done := make(chan bool)
+	go func() {
+		for {
+			select {
+			case event := <-watcher.Events:
+				if event.Op&fsnotify.Write == fsnotify.Write {
+					log.Println("Modified file:", event.Name)
+					var p []byte
+					var err error
+
+					p, err = ioutil.ReadFile(filename)
+					if err != nil {
+						log.Fatal(err)
+					}
+
+					if p != nil {
+						if err := ws.WriteMessage(websocket.TextMessage, p); err != nil {
+							return
+						}
+					}
+				}
+			case err := <-watcher.Errors:
+				log.Println("Watch error:", err)
+			}
+		}
+	}()
+
+	if err = watcher.Add(filename); err != nil {
+		log.Fatal(err)
+	}
+	<-done
+}
+
+func ServeWebsocketFileWatcher(filename string, w http.ResponseWriter, r *http.Request) {
+	ws, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		if _, ok := err.(websocket.HandshakeError); !ok {
+			log.Println(err)
+		}
+		return
+	}
+
+	writer(ws, filename)
+	defer ws.Close()
+}

desktop/go.mod

@@ -0,0 +1,27 @@
+module maputnik/desktop
+
+go 1.19
+
+require (
+	github.com/GeertJohan/go.rice v1.0.3
+	github.com/fsnotify/fsnotify v1.6.0
+	github.com/gorilla/handlers v1.5.1
+	github.com/gorilla/mux v1.8.0
+	github.com/gorilla/websocket v1.5.0
+	github.com/maputnik/desktop v1.0.7
+	github.com/urfave/cli v1.22.12
+)
+
+require (
+	github.com/GeertJohan/go.incremental v1.0.0 // indirect
+	github.com/akavel/rsrc v0.8.0 // indirect
+	github.com/cpuguy83/go-md2man/v2 v2.0.2 // indirect
+	github.com/daaku/go.zipexe v1.0.2 // indirect
+	github.com/felixge/httpsnoop v1.0.1 // indirect
+	github.com/jessevdk/go-flags v1.4.0 // indirect
+	github.com/nkovacs/streamquote v1.0.0 // indirect
+	github.com/russross/blackfriday/v2 v2.1.0 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasttemplate v1.0.1 // indirect
+	golang.org/x/sys v0.0.0-20220908164124-27713097b956 // indirect
+)

desktop/go.sum

@@ -0,0 +1,54 @@
+github.com/BurntSushi/toml v1.2.1/go.mod h1:CxXYINrC8qIiEnFrOxCa7Jy5BFHlXnUU2pbicEuybxQ=
+github.com/GeertJohan/go.incremental v1.0.0 h1:7AH+pY1XUgQE4Y1HcXYaMqAI0m9yrFqo/jt0CW30vsg=
+github.com/GeertJohan/go.incremental v1.0.0/go.mod h1:6fAjUhbVuX1KcMD3c8TEgVUqmo4seqhv0i0kdATSkM0=
+github.com/GeertJohan/go.rice v1.0.3 h1:k5viR+xGtIhF61125vCE1cmJ5957RQGXG6dmbaWZSmI=
+github.com/GeertJohan/go.rice v1.0.3/go.mod h1:XVdrU4pW00M4ikZed5q56tPf1v2KwnIKeIdc9CBYNt4=
+github.com/akavel/rsrc v0.8.0 h1:zjWn7ukO9Kc5Q62DOJCcxGpXC18RawVtYAGdz2aLlfw=
+github.com/akavel/rsrc v0.8.0/go.mod h1:uLoCtb9J+EyAqh+26kdrTgmzRBFPGOolLWKpdxkKq+c=
+github.com/cpuguy83/go-md2man/v2 v2.0.2 h1:p1EgwI/C7NhT0JmVkwCD2ZBK8j4aeHQX2pMHHBfMQ6w=
+github.com/cpuguy83/go-md2man/v2 v2.0.2/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
+github.com/daaku/go.zipexe v1.0.2 h1:Zg55YLYTr7M9wjKn8SY/WcpuuEi+kR2u4E8RhvpyXmk=
+github.com/daaku/go.zipexe v1.0.2/go.mod h1:5xWogtqlYnfBXkSB1o9xysukNP9GTvaNkqzUZbt3Bw8=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/felixge/httpsnoop v1.0.1 h1:lvB5Jl89CsZtGIWuTcDM1E/vkVs49/Ml7JJe07l8SPQ=
+github.com/felixge/httpsnoop v1.0.1/go.mod h1:m8KPJKqk1gH5J9DgRY2ASl2lWCfGKXixSwevea8zH2U=
+github.com/fsnotify/fsnotify v1.6.0 h1:n+5WquG0fcWoWp6xPWfHdbskMCQaFnG6PfBrh1Ky4HY=
+github.com/fsnotify/fsnotify v1.6.0/go.mod h1:sl3t1tCWJFWoRz9R8WJCbQihKKwmorjAbSClcnxKAGw=
+github.com/gorilla/handlers v1.5.1 h1:9lRY6j8DEeeBT10CvO9hGW0gmky0BprnvDI5vfhUHH4=
+github.com/gorilla/handlers v1.5.1/go.mod h1:t8XrUpc4KVXb7HGyJ4/cEnwQiaxrX/hz1Zv/4g96P1Q=
+github.com/gorilla/mux v1.8.0 h1:i40aqfkR1h2SlN9hojwV5ZA91wcXFOvkdNIeFDP5koI=
+github.com/gorilla/mux v1.8.0/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
+github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
+github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/jessevdk/go-flags v1.4.0 h1:4IU2WS7AumrZ/40jfhf4QVDMsQwqA7VEHozFRrGARJA=
+github.com/jessevdk/go-flags v1.4.0/go.mod h1:4FA24M0QyGHXBuZZK/XkWh8h0e1EYbRYJSGM75WSRxI=
+github.com/maputnik/desktop v1.0.7 h1:rdFg7emIJOT3YsZpwqSChmWtMOvu+T4h6WwVQAZP9n4=
+github.com/maputnik/desktop v1.0.7/go.mod h1:wmDjHUztx9jOBz0I22589yWguAGdV/sEM57YANpN8oQ=
+github.com/nkovacs/streamquote v1.0.0 h1:PmVIV08Zlx2lZK5fFZlMZ04eHcDTIFJCv/5/0twVUow=
+github.com/nkovacs/streamquote v1.0.0/go.mod h1:BN+NaZ2CmdKqUuTUXUEm9j95B2TRbpOWpxbJYzzgUsc=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/russross/blackfriday/v2 v2.1.0 h1:JIOH55/0cWyOuilr9/qlrm0BSXldqnqwMsf35Ld67mk=
+github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/urfave/cli v1.22.12 h1:igJgVw1JdKH+trcLWLeLwZjU9fEfPesQ+9/e4MQ44S8=
+github.com/urfave/cli v1.22.12/go.mod h1:sSBEIC79qR6OvcmsD4U3KABeOTxDqQtdDnaFuUN30b8=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasttemplate v1.0.1 h1:tY9CJiPnMXf1ERmG2EyK7gNUd+c6RKGD0IfU8WdUSz8=
+github.com/valyala/fasttemplate v1.0.1/go.mod h1:UQGH1tvbgY+Nz5t2n7tXsz52dQxojPUpymEIMZ47gx8=
+golang.org/x/sys v0.0.0-20220908164124-27713097b956 h1:XeJjHH1KiLpKGb6lvMiksZ9l0fVUh+AmGcm0nOMEBOY=
+golang.org/x/sys v0.0.0-20220908164124-27713097b956/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

desktop/maputnik.go

@@ -0,0 +1,80 @@
+package main
+
+import (
+	"fmt"
+	"net/http"
+	"os"
+	"path/filepath"
+
+        "github.com/GeertJohan/go.rice"
+	"github.com/gorilla/handlers"
+	"github.com/gorilla/mux"
+	"github.com/maputnik/desktop/filewatch"
+	"github.com/urfave/cli"
+)
+
+func main() {
+	app := cli.NewApp()
+	app.Name = "maputnik"
+	app.Usage = "Server for integrating Maputnik locally"
+	app.Version = Version
+
+	app.Flags = []cli.Flag{
+		&cli.StringFlag{
+			Name:  "file, f",
+			Usage: "Allow access to JSON style from web client",
+		},
+		&cli.BoolFlag{
+			Name:  "watch",
+			Usage: "Notify web client about JSON style file changes",
+		},
+		&cli.IntFlag{
+			Name: "port",
+			Value: 8000,
+			Usage: "TCP port to listen on",
+		},
+		&cli.StringFlag{
+			Name:  "static",
+			Usage: "Serve directory under /static/",
+		},
+	}
+
+	app.Action = func(c *cli.Context) error {
+		gui := http.FileServer(rice.MustFindBox("editor").HTTPBox())
+
+		router := mux.NewRouter().StrictSlash(true)
+
+		filename := c.String("file")
+		if filename != "" {
+			fmt.Printf("%s is accessible via Maputnik\n", filename)
+			// Allow access to reading and writing file on the local system
+			path, _ := filepath.Abs(filename)
+			accessor := StyleFileAccessor(path)
+			router.Path("/styles").Methods("GET").HandlerFunc(accessor.ListFiles)
+			router.Path("/styles/{styleId}").Methods("GET").HandlerFunc(accessor.ReadFile)
+			router.Path("/styles/{styleId}").Methods("PUT").HandlerFunc(accessor.SaveFile)
+
+			// Register websocket to notify we clients about file changes
+			if c.Bool("watch") {
+				router.Path("/ws").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+					filewatch.ServeWebsocketFileWatcher(filename, w, r)
+				})
+			}
+		}
+
+		staticDir := c.String("static")
+		if staticDir != "" {
+			h := http.StripPrefix("/static/", http.FileServer(http.Dir(staticDir)))
+			router.PathPrefix("/static/").Handler(h)
+		}
+
+		router.PathPrefix("/").Handler(http.StripPrefix("/", gui))
+		loggedRouter := handlers.LoggingHandler(os.Stdout, router)
+		corsRouter := handlers.CORS(handlers.AllowedHeaders([]string{"Content-Type"}), handlers.AllowedMethods([]string{"GET", "PUT"}), handlers.AllowedOrigins([]string{"*"}), handlers.AllowCredentials())(loggedRouter)
+
+		fmt.Printf("Exposing Maputnik on http://localhost:%d\n", c.Int("port"))
+		return http.ListenAndServe(fmt.Sprintf(":%d", c.Int("port")), corsRouter)
+	}
+
+	app.Run(os.Args)
+}

desktop/winres/winres_template.json

@@ -0,0 +1,60 @@
+{
+  "RT_GROUP_ICON": {
+    "APP": {
+      "0000": [
+        "../../src/img/maputnik.png"
+      ]
+    }
+  },
+  "RT_MANIFEST": {
+    "#1": {
+      "0409": {
+        "identity": {
+          "name": "Maputnik",
+          "version": "{{.Version}}"
+        },
+        "description": "A MapLibre GL visual style editor",
+        "minimum-os": "win7",
+        "execution-level": "as invoker",
+        "ui-access": false,
+        "auto-elevate": false,
+        "dpi-awareness": "system",
+        "disable-theming": false,
+        "disable-window-filtering": false,
+        "high-resolution-scrolling-aware": false,
+        "ultra-high-resolution-scrolling-aware": false,
+        "long-path-aware": false,
+        "printer-driver-isolation": false,
+        "gdi-scaling": false,
+        "segment-heap": false,
+        "use-common-controls-v6": false
+      }
+    }
+  },
+  "RT_VERSION": {
+    "#1": {
+      "0000": {
+        "fixed": {
+          "file_version": "{{.Version}}",
+          "product_version": "{{.Version}}"
+        },
+        "info": {
+          "0409": {
+            "Comments": "https://github.com/maplibre/maputnik",
+            "CompanyName": "Maputnik",
+            "FileDescription": "A MapLibre GL visual style editor",
+            "FileVersion": "{{.Version}}",
+            "InternalName": "Maputnik",
+            "LegalCopyright": "MIT License",
+            "LegalTrademarks": "",
+            "OriginalFilename": "Maputnik.exe",
+            "PrivateBuild": "",
+            "ProductName": "Maputnik",
+            "ProductVersion": "{{.Version}}",
+            "SpecialBuild": ""
+          }
+        }
+      }
+    }
+  }
+}

eslint.config.js

@@ -0,0 +1,61 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import reactRefreshPlugin from 'eslint-plugin-react-refresh';
+
+export default tseslint.config({
+  extends: [
+    eslint.configs.recommended,
+    tseslint.configs.recommended,
+  ],
+  files: ['**/*.{js,jsx,ts,tsx}'],
+  ignores: [
+    "dist/**/*",
+  ],
+  languageOptions: {
+    ecmaVersion: 2024,
+    sourceType: 'module',
+    globals: {
+      global: 'readonly'
+    }
+  },
+  settings: {
+    react: { version: '18.2' }
+  },
+  plugins: {
+    'react': reactPlugin,
+    'react-hooks': reactHooksPlugin,
+    'react-refresh': reactRefreshPlugin
+  },
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true }
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        varsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        argsIgnorePattern: '^_'
+      }
+    ],
+    'no-unused-vars': 'off',
+    'react/prop-types': 'off',
+    'no-undef': 'off',
+    'indent': ['error', 2],
+    'no-var': 'error',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-empty-object-type': 'off',
+
+  },
+  linterOptions: {
+    reportUnusedDisableDirectives: true,
+    noInlineConfig: false
+  }
+}
+)

i18next-parser.config.ts

@@ -0,0 +1,17 @@
+export default {
+  output: 'src/locales/$LOCALE/$NAMESPACE.json',
+  locales: [ 'de', 'fr', 'he', 'it','ja', '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.
+  keepRemoved: true,
+
+  // We use plain English keys, so we disable key and namespace separators.
+  keySeparator: false,
+  namespaceSeparator: false,
+
+  defaultValue: (_locale, _ns, _key) => {
+    // The default value is a string that indicates that the string is not translated.
+    return '__STRING_NOT_TRANSLATED__';
+  }
+}

package.json

@@ -1,43 +1,48 @@
 {
   "name": "maputnik",
-  "version": "2.0.0-pre.2",
+  "version": "2.1.1",
   "description": "A MapLibre GL visual style editor",
   "type": "module",
   "main": "''",
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint ./src ./cypress --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
+    "build": "tsc && vite build --base=/maputnik/",
+    "build-desktop": "tsc && vite build --base=/ && cd desktop && make",
+    "i18n:refresh": "i18next 'src/**/*.{ts,tsx,js,jsx}'",
+    "lint": "eslint",
     "test": "cypress run",
     "cy:open": "cypress open",
     "lint-css": "stylelint \"src/styles/*.scss\"",
-    "storybook": "storybook dev -h 0.0.0.0 -p 6006",
-    "build-storybook": "storybook build -o build/storybook"
+    "sort-styles": "jq 'sort_by(.id)' src/config/styles.json > tmp.json && mv tmp.json src/config/styles.json"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/maputnik/editor"
+    "url": "https://github.com/maplibre/maputnik"
   },
   "author": "Lukas Martinelli",
   "license": "MIT",
-  "homepage": "https://github.com/maputnik/editor#readme",
+  "homepage": "https://github.com/maplibre/maputnik#readme",
   "dependencies": {
-    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "@maplibre/maplibre-gl-style-spec": "^17.0.1",
-    "@mdi/js": "^6.6.96",
-    "@mdi/react": "^1.5.0",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
+    "@maplibre/maplibre-gl-geocoder": "^1.7.1",
+    "@maplibre/maplibre-gl-inspect": "^1.7.1",
+    "@maplibre/maplibre-gl-style-spec": "^23.1.0",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
+    "@prantlf/jsonlint": "^16.0.0",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
-    "codemirror": "^5.65.2",
-    "color": "^4.2.3",
+    "classnames": "^2.5.1",
+    "codemirror": "^5.65.18",
+    "color": "^5.0.0",
     "detect-browser": "^5.3.0",
+    "events": "^3.3.0",
     "file-saver": "^2.0.5",
-    "json-stringify-pretty-compact": "^3.0.0",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-resources-to-backend": "^1.2.1",
+    "json-stringify-pretty-compact": "^4.0.0",
     "json-to-ast": "^2.1.0",
-    "jsonlint": "github:josdejong/jsonlint#85a19d7",
     "lodash": "^4.17.21",
     "lodash.capitalize": "^4.2.1",
     "lodash.clamp": "^4.0.3",
@@ -45,30 +50,30 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl-inspect": "^1.3.1",
-    "maplibre-gl": "^2.4.0",
+    "maplibre-gl": "^5.1.0",
     "maputnik-design": "github:maputnik/design#172b06c",
-    "ol": "^6.14.1",
-    "ol-mapbox-style": "^7.1.1",
+    "ol": "^10.4.0",
+    "ol-mapbox-style": "^12.4.0",
+    "pmtiles": "^4.1.0",
     "prop-types": "^15.8.1",
-    "react": "^16.0.0",
-    "react-accessible-accordion": "^4.0.0",
+    "react": "^18.2.0",
+    "react-accessible-accordion": "^5.0.0",
     "react-aria-menubutton": "^7.0.3",
-    "react-aria-modal": "^4.0.1",
+    "react-aria-modal": "^5.0.2",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
-    "react-dom": "^16.0.0",
+    "react-dom": "^18.2.0",
     "react-file-reader-input": "^2.0.0",
+    "react-i18next": "^15.4.0",
     "react-icon-base": "^2.1.2",
-    "react-icons": "^4.3.1",
+    "react-icons": "^5.4.0",
     "react-sortable-hoc": "^2.0.0",
     "reconnecting-websocket": "^4.4.0",
-    "sass": "^1.50.0",
-    "slugify": "^1.6.5",
+    "slugify": "^1.6.6",
     "string-hash": "^1.1.3",
-    "url": "^0.11.0"
+    "url": "^0.11.4"
   },
   "jshintConfig": {
     "esversion": 6
@@ -88,24 +93,16 @@
     }
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.12.15",
+    "@cypress/code-coverage": "^3.13.11",
+    "@eslint/js": "^9.19.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@rollup/plugin-replace": "^5.0.5",
-    "@shellygo/cypress-test-utils": "^2.0.17",
-    "@storybook/addon-a11y": "^7.6.5",
-    "@storybook/addon-actions": "^7.6.5",
-    "@storybook/addon-links": "^7.6.5",
-    "@storybook/addon-storysource": "^7.6.5",
-    "@storybook/addons": "^7.6.5",
-    "@storybook/builder-vite": "^7.6.5",
-    "@storybook/react": "^7.6.5",
-    "@storybook/react-vite": "^7.6.5",
-    "@storybook/theming": "^7.6.5",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@shellygo/cypress-test-utils": "^4.1.13",
     "@types/codemirror": "^5.60.15",
-    "@types/color": "^3.0.6",
+    "@types/color": "^4.2.0",
     "@types/cors": "^2.8.17",
     "@types/file-saver": "^2.0.7",
-    "@types/geojson": "^7946.0.13",
+    "@types/geojson": "^7946.0.16",
     "@types/json-to-ast": "^2.1.4",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/lodash.clamp": "^4.0.9",
@@ -113,37 +110,40 @@
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
-    "@types/react": "^16.14.52",
-    "@types/react-aria-menubutton": "^6.2.13",
-    "@types/react-aria-modal": "^4.0.9",
-    "@types/react-autocomplete": "^1.8.9",
+    "@types/randomcolor": "^0.5.9",
+    "@types/react": "^18.2.67",
+    "@types/react-aria-menubutton": "^6.2.14",
+    "@types/react-aria-modal": "^5.0.0",
+    "@types/react-autocomplete": "^1.8.11",
     "@types/react-collapse": "^5.0.4",
-    "@types/react-color": "^3.0.10",
-    "@types/react-dom": "^16.9.24",
+    "@types/react-color": "^3.0.13",
+    "@types/react-dom": "^18.2.22",
     "@types/react-file-reader-input": "^2.0.4",
     "@types/react-icon-base": "^2.1.6",
     "@types/string-hash": "^1.1.3",
-    "@types/uuid": "^9.0.7",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@types/uuid": "^10.0.0",
+    "@types/wicg-file-system-access": "^2023.10.5",
+    "@vitejs/plugin-react": "^4.3.4",
     "cors": "^2.8.5",
-    "cypress": "^13.6.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "express": "^4.17.3",
+    "cypress": "^14.0.2",
+    "cypress-plugin-tab": "^1.0.5",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "i18next-parser": "^9.1.0",
     "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^3.2.0",
-    "mocha": "^9.2.2",
-    "postcss": "^8.4.12",
-    "react-hot-loader": "^4.13.0",
-    "storybook": "^7.6.5",
-    "stylelint": "^14.6.1",
-    "stylelint-config-recommended-scss": "^6.0.0",
-    "stylelint-scss": "^4.2.0",
-    "typescript": "^5.3.3",
-    "uuid": "^8.3.2",
-    "vite": "^5.0.0",
-    "vite-plugin-istanbul": "^5.0.0"
+    "istanbul-lib-coverage": "^3.2.2",
+    "postcss": "^8.5.1",
+    "react-hot-loader": "^4.13.1",
+    "sass": "^1.83.4",
+    "stylelint": "^16.14.1",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-scss": "^6.11.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.22.0",
+    "uuid": "^11.0.5",
+    "vite": "^6.1.0",
+    "vite-plugin-istanbul": "^6.0.2"
   }
 }

src/components/App.tsx

@@ -8,8 +8,9 @@ import get from 'lodash.get'
 import {unset} from 'lodash'
 import {arrayMoveMutable} from 'array-move'
 import hash from "string-hash";
+import { PMTiles } from "pmtiles";
 import {Map, LayerSpecification, StyleSpecification, ValidationError, SourceSpecification} from 'maplibre-gl'
-import {latest, validate} from '@maplibre/maplibre-gl-style-spec'
+import {latest, validateStyleMin} from '@maplibre/maplibre-gl-style-spec'
 
 import MapMaplibreGl from './MapMaplibreGl'
 import MapOpenLayers from './MapOpenLayers'
@@ -24,7 +25,6 @@ import ModalExport from './ModalExport'
 import ModalSources from './ModalSources'
 import ModalOpen from './ModalOpen'
 import ModalShortcuts from './ModalShortcuts'
-import ModalSurvey from './ModalSurvey'
 import ModalDebug from './ModalDebug'
 
 import {downloadGlyphsMetadata, downloadSpriteMetadata} from '../libs/metadata'
@@ -128,16 +128,15 @@ type AppState = {
     open: boolean
     shortcuts: boolean
     export: boolean
-    survey: boolean
     debug: boolean
   }
+  fileHandle: FileSystemFileHandle | null
 }
 
 export default class App extends React.Component<any, AppState> {
   revisionStore: RevisionStore;
   styleStore: StyleStore | ApiStyleStore;
   layerWatcher: LayerWatcher;
-  shortcutEl: ModalShortcuts | null = null;
 
   constructor(props: any) {
     super(props)
@@ -277,7 +276,6 @@ export default class App extends React.Component<any, AppState> {
         shortcuts: false,
         export: false,
         // TODO: Disabled for now, this should be opened on the Nth visit to the editor
-        survey: false,
         debug: false,
       },
       maplibreGlDebugOptions: {
@@ -288,6 +286,7 @@ export default class App extends React.Component<any, AppState> {
       openlayersDebugOptions: {
         debugToolbox: false,
       },
+      fileHandle: null,
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -364,6 +363,7 @@ export default class App extends React.Component<any, AppState> {
         [property]: value
       }
     }
+
     this.onStyleChanged(changedStyle)
   }
 
@@ -375,12 +375,29 @@ export default class App extends React.Component<any, AppState> {
       ...opts,
     };
 
+    // 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.
+
+    if (newStyle.glyphs && typeof newStyle.glyphs === 'string') {
+      newStyle.glyphs = setFetchAccessToken(newStyle.glyphs, newStyle);
+    }
+
+    if (newStyle.sprite && typeof newStyle.sprite === 'string') {
+      newStyle.sprite = setFetchAccessToken(newStyle.sprite, newStyle);
+    }
+
+    for (const [_sourceId, source] of Object.entries(newStyle.sources)) {
+      if (source && 'url' in source && typeof source.url === 'string') {
+        source.url = setFetchAccessToken(source.url, newStyle);
+      }
+    }
+
+
     if (opts.initialLoad) {
       this.getInitialStateFromUrl(newStyle);
     }
 
-    // This "any" can be removed in latest version of maplibre where maplibre re-exported types from style-spec
-    const errors = validate(newStyle as any, latest) || [];
+    const errors: ValidationError[] = validateStyleMin(newStyle) || [];
 
     // The validate function doesn't give us errors for duplicate error with
     // empty string for layer.id, manually deal with that here.
@@ -616,7 +633,8 @@ export default class App extends React.Component<any, AppState> {
     }
   }
 
-  openStyle = (styleObj: StyleSpecification & {id: string}) => {
+  openStyle = (styleObj: StyleSpecification & {id: string}, fileHandle: FileSystemFileHandle | null) => {
+    this.setState({fileHandle: fileHandle});
     styleObj = this.setDefaultValues(styleObj)
     this.onStyleChanged(styleObj)
   }
@@ -643,33 +661,41 @@ export default class App extends React.Component<any, AppState> {
           console.warn("Failed to setFetchAccessToken: ", err);
         }
 
-        fetch(url!, {
-          mode: 'cors',
-        })
-          .then(response => response.json())
-          .then(json => {
+        const setVectorLayers = (json:any) => {
+          if(!Object.prototype.hasOwnProperty.call(json, "vector_layers")) {
+            return;
+          }
 
-            if(!Object.prototype.hasOwnProperty.call(json, "vector_layers")) {
-              return;
-            }
-
-            // Create new objects before setState
-            const sources = Object.assign({}, {
-              [key]: this.state.sources[key],
-            });
-
-            for(const layer of json.vector_layers) {
-              (sources[key] as any).layers.push(layer.id)
-            }
-
-            console.debug("Updating source: "+key);
-            this.setState({
-              sources: sources
-            });
-          })
-          .catch(err => {
-            console.error("Failed to process sources for '%s'", url, err);
+          // Create new objects before setState
+          const sources = Object.assign({}, {
+            [key]: this.state.sources[key],
           });
+
+          for(const layer of json.vector_layers) {
+            (sources[key] as any).layers.push(layer.id)
+          }
+
+          this.setState({
+            sources: sources
+          });
+        };
+
+        if (url!.startsWith("pmtiles://")) {
+          (new PMTiles(url!.substr(10))).getTileJson("")
+            .then(json => setVectorLayers(json))
+            .catch(err => {
+              console.error("Failed to process sources for '%s'", url, err);
+            });
+        } else {
+          fetch(url!, {
+            mode: 'cors',
+          })
+            .then(response => response.json())
+            .then(json => setVectorLayers(json))
+            .catch(err => {
+              console.error("Failed to process sources for '%s'", url, err);
+            });
+        }
       }
       else {
         sourceList[key] = this.state.sources[key] || this.state.mapStyle.sources[key];
@@ -730,6 +756,7 @@ export default class App extends React.Component<any, AppState> {
         onLayerSelect={this.onLayerSelect}
       />
     } else {
+
       mapElement = <MapMaplibreGl {...mapProps}
         onChange={this.onMapChange}
         options={this.state.maplibreGlDebugOptions}
@@ -783,6 +810,7 @@ export default class App extends React.Component<any, AppState> {
   getInitialStateFromUrl = (mapStyle: StyleSpecification) => {
     const url = new URL(location.href);
     const modalParam = url.searchParams.get("modal");
+
     if (modalParam && modalParam !== "") {
       const modals = modalParam.split(",");
       const modalObj: {[key: string]: boolean} = {};
@@ -840,10 +868,6 @@ export default class App extends React.Component<any, AppState> {
   }
 
   setModal(modalName: keyof AppState["isOpen"], value: boolean) {
-    if(modalName === 'survey' && value === false) {
-      localStorage.setItem('survey', '');
-    }
-
     this.setState({
       isOpen: {
         ...this.state.isOpen,
@@ -856,6 +880,10 @@ export default class App extends React.Component<any, AppState> {
     this.setModal(modalName, !this.state.isOpen[modalName]);
   }
 
+  onSetFileHandle(fileHandle: FileSystemFileHandle | null) {
+    this.setState({fileHandle: fileHandle});
+  }
+
   onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
     this.setState({
       openlayersDebugOptions: {
@@ -943,7 +971,6 @@ export default class App extends React.Component<any, AppState> {
         mapView={this.state.mapView}
       />
       <ModalShortcuts
-        ref={(el) => this.shortcutEl = el}
         isOpen={this.state.isOpen.shortcuts}
         onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
       />
@@ -959,11 +986,14 @@ export default class App extends React.Component<any, AppState> {
         onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
+        fileHandle={this.state.fileHandle}
+        onSetFileHandle={this.onSetFileHandle}
       />
       <ModalOpen
         isOpen={this.state.isOpen.open}
         onStyleOpen={this.openStyle}
         onOpenToggle={this.toggleModal.bind(this, 'open')}
+        fileHandle={this.state.fileHandle}
       />
       <ModalSources
         mapStyle={this.state.mapStyle}
@@ -971,10 +1001,6 @@ export default class App extends React.Component<any, AppState> {
         isOpen={this.state.isOpen.sources}
         onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
-      <ModalSurvey
-        isOpen={this.state.isOpen.survey}
-        onOpenToggle={this.toggleModal.bind(this, 'survey')}
-      />
     </div>
 
     return <AppLayout

src/components/AppLayout.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ScrollContainer from './ScrollContainer'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type AppLayoutProps = {
+type AppLayoutInternalProps = {
   toolbar: React.ReactElement
   layerList: React.ReactElement
   layerEditor?: React.ReactElement
   map: React.ReactElement
   bottom?: React.ReactElement
   modals?: React.ReactNode
-};
+} & WithTranslation;
 
-class AppLayout extends React.Component<AppLayoutProps> {
+class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
   static childContextTypes = {
     reactIconBase: PropTypes.object
   }
@@ -23,17 +24,21 @@ class AppLayout extends React.Component<AppLayoutProps> {
   }
 
   render() {
+    document.body.dir = this.props.i18n.dir();
+
     return <div className="maputnik-layout">
       {this.props.toolbar}
-      <div className="maputnik-layout-list">
-        {this.props.layerList}
+      <div className="maputnik-layout-main">
+        <div className="maputnik-layout-list">
+          {this.props.layerList}
+        </div>
+        <div className="maputnik-layout-drawer">
+          <ScrollContainer>
+            {this.props.layerEditor}
+          </ScrollContainer>
+        </div>
+        {this.props.map}
       </div>
-      <div className="maputnik-layout-drawer">
-        <ScrollContainer>
-          {this.props.layerEditor}
-        </ScrollContainer>
-      </div>
-      {this.props.map}
       {this.props.bottom && <div className="maputnik-layout-bottom">
         {this.props.bottom}
       </div>
@@ -43,4 +48,5 @@ class AppLayout extends React.Component<AppLayoutProps> {
   }
 }
 
-export default AppLayout
+const AppLayout = withTranslation()(AppLayoutInternal);
+export default AppLayout;

src/components/AppMessagePanel.tsx

@@ -1,23 +1,24 @@
 import React from 'react'
 import {formatLayerId} from '../libs/format';
 import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
-type AppMessagePanelProps = {
+type AppMessagePanelInternalProps = {
   errors?: unknown[]
-  infos?: unknown[]
+  infos?: string[]
   mapStyle?: StyleSpecification
   onLayerSelect?(...args: unknown[]): unknown
   currentLayer?: LayerSpecification
   selectedLayerIndex?: number
-};
+} & WithTranslation;
 
-export default class AppMessagePanel extends React.Component<AppMessagePanelProps> {
+class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalProps> {
   static defaultProps = {
     onLayerSelect: () => {},
   }
 
   render() {
-    const {selectedLayerIndex} = this.props;
+    const {t, selectedLayerIndex} = this.props;
     const errors = this.props.errors?.map((error: any, idx) => {
       let content;
       if (error.parsed && error.parsed.type === "layer") {
@@ -25,7 +26,9 @@ export default class AppMessagePanel extends React.Component<AppMessagePanelProp
         const layerId = this.props.mapStyle?.layers[parsed.data.index].id;
         content = (
           <>
-            Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
+            <Trans t={t}>
+              Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
+            </Trans>
             {selectedLayerIndex !== parsed.data.index &&
               <>
                 &nbsp;&mdash;&nbsp;
@@ -33,7 +36,7 @@ export default class AppMessagePanel extends React.Component<AppMessagePanelProp
                   className="maputnik-message-panel__switch-button"
                   onClick={() => this.props.onLayerSelect!(parsed.data.index)}
                 >
-                  switch to layer
+                  {t("switch to layer")}
                 </button>
               </>
             }
@@ -59,3 +62,5 @@ export default class AppMessagePanel extends React.Component<AppMessagePanelProp
   }
 }
 
+const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
+export default AppMessagePanel;

src/components/AppToolbar.tsx

@@ -2,9 +2,20 @@ import React from 'react'
 import classnames from 'classnames'
 import {detect} from 'detect-browser';
 
-import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
+import {
+  MdOpenInBrowser,
+  MdSettings,
+  MdLayers,
+  MdHelpOutline,
+  MdFindInPage,
+  MdLanguage,
+  MdSave
+} from 'react-icons/md'
 import pkgJson from '../../package.json'
-
+//@ts-ignore
+import maputnikLogo from 'maputnik-design/logos/logo-color.svg?inline'
+import { withTranslation, WithTranslation } from 'react-i18next';
+import { supportedLanguages } from '../i18n';
 
 // This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
 const browser = detect();
@@ -43,29 +54,6 @@ class ToolbarLink extends React.Component<ToolbarLinkProps> {
   }
 }
 
-type ToolbarLinkHighlightedProps = {
-  className?: string
-  children?: React.ReactNode
-  href?: string
-  onToggleModal?(...args: unknown[]): unknown
-};
-
-class ToolbarLinkHighlighted extends React.Component<ToolbarLinkHighlightedProps> {
-  render() {
-    return <a
-      className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
-      href={this.props.href}
-      rel="noopener noreferrer"
-      target="_blank"
-      data-wd-key="toolbar:link-highlighted"
-    >
-      <span className="maputnik-toolbar-link-wrapper">
-        {this.props.children}
-      </span>
-    </a>
-  }
-}
-
 type ToolbarSelectProps = {
   children?: React.ReactNode
   wdKey?: string
@@ -102,7 +90,7 @@ class ToolbarAction extends React.Component<ToolbarActionProps> {
 
 export type MapState = "map" | "inspect" | "filter-achromatopsia" | "filter-deuteranopia" | "filter-protanopia" | "filter-tritanopia";
 
-type AppToolbarProps = {
+type AppToolbarInternalProps = {
   mapStyle: object
   inspectModeEnabled: boolean
   onStyleChanged(...args: unknown[]): unknown
@@ -115,9 +103,9 @@ type AppToolbarProps = {
   onSetMapState(mapState: MapState): unknown
   mapState?: MapState
   renderer?: string
-};
+} & WithTranslation;
 
-export default class AppToolbar extends React.Component<AppToolbarProps> {
+class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
   state = {
     isOpen: {
       settings: false,
@@ -132,6 +120,10 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
     this.props.onSetMapState(val);
   }
 
+  handleLanguageChange(val: string) {
+    this.props.i18n.changeLanguage(val);
+  }
+
   onSkip = (target: string) => {
     if (target === "map") {
       (document.querySelector(".maplibregl-canvas") as HTMLCanvasElement).focus();
@@ -143,40 +135,41 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
   }
 
   render() {
+    const t = this.props.t;
     const views = [
       {
         id: "map",
         group: "general",
-        title: "Map",
+        title: t("Map"),
       },
       {
         id: "inspect",
         group: "general",
-        title: "Inspect",
+        title: t("Inspect"),
         disabled: this.props.renderer === 'ol',
       },
       {
         id: "filter-deuteranopia",
         group: "color-accessibility",
-        title: "Deuteranopia filter",
+        title: t("Deuteranopia filter"),
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-protanopia",
         group: "color-accessibility",
-        title: "Protanopia filter",
+        title: t("Protanopia filter"),
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-tritanopia",
         group: "color-accessibility",
-        title: "Tritanopia filter",
+        title: t("Tritanopia filter"),
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-achromatopsia",
         group: "color-accessibility",
-        title: "Achromatopsia filter",
+        title: t("Achromatopsia filter"),
         disabled: !colorAccessibilityFiltersEnabled,
       },
     ];
@@ -196,29 +189,29 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
             className="maputnik-toolbar-skip"
             onClick={_e => this.onSkip("layer-list")}
           >
-            Layers list
+            {t("Layers list")}
           </button>
           <button
             data-wd-key="root:skip:layer-editor"
             className="maputnik-toolbar-skip"
             onClick={_e => this.onSkip("layer-editor")}
           >
-            Layer editor
+            {t("Layer editor")}
           </button>
           <button
             data-wd-key="root:skip:map-view"
             className="maputnik-toolbar-skip"
             onClick={_e => this.onSkip("map")}
           >
-            Map view
+            {t("Map view")}
           </button>
           <a
             className="maputnik-toolbar-logo"
             target="blank"
             rel="noreferrer noopener"
-            href="https://github.com/maputnik/editor"
+            href="https://github.com/maplibre/maputnik"
           >
-            <img src="node_modules/maputnik-design/logos/logo-color.svg" />
+            <img src={maputnikLogo} alt={t("Maputnik on GitHub")} />
             <h1>
               <span className="maputnik-toolbar-name">{pkgJson.name}</span>
               <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
@@ -228,24 +221,24 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
         <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
           <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
             <MdOpenInBrowser />
-            <IconText>Open</IconText>
+            <IconText>{t("Open")}</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
-            <MdFileDownload />
-            <IconText>Export</IconText>
+            <MdSave />
+            <IconText>{t("Save")}</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
             <MdLayers />
-            <IconText>Data Sources</IconText>
+            <IconText>{t("Data Sources")}</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
             <MdSettings />
-            <IconText>Style Settings</IconText>
+            <IconText>{t("Style Settings")}</IconText>
           </ToolbarAction>
 
           <ToolbarSelect wdKey="nav:inspect">
             <MdFindInPage />
-            <label>View
+            <IconText>{t("View")}
               <select
                 className="maputnik-select"
                 data-wd-key="maputnik-select"
@@ -259,7 +252,7 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
                     </option>
                   );
                 })}
-                <optgroup label="Color accessibility">
+                <optgroup label={t("Color accessibility")}>
                   {views.filter(v => v.group === "color-accessibility").map((item) => {
                     return (
                       <option key={item.id} value={item.id} disabled={item.disabled}>
@@ -269,19 +262,38 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
                   })}
                 </optgroup>
               </select>
-            </label>
+            </IconText>
           </ToolbarSelect>
 
-          <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
+          <ToolbarSelect wdKey="nav:language">
+            <MdLanguage />
+            <IconText>Language
+              <select
+                className="maputnik-select"
+                data-wd-key="maputnik-lang-select"
+                onChange={(e) => this.handleLanguageChange(e.target.value)}
+                value={this.props.i18n.language}
+              >
+                {Object.entries(supportedLanguages).map(([code, name]) => {
+                  return (
+                    <option key={code} value={code}>
+                      {name}
+                    </option>
+                  );
+                })}
+              </select>
+            </IconText>
+          </ToolbarSelect>
+
+          <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>
             <MdHelpOutline />
-            <IconText>Help</IconText>
+            <IconText>{t("Help")}</IconText>
           </ToolbarLink>
-          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
-            <MdAssignmentTurnedIn />
-            <IconText>Take the Maputnik Survey</IconText>
-          </ToolbarLinkHighlighted>
         </div>
       </div>
     </nav>
   }
 }
+
+const AppToolbar = withTranslation()(AppToolbarInternal);
+export default AppToolbar;

src/components/Block.tsx

@@ -1,10 +1,10 @@
-import React, {SyntheticEvent} from 'react'
+import React, {PropsWithChildren, SyntheticEvent} from 'react'
 import classnames from 'classnames'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
 
-type BlockProps = {
+type BlockProps = PropsWithChildren & {
   "data-wd-key"?: string
   label?: string
   action?: React.ReactElement
@@ -56,7 +56,9 @@ export default class Block extends React.Component<BlockProps, BlockState> {
     if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
       event.stopPropagation();
     }
-    event.preventDefault();
+    if (event.nativeEvent.target.nodeName !== "A") {
+      event.preventDefault();
+    }
   }
 
   render() {

src/components/Doc.tsx

@@ -18,6 +18,8 @@ type DocProps = {
     'sdk-support'?: {
       [key: string]: typeof headers
     }
+    docUrl?: string,
+    docUrlLinkText?: string
   }
 };
 
@@ -25,13 +27,13 @@ export default class Doc extends React.Component<DocProps> {
   render () {
     const {fieldSpec} = this.props;
 
-    const {doc, values} = fieldSpec;
+    const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
     const sdkSupport = fieldSpec['sdk-support'];
 
     const renderValues = (
       !!values &&
       // HACK: Currently we merge additional values into the style spec, so this is required
-      // See <https://github.com/maputnik/editor/blob/main/src/components/PropertyGroup.jsx#L16>
+      // See <https://github.com/maplibre/maputnik/blob/main/src/components/PropertyGroup.jsx#L16>
       !Array.isArray(values)
     );
 
@@ -85,7 +87,12 @@ export default class Doc extends React.Component<DocProps> {
             </table>
           </div>
         }
+        {docUrl && docUrlLinkText &&
+          <div className="SpecDoc__learn-more">
+            <a href={docUrl}  target="_blank" rel="noreferrer">{docUrlLinkText}</a>
+          </div>
+        }
       </>
     );
   }
-}
+}

src/components/FieldComment.tsx

@@ -2,21 +2,23 @@ import React from 'react'
 
 import Block from './Block'
 import InputString from './InputString'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type FieldCommentProps = {
+type FieldCommentInternalProps = {
   value?: string
   onChange(value: string | undefined): unknown
   error: {message: string}
-};
+} & WithTranslation;
 
-export default class FieldComment extends React.Component<FieldCommentProps> {
+class FieldCommentInternal extends React.Component<FieldCommentInternalProps> {
   render() {
+    const t = this.props.t;
     const fieldSpec = {
-      doc: "Comments for the current layer. This is non-standard and not in the spec."
+      doc: t("Comments for the current layer. This is non-standard and not in the spec."),
     };
 
     return <Block
-      label={"Comments"}
+      label={t("Comments")}
       fieldSpec={fieldSpec}
       data-wd-key="layer-comment"
       error={this.props.error}
@@ -25,9 +27,12 @@ export default class FieldComment extends React.Component<FieldCommentProps> {
         multi={true}
         value={this.props.value}
         onChange={this.props.onChange}
-        default="Comment..."
+        default={t("Comment...")}
         data-wd-key="layer-comment.input"
       />
     </Block>
   }
 }
+
+const FieldComment = withTranslation()(FieldCommentInternal);
+export default FieldComment;

src/components/FieldDocLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
 type FieldDocLabelProps = {
-  label: object | string | undefined
+  label: JSX.Element | string | undefined
   fieldSpec?: {
     doc?: string
   }

src/components/FieldFunction.tsx

@@ -128,7 +128,7 @@ export default class FieldFunction extends React.Component<FieldFunctionProps, F
     }
   }
 
-  static getDerivedStateFromProps(props: FieldFunctionProps, state: FieldFunctionState) {
+  static getDerivedStateFromProps(props: Readonly<FieldFunctionProps>, state: FieldFunctionState) {
     // Because otherwise when editing values we end up accidentally changing field type.
     if (state.isEditing) {
       return {};

src/components/FieldId.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputString from './InputString'
 
@@ -13,7 +13,8 @@ type FieldIdProps = {
 
 export default class FieldId extends React.Component<FieldIdProps> {
   render() {
-    return <Block label={"ID"} fieldSpec={latest.layer.id}
+    return <Block label="ID" fieldSpec={latest.layer.id}
+
       data-wd-key={this.props.wdKey}
       error={this.props.error}
     >

src/components/FieldMaxZoom.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputNumber from './InputNumber'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type FieldMaxZoomProps = {
+type FieldMaxZoomInternalProps = {
   value?: number
   onChange(value: number | undefined): unknown
   error?: {message: string}
-};
+} & WithTranslation;
 
-export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {
+class FieldMaxZoomInternal extends React.Component<FieldMaxZoomInternalProps> {
   render() {
-    return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
+    const t = this.props.t;
+    return <Block label={t("Max Zoom")} fieldSpec={latest.layer.maxzoom}
       error={this.props.error}
       data-wd-key="max-zoom"
     >
@@ -28,3 +30,6 @@ export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {
     </Block>
   }
 }
+
+const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
+export default FieldMaxZoom;

src/components/FieldMinZoom.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputNumber from './InputNumber'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type FieldMinZoomProps = {
+type FieldMinZoomInternalProps = {
   value?: number
   onChange(...args: unknown[]): unknown
   error?: {message: string}
-};
+} & WithTranslation;
 
-export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {
+class FieldMinZoomInternal extends React.Component<FieldMinZoomInternalProps> {
   render() {
-    return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
+    const t = this.props.t;
+    return <Block label={t("Min Zoom")} fieldSpec={latest.layer.minzoom}
       error={this.props.error}
       data-wd-key="min-zoom"
     >
@@ -28,3 +30,6 @@ export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {
     </Block>
   }
 }
+
+const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
+export default FieldMinZoom;

src/components/FieldSource.tsx

@@ -1,26 +1,28 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type FieldSourceProps = {
+type FieldSourceInternalProps = {
   value?: string
   wdKey?: string
   onChange?(value: string| undefined): unknown
   sourceIds?: unknown[]
   error?: {message: string}
-};
+} & WithTranslation;
 
-export default class FieldSource extends React.Component<FieldSourceProps> {
+class FieldSourceInternal extends React.Component<FieldSourceInternalProps> {
   static defaultProps = {
     onChange: () => {},
     sourceIds: [],
   }
 
   render() {
+    const t = this.props.t;
     return <Block
-      label={"Source"}
+      label={t("Source")}
       fieldSpec={latest.layer.source}
       error={this.props.error}
       data-wd-key={this.props.wdKey}
@@ -33,3 +35,6 @@ export default class FieldSource extends React.Component<FieldSourceProps> {
     </Block>
   }
 }
+
+const FieldSource = withTranslation()(FieldSourceInternal);
+export default FieldSource;

src/components/FieldSourceLayer.tsx

@@ -3,16 +3,17 @@ import React from 'react'
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type FieldSourceLayerProps = {
+type FieldSourceLayerInternalProps = {
   value?: string
   onChange?(...args: unknown[]): unknown
   sourceLayerIds?: unknown[]
   isFixed?: boolean
   error?: {message: string}
-};
+} & WithTranslation;
 
-export default class FieldSourceLayer extends React.Component<FieldSourceLayerProps> {
+class FieldSourceLayerInternal extends React.Component<FieldSourceLayerInternalProps> {
   static defaultProps = {
     onChange: () => {},
     sourceLayerIds: [],
@@ -20,8 +21,9 @@ export default class FieldSourceLayer extends React.Component<FieldSourceLayerPr
   }
 
   render() {
+    const t = this.props.t;
     return <Block 
-      label={"Source Layer"} 
+      label={t("Source Layer")} 
       fieldSpec={latest.layer['source-layer']}
       data-wd-key="layer-source-layer"
       error={this.props.error}
@@ -35,3 +37,6 @@ export default class FieldSourceLayer extends React.Component<FieldSourceLayerPr
     </Block>
   }
 }
+
+const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
+export default FieldSourceLayer;

src/components/FieldType.tsx

@@ -1,25 +1,27 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputSelect from './InputSelect'
 import InputString from './InputString'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type FieldTypeProps = {
+type FieldTypeInternalProps = {
   value: string
   wdKey?: string
   onChange(value: string): unknown
   error?: {message: string}
   disabled?: boolean
-};
+} & WithTranslation;
 
-export default class FieldType extends React.Component<FieldTypeProps> {
+class FieldTypeInternal extends React.Component<FieldTypeInternalProps> {
   static defaultProps = {
     disabled: false,
   }
 
   render() {
-    return <Block label={"Type"} fieldSpec={latest.layer.type}
+    const t = this.props.t;
+    return <Block label={t("Type")} fieldSpec={latest.layer.type}
       data-wd-key={this.props.wdKey}
       error={this.props.error}
     >
@@ -50,3 +52,6 @@ export default class FieldType extends React.Component<FieldTypeProps> {
     </Block>
   }
 }
+
+const FieldType = withTranslation()(FieldTypeInternal);
+export default FieldType;

src/components/Fieldset.tsx

@@ -1,9 +1,9 @@
-import React, { ReactElement } from 'react'
+import React, { PropsWithChildren, ReactElement } from 'react'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 import generateUniqueId from '../libs/document-uid';
 
-type FieldsetProps = {
+type FieldsetProps = PropsWithChildren & {
   label?: string,
   fieldSpec?: { doc?: string },
   action?: ReactElement,

src/components/FilterEditor.tsx

@@ -13,9 +13,10 @@ import FilterEditorBlock from './FilterEditorBlock'
 import InputButton from './InputButton'
 import Doc from './Doc'
 import ExpressionProperty from './_ExpressionProperty';
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 
-function combiningFilter(props: FilterEditorProps): LegacyFilterSpecification | ExpressionSpecification {
+function combiningFilter(props: FilterEditorInternalProps): LegacyFilterSpecification | ExpressionSpecification {
   const filter = props.filter || ['all'];
 
   if (!Array.isArray(filter)) {
@@ -47,7 +48,7 @@ function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpe
     "sources": {
       "tmp": {
         "type": "geojson",
-        "data": {}
+        "data": ''
       }
     },
     "sprite": "",
@@ -89,13 +90,13 @@ function hasNestedCombiningFilter(filter: LegacyFilterSpecification | Expression
   return false
 }
 
-type FilterEditorProps = {
+type FilterEditorInternalProps = {
   /** Properties of the vector layer and the available fields */
   properties?: {[key:string]: any}
   filter?: any[]
   errors?: {[key:string]: any}
   onChange(value: LegacyFilterSpecification | ExpressionSpecification): unknown
-};
+} & WithTranslation;
 
 type FilterEditorState = {
   showDoc: boolean
@@ -103,12 +104,12 @@ type FilterEditorState = {
   valueIsSimpleFilter?: boolean
 };
 
-export default class FilterEditor extends React.Component<FilterEditorProps, FilterEditorState> {
+class FilterEditorInternal extends React.Component<FilterEditorInternalProps, FilterEditorState> {
   static defaultProps = {
     filter: ["all"],
   }
 
-  constructor (props: FilterEditorProps) {
+  constructor (props: FilterEditorInternalProps) {
     super(props);
     this.state = {
       showDoc: false,
@@ -155,17 +156,17 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
     })
   }
 
-  static getDerivedStateFromProps(props: FilterEditorProps, currentState: FilterEditorState) {
+  static getDerivedStateFromProps(props: Readonly<FilterEditorInternalProps>, state: FilterEditorState) {
     const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
 
     // Upgrade but never downgrade
-    if (!displaySimpleFilter && currentState.displaySimpleFilter === true) {
+    if (!displaySimpleFilter && state.displaySimpleFilter === true) {
       return {
         displaySimpleFilter: false,
         valueIsSimpleFilter: false,
       };
     }
-    else if (displaySimpleFilter && currentState.displaySimpleFilter === false) {
+    else if (displaySimpleFilter && state.displaySimpleFilter === false) {
       return {
         valueIsSimpleFilter: true,
       }
@@ -178,7 +179,7 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
   }
 
   render() {
-    const {errors} = this.props;
+    const {errors, t} = this.props;
     const {displaySimpleFilter} = this.state;
     const fieldSpec={
       doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."
@@ -190,16 +191,16 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
     if (isNestedCombiningFilter) {
       return <div className="maputnik-filter-editor-unsupported">
         <p>
-          Nested filters are not supported.
+          {t("Nested filters are not supported.")}
         </p>
         <InputButton
           onClick={this.makeExpression}
-          title="Convert to expression"
+          title={t("Convert to expression")}
         >
           <svg style={{marginRight: "0.2em", width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiFunctionVariant} />
           </svg>
-          Upgrade to expression
+          {t("Upgrade to expression")}
         </InputButton>
       </div>
     }
@@ -212,7 +213,7 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
         <div>
           <InputButton
             onClick={this.makeExpression}
-            title="Convert to expression"
+            title={t("Convert to expression")}
             className="maputnik-make-zoom-function"
           >
             <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
@@ -247,13 +248,17 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
           <Block
             key="top"
             fieldSpec={fieldSpec}
-            label={"Filter"}
+            label={t("Filter")}
             action={actions}
           >
             <InputSelect
               value={combiningOp}
               onChange={(v: [string, any]) => this.onFilterPartChanged(0, v)}
-              options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
+              options={[
+                ["all", t("every filter matches")], 
+                ["none", t("no filter matches")], 
+                ["any", t("any filter matches")]
+              ]}
             />
           </Block>
           {editorBlocks}
@@ -268,7 +273,7 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
             >
               <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                 <path fill="currentColor" d={mdiTableRowPlusAfter} />
-              </svg> Add filter
+              </svg> {t("Add filter")}
             </InputButton>
           </div>
           <div
@@ -299,12 +304,13 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
           />
           {this.state.valueIsSimpleFilter &&
             <div className="maputnik-expr-infobox">
-              You&apos;ve entered a old style filter,{' '}
+              {t("You've entered an old style filter.")}
+              {' '}
               <button
                 onClick={this.makeFilter}
                 className="maputnik-expr-infobox__button"
               >
-                switch to filter editor
+                {t("Switch to filter editor.")}
               </button>
             </div>
           }
@@ -313,3 +319,6 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
     }
   }
 }
+
+const FilterEditor = withTranslation()(FilterEditorInternal);
+export default FilterEditor;

src/components/FilterEditorBlock.tsx

@@ -1,19 +1,21 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type FilterEditorBlockProps = {
+type FilterEditorBlockInternalProps = PropsWithChildren & {
   onDelete(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
-export default class FilterEditorBlock extends React.Component<FilterEditorBlockProps> {
+class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInternalProps> {
   render() {
+    const t = this.props.t;
     return <div className="maputnik-filter-editor-block">
       <div className="maputnik-filter-editor-block-action">
         <InputButton
           className="maputnik-delete-filter"
           onClick={this.props.onDelete}
-          title="Delete filter block"
+          title={t("Delete filter block")}
         >
           <MdDelete />
         </InputButton>
@@ -25,3 +27,5 @@ export default class FilterEditorBlock extends React.Component<FilterEditorBlock
   }
 }
 
+const FilterEditorBlock = withTranslation()(FilterEditorBlockInternal);
+export default FilterEditorBlock;

src/components/InputArray.tsx

@@ -32,7 +32,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
     };
   }
 
-  static getDerivedStateFromProps(props: FieldArrayProps, state: FieldArrayState) {
+  static getDerivedStateFromProps(props: Readonly<FieldArrayProps>, state: FieldArrayState) {
     const value: any[] = [];
     const initialPropsValue = state.initialPropsValue.slice(0);
 

src/components/InputDynamicArray.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import capitalize from 'lodash.capitalize'
 import {MdDelete} from 'react-icons/md'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import InputString from './InputString'
 import InputNumber from './InputNumber'
@@ -21,10 +22,11 @@ export type FieldDynamicArrayProps = {
   }
   'aria-label'?: string
   label: string
-};
+} 
 
+type FieldDynamicArrayInternalProps = FieldDynamicArrayProps & WithTranslation;
 
-export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
+class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInternalProps> {
   changeValue(idx: number, newValue: string | number | undefined) {
     const values = this.values.slice(0)
     values[idx] = newValue
@@ -62,8 +64,13 @@ export default class FieldDynamicArray extends React.Component<FieldDynamicArray
   }
 
   render() {
+    const t = this.props.t;
+    const i18nProps = { t, i18n: this.props.i18n, tReady: this.props.tReady };
     const inputs = this.values.map((v, i) => {
-      const deleteValueBtn= <DeleteValueInputButton onClick={this.deleteValue.bind(this, i)} />
+      const deleteValueBtn= <DeleteValueInputButton 
+        onClick={this.deleteValue.bind(this, i)}
+        {...i18nProps}
+      />;
       let input;
       if(this.props.type === 'url') {
         input = <InputUrl
@@ -117,23 +124,27 @@ export default class FieldDynamicArray extends React.Component<FieldDynamicArray
           className="maputnik-array-add-value"
           onClick={this.addValue}
         >
-          Add value
+          {t("Add value")}
         </InputButton>
       </div>
     );
   }
 }
 
+const FieldDynamicArray = withTranslation()(FieldDynamicArrayInternal);
+export default FieldDynamicArray;
+
 type DeleteValueInputButtonProps = {
   onClick?(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class DeleteValueInputButton extends React.Component<DeleteValueInputButtonProps> {
   render() {
+    const t = this.props.t;
     return <InputButton
       className="maputnik-delete-stop"
       onClick={this.props.onClick}
-      title="Remove array item"
+      title={t("Remove array item")}
     >
       <FieldDocLabel
         label={<MdDelete />}

src/components/InputJson.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames';
 import CodeMirror, { ModeSpec } from 'codemirror';
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
@@ -27,6 +28,7 @@ export type InputJsonProps = {
   mode?: ModeSpec<any>
   lint?: boolean | object
 };
+type InputJsonInternalProps = InputJsonProps & WithTranslation;
 
 type InputJsonState = {
   isEditing: boolean
@@ -34,7 +36,7 @@ type InputJsonState = {
   prevValue: string
 };
 
-export default class InputJson extends React.Component<InputJsonProps, InputJsonState> {
+class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJsonState> {
   static defaultProps = {
     lineNumbers: true,
     lineWrapping: false,
@@ -52,7 +54,7 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
   _el: HTMLDivElement | null = null;
   _cancelNextChange: boolean = false;
 
-  constructor(props: InputJsonProps) {
+  constructor(props: InputJsonInternalProps) {
     super(props);
     this._keyEvent = "keyboard";
     this.state = {
@@ -156,6 +158,7 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
   }
 
   render() {
+    const t = this.props.t;
     const {showMessage} = this.state;
     const style = {} as {maxHeight?: number};
     if (this.props.maxHeight) {
@@ -164,7 +167,9 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
 
     return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
       <div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
-        Press <kbd>ESC</kbd> to lose focus
+        <Trans t={t}>
+          Press <kbd>ESC</kbd> to lose focus
+        </Trans>
       </div>
       <div
         className={classnames("codemirror-container", this.props.className)}
@@ -174,3 +179,6 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
     </div>
   }
 }
+
+const InputJson = withTranslation()(InputJsonInternal);
+export default InputJson;

src/components/InputNumber.tsx

@@ -19,7 +19,10 @@ type InputNumberState = {
   editing: boolean
   editingRange?: boolean
   value?: number
-  dirtyValue?: number
+  /**
+   * This is the value that is currently being edited. It can be an invalid value.
+   */
+  dirtyValue?: number | string | undefined
 }
 
 export default class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
@@ -38,7 +41,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
     }
   }
 
-  static getDerivedStateFromProps(props: InputNumberProps, state: InputNumberState) {
+  static getDerivedStateFromProps(props: Readonly<InputNumberProps>, state: InputNumberState) {
     if (!state.editing && props.value !== state.value) {
       return {
         value: props.value,
@@ -66,7 +69,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
     }
 
     this.setState({
-      dirtyValue: newValue === "" ? undefined : value,
+      dirtyValue: newValue === "" ? undefined : newValue,
     })
   }
 
@@ -125,7 +128,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
         // for example we might go from 13 to 13.23, however because we know
         // that came from a keyboard event we always want to increase by a
         // single step value.
-        if (value < this.state.dirtyValue!) {
+        if (value < +this.state.dirtyValue!) {
           value = this.state.value! - step;
         }
         else {

src/components/InputSpec.tsx

@@ -49,6 +49,7 @@ export default class SpecField extends React.Component<SpecFieldProps> {
       value: this.props.value,
       default: this.props.fieldSpec?.default,
       name: this.props.fieldName,
+      "data-wd-key": "spec-field-input:" + this.props.fieldName,
       onChange: (newValue: number | undefined | (string | number | undefined)[]) => this.props.onChange!(this.props.fieldName, newValue),
       'aria-label': this.props['aria-label'],
     }

src/components/InputString.tsx

@@ -33,7 +33,7 @@ export default class InputString extends React.Component<InputStringProps, Input
     }
   }
 
-  static getDerivedStateFromProps(props: InputStringProps, state: InputStringState) {
+  static getDerivedStateFromProps(props: Readonly<InputStringProps>, state: InputStringState) {
     if (!state.editing) {
       return {
         value: props.value

src/components/InputUrl.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import InputString from './InputString'
 import SmallError from './SmallError'
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 
-
-function validate(url: string) {
+function validate(url: string, t: TFunction): JSX.Element | undefined {
   if (url === "") {
     return;
   }
@@ -14,7 +15,7 @@ function validate(url: string) {
       const urlObj = new URL(url);
       return urlObj.protocol;
     }
-    catch (err) {
+    catch (_err) {
       return undefined;
     }
   };
@@ -22,15 +23,19 @@ function validate(url: string) {
   const isSsl = window.location.protocol === "https:";
 
   if (!protocol) {
-    error = (
-      <SmallError>
-        Must provide protocol {
-          isSsl
-            ? <code>https://</code>
-            : <><code>http://</code> or <code>https://</code></>
-        }
-      </SmallError>
-    );
+    if (isSsl) {
+      error = (
+        <SmallError>
+          <Trans t={t}>Must provide protocol: <code>https://</code></Trans>
+        </SmallError>
+      );
+    } else {
+      error = (
+        <SmallError>
+          <Trans t={t}>Must provide protocol: <code>http://</code> or <code>https://</code></Trans>
+        </SmallError>
+      );
+    }
   }
   else if (
     protocol &&
@@ -39,7 +44,9 @@ function validate(url: string) {
   ) {
     error = (
       <SmallError>
-        CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
+        <Trans t={t}>
+          CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
+        </Trans>
       </SmallError>
     );
   }
@@ -61,32 +68,34 @@ export type FieldUrlProps = {
   className?: string
 };
 
+type FieldUrlInternalProps = FieldUrlProps & WithTranslation;
+
 type FieldUrlState = {
   error?: React.ReactNode
 }
 
-export default class FieldUrl extends React.Component<FieldUrlProps, FieldUrlState> {
+class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlState> {
   static defaultProps = {
     onInput: () => {},
   }
 
-  constructor (props: FieldUrlProps) {
+  constructor (props: FieldUrlInternalProps) {
     super(props);
     this.state = {
-      error: validate(props.value)
+      error: validate(props.value, props.t),
     };
   }
 
   onInput = (url: string) => {
     this.setState({
-      error: validate(url)
+      error: validate(url, this.props.t),
     });
     if (this.props.onInput) this.props.onInput(url);
   }
 
   onChange = (url: string) => {
     this.setState({
-      error: validate(url)
+      error: validate(url, this.props.t),
     });
     this.props.onChange(url);
   }
@@ -106,3 +115,5 @@ export default class FieldUrl extends React.Component<FieldUrlProps, FieldUrlSta
   }
 }
 
+const FieldUrl = withTranslation()(FieldUrlInternal);
+export default FieldUrl;

src/components/LayerEditor.tsx

@@ -19,31 +19,45 @@ import FieldSourceLayer from './FieldSourceLayer'
 import { changeType, changeProperty } from '../libs/layer'
 import layout from '../config/layout.json'
 import {formatLayerId} from '../libs/format';
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 
 
-function getLayoutForType(type: LayerSpecification["type"]) {
-  return layout[type] ? layout[type] : layout.invalid;
+function getLayoutForType(type: LayerSpecification["type"], t: TFunction) {
+  return layout[type] ? {
+    ...layout[type],
+    groups: layout[type].groups.map(group => {
+      return {
+        ...group,
+        id: group.title.replace(/ /g, "_"),
+        title: t(group.title)
+      };
+    }),
+  } : layout.invalid;
 }
 
-function layoutGroups(layerType: LayerSpecification["type"]): {title: string, type: string, fields?: string[]}[] {
+function layoutGroups(layerType: LayerSpecification["type"], t: TFunction): {id: string, title: string, type: string, fields?: string[]}[] {
   const layerGroup = {
-    title: 'Layer',
+    id: 'layer',
+    title: t('Layer'),
     type: 'layer'
   }
   const filterGroup = {
-    title: 'Filter',
+    id: 'filter',
+    title: t('Filter'),
     type: 'filter'
   }
   const editorGroup = {
-    title: 'JSON Editor',
+    id: 'jsoneditor',
+    title: t('JSON Editor'),
     type: 'jsoneditor'
   }
   return [layerGroup, filterGroup]
-    .concat(getLayoutForType(layerType).groups)
+    .concat(getLayoutForType(layerType, t).groups)
     .concat([editorGroup])
 }
 
-type LayerEditorProps = {
+type LayerEditorInternalProps = {
   layer: LayerSpecification
   sources: {[key: string]: SourceSpecification}
   vectorLayers: {[key: string]: any}
@@ -58,14 +72,14 @@ type LayerEditorProps = {
   isLastLayer?: boolean
   layerIndex: number
   errors?: any[]
-};
+} & WithTranslation;
 
 type LayerEditorState = {
   editorGroups: {[keys:string]: boolean}
 };
 
 /** Layer editor supporting multiple types of layers. */
-export default class LayerEditor extends React.Component<LayerEditorProps, LayerEditorState> {
+class LayerEditorInternal extends React.Component<LayerEditorInternalProps, LayerEditorState> {
   static defaultProps = {
     onLayerChanged: () => {},
     onLayerIdChange: () => {},
@@ -76,22 +90,22 @@ export default class LayerEditor extends React.Component<LayerEditorProps, Layer
     reactIconBase: PropTypes.object
   }
 
-  constructor(props: LayerEditorProps) {
+  constructor(props: LayerEditorInternalProps) {
     super(props)
 
     //TODO: Clean this up and refactor into function
     const editorGroups: {[keys:string]: boolean} = {}
-    layoutGroups(this.props.layer.type).forEach(group => {
+    layoutGroups(this.props.layer.type, props.t).forEach(group => {
       editorGroups[group.title] = true
     })
 
     this.state = { editorGroups }
   }
 
-  static getDerivedStateFromProps(props: LayerEditorProps, state: LayerEditorState) {
+  static getDerivedStateFromProps(props: Readonly<LayerEditorInternalProps>, state: LayerEditorState) {
     const additionalGroups = { ...state.editorGroups }
 
-    getLayoutForType(props.layer.type).groups.forEach(group => {
+    getLayoutForType(props.layer.type, props.t).groups.forEach(group => {
       if(!(group.title in additionalGroups)) {
         additionalGroups[group.title] = true
       }
@@ -242,17 +256,19 @@ export default class LayerEditor extends React.Component<LayerEditorProps, Layer
   }
 
   render() {
+    const t = this.props.t;
+
     const groupIds: string[] = [];
     const layerType = this.props.layer.type
-    const groups = layoutGroups(layerType).filter(group => {
+    const groups = layoutGroups(layerType, t).filter(group => {
       return !(layerType === 'background' && group.type === 'source')
     }).map(group => {
-      const groupId = group.title.replace(/ /g, "_");
+      const groupId = group.id;
       groupIds.push(groupId);
       return <LayerEditorGroup
         data-wd-key={group.title}
         id={groupId}
-        key={group.title}
+        key={groupId}
         title={group.title}
         isActive={this.state.editorGroups[group.title]}
         onActiveToggle={this.onGroupToggle.bind(this, group.title)}
@@ -265,25 +281,25 @@ export default class LayerEditor extends React.Component<LayerEditorProps, Layer
 
     const items: {[key: string]: {text: string, handler: () => void, disabled?: boolean}} = {
       delete: {
-        text: "Delete",
+        text: t("Delete"),
         handler: () => this.props.onLayerDestroy(this.props.layerIndex)
       },
       duplicate: {
-        text: "Duplicate",
+        text: t("Duplicate"),
         handler: () => this.props.onLayerCopy(this.props.layerIndex)
       },
       hide: {
-        text: (layout.visibility === "none") ? "Show" : "Hide",
+        text: (layout.visibility === "none") ? t("Show") : t("Hide"),
         handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
       },
       moveLayerUp: {
-        text: "Move layer up",
+        text: t("Move layer up"),
         // Not actually used...
         disabled: this.props.isFirstLayer,
         handler: () => this.moveLayer(-1)
       },
       moveLayerDown: {
-        text: "Move layer down",
+        text: t("Move layer down"),
         // Not actually used...
         disabled: this.props.isLastLayer,
         handler: () => this.moveLayer(+1)
@@ -297,12 +313,12 @@ export default class LayerEditor extends React.Component<LayerEditorProps, Layer
 
     return <section className="maputnik-layer-editor"
       role="main"
-      aria-label="Layer editor"
+      aria-label={t("Layer editor")}
     >
       <header>
         <div className="layer-header">
           <h2 className="layer-header__title">
-            Layer: {formatLayerId(this.props.layer.id)}
+            {t("Layer: {{layerId}}", { layerId: formatLayerId(this.props.layer.id) })}
           </h2>
           <div className="layer-header__info">
             <Wrapper
@@ -310,7 +326,11 @@ export default class LayerEditor extends React.Component<LayerEditorProps, Layer
               onSelection={handleSelection}
               closeOnSelection={false}
             >
-              <Button id="skip-target-layer-editor" data-wd-key="skip-target-layer-editor" className='more-menu__button' title="Layer options">
+              <Button 
+                id="skip-target-layer-editor" 
+                data-wd-key="skip-target-layer-editor" 
+                className='more-menu__button' 
+                title={"Layer options"}>
                 <MdMoreVert className="more-menu__button__svg" />
               </Button>
               <Menu>
@@ -340,3 +360,6 @@ export default class LayerEditor extends React.Component<LayerEditorProps, Layer
     </section>
   }
 }
+
+const LayerEditor = withTranslation()(LayerEditorInternal);
+export default LayerEditor;

src/components/LayerList.tsx

@@ -10,6 +10,7 @@ import {SortEndHandler, SortableContainer} from 'react-sortable-hoc';
 import type {LayerSpecification} from 'maplibre-gl';
 import generateUniqueId from '../libs/document-uid';
 import { findClosestCommonPrefix, layerPrefix } from '../libs/layer';
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 type LayerListContainerProps = {
   layers: LayerSpecification[]
@@ -22,6 +23,7 @@ type LayerListContainerProps = {
   sources: object
   errors: any[]
 };
+type LayerListContainerInternalProps = LayerListContainerProps & WithTranslation;
 
 type LayerListContainerState = {
   collapsedGroups: {[ket: string]: boolean}
@@ -31,14 +33,14 @@ type LayerListContainerState = {
 };
 
 // List of collapsible layer editors
-class LayerListContainer extends React.Component<LayerListContainerProps, LayerListContainerState> {
+class LayerListContainerInternal extends React.Component<LayerListContainerInternalProps, LayerListContainerState> {
   static defaultProps = {
     onLayerSelect: () => {},
   }
   selectedItemRef: React.RefObject<any>;
   scrollContainerRef: React.RefObject<HTMLElement>;
 
-  constructor(props: LayerListContainerProps) {
+  constructor(props: LayerListContainerInternalProps) {
     super(props);
     this.selectedItemRef = React.createRef();
     this.scrollContainerRef = React.createRef();
@@ -259,10 +261,12 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
       })
     })
 
+    const t = this.props.t;
+
     return <section
       className="maputnik-layer-list"
       role="complementary"
-      aria-label="Layers list"
+      aria-label={t("Layers list")}
       ref={this.scrollContainerRef}
     >
       <ModalAdd
@@ -274,7 +278,7 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
         onLayersChange={this.props.onLayersChange}
       />
       <header className="maputnik-layer-list-header">
-        <span className="maputnik-layer-list-header-title">Layers</span>
+        <span className="maputnik-layer-list-header-title">{t("Layers")}</span>
         <span className="maputnik-space" />
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
@@ -283,7 +287,11 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
               data-wd-key="skip-target-layer-list"
               onClick={this.toggleLayers}
               className="maputnik-button">
-              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
+              {this.state.areAllGroupsExpanded === true ? 
+                t("Collapse") 
+                : 
+                t("Expand")
+              }
             </button>
           </div>
         </div>
@@ -293,14 +301,14 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
               onClick={this.toggleModal.bind(this, 'add')}
               data-wd-key="layer-list:add-layer"
               className="maputnik-button maputnik-button-selected">
-             Add Layer
+              {t("Add Layer")}
             </button>
           </div>
         </div>
       </header>
       <div
         role="navigation"
-        aria-label="Layers list"
+        aria-label={t("Layers list")}
       >
         <ul className="maputnik-layer-list-container">
           {listItems}
@@ -310,7 +318,7 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
   }
 }
 
-// eslint-disable-next-line react-refresh/only-export-components
+const LayerListContainer = withTranslation()(LayerListContainerInternal);
 const LayerListContainerSortable = SortableContainer((props: LayerListContainerProps) => <LayerListContainer {...props} />)
 
 type LayerListProps = LayerListContainerProps & {

src/components/LayerListItem.tsx

@@ -139,6 +139,6 @@ class LayerListItem extends React.Component<LayerListItemProps> {
   }
 }
 
-const LayerListItemSortable = SortableElement((props: LayerListItemProps) => <LayerListItem {...props} />);
+const LayerListItemSortable = SortableElement<LayerListItemProps>((props: LayerListItemProps) => <LayerListItem {...props} />);
 
 export default LayerListItemSortable;

src/components/MapMaplibreGl.tsx

@@ -1,10 +1,8 @@
 import React, {type JSX} from 'react'
 import ReactDOM from 'react-dom'
 import MapLibreGl, {LayerSpecification, LngLat, Map, MapOptions, SourceSpecification, StyleSpecification} from 'maplibre-gl'
-// @ts-ignore
-import MapboxInspect from 'mapbox-gl-inspect'
-// @ts-ignore
-import colors from 'mapbox-gl-inspect/lib/colors'
+import MaplibreInspect from '@maplibre/maplibre-gl-inspect'
+import colors from '@maplibre/maplibre-gl-inspect/lib/colors'
 import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
 import MapMaplibreGlFeaturePropertyPopup, { InspectFeature } from './MapMaplibreGlFeaturePropertyPopup'
 import Color from 'color'
@@ -13,13 +11,15 @@ import { HighlightedLayer, colorHighlightedLayer } from '../libs/highlight'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import '../maplibregl.css'
 import '../libs/maplibre-rtl'
+import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from '@maplibre/maplibre-gl-geocoder';
+import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
+import { withTranslation, WithTranslation } from 'react-i18next'
+import i18next from 'i18next'
+import { Protocol } from "pmtiles";
 
-
-const IS_SUPPORTED = MapLibreGl.supported();
-
-function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container) {
+function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
   ReactDOM.render(popup, mountNode);
-  return mountNode;
+  return mountNode as HTMLElement;
 }
 
 function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[], highlightedLayer?: HighlightedLayer) {
@@ -37,6 +37,7 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
   }
 
   const sources: {[key:string]: SourceSpecification} = {}
+
   Object.keys(originalMapStyle.sources).forEach(sourceId => {
     const source = originalMapStyle.sources[sourceId]
     if(source.type !== 'raster' && source.type !== 'raster-dem') {
@@ -52,7 +53,7 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
   return inspectStyle
 }
 
-type MapMaplibreGlProps = {
+type MapMaplibreGlInternalProps = {
   onDataChange?(event: {map: Map | null}): unknown
   onLayerSelect(...args: unknown[]): unknown
   mapStyle: StyleSpecification
@@ -65,15 +66,17 @@ type MapMaplibreGlProps = {
   }
   replaceAccessTokens(mapStyle: StyleSpecification): StyleSpecification
   onChange(value: {center: LngLat, zoom: number}): unknown
-};
+} & WithTranslation;
 
 type MapMaplibreGlState = {
-  map: Map | null
-  inspect: MapboxInspect | null
-  zoom?: number
+  map: Map | null;
+  inspect: MaplibreInspect | null;
+  geocoder: MaplibreGeocoder | null;
+  zoomControl: ZoomControl | null;
+  zoom?: number;
 };
 
-export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, MapMaplibreGlState> {
+class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
@@ -83,79 +86,71 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
   }
   container: HTMLDivElement | null = null
 
-  constructor(props: MapMaplibreGlProps) {
+  constructor(props: MapMaplibreGlInternalProps) {
     super(props)
     this.state = {
       map: null,
       inspect: null,
+      geocoder: null,
+      zoomControl: null,
     }
+    i18next.on('languageChanged', () => {
+      this.forceUpdate();
+    })
   }
 
-  updateMapFromProps(props: MapMaplibreGlProps) {
-    if(!IS_SUPPORTED) return;
 
-    if(!this.state.map) return
-
-    //Maplibre GL now does diffing natively so we don't need to calculate
-    //the necessary operations ourselves!
-    this.state.map.setStyle(
-      this.props.replaceAccessTokens(props.mapStyle),
-      {diff: true}
-    )
-  }
-
-  shouldComponentUpdate(nextProps: MapMaplibreGlProps, nextState: MapMaplibreGlState) {
+  shouldComponentUpdate(nextProps: MapMaplibreGlInternalProps, nextState: MapMaplibreGlState) {
     let should = false;
     try {
       should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
-    } catch(e) {
+    } catch(_e) {
       // no biggie, carry on
     }
     return should;
   }
 
   componentDidUpdate() {
-    if(!IS_SUPPORTED) return;
-
     const map = this.state.map;
 
-    this.updateMapFromProps(this.props);
-
-    if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
-      // HACK: Fix for <https://github.com/maputnik/editor/issues/576>, while we wait for a proper fix.
-      // eslint-disable-next-line
-      this.state.inspect._popupBlocked = false;
-      this.state.inspect.toggleInspector()
-    }
+    const styleWithTokens = this.props.replaceAccessTokens(this.props.mapStyle);
     if (map) {
-      if (this.props.inspectModeEnabled) {
-        // HACK: We need to work out why we need to do this and what's causing
-        // this error. I'm assuming an issue with maplibre-gl update and
-        // mapbox-gl-inspect.
-        try {
-          this.state.inspect.render();
-        } catch(err) {
-          console.error("FIXME: Caught error", err);
-        }
-      }
-
+      // Maplibre GL now does diffing natively so we don't need to calculate
+      // the necessary operations ourselves!
+      // We also need to update the style for inspect to work properly
+      map.setStyle(styleWithTokens, {diff: true});
       map.showTileBoundaries = this.props.options?.showTileBoundaries!;
       map.showCollisionBoxes = this.props.options?.showCollisionBoxes!;
       map.showOverdrawInspector = this.props.options?.showOverdrawInspector!;
     }
+
+    if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
+      this.state.inspect.toggleInspector()
+    }
+    if (this.state.inspect && this.props.inspectModeEnabled) {
+      this.state.inspect.setOriginalStyle(styleWithTokens);
+      // In case the sources are the same, there's a need to refresh the style
+      setTimeout(() => {
+        this.state.inspect!.render();
+      }, 500);
+    }
+    
   }
 
   componentDidMount() {
-    if(!IS_SUPPORTED) return;
-
     const mapOpts = {
       ...this.props.options,
       container: this.container!,
       style: this.props.mapStyle,
       hash: true,
-      maxZoom: 24
-    }
+      maxZoom: 24,
+      // setting to always load glyphs of CJK fonts from server
+      // https://maplibre.org/maplibre-gl-js/docs/examples/local-ideographs/
+      localIdeographFontFamily: false
+    } satisfies MapOptions;
 
+    const protocol = new Protocol({metadata: true});
+    MapLibreGl.addProtocol("pmtiles",protocol.tile);
     const map = new MapLibreGl.Map(mapOpts);
 
     const mapViewChange = () => {
@@ -169,7 +164,9 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
     map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector!;
 
-    const zoomControl = new ZoomControl;
+    const geocoder = this.initGeocoder(map);
+
+    const zoomControl = new ZoomControl();
     map.addControl(zoomControl, 'top-right');
 
     const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
@@ -177,7 +174,7 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
 
     const tmpNode = document.createElement('div');
 
-    const inspect = new MapboxInspect({
+    const inspect = new MaplibreInspect({
       popup: new MapLibreGl.Popup({
         closeOnClick: false
       }),
@@ -204,6 +201,8 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
       this.setState({
         map,
         inspect,
+        geocoder,
+        zoomControl,
         zoom: map.getZoom()
       });
     })
@@ -234,25 +233,64 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
     this.props.onLayerSelect(index);
   }
 
+  initGeocoder(map: Map) {
+    const geocoderConfig = {
+      forwardGeocode: async (config: MaplibreGeocoderApiConfig) => {
+        const features = [];
+        try {
+          const request = `https://nominatim.openstreetmap.org/search?q=${config.query}&format=geojson&polygon_geojson=1&addressdetails=1`;
+          const response = await fetch(request);
+          const geojson = await response.json();
+          for (const feature of geojson.features) {
+            const center = [
+              feature.bbox[0] +
+                  (feature.bbox[2] - feature.bbox[0]) / 2,
+              feature.bbox[1] +
+                  (feature.bbox[3] - feature.bbox[1]) / 2
+            ];
+            const point = {
+              type: 'Feature',
+              geometry: {
+                type: 'Point',
+                coordinates: center
+              },
+              place_name: feature.properties.display_name,
+              properties: feature.properties,
+              text: feature.properties.display_name,
+              place_type: ['place'],
+              center
+            };
+            features.push(point);
+          }
+        } catch (e) {
+          console.error(`Failed to forwardGeocode with error: ${e}`);
+        }
+        return {
+          features
+        };
+      },
+    } as unknown as MaplibreGeocoderApi;
+    const geocoder = new MaplibreGeocoder(geocoderConfig, {
+      placeholder: this.props.t("Search"),
+      maplibregl: MapLibreGl,
+    });
+    map.addControl(geocoder, 'top-left');
+    return geocoder;
+  }
+
   render() {
-    if(IS_SUPPORTED) {
-      return <div
-        className="maputnik-map__map"
-        role="region"
-        aria-label="Map view"
-        ref={x => this.container = x}
-        data-wd-key="maplibre:map"
-      ></div>
-    }
-    else {
-      return <div
-        className="maputnik-map maputnik-map--error"
-      >
-        <div className="maputnik-map__error-message">
-          Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
-        </div>
-      </div>
-    }
+    const t = this.props.t;
+    this.state.geocoder?.setPlaceholder(t("Search"));
+    this.state.zoomControl?.setLabel(t("Zoom:"));
+    return <div
+      className="maputnik-map__map"
+      role="region"
+      aria-label={t("Map view")}
+      ref={x => this.container = x}
+      data-wd-key="maplibre:map"
+    ></div>
   }
 }
 
+const MapMaplibreGl = withTranslation()(MapMaplibreGlInternal);
+export default MapMaplibreGl;

src/components/MapMaplibreGlFeaturePropertyPopup.tsx

@@ -1,18 +1,12 @@
 import React from 'react'
-import Block from './Block'
-import FieldString from './FieldString'
+import type { GeoJSONFeatureWithSourceLayer } from '@maplibre/maplibre-gl-inspect'
 
-export type InspectFeature = {
-  id: string
-  properties: {[key:string]: any}
-  layer: {[key:string]: any}
-  geometry: GeoJSON.Geometry
-  sourceLayer: string
+export type InspectFeature = GeoJSONFeatureWithSourceLayer & {
   inspectModeCounter?: number
   counter?: number
 }
 
-function displayValue(value: string | number | Date | object) {
+function displayValue(value: string | number | Date | object | undefined) {
   if (typeof value === 'undefined' || value === null) return value;
   if (value instanceof Date) return value.toLocaleString();
   if (typeof value === 'object' ||
@@ -21,30 +15,25 @@ function displayValue(value: string | number | Date | object) {
   return value;
 }
 
-function renderProperties(feature: InspectFeature) {
-  return Object.keys(feature.properties).map(propertyName => {
-    const property = feature.properties[propertyName]
-    return <Block key={propertyName} label={propertyName}>
-      <FieldString value={displayValue(property)} style={{backgroundColor: 'transparent'}}/>
-    </Block>
-  })
-}
-
-function renderFeatureId(feature: InspectFeature) {
-  return <Block key={"feature-id"} label={"feature_id"}>
-    <FieldString value={displayValue(feature.id)} style={{backgroundColor: 'transparent'}} />
-  </Block>
+function renderKeyValueTableRow(key: string, value: string | undefined) {
+  return <tr key={key}>
+    <td className="maputnik-popup-table-cell">{key}</td>
+    <td className="maputnik-popup-table-cell">{value}</td>
+  </tr>
 }
 
 function renderFeature(feature: InspectFeature, idx: number) {
-  return <div key={`${feature.sourceLayer}-${idx}`}>
-    <div className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
-    <Block key={"property-type"} label={"$type"}>
-      <FieldString value={feature.geometry.type} style={{backgroundColor: 'transparent'}} />
-    </Block>
-    {renderFeatureId(feature)}
-    {renderProperties(feature)}
-  </div>
+  return <React.Fragment key={idx}>
+    <tr>
+      <td colSpan={2} className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
+    </tr>
+    {renderKeyValueTableRow("$type", feature.geometry.type)}
+    {renderKeyValueTableRow("$id", displayValue(feature.id))}
+    {Object.keys(feature.properties).map(propertyName => {
+      const property = feature.properties[propertyName];
+      return renderKeyValueTableRow(propertyName, displayValue(property))
+    })}
+  </React.Fragment>
 }
 
 function removeDuplicatedFeatures(features: InspectFeature[]) {
@@ -78,7 +67,11 @@ class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
   render() {
     const features = removeDuplicatedFeatures(this.props.features)
     return <div className="maputnik-feature-property-popup">
-      {features.map(renderFeature)}
+      <table className="maputnik-popup-table">
+        <tbody>
+          {features.map(renderFeature)}
+        </tbody>
+      </table>
     </div>
   }
 }

src/components/MapMaplibreGlLayerPopup.tsx

@@ -8,15 +8,16 @@ function groupFeaturesBySourceLayer(features: InspectFeature[]) {
   const returnedFeatures: {[key: string]: number} = {}
 
   features.forEach(feature => {
+    const sourceKey = feature.layer['source-layer'] as string;
     if(Object.prototype.hasOwnProperty.call(returnedFeatures, feature.layer.id)) {
       returnedFeatures[feature.layer.id]++
 
-      const featureObject = sources[feature.layer['source-layer']].find((f: InspectFeature) => f.layer.id === feature.layer.id)
+      const featureObject = sources[sourceKey].find((f: InspectFeature) => f.layer.id === feature.layer.id)
 
       featureObject!.counter = returnedFeatures[feature.layer.id]
     } else {
-      sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
-      sources[feature.layer['source-layer']].push(feature)
+      sources[sourceKey] = sources[sourceKey] || []
+      sources[sourceKey].push(feature)
 
       returnedFeatures[feature.layer.id] = 1
     }
@@ -40,29 +41,21 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
 
     try {
       const paintProps = feature.layer.paint;
-      let propName;
 
-      if(Object.prototype.hasOwnProperty.call(paintProps, "text-color") && paintProps["text-color"]) {
-        propName = "text-color";
+      if("text-color" in paintProps && paintProps["text-color"]) {
+        return String(paintProps["text-color"]);
       }
-      else if (Object.prototype.hasOwnProperty.call(paintProps, "fill-color") && paintProps["fill-color"]) {
-        propName = "fill-color";
+      if ("fill-color" in paintProps && paintProps["fill-color"]) {
+        return String(paintProps["fill-color"]);
       }
-      else if (Object.prototype.hasOwnProperty.call(paintProps, "line-color") && paintProps["line-color"]) {
-        propName = "line-color";
+      if ("line-color" in paintProps && paintProps["line-color"]) {
+        return String(paintProps["line-color"]);
       }
-      else if (Object.prototype.hasOwnProperty.call(paintProps, "fill-extrusion-color") && paintProps["fill-extrusion-color"]) {
-        propName = "fill-extrusion-color";
-      }
-
-      if(propName) {
-        const color = feature.layer.paint[propName];
-        return String(color);
-      }
-      else {
-        // Default color
-        return "black";
+      if ("fill-extrusion-color" in paintProps && paintProps["fill-extrusion-color"]) {
+        return String(paintProps["fill-extrusion-color"]);
       }
+      // Default color
+      return "black";
     }
     // This is quite complex, just incase there's an edgecase we're missing
     // always return black if we get an unexpected error.

src/components/MapOpenLayers.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import {throttle} from 'lodash';
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup';
 
 import 'ol/ol.css'
+//@ts-ignore
 import {apply} from 'ol-mapbox-style';
 import {Map, View, Overlay} from 'ol';
 
@@ -22,7 +24,7 @@ function renderCoords (coords: string[]) {
   }
 }
 
-type MapOpenLayersProps = {
+type MapOpenLayersInternalProps = {
   onDataChange?(...args: unknown[]): unknown
   mapStyle: object
   accessToken?: string
@@ -31,7 +33,7 @@ type MapOpenLayersProps = {
   debugToolbox: boolean
   replaceAccessTokens(...args: unknown[]): unknown
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 type MapOpenLayersState = {
   zoom: string
@@ -41,7 +43,7 @@ type MapOpenLayersState = {
   selectedFeatures?: any[]
 };
 
-export default class MapOpenLayers extends React.Component<MapOpenLayersProps, MapOpenLayersState> {
+class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps, MapOpenLayersState> {
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
@@ -53,7 +55,7 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
   overlay: Overlay | undefined;
   popupContainer: HTMLElement | null = null;
 
-  constructor(props: MapOpenLayersProps) {
+  constructor(props: MapOpenLayersInternalProps) {
     super(props);
     this.state = {
       zoom: "0",
@@ -72,7 +74,7 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
     apply(this.map, newMapStyle);
   }
 
-  componentDidUpdate(prevProps: MapOpenLayersProps) {
+  componentDidUpdate(prevProps: MapOpenLayersInternalProps) {
     if (this.props.mapStyle !== prevProps.mapStyle) {
       this.updateStyle(
         this.props.replaceAccessTokens(this.props.mapStyle)
@@ -83,10 +85,11 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
   componentDidMount() {
     this.overlay = new Overlay({
       element: this.popupContainer!,
-      autoPan: true,
-      autoPanAnimation: {
-        duration: 250
-      }
+      autoPan: {
+        animation: {
+          duration: 250
+        }
+      },
     });
 
     const map = new Map({
@@ -150,6 +153,7 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
   }
 
   render() {
+    const t = this.props.t;
     return <div className="maputnik-ol-container">
       <div
         ref={x => this.popupContainer = x}
@@ -159,7 +163,7 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
         <button
           className="maplibregl-popup-close-button"
           onClick={this.closeOverlay}
-          aria-label="Close popup"
+          aria-label={t("Close popup")}
         >
           ×
         </button>
@@ -169,20 +173,20 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
         />
       </div>
       <div className="maputnik-ol-zoom">
-        Zoom: {this.state.zoom}
+        {t("Zoom:")} {this.state.zoom}
       </div>
       {this.props.debugToolbox &&
         <div className="maputnik-ol-debug">
           <div>
-            <label>cursor: </label>
+            <label>{t("cursor:")} </label>
             <span>{renderCoords(this.state.cursor)}</span>
           </div>
           <div>
-            <label>center: </label>
+            <label>{t("center:")} </label>
             <span>{renderCoords(this.state.center)}</span>
           </div>
           <div>
-            <label>rotation: </label>
+            <label>{t("rotation:")} </label>
             <span>{this.state.rotation}</span>
           </div>
         </div>
@@ -191,7 +195,7 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
         className="maputnik-ol"
         ref={x => this.container = x}
         role="region"
-        aria-label="Map view"
+        aria-label={t("Map view")}
         style={{
           ...this.props.style,
         }}>
@@ -200,3 +204,5 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
   }
 }
 
+const MapOpenLayers = withTranslation()(MapOpenLayersInternal);
+export default MapOpenLayers;

src/components/Modal.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
 import classnames from 'classnames';
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-
-type ModalProps = {
+type ModalInternalProps = PropsWithChildren & {
   "data-wd-key"?: string
   isOpen: boolean
   title: string
@@ -12,15 +12,15 @@ type ModalProps = {
   underlayClickExits?: boolean
   underlayProps?: any
   className?: string
-};
+} & WithTranslation;
 
 
-export default class Modal extends React.Component<ModalProps> {
+class ModalInternal extends React.Component<ModalInternalProps> {
   static defaultProps = {
     underlayClickExits: true
   }
 
-  // See <https://github.com/maputnik/editor/issues/416>
+  // See <https://github.com/maplibre/maputnik/issues/416>
   onClose = () => {
     if (document.activeElement) {
       (document.activeElement as HTMLElement).blur();
@@ -32,6 +32,7 @@ export default class Modal extends React.Component<ModalProps> {
   }
 
   render() {
+    const t = this.props.t;
     if(this.props.isOpen) {
       return <AriaModal
         titleText={this.props.title}
@@ -49,7 +50,7 @@ export default class Modal extends React.Component<ModalProps> {
             <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
             <span className="maputnik-modal-header-space"></span>
             <button className="maputnik-modal-header-toggle"
-              title="Close modal"
+              title={t("Close modal")}
               onClick={this.onClose}
               data-wd-key={this.props["data-wd-key"]+".close-modal"}
             >
@@ -68,3 +69,5 @@ export default class Modal extends React.Component<ModalProps> {
   }
 }
 
+const Modal = withTranslation()(ModalInternal);
+export default Modal;

src/components/ModalAdd.tsx

@@ -7,15 +7,16 @@ import FieldId from './FieldId'
 import FieldSource from './FieldSource'
 import FieldSourceLayer from './FieldSourceLayer'
 import type {LayerSpecification} from 'maplibre-gl'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
-type ModalAddProps = {
+type ModalAddInternalProps = {
   layers: LayerSpecification[]
   onLayersChange(layers: LayerSpecification[]): unknown
   isOpen: boolean
   onOpenToggle(open: boolean): unknown
   // A dict of source id's and the available source layers
   sources: any
-};
+} & WithTranslation;
 
 type ModalAddState = {
   type: LayerSpecification["type"]
@@ -24,7 +25,7 @@ type ModalAddState = {
   'source-layer'?: string
 };
 
-export default class ModalAdd extends React.Component<ModalAddProps, ModalAddState> {
+class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddState> {
   addLayer = () => {
     const changedLayers = this.props.layers.slice(0)
     const layer: ModalAddState = {
@@ -45,7 +46,7 @@ export default class ModalAdd extends React.Component<ModalAddProps, ModalAddSta
     this.props.onOpenToggle(false)
   }
 
-  constructor(props: ModalAddProps) {
+  constructor(props: ModalAddInternalProps) {
     super(props)
     const state: ModalAddState = {
       type: 'fill',
@@ -54,12 +55,12 @@ export default class ModalAdd extends React.Component<ModalAddProps, ModalAddSta
 
     if(props.sources.length > 0) {
       state.source = Object.keys(this.props.sources)[0];
-      state['source-layer'] = this.props.sources[state.source as keyof ModalAddProps["sources"]][0]
+      state['source-layer'] = this.props.sources[state.source as keyof ModalAddInternalProps["sources"]][0]
     }
     this.state = state;
   }
 
-  componentDidUpdate(_prevProps: ModalAddProps, prevState: ModalAddState) {
+  componentDidUpdate(_prevProps: ModalAddInternalProps, prevState: ModalAddState) {
     // Check if source is valid for new type
     const oldType = prevState.type;
     const newType = this.state.type;
@@ -125,13 +126,14 @@ export default class ModalAdd extends React.Component<ModalAddProps, ModalAddSta
 
 
   render() {
+    const t = this.props.t;
     const sources = this.getSources(this.state.type);
     const layers = this.getLayersForSource(this.state.source!);
 
     return <Modal
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'Add Layer'}
+      title={t('Add Layer')}
       data-wd-key="modal:add-layer"
       className="maputnik-add-modal"
     >
@@ -169,10 +171,12 @@ export default class ModalAdd extends React.Component<ModalAddProps, ModalAddSta
           onClick={this.addLayer}
           data-wd-key="add-layer"
         >
-        Add Layer
+          {t("Add Layer")}
         </InputButton>
       </div>
     </Modal>
   }
 }
 
+const ModalAdd = withTranslation()(ModalAddInternal);
+export default ModalAdd;

src/components/ModalDebug.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 import Modal from './Modal'
 
 
-type ModalDebugProps = {
+type ModalDebugInternalProps = {
   isOpen: boolean
   renderer: string
   onChangeMaplibreGlDebug(key: string, checked: boolean): unknown
@@ -18,12 +19,12 @@ type ModalDebugProps = {
       lat: number
     }
   }
-};
+} & WithTranslation;
 
 
-export default class ModalDebug extends React.Component<ModalDebugProps> {
+class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
   render() {
-    const {mapView} = this.props;
+    const {t, mapView} = this.props;
 
     const osmZoom = Math.round(mapView.zoom)+1;
     const osmLon = +(mapView.center.lng).toFixed(5);
@@ -33,10 +34,10 @@ export default class ModalDebug extends React.Component<ModalDebugProps> {
       data-wd-key="modal:debug"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'Debug'}
+      title={t('Debug')}
     >
       <section className="maputnik-modal-section maputnik-modal-shortcuts">
-        <h1>Options</h1>
+        <h1>{t("Options")}</h1>
         {this.props.renderer === 'mlgljs' &&
           <ul>
             {Object.entries(this.props.maplibreGlDebugOptions!).map(([key, val]) => {
@@ -63,16 +64,20 @@ export default class ModalDebug extends React.Component<ModalDebugProps> {
       <section className="maputnik-modal-section">
         <h1>Links</h1>
         <p>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
-          >
-            Open in OSM
-          </a> &mdash; Opens the current view on openstreetmap.org
+          <Trans t={t}>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
+            >
+              Open in OSM
+            </a> &mdash; Opens the current view on openstreetmap.org
+          </Trans>
         </p>
       </section>
     </Modal>
   }
 }
 
+const ModalDebug = withTranslation()(ModalDebugInternal);
+export default ModalDebug;

src/components/ModalExport.tsx

@@ -4,7 +4,8 @@ import {saveAs} from 'file-saver'
 import {version} from 'maplibre-gl/package.json'
 import {format} from '@maplibre/maplibre-gl-style-spec'
 import type {StyleSpecification} from 'maplibre-gl'
-import {MdFileDownload} from 'react-icons/md'
+import {MdMap, MdSave} from 'react-icons/md'
+import {WithTranslation, withTranslation} from 'react-i18next';
 
 import FieldString from './FieldString'
 import InputButton from './InputButton'
@@ -14,19 +15,22 @@ import fieldSpecAdditional from '../libs/field-spec-additional'
 
 
 const MAPLIBRE_GL_VERSION = version;
+const showSaveFilePickerAvailable = typeof window.showSaveFilePicker === "function";
 
 
-type ModalExportProps = {
+type ModalExportInternalProps = {
   mapStyle: StyleSpecification & { id: string }
   onStyleChanged(...args: unknown[]): unknown
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
-};
+  onSetFileHandle(fileHandle: FileSystemFileHandle | null): unknown
+  fileHandle: FileSystemFileHandle | null
+} & WithTranslation;
 
 
-export default class ModalExport extends React.Component<ModalExportProps> {
+class ModalExportInternal extends React.Component<ModalExportInternalProps> {
 
-  tokenizedStyle () {
+  tokenizedStyle() {
     return format(
       style.stripAccessTokens(
         style.replaceAccessTokens(this.props.mapStyle)
@@ -34,8 +38,8 @@ export default class ModalExport extends React.Component<ModalExportProps> {
     );
   }
 
-  exportName () {
-    if(this.props.mapStyle.name) {
+  exportName() {
+    if (this.props.mapStyle.name) {
       return Slugify(this.props.mapStyle.name, {
         replacement: '_',
         remove: /[*\-+~.()'"!:]/g,
@@ -46,9 +50,9 @@ export default class ModalExport extends React.Component<ModalExportProps> {
     }
   }
 
-  downloadHtml() {
+  createHtml() {
     const tokenStyle = this.tokenizedStyle();
-    const htmlTitle = this.props.mapStyle.name || "Map";
+    const htmlTitle = this.props.mapStyle.name || this.props.t("Map");
     const html = `<!DOCTYPE html>
 <html>
 <head>
@@ -80,11 +84,58 @@ export default class ModalExport extends React.Component<ModalExportProps> {
     saveAs(blob, exportName + ".html");
   }
 
-  downloadStyle() {
+  async saveStyle() {
     const tokenStyle = this.tokenizedStyle();
-    const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
-    const exportName = this.exportName();
-    saveAs(blob, exportName + ".json");
+
+    // it is not guaranteed that the File System Access API is available on all
+    // browsers. If the function is not available, a fallback behavior is used.
+    if (!showSaveFilePickerAvailable) {
+      const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
+      const exportName = this.exportName();
+      saveAs(blob, exportName + ".json");
+      return;
+    }
+
+    let fileHandle = this.props.fileHandle;
+    if (fileHandle == null) {
+      fileHandle = await this.createFileHandle();
+      this.props.onSetFileHandle(fileHandle)
+      if (fileHandle == null) return;
+    }
+
+    const writable = await fileHandle.createWritable();
+    await writable.write(tokenStyle);
+    await writable.close();
+    this.props.onOpenToggle();
+  }
+
+  async saveStyleAs() {
+    const tokenStyle = this.tokenizedStyle();
+
+    const fileHandle = await this.createFileHandle();
+    this.props.onSetFileHandle(fileHandle)
+    if (fileHandle == null) return;
+
+    const writable = await fileHandle.createWritable();
+    await writable.write(tokenStyle);
+    await writable.close();
+    this.props.onOpenToggle();
+  }
+
+  async createFileHandle(): Promise<FileSystemFileHandle | null> {
+    const pickerOpts: SaveFilePickerOptions = {
+      types: [
+        {
+          description: "json",
+          accept: {"application/json": [".json"]},
+        },
+      ],
+      suggestedName: this.exportName(),
+    };
+
+    const fileHandle = await window.showSaveFilePicker(pickerOpts) as FileSystemFileHandle;
+    this.props.onSetFileHandle(fileHandle)
+    return fileHandle;
   }
 
   changeMetadataProperty(property: string, value: any) {
@@ -100,48 +151,58 @@ export default class ModalExport extends React.Component<ModalExportProps> {
 
 
   render() {
+    const t = this.props.t;
+    const fsa = fieldSpecAdditional(t);
     return <Modal
       data-wd-key="modal:export"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'Export Style'}
+      title={t('Save Style')}
       className="maputnik-export-modal"
     >
 
       <section className="maputnik-modal-section">
-        <h1>Download Style</h1>
+        <h1>{t("Save Style")}</h1>
         <p>
-          Download a JSON style to your computer.
+          {t("Save the JSON style to your computer.")}
         </p>
 
         <div>
           <FieldString
-            label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
-            fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+            label={fsa.maputnik.maptiler_access_token.label}
+            fieldSpec={fsa.maputnik.maptiler_access_token}
             value={(this.props.mapStyle.metadata || {} as any)['maputnik:openmaptiles_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
           />
           <FieldString
-            label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
-            fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+            label={fsa.maputnik.thunderforest_access_token.label}
+            fieldSpec={fsa.maputnik.thunderforest_access_token}
             value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
           />
+          <FieldString
+            label={fsa.maputnik.stadia_access_token.label}
+            fieldSpec={fsa.maputnik.stadia_access_token}
+            value={(this.props.mapStyle.metadata || {} as any)['maputnik:stadia_access_token']}
+            onChange={this.changeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
+          />
         </div>
 
         <div className="maputnik-modal-export-buttons">
-          <InputButton
-            onClick={this.downloadStyle.bind(this)}
-          >
-            <MdFileDownload />
-            Download Style
+          <InputButton onClick={this.saveStyle.bind(this)}>
+            <MdSave/>
+            {t("Save")}
           </InputButton>
+          {showSaveFilePickerAvailable && (
+            <InputButton onClick={this.saveStyleAs.bind(this)}>
+              <MdSave/>
+              {t("Save as")}
+            </InputButton>
+          )}
 
-          <InputButton
-            onClick={this.downloadHtml.bind(this)}
-          >
-            <MdFileDownload />
-            Download HTML
+          <InputButton onClick={this.createHtml.bind(this)}>
+            <MdMap/>
+            {t("Create HTML")}
           </InputButton>
         </div>
       </section>
@@ -150,3 +211,5 @@ export default class ModalExport extends React.Component<ModalExportProps> {
   }
 }
 
+const ModalExport = withTranslation()(ModalExportInternal);
+export default ModalExport;

src/components/ModalLoading.tsx

@@ -2,23 +2,25 @@ import React from 'react'
 
 import InputButton from './InputButton'
 import Modal from './Modal'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 
-type ModalLoadingProps = {
+type ModalLoadingInternalProps = {
   isOpen: boolean
   onCancel(...args: unknown[]): unknown
   title: string
   message: React.ReactNode
-};
+} & WithTranslation;
 
 
-export default class ModalLoading extends React.Component<ModalLoadingProps> {
+class ModalLoadingInternal extends React.Component<ModalLoadingInternalProps> {
   underlayOnClick(e: Event) {
     // This stops click events falling through to underlying modals.
     e.stopPropagation();
   }
 
   render() {
+    const t = this.props.t;
     return <Modal
       data-wd-key="modal:loading"
       isOpen={this.props.isOpen}
@@ -35,10 +37,12 @@ export default class ModalLoading extends React.Component<ModalLoadingProps> {
       </p>
       <p className="maputnik-dialog__buttons">
         <InputButton onClick={(e) => this.props.onCancel(e)}>
-          Cancel
+          {t("Cancel")}
         </InputButton>
       </p>
     </Modal>
   }
 }
 
+const ModalLoading = withTranslation()(ModalLoadingInternal);
+export default ModalLoading;

src/components/ModalOpen.tsx

@@ -2,6 +2,7 @@ import React, { FormEvent } from 'react'
 import {MdFileUpload} from 'react-icons/md'
 import {MdAddCircleOutline} from 'react-icons/md'
 import FileReaderInput, { Result } from 'react-file-reader-input'
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
 import ModalLoading from './ModalLoading'
 import Modal from './Modal'
@@ -42,11 +43,12 @@ class PublicStyle extends React.Component<PublicStyleProps> {
   }
 }
 
-type ModalOpenProps = {
+type ModalOpenInternalProps = {
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
   onStyleOpen(...args: unknown[]): unknown
-};
+  fileHandle: FileSystemFileHandle | null
+} & WithTranslation;
 
 type ModalOpenState = {
   styleUrl: string
@@ -55,8 +57,8 @@ type ModalOpenState = {
   activeRequestUrl?: string | null
 };
 
-export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpenState> {
-  constructor(props: ModalOpenProps) {
+class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpenState> {
+  constructor(props: ModalOpenInternalProps) {
     super(props);
     this.state = {
       styleUrl: ""
@@ -134,10 +136,44 @@ export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpen
     this.onStyleSelect(this.state.styleUrl);
   }
 
-  onUpload = (_: any, files: Result[]) => {
+  onOpenFile = async () => {
+    this.clearError();
+
+    const pickerOpts: OpenFilePickerOptions = {
+      types: [
+        {
+          description: "json",
+          accept: { "application/json": [".json"] },
+        },
+      ],
+      multiple: false,
+    };
+
+    const [fileHandle] = await window.showOpenFilePicker(pickerOpts) as Array<FileSystemFileHandle>;
+    const file = await fileHandle.getFile();
+    const content = await file.text();
+
+    let mapStyle;
+    try {
+      mapStyle = JSON.parse(content)
+    } catch (err) {
+      this.setState({
+        error: (err as Error).toString()
+      });
+      return;
+    }
+    mapStyle = style.ensureStyleValidity(mapStyle)
+
+    this.props.onStyleOpen(mapStyle, fileHandle);
+    this.onOpenToggle();
+    return file;
+  }
+
+  // it is not guaranteed that the File System Access API is available on all
+  // browsers. If the function is not available, a fallback behavior is used.
+  onFileChanged = async (_: any, files: Result[]) => {
     const [, file] = files[0];
     const reader = new FileReader();
-
     this.clearError();
 
     reader.readAsText(file, "UTF-8");
@@ -174,6 +210,7 @@ export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpen
   }
 
   render() {
+    const t = this.props.t;
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
         key={style.id}
@@ -194,35 +231,46 @@ export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpen
       );
     }
 
-    return  (
+    return (
       <div>
         <Modal
           data-wd-key="modal:open"
           isOpen={this.props.isOpen}
           onOpenToggle={() => this.onOpenToggle()}
-          title={'Open Style'}
+          title={t('Open Style')}
         >
           {errorElement}
           <section className="maputnik-modal-section">
-            <h1>Upload Style</h1>
-            <p>Upload a JSON style from your computer.</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex={-1} aria-label="Style file">
-              <InputButton className="maputnik-upload-button"><MdFileUpload /> Upload</InputButton>
-            </FileReaderInput>
+            <h1>{t("Open local Style")}</h1>
+            <p>{t("Open a local JSON style from your computer.")}</p>
+            <div>
+              {typeof window.showOpenFilePicker === "function" ? (
+                <InputButton
+                  className="maputnik-big-button"
+                  onClick={this.onOpenFile}><MdFileUpload/> {t("Open Style")}
+                </InputButton>
+              ) : (
+                <FileReaderInput onChange={this.onFileChanged} tabIndex={-1} aria-label={t("Open Style")}>
+                  <InputButton className="maputnik-upload-button"><MdFileUpload /> {t("Open Style")}</InputButton>
+                </FileReaderInput>
+              )}
+            </div>
           </section>
 
           <section className="maputnik-modal-section">
             <form onSubmit={this.onSubmitUrl}>
-              <h1>Load from URL</h1>
+              <h1>{t("Load from URL")}</h1>
               <p>
-                Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
+                <Trans t={t}>
+                  Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
+                </Trans>
               </p>
               <InputUrl
-                aria-label="Style URL"
+                aria-label={t("Style URL")}
                 data-wd-key="modal:open.url.input"
                 type="text"
                 className="maputnik-input"
-                default="Enter URL..."
+                default={t("Enter URL...")}
                 value={this.state.styleUrl}
                 onInput={this.onChangeUrl}
                 onChange={this.onChangeUrl}
@@ -239,9 +287,9 @@ export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpen
           </section>
 
           <section className="maputnik-modal-section maputnik-modal-section--shrink">
-            <h1>Gallery Styles</h1>
+            <h1>{t("Gallery Styles")}</h1>
             <p>
-              Open one of the publicly available styles to start from.
+              {t("Open one of the publicly available styles to start from.")}
             </p>
             <div className="maputnik-style-gallery-container">
               {styleOptions}
@@ -251,12 +299,14 @@ export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpen
 
         <ModalLoading
           isOpen={!!this.state.activeRequest}
-          title={'Loading style'}
+          title={t('Loading style')}
           onCancel={(e: Event) => this.onCancelActiveRequest(e)}
-          message={"Loading: "+this.state.activeRequestUrl}
+          message={t("Loading: {{requestUrl}}", { requestUrl: this.state.activeRequestUrl })}
         />
       </div>
     )
   }
 }
 
+const ModalOpen = withTranslation()(ModalOpenInternal);
+export default ModalOpen;

src/components/ModalSettings.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {latest} from '@maplibre/maplibre-gl-style-spec'
-import type {LightSpecification, StyleSpecification, TransitionSpecification} from 'maplibre-gl'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import FieldArray from './FieldArray'
 import FieldNumber from './FieldNumber'
@@ -12,15 +13,15 @@ import FieldColor from './FieldColor'
 import Modal from './Modal'
 import fieldSpecAdditional from '../libs/field-spec-additional'
 
-type ModalSettingsProps = {
+type ModalSettingsInternalProps = {
   mapStyle: StyleSpecification
   onStyleChanged(...args: unknown[]): unknown
   onChangeMetadataProperty(...args: unknown[]): unknown
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
-export default class ModalSettings extends React.Component<ModalSettingsProps> {
+class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps> {
   changeTransitionProperty(property: keyof TransitionSpecification, value: number | undefined) {
     const transition = {
       ...this.props.mapStyle.transition,
@@ -58,6 +59,25 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
     });
   }
 
+  changeTerrainProperty(property: keyof TerrainSpecification, value: any) {
+    const terrain = {
+      ...this.props.mapStyle.terrain,
+    }
+
+    if (value === undefined) {
+      delete terrain[property];
+    }
+    else {
+      // @ts-ignore
+      terrain[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      terrain,
+    });
+  }
+
   changeStyleProperty(property: keyof StyleSpecification | "owner", value: any) {
     const changedStyle = {
       ...this.props.mapStyle,
@@ -76,87 +96,94 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
 
   render() {
     const metadata = this.props.mapStyle.metadata || {} as any;
-    const {onChangeMetadataProperty, mapStyle} = this.props;
-    const inputProps = { }
+    const {t, onChangeMetadataProperty, mapStyle} = this.props;
+    const fsa = fieldSpecAdditional(t);
 
     const light = this.props.mapStyle.light || {};
     const transition = this.props.mapStyle.transition || {};
+    const terrain = this.props.mapStyle.terrain || {} as TerrainSpecification;
 
     return <Modal
       data-wd-key="modal:settings"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'Style Settings'}
+      title={t('Style Settings')}
     >
       <div className="modal:settings">
-        <FieldString {...inputProps}
-          label={"Name"}
+        <FieldString
+          label={t("Name")}
           fieldSpec={latest.$root.name}
           data-wd-key="modal:settings.name"
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
-        <FieldString {...inputProps}
-          label={"Owner"}
-          fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}
+        <FieldString
+          label={t("Owner")}
+          fieldSpec={{doc: t("Owner ID of the style. Used by Mapbox or future style APIs.")}}
           data-wd-key="modal:settings.owner"
           value={(this.props.mapStyle as any).owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
-        <FieldUrl {...inputProps}
+        <FieldUrl
           fieldSpec={latest.$root.sprite}
-          label="Sprite URL"
+          label={t("Sprite URL")}
           data-wd-key="modal:settings.sprite"
           value={this.props.mapStyle.sprite as string}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
 
-        <FieldUrl {...inputProps}
-          label="Glyphs URL"
+        <FieldUrl
+          label={t("Glyphs URL")}
           fieldSpec={latest.$root.glyphs}
           data-wd-key="modal:settings.glyphs"
           value={this.props.mapStyle.glyphs as string}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
 
-        <FieldString {...inputProps}
-          label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
-          fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+        <FieldString
+          label={fsa.maputnik.maptiler_access_token.label}
+          fieldSpec={fsa.maputnik.maptiler_access_token}
           data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
           value={metadata['maputnik:openmaptiles_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
 
-        <FieldString {...inputProps}
-          label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
-          fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+        <FieldString
+          label={fsa.maputnik.thunderforest_access_token.label}
+          fieldSpec={fsa.maputnik.thunderforest_access_token}
           data-wd-key="modal:settings.maputnik:thunderforest_access_token"
           value={metadata['maputnik:thunderforest_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
         />
 
+        <FieldString
+          label={fsa.maputnik.stadia_access_token.label}
+          fieldSpec={fsa.maputnik.stadia_access_token}
+          data-wd-key="modal:settings.maputnik:stadia_access_token"
+          value={metadata['maputnik:stadia_access_token']}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
+        />
+
         <FieldArray
-          label={"Center"}
+          label={t("Center")}
           fieldSpec={latest.$root.center}
           length={2}
           type="number"
           value={mapStyle.center || []}
-          default={latest.$root.center.default || [0, 0]}
+          default={[0, 0]}
           onChange={this.changeStyleProperty.bind(this, "center")}
         />
 
         <FieldNumber
-          {...inputProps}
-          label={"Zoom"}
+          label={t("Zoom")}
           fieldSpec={latest.$root.zoom}
           value={mapStyle.zoom}
-          default={latest.$root.zoom.default || 0}
+          default={0}
           onChange={this.changeStyleProperty.bind(this, "zoom")}
         />
 
         <FieldNumber
-          {...inputProps}
-          label={"Bearing"}
+          label={t("Bearing")}
           fieldSpec={latest.$root.bearing}
           value={mapStyle.bearing}
           default={latest.$root.bearing.default}
@@ -164,8 +191,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldNumber
-          {...inputProps}
-          label={"Pitch"}
+          label={t("Pitch")}
           fieldSpec={latest.$root.pitch}
           value={mapStyle.pitch}
           default={latest.$root.pitch.default}
@@ -173,8 +199,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldEnum
-          {...inputProps}
-          label={"Light anchor"}
+          label={t("Light anchor")}
           fieldSpec={latest.light.anchor}
           name="light-anchor"
           value={light.anchor as string}
@@ -184,8 +209,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldColor
-          {...inputProps}
-          label={"Light color"}
+          label={t("Light color")}
           fieldSpec={latest.light.color}
           value={light.color as string}
           default={latest.light.color.default}
@@ -193,8 +217,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldNumber
-          {...inputProps}
-          label={"Light intensity"}
+          label={t("Light intensity")}
           fieldSpec={latest.light.intensity}
           value={light.intensity as number}
           default={latest.light.intensity.default}
@@ -202,8 +225,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldArray
-          {...inputProps}
-          label={"Light position"}
+          label={t("Light position")}
           fieldSpec={latest.light.position}
           type="number"
           length={latest.light.position.length}
@@ -212,9 +234,24 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
           onChange={this.changeLightProperty.bind(this, "position")}
         />
 
+        <FieldString
+          label={t("Terrain source")}
+          fieldSpec={latest.terrain.source}
+          data-wd-key="modal:settings.maputnik:terrain_source"
+          value={terrain.source}
+          onChange={this.changeTerrainProperty.bind(this, "source")}
+        />
+
         <FieldNumber
-          {...inputProps}
-          label={"Transition delay"}
+          label={t("Terrain exaggeration")}
+          fieldSpec={latest.terrain.exaggeration}
+          value={terrain.exaggeration}
+          default={latest.terrain.exaggeration.default}
+          onChange={this.changeTerrainProperty.bind(this, "exaggeration")}
+        />
+
+        <FieldNumber
+          label={t("Transition delay")}
           fieldSpec={latest.transition.delay}
           value={transition.delay}
           default={latest.transition.delay.default}
@@ -222,21 +259,20 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldNumber
-          {...inputProps}
-          label={"Transition duration"}
+          label={t("Transition duration")}
           fieldSpec={latest.transition.duration}
           value={transition.duration}
           default={latest.transition.duration.default}
           onChange={this.changeTransitionProperty.bind(this, "duration")}
         />
 
-        <FieldSelect {...inputProps}
-          label={fieldSpecAdditional.maputnik.style_renderer.label}
-          fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
+        <FieldSelect
+          label={fsa.maputnik.style_renderer.label}
+          fieldSpec={fsa.maputnik.style_renderer}
           data-wd-key="modal:settings.maputnik:renderer"
           options={[
             ['mlgljs', 'MapLibreGL JS'],
-            ['ol', 'Open Layers (experimental)'],
+            ['ol', t('Open Layers (experimental)')],
           ]}
           value={metadata['maputnik:renderer'] || 'mlgljs'}
           onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
@@ -246,3 +282,5 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
   }
 }
 
+const ModalSettings = withTranslation()(ModalSettingsInternal)
+export default ModalSettings;

src/components/ModalShortcuts.tsx

@@ -1,48 +1,50 @@
 import React from 'react'
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
 import Modal from './Modal'
 
 
-type ModalShortcutsProps = {
+type ModalShortcutsInternalProps = {
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 
-export default class ModalShortcuts extends React.Component<ModalShortcutsProps> {
+class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps> {
   render() {
+    const t = this.props.t;
     const help = [
       {
         key: <kbd>?</kbd>,
-        text: "Shortcuts menu"
+        text: t("Shortcuts menu")
       },
       {
         key: <kbd>o</kbd>,
-        text: "Open modal"
+        text: t("Open modal")
       },
       {
         key: <kbd>e</kbd>,
-        text: "Export modal"
+        text: t("Export modal")
       },
       {
         key: <kbd>d</kbd>,
-        text: "Data Sources modal"
+        text: t("Data Sources modal")
       },
       {
         key: <kbd>s</kbd>,
-        text: "Style Settings modal"
+        text: t("Style Settings modal")
       },
       {
         key: <kbd>i</kbd>,
-        text: "Toggle inspect"
+        text: t("Toggle inspect")
       },
       {
         key: <kbd>m</kbd>,
-        text: "Focus map"
+        text: t("Focus map")
       },
       {
         key: <kbd>!</kbd>,
-        text: "Debug modal"
+        text: t("Debug modal")
       },
     ]
 
@@ -50,51 +52,51 @@ export default class ModalShortcuts extends React.Component<ModalShortcutsProps>
     const mapShortcuts = [
       {
         key: <kbd>+</kbd>,
-        text: "Increase the zoom level by 1.",
+        text: t("Increase the zoom level by 1.",)
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>+</kbd></>,
-        text: "Increase the zoom level by 2.",
+        text: t("Increase the zoom level by 2.",)
       },
       {
         key: <kbd>-</kbd>,
-        text: "Decrease the zoom level by 1.",
+        text: t("Decrease the zoom level by 1.",)
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>-</kbd></>,
-        text: "Decrease the zoom level by 2.",
+        text: t("Decrease the zoom level by 2.",)
       },
       {
         key: <kbd>Up</kbd>,
-        text: "Pan up by 100 pixels.",
+        text: t("Pan up by 100 pixels.",)
       },
       {
         key: <kbd>Down</kbd>,
-        text: "Pan down by 100 pixels.",
+        text: t("Pan down by 100 pixels.",)
       },
       {
         key: <kbd>Left</kbd>,
-        text: "Pan left by 100 pixels.",
+        text: t("Pan left by 100 pixels.",)
       },
       {
         key: <kbd>Right</kbd>,
-        text: "Pan right by 100 pixels.",
+        text: t("Pan right by 100 pixels.",)
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>Right</kbd></>,
-        text: "Increase the rotation by 15 degrees.",
+        text: t("Increase the rotation by 15 degrees.",)
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>Left</kbd></>,
-        text: "Decrease the rotation by 15 degrees."
+        text: t("Decrease the rotation by 15 degrees.")
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>Up</kbd></>,
-        text: "Increase the pitch by 10 degrees."
+        text: t("Increase the pitch by 10 degrees.")
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>Down</kbd></>,
-        text: "Decrease the pitch by 10 degrees."
+        text: t("Decrease the pitch by 10 degrees.")
       },
     ]
 
@@ -103,11 +105,13 @@ export default class ModalShortcuts extends React.Component<ModalShortcutsProps>
       data-wd-key="modal:shortcuts"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'Shortcuts'}
+      title={t('Shortcuts')}
     >
       <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <p>
-          Press <code>ESC</code> to lose focus of any active elements, then press one of:
+          <Trans t={t}>
+            Press <code>ESC</code> to lose focus of any active elements, then press one of:
+          </Trans>
         </p>
         <dl>
           {help.map((item, idx) => {
@@ -117,7 +121,7 @@ export default class ModalShortcuts extends React.Component<ModalShortcutsProps>
             </div>
           })}
         </dl>
-        <p>If the Map is in focused you can use the following shortcuts</p>
+        <p>{t("If the Map is in focused you can use the following shortcuts")}</p>
         <ul>
           {mapShortcuts.map((item, idx) => {
             return <li key={idx}>
@@ -130,3 +134,5 @@ export default class ModalShortcuts extends React.Component<ModalShortcutsProps>
   }
 }
 
+const ModalShortcuts = withTranslation()(ModalShortcutsInternal);
+export default ModalShortcuts;

src/components/ModalSources.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, StyleSpecification, VectorSourceSpecification} from 'maplibre-gl'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import Modal from './Modal'
 import InputButton from './InputButton'
@@ -41,7 +42,7 @@ class PublicSource extends React.Component<PublicSourceProps> {
 
 function editorMode(source: SourceSpecification) {
   if(source.type === 'raster') {
-    if(source.tiles) return 'tilexyz_raster'
+    if(source.tiles) return 'tile_raster'
     return 'tilejson_raster'
   }
   if(source.type === 'raster-dem') {
@@ -49,7 +50,8 @@ function editorMode(source: SourceSpecification) {
     return 'tilejson_raster-dem'
   }
   if(source.type === 'vector') {
-    if(source.tiles) return 'tilexyz_vector'
+    if(source.tiles) return 'tile_vector'
+    if(source.url && source.url.startsWith("pmtiles://")) return 'pmtiles_vector'
     return 'tilejson_vector'
   }
   if(source.type === 'geojson') {
@@ -74,16 +76,17 @@ type ActiveModalSourcesTypeEditorProps = {
   source: SourceSpecification
   onDelete(...args: unknown[]): unknown
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTypeEditorProps> {
   render() {
+    const t = this.props.t;
     return <div className="maputnik-active-source-type-editor">
       <div className="maputnik-active-source-type-editor-header">
         <span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
         <span className="maputnik-space" />
         <InputButton
-          aria-label={`Remove '${this.props.sourceId}' source`}
+          aria-label={t("Remove '{{sourceId}}' source", {sourceId: this.props.sourceId})}
           className="maputnik-active-source-type-editor-header-delete"
           onClick={()=> this.props.onDelete(this.props.sourceId)}
           style={{backgroundColor: 'transparent'}}
@@ -104,7 +107,7 @@ class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTyp
 
 type AddSourceProps = {
   onAdd(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 type AddSourceState = {
   mode: EditorMode
@@ -127,6 +130,10 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
     const {protocol} = window.location;
 
     switch(mode) {
+    case 'pmtiles_vector': return {
+      type: 'vector',
+      url: `${protocol}//localhost:3000/file.pmtiles`
+    }
     case 'geojson_url': return {
       type: 'geojson',
       data: `${protocol}//localhost:3000/geojson.json`
@@ -134,27 +141,30 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
     case 'geojson_json': return {
       type: 'geojson',
       cluster: (source as GeoJSONSourceSpecification).cluster || false,
-      data: {}
+      data: ''
     }
     case 'tilejson_vector': return {
       type: 'vector',
       url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
     }
-    case 'tilexyz_vector': return {
+    case 'tile_vector': return {
       type: 'vector',
       tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
       minzoom: (source as VectorSourceSpecification).minzoom || 0,
-      maxzoom: (source as VectorSourceSpecification).maxzoom || 14
+      maxzoom: (source as VectorSourceSpecification).maxzoom || 14,
+      scheme: (source as VectorSourceSpecification).scheme || 'xyz'
     }
     case 'tilejson_raster': return {
       type: 'raster',
       url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
     }
-    case 'tilexyz_raster': return {
+    case 'tile_raster': return {
       type: 'raster',
-      tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
       minzoom: (source as RasterSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterSourceSpecification).maxzoom || 14
+      maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
+      scheme: (source as RasterSourceSpecification).scheme || 'xyz',
+      tileSize: (source as RasterSourceSpecification).tileSize || 512,
     }
     case 'tilejson_raster-dem': return {
       type: 'raster-dem',
@@ -162,9 +172,10 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
     }
     case 'tilexyz_raster-dem': return {
       type: 'raster-dem',
-      tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
       minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
+      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14,
+      tileSize: (source as RasterDEMSourceSpecification).tileSize || 512
     }
     case 'image': return {
       type: 'image',
@@ -202,6 +213,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
   }
 
   render() {
+    const t = this.props.t;
     // Kind of a hack because the type changes, however maputnik has 1..n
     // options per type, for example
     //
@@ -215,28 +227,31 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
 
     return <div className="maputnik-add-source">
       <FieldString
-        label={"Source ID"}
-        fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}
+        label={t("Source ID")}
+        fieldSpec={{doc: t("Unique ID that identifies the source and is used in the layer to reference the source.")}}
         value={this.state.sourceId}
         onChange={(v: string) => this.setState({ sourceId: v})}
+        data-wd-key="modal:sources.add.source_id"
       />
       <FieldSelect
-        label={"Source Type"}
+        label={t("Source Type")}
         fieldSpec={sourceTypeFieldSpec}
         options={[
-          ['geojson_json', 'GeoJSON (JSON)'],
-          ['geojson_url', 'GeoJSON (URL)'],
-          ['tilejson_vector', 'Vector (TileJSON URL)'],
-          ['tilexyz_vector', 'Vector (XYZ URLs)'],
-          ['tilejson_raster', 'Raster (TileJSON URL)'],
-          ['tilexyz_raster', 'Raster (XYZ URL)'],
-          ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
-          ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
-          ['image', 'Image'],
-          ['video', 'Video'],
+          ['geojson_json', t('GeoJSON (JSON)')],
+          ['geojson_url', t('GeoJSON (URL)')],
+          ['tilejson_vector', t('Vector (TileJSON URL)')],
+          ['tile_vector', t('Vector (Tile URLs)')],
+          ['tilejson_raster', t('Raster (TileJSON URL)')],
+          ['tile_raster', t('Raster (Tile URLs)')],
+          ['tilejson_raster-dem', t('Raster DEM (TileJSON URL)')],
+          ['tilexyz_raster-dem', t('Raster DEM (XYZ URLs)')],
+          ['pmtiles_vector', t('Vector (PMTiles)')],
+          ['image', t('Image')],
+          ['video', t('Video')],
         ]}
         onChange={mode => this.setState({mode: mode as EditorMode, source: this.defaultSource(mode as EditorMode)})}
         value={this.state.mode as string}
+        data-wd-key="modal:sources.add.source_type"
       />
       <ModalSourcesTypeEditor
         onChange={this.onChangeSource}
@@ -246,21 +261,22 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
       <InputButton
         className="maputnik-add-source-button"
         onClick={this.onAdd}
+        data-wd-key="modal:sources.add.add_source"
       >
-        Add Source
+        {t("Add Source")}
       </InputButton>
     </div>
   }
 }
 
-type ModalSourcesProps = {
+type ModalSourcesInternalProps = {
   mapStyle: StyleSpecification
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
   onStyleChanged(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
-export default class ModalSources extends React.Component<ModalSourcesProps> {
+class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
   stripTitle(source: SourceSpecification & {title?: string}): SourceSpecification {
     const strippedSource = {...source}
     delete strippedSource['title']
@@ -268,7 +284,8 @@ export default class ModalSources extends React.Component<ModalSourcesProps> {
   }
 
   render() {
-    const mapStyle = this.props.mapStyle
+    const {t, mapStyle} = this.props;
+    const i18nProps = {t, i18n: this.props.i18n, tReady: this.props.tReady};
     const activeSources = Object.keys(mapStyle.sources).map(sourceId => {
       const source = mapStyle.sources[sourceId]
       return <ActiveModalSourcesTypeEditor
@@ -277,6 +294,7 @@ export default class ModalSources extends React.Component<ModalSourcesProps> {
         source={source}
         onChange={(src: SourceSpecification) => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
         onDelete={() => this.props.onStyleChanged(deleteSource(mapStyle, sourceId))}
+        {...i18nProps}
       />
     })
 
@@ -295,17 +313,17 @@ export default class ModalSources extends React.Component<ModalSourcesProps> {
       data-wd-key="modal:sources"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'Sources'}
+      title={t('Sources')}
     >
       <section className="maputnik-modal-section">
-        <h1>Active Sources</h1>
+        <h1>{t("Active Sources")}</h1>
         {activeSources}
       </section>
 
       <section className="maputnik-modal-section">
-        <h1>Choose Public Source</h1>
+        <h1>{t("Choose Public Source")}</h1>
         <p>
-          Add one of the publicly available sources to your style.
+          {t("Add one of the publicly available sources to your style.")}
         </p>
         <div className="maputnik-public-sources" style={{maxWidth: 500}}>
           {tilesetOptions}
@@ -313,13 +331,16 @@ export default class ModalSources extends React.Component<ModalSourcesProps> {
       </section>
 
       <section className="maputnik-modal-section">
-        <h1>Add New Source</h1>
-        <p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
+        <h1>{t("Add New Source")}</h1>
+        <p>{t("Add a new source to your style. You can only choose the source type and id at creation time!")}</p>
         <AddSource
           onAdd={(sourceId: string, source: SourceSpecification) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
+          {...i18nProps}
         />
       </section>
     </Modal>
   }
 }
 
+const ModalSources = withTranslation()(ModalSourcesInternal);
+export default ModalSources;

src/components/ModalSourcesTypeEditor.tsx

@@ -8,8 +8,10 @@ import FieldDynamicArray from './FieldDynamicArray'
 import FieldArray from './FieldArray'
 import FieldJson from './FieldJson'
 import FieldCheckbox from './FieldCheckbox'
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { TFunction } from 'i18next'
 
-export type EditorMode = "video" | "image" | "tilejson_vector" | "tilexyz_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tilexyz_vector" | "geojson_url" | "geojson_json" | null;
+export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
 
 type TileJSONSourceEditorProps = {
   source: {
@@ -17,14 +19,15 @@ type TileJSONSourceEditorProps = {
   }
   onChange(...args: unknown[]): unknown
   children?: React.ReactNode
-};
+} & WithTranslation;
 
 
 class TileJSONSourceEditor extends React.Component<TileJSONSourceEditorProps> {
   render() {
+    const t = this.props.t;
     return <div>
       <FieldUrl
-        label={"TileJSON URL"}
+        label={t("TileJSON URL")}
         fieldSpec={latest.source_vector.url}
         value={this.props.source.url}
         onChange={url => this.props.onChange({
@@ -42,10 +45,11 @@ type TileURLSourceEditorProps = {
     tiles: string[]
     minzoom: number
     maxzoom: number
+    scheme: 'xyz' | 'tms'
   }
   onChange(...args: unknown[]): unknown
   children?: React.ReactNode
-};
+} & WithTranslation;
 
 class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
   changeTileUrls(tiles: string[]) {
@@ -58,7 +62,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
   renderTileUrls() {
     const tiles = this.props.source.tiles || [];
     return <FieldDynamicArray
-      label={"Tile URL"}
+      label={this.props.t("Tile URL")}
       fieldSpec={latest.source_vector.tiles}
       type="url"
       value={tiles}
@@ -67,10 +71,25 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
   }
 
   render() {
+    const t = this.props.t;
     return <div>
       {this.renderTileUrls()}
+      <FieldSelect
+        label={t("Scheme Type")}
+        fieldSpec={latest.source_vector.scheme}
+        options={[
+          ['xyz', 'xyz (Slippy map tilenames scheme)'],
+          ['tms', 'tms (OSGeo spec scheme)'],
+        ]}
+        onChange={scheme => this.props.onChange({
+          ...this.props.source,
+          scheme
+        })}
+        value={this.props.source.scheme}
+        data-wd-key="modal:sources.add.scheme_type"
+      />
       <FieldNumber
-        label={"Min Zoom"}
+        label={t("Min Zoom")}
         fieldSpec={latest.source_vector.minzoom}
         value={this.props.source.minzoom || 0}
         onChange={minzoom => this.props.onChange({
@@ -79,7 +98,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
         })}
       />
       <FieldNumber
-        label={"Max Zoom"}
+        label={t("Max Zoom")}
         fieldSpec={latest.source_vector.maxzoom}
         value={this.props.source.maxzoom || 22}
         onChange={maxzoom => this.props.onChange({
@@ -93,16 +112,24 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
   }
 }
 
+const createCornerLabels: (t: TFunction) => { label: string, key: string }[] = (t) => ([
+  { label: t("Coord top left"), key: "top left" },
+  { label: t("Coord top right"), key: "top right" },
+  { label: t("Coord bottom right"), key: "bottom right" },
+  { label: t("Coord bottom left"), key: "bottom left" },
+]);
+
 type ImageSourceEditorProps = {
   source: {
     coordinates: [number, number][]
     url: string
   }
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
   render() {
+    const t = this.props.t;
     const changeCoord = (idx: number, val: [number, number]) => {
       const coordinates = this.props.source.coordinates.slice(0);
       coordinates[idx] = val;
@@ -115,7 +142,7 @@ class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
 
     return <div>
       <FieldUrl
-        label={"Image URL"}
+        label={t("Image URL")}
         fieldSpec={latest.source_image.url}
         value={this.props.source.url}
         onChange={url => this.props.onChange({
@@ -123,11 +150,11 @@ class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
           url,
         })}
       />
-      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
+      {createCornerLabels(t).map(({label, key}, idx) => {
         return (
           <FieldArray
-            label={`Coord ${label}`}
-            key={label}
+            label={label}
+            key={key}
             length={2}
             type="number"
             value={this.props.source.coordinates[idx]}
@@ -146,10 +173,11 @@ type VideoSourceEditorProps = {
     urls: string[]
   }
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
   render() {
+    const t = this.props.t;
     const changeCoord = (idx: number, val: [number, number]) => {
       const coordinates = this.props.source.coordinates.slice(0);
       coordinates[idx] = val;
@@ -169,18 +197,18 @@ class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
 
     return <div>
       <FieldDynamicArray
-        label={"Video URL"}
+        label={t("Video URL")}
         fieldSpec={latest.source_video.urls}
         type="string"
         value={this.props.source.urls}
         default={[]}
         onChange={changeUrls}
       />
-      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
+      {createCornerLabels(t).map(({label, key}, idx) => {
         return (
           <FieldArray
-            label={`Coord ${label}`}
-            key={label}
+            label={label}
+            key={key}
             length={2}
             type="number"
             value={this.props.source.coordinates[idx]}
@@ -198,12 +226,13 @@ type GeoJSONSourceUrlEditorProps = {
     data: string
   }
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class GeoJSONSourceUrlEditor extends React.Component<GeoJSONSourceUrlEditorProps> {
   render() {
+    const t = this.props.t;
     return <FieldUrl
-      label={"GeoJSON URL"}
+      label={t("GeoJSON URL")}
       fieldSpec={latest.source_geojson.data}
       value={this.props.source.data}
       onChange={data => this.props.onChange({
@@ -220,12 +249,13 @@ type GeoJSONSourceFieldJsonEditorProps = {
     cluster: boolean
   }
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJsonEditorProps> {
   render() {
+    const t = this.props.t;
     return <div>
-      <Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
+      <Block label={t("GeoJSON")} fieldSpec={latest.source_geojson.data}>
         <FieldJson
           layer={this.props.source.data}
           maxHeight={200}
@@ -243,7 +273,7 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
         />
       </Block>
       <FieldCheckbox
-        label={'Cluster'}
+        label={t('Cluster')}
         value={this.props.source.cluster}
         onChange={cluster => {
           this.props.onChange({
@@ -256,29 +286,81 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
   }
 }
 
-type ModalSourcesTypeEditorProps = {
+type PMTilesSourceEditorProps = {
+  source: {
+    url: string
+  }
+  onChange(...args: unknown[]): unknown
+  children?: React.ReactNode
+} & WithTranslation;
+
+class PMTilesSourceEditor extends React.Component<PMTilesSourceEditorProps> {
+  render() {
+    const t = this.props.t;
+    return <div>
+      <FieldUrl
+        label={t("PMTiles URL")}
+        fieldSpec={latest.source_vector.url}
+        value={this.props.source.url}
+        data-wd-key="modal:sources.add.source_url"
+        onChange={(url: string) => this.props.onChange({
+          ...this.props.source,
+          url: url.startsWith("pmtiles://") ? url : `pmtiles://${url}`
+        })}
+      />
+      {this.props.children}
+    </div>
+  }
+}
+
+type ModalSourcesTypeEditorInternalProps = {
   mode: EditorMode
   source: any
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
-export default class ModalSourcesTypeEditor extends React.Component<ModalSourcesTypeEditorProps> {
+class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEditorInternalProps> {
   render() {
+    const t = this.props.t;
     const commonProps = {
       source: this.props.source,
       onChange: this.props.onChange,
-    }
+      t: this.props.t,
+      i18n: this.props.i18n,
+      tReady: this.props.tReady,
+    };
     switch(this.props.mode) {
     case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
     case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...commonProps} />
     case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
-    case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
+    case 'tile_vector': return <TileURLSourceEditor {...commonProps} />
     case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
-    case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
+    case 'tile_raster': return <TileURLSourceEditor {...commonProps}>
+      <FieldNumber
+        label={t("Tile Size")}
+        fieldSpec={latest.source_raster.tileSize}
+        onChange={tileSize => this.props.onChange({
+          ...this.props.source,
+          tileSize: tileSize
+        })}
+        value={this.props.source.tileSize || latest.source_raster.tileSize.default}
+        data-wd-key="modal:sources.add.tile_size"
+      />
+    </TileURLSourceEditor>
     case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
     case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
+      <FieldNumber
+        label={t("Tile Size")}
+        fieldSpec={latest.source_raster_dem.tileSize}
+        onChange={tileSize => this.props.onChange({
+          ...this.props.source,
+          tileSize: tileSize
+        })}
+        value={this.props.source.tileSize || latest.source_raster_dem.tileSize.default}
+        data-wd-key="modal:sources.add.tile_size"
+      />
       <FieldSelect
-        label={"Encoding"}
+        label={t("Encoding")}
         fieldSpec={latest.source_raster_dem.encoding}
         options={Object.keys(latest.source_raster_dem.encoding.values)}
         onChange={encoding => this.props.onChange({
@@ -288,6 +370,7 @@ export default class ModalSourcesTypeEditor extends React.Component<ModalSources
         value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
       />
     </TileURLSourceEditor>
+    case 'pmtiles_vector': return <PMTilesSourceEditor {...commonProps} />
     case 'image': return <ImageSourceEditor {...commonProps} />
     case 'video': return <VideoSourceEditor {...commonProps} />
     default: return null
@@ -295,3 +378,5 @@ export default class ModalSourcesTypeEditor extends React.Component<ModalSources
   }
 }
 
+const ModalSourcesTypeEditor = withTranslation()(ModalSourcesTypeEditorInternal);
+export default ModalSourcesTypeEditor;

src/components/ModalSurvey.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import InputButton from './InputButton'
-import Modal from './Modal'
-
-// @ts-ignore
-import logoImage from 'maputnik-design/logos/logo-color.svg'
-
-type ModalSurveyProps = {
-  isOpen: boolean
-  onOpenToggle(...args: unknown[]): unknown
-};
-
-export default class ModalSurvey extends React.Component<ModalSurveyProps> {
-  onClick = () => {
-    window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
-
-    this.props.onOpenToggle();
-  }
-
-  render() {
-    return <Modal
-      data-wd-key="modal:survey"
-      isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
-      title="Maputnik Survey"
-    >
-      <div className="maputnik-modal-survey">
-        <img src={logoImage} className="maputnik-modal-survey__logo" />
-        <h1>You + Maputnik = Maputnik better for you</h1>
-        <p className="maputnik-modal-survey__description">We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.</p>
-        <InputButton onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</InputButton>
-        <p className="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
-      </div>
-    </Modal>
-  }
-}
-

src/components/SmallError.scss

@@ -1,7 +1,7 @@
-@import '../styles/vars';
+@use '../styles/vars';
 
 .SmallError {
   color: #E57373;
-  font-size: $font-size-6;
-  margin-top: $margin-2
+  font-size: vars.$font-size-6;
+  margin-top: vars.$margin-2
 }

src/components/SmallError.tsx

@@ -1,18 +1,22 @@
 import React from 'react'
+import { WithTranslation, withTranslation } from 'react-i18next';
 import './SmallError.scss';
 
 
-type SmallErrorProps = {
+type SmallErrorInternalProps = {
   children?: React.ReactNode
-};
+} & WithTranslation;
 
-
-export default class SmallError extends React.Component<SmallErrorProps> {
+class SmallErrorInternal extends React.Component<SmallErrorInternalProps> {
   render () {
+    const t = this.props.t;
     return (
       <div className="SmallError">
-        Error: {this.props.children}
+        {t("Error:")} {this.props.children}
       </div>
     );
   }
-}
+}
+
+const SmallError = withTranslation()(SmallErrorInternal);
+export default SmallError;

src/components/_DataProperty.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'
@@ -11,13 +11,14 @@ import Block from './Block'
 import docUid from '../libs/document-uid'
 import sortNumerically from '../libs/sort-numerically'
 import {findDefaultFromSpec} from '../libs/spec-helper';
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import labelFromFieldName from '../libs/label-from-field-name'
 import DeleteStopButton from './_DeleteStopButton'
 
 
 
-function setStopRefs(props: DataPropertyProps, state: DataPropertyState) {
+function setStopRefs(props: DataPropertyInternalProps, state: DataPropertyState) {
   // This is initialsed below only if required to improved performance.
   let newRefs: {[key: number]: string} | undefined;
 
@@ -35,7 +36,7 @@ function setStopRefs(props: DataPropertyProps, state: DataPropertyState) {
   return newRefs;
 }
 
-type DataPropertyProps = {
+type DataPropertyInternalProps = {
   onChange?(fieldName: string, value: any): unknown
   onDeleteStop?(...args: unknown[]): unknown
   onAddStop?(...args: unknown[]): unknown
@@ -46,7 +47,7 @@ type DataPropertyProps = {
   fieldSpec?: object
   value?: DataPropertyValue
   errors?: object
-};
+} & WithTranslation;
 
 type DataPropertyState = {
   refs: {[key: number]: string}
@@ -65,7 +66,7 @@ export type Stop = [{
   value: number
 }, number]
 
-export default class DataProperty extends React.Component<DataPropertyProps, DataPropertyState> {
+class DataPropertyInternal extends React.Component<DataPropertyInternalProps, DataPropertyState> {
   state = {
     refs: {} as {[key: number]: string}
   }
@@ -80,7 +81,7 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
     }
   }
 
-  static getDerivedStateFromProps(props: DataPropertyProps, state: DataPropertyState) {
+  static getDerivedStateFromProps(props: Readonly<DataPropertyInternalProps>, state: DataPropertyState) {
     const newRefs = setStopRefs(props, state);
     if(newRefs) {
       return {
@@ -213,6 +214,8 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
   }
 
   render() {
+    const t = this.props.t;
+
     if (typeof this.props.value?.type === "undefined") {
       this.props.value!.type = this.getFieldFunctionType(this.props.fieldSpec)
     }
@@ -227,8 +230,8 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
         const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />
 
         const dataProps = {
-          'aria-label': "Input value",
-          label: "Data value",
+          'aria-label': t("Input value"),
+          label: t("Data value"),
           value: dataLevel as any,
           onChange: (newData: string | number | undefined) => this.changeStop(idx, { zoom: zoomLevel, value: newData as number }, value)
         }
@@ -263,7 +266,7 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
           </td>
           <td>
             <InputSpec
-              aria-label="Output value"
+              aria-label={t("Output value")}
               fieldName={this.props.fieldName}
               fieldSpec={this.props.fieldSpec}
               value={value}
@@ -282,27 +285,27 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
         <legend>{labelFromFieldName(this.props.fieldName)}</legend>
         <div className="maputnik-data-fieldset-inner">
           <Block
-            label={"Function"}
+            label={t("Function")}
             key="function"
           >
             <div className="maputnik-data-spec-property-input">
               <InputSelect
                 value={this.props.value!.type}
                 onChange={(propVal: string) => this.changeDataType(propVal)}
-                title={"Select a type of data scale (default is 'categorical')."}
+                title={t("Select a type of data scale (default is 'categorical').")}
                 options={this.getDataFunctionTypes(this.props.fieldSpec)}
               />
             </div>
           </Block>
           {this.props.value?.type !== "identity" &&
             <Block
-              label={"Base"}
+              label={t("Base")}
               key="base"
             >
               <div className="maputnik-data-spec-property-input">
                 <InputSpec
                   fieldName={"base"}
-                  fieldSpec={latest.function.base}
+                  fieldSpec={latest.function.base as typeof latest.function.base & { type: "number" }}
                   value={this.props.value?.base}
                   onChange={(_, newValue) => this.changeBase(newValue as number)}
                 />
@@ -316,14 +319,14 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
             <div className="maputnik-data-spec-property-input">
               <InputString
                 value={this.props.value?.property}
-                title={"Input a data property to base styles off of."}
+                title={t("Input a data property to base styles off of.")}
                 onChange={propVal => this.changeDataProperty("property", propVal)}
               />
             </div>
           </Block>
           {dataFields &&
             <Block
-              label={"Default"}
+              label={t("Default")}
               key="default"
             >
               <InputSpec
@@ -337,12 +340,12 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
           {dataFields &&
             <div className="maputnik-function-stop">
               <table className="maputnik-function-stop-table">
-                <caption>Stops</caption>
+                <caption>{t("Stops")}</caption>
                 <thead>
                   <tr>
-                    <th>Zoom</th>
-                    <th>Input value</th>
-                    <th rowSpan={2}>Output value</th>
+                    <th>{t("Zoom")}</th>
+                    <th>{t("Input value")}</th>
+                    <th rowSpan={2}>{t("Output value")}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -359,7 +362,7 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
               >
                 <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                   <path fill="currentColor" d={mdiTableRowPlusAfter} />
-                </svg> Add stop
+                </svg> {t("Add stop")}
               </InputButton>
             }
             <InputButton
@@ -368,7 +371,7 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
             >
               <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                 <path fill="currentColor" d={mdiFunctionVariant} />
-              </svg> Convert to expression
+              </svg> {t("Convert to expression")}
             </InputButton>
           </div>
         </div>
@@ -376,3 +379,6 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
     </div>
   }
 }
+
+const DataProperty = withTranslation()(DataPropertyInternal);
+export default DataProperty;

src/components/_DeleteStopButton.tsx

@@ -2,21 +2,26 @@ import React from 'react'
 
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 
-type DeleteStopButtonProps = {
+type DeleteStopButtonInternalProps = {
   onClick?(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 
-export default class DeleteStopButton extends React.Component<DeleteStopButtonProps> {
+class DeleteStopButtonInternal extends React.Component<DeleteStopButtonInternalProps> {
   render() {
+    const t = this.props.t;
     return <InputButton
       className="maputnik-delete-stop"
       onClick={this.props.onClick}
-      title={"Remove zoom level from stop"}
+      title={t("Remove zoom level from stop")}
     >
       <MdDelete />
     </InputButton>
   }
 }
+
+const DeleteStopButton = withTranslation()(DeleteStopButtonInternal);
+export default DeleteStopButton;

src/components/_ExpressionProperty.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {MdDelete, MdUndo} from 'react-icons/md'
 import stringifyPretty from 'json-stringify-pretty-compact'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import Block from './Block'
 import InputButton from './InputButton'
@@ -8,7 +9,7 @@ import labelFromFieldName from '../libs/label-from-field-name'
 import FieldJson from './FieldJson'
 
 
-type ExpressionPropertyProps = {
+type ExpressionPropertyInternalProps = {
   onDelete?(...args: unknown[]): unknown
   fieldName: string
   fieldType?: string
@@ -20,20 +21,20 @@ type ExpressionPropertyProps = {
   canUndo?(...args: unknown[]): unknown
   onFocus?(...args: unknown[]): unknown
   onBlur?(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 type ExpressionPropertyState = {
   jsonError: boolean
 };
 
-export default class ExpressionProperty extends React.Component<ExpressionPropertyProps, ExpressionPropertyState> {
+class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInternalProps, ExpressionPropertyState> {
   static defaultProps = {
     errors: {},
     onFocus: () => {},
     onBlur: () => {},
   }
 
-  constructor (props:ExpressionPropertyProps) {
+  constructor(props: ExpressionPropertyInternalProps) {
     super(props);
     this.state = {
       jsonError: false,
@@ -53,7 +54,7 @@ export default class ExpressionProperty extends React.Component<ExpressionProper
   }
 
   render() {
-    const {errors, fieldName, fieldType, value, canUndo} = this.props;
+    const {t, errors, fieldName, fieldType, value, canUndo} = this.props;
     const {jsonError} = this.state;
     const undoDisabled = canUndo ? !canUndo() : true;
 
@@ -65,7 +66,7 @@ export default class ExpressionProperty extends React.Component<ExpressionProper
             onClick={this.props.onUndo}
             disabled={undoDisabled}
             className="maputnik-delete-stop"
-            title="Revert from expression"
+            title={t("Revert from expression")}
           >
             <MdUndo />
           </InputButton>
@@ -74,7 +75,7 @@ export default class ExpressionProperty extends React.Component<ExpressionProper
           key="delete_action"
           onClick={this.props.onDelete}
           className="maputnik-delete-stop"
-          title="Delete expression"
+          title={t("Delete expression")}
         >
           <MdDelete />
         </InputButton>
@@ -112,7 +113,7 @@ export default class ExpressionProperty extends React.Component<ExpressionProper
       // this feels like an incorrect type...? `foundErrors` is an array of objects, not a single object
       error={foundErrors as any}
       fieldSpec={this.props.fieldSpec}
-      label={labelFromFieldName(this.props.fieldName)}
+      label={t(labelFromFieldName(this.props.fieldName))}
       action={deleteStopBtn}
       wideMode={true}
     >
@@ -137,3 +138,6 @@ export default class ExpressionProperty extends React.Component<ExpressionProper
     </Block>
   }
 }
+
+const ExpressionProperty = withTranslation()(ExpressionPropertyInternal);
+export default ExpressionProperty;