rm trailing comma

feat: localIdeographFontFamily: false
2026-08-31 09:27:30 +00:00 · 2024-03-25 22:08:46 +09:00 · 2024-03-25 21:55:25 +09:00
177 changed files with 5541 additions and 10968 deletions
@@ -0,0 +1,46 @@
+{
+    "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"
+  }
+}
@@ -8,3 +8,4 @@ assignees: ''
 ---

 <!-- Thanks for reaching out! If you are having general Maputnik mapping questions, please asking them at https://gis.stackexchange.com/ using the 'maputnik' tag https://gis.stackexchange.com/questions/tagged/maputnik and read https://gis.stackexchange.com/help/how-to-ask before you do so (please keep in mind that you're asking there in a general GIS forum, not a dedicated support channel) -->
+
@@ -1,10 +0,0 @@
-## 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.
@@ -1,17 +1,14 @@
-# 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" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: "npm"
+    directory: "/"
    schedule:
      interval: "daily"
-    open-pull-requests-limit: 20
+    open-pull-requests-limit: 2
    versioning-strategy: increase
  - package-ecosystem: "github-actions"
    directory: "/"
    schedule:
      interval: "daily"
+    open-pull-requests-limit: 2
+    versioning-strategy: increase
@@ -1,26 +0,0 @@
-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.4.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}}
@@ -0,0 +1,52 @@
+name: ci-desktop
+
+on: [ push ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./desktop
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Go
+        uses: actions/setup-go@v3
+        with:
+          go-version: 1.18
+
+      - name: Make
+        run: make
+
+      - name: Test --help
+        run: ./bin/linux/maputnik --help
+
+      - name: Test --version
+        run: ./bin/linux/maputnik --version
+
+      - name: Get style
+        run: wget https://maputnik.github.io/osm-liberty/style.json
+
+      - name: Test --watch
+        run: ./bin/linux/maputnik --watch --file style.json & sleep 5; kill $!
+
+      - name: Artifacts/linux
+        uses: actions/upload-artifact@v3
+        with:
+          name: maputnik-linux
+          path: bin/linux/
+
+      - name: Artifacts/darwin
+        uses: actions/upload-artifact@v3
+        with:
+          name: maputnik-darwin
+          path: bin/darwin/
+
+      - name: Artifacts/windows
+        uses: actions/upload-artifact@v3
+        with:
+          name: maputnik-windows
+          path: bin/windows/
@@ -7,7 +7,17 @@ on:
    branches: [ main ]

 jobs:
+  build-docker:
+    name: build docker
+    runs-on: ubuntu-latest

+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    steps:
+    - uses: actions/checkout@v4
+    - run: docker build -t test-docker-image-build .
+
+  # build the editor
  build-node:
    name: "build on ${{ matrix.os }}"
    runs-on: ${{ matrix.os }}
@@ -20,8 +30,8 @@ jobs:
        os: [ubuntu-latest, windows-latest, macos-latest]

    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v5
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
      with:
        node-version-file: '.nvmrc'
    - run: npm ci
@@ -37,83 +47,73 @@ jobs:
    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}

    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v5
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
      with:
        node-version-file: '.nvmrc'
    - run: npm ci
    - run: npm run build
    - name: artifacts/maputnik
-        uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v1
      with:
        name: maputnik
        path: dist

    # Build and upload desktop CLI artifacts
    - name: Set up Go
-        uses: actions/setup-go@v6
+      uses: actions/setup-go@v3
      with:
-          go-version: ^1.23.x
-          cache-dependency-path: desktop/go.sum
+        go-version: ^1.19.x
      id: go

-      - name: Build desktop artifacts
-        run: npm run build-desktop
+    - 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: Artifacts/linux
-        uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v1
      with:
        name: maputnik-linux
-          path: ./desktop/bin/linux/
+        path: ./src/github.com/maputnik/desktop/bin/linux/

    - name: Artifacts/darwin
-        uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v1
      with:
        name: maputnik-darwin
-          path: ./desktop/bin/darwin/
+        path: ./src/github.com/maputnik/desktop/bin/darwin/

    - name: Artifacts/windows
-        uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v1
      with:
        name: maputnik-windows
-          path: ./desktop/bin/windows/
+        path: ./src/github.com/maputnik/desktop/bin/windows/
  
  e2e-tests:
-    name: "E2E tests using chrome"
+    name: "E2E tests using ${{ matrix.browser }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chrome, firefox]

-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
    steps:
      - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
      - run: npm ci
      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          build: npm run build
          start: npm run start
-          browser: chrome
+          browser: ${{ matrix.browser }}
      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v5
-        with:
-          files: ${{ github.workspace }}/.nyc_output/out.json
-          verbose: true
-
-  e2e-tests-docker:
-    name: "E2E tests using chrome and docker"
-
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v5
-      - run: npm ci
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          build: docker build -t maputnik .
-          start: docker run --rm --network host maputnik --port=8888
-          browser: chrome
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v5
+        uses: codecov/codecov-action@v3
        with:
          files: ${{ github.workspace }}/.nyc_output/out.json
          verbose: true
@@ -1,70 +0,0 @@
-# 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@v5
-
-    # 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
@@ -1,39 +0,0 @@
-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@v5
-        with:
-          fetch-depth: 0
-          ref: main
-
-      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@v5
-        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 }}
@@ -10,10 +10,10 @@ jobs:
    runs-on: ubuntu-latest
    if: ${{ github.event_name == 'push' }}
    steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v4
        with:
          node-version-file: '.nvmrc'

@@ -24,7 +24,7 @@ jobs:
        run: npm run build

      - name: Upload to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v4
+        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: dist
@@ -46,6 +46,6 @@ jobs:
        registry: ghcr.io
        username: ${{ github.actor }}
        password: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/checkout@v5
+    - uses: actions/checkout@v4
    - run: docker build -t ghcr.io/maplibre/maputnik:main .
    - run: docker push ghcr.io/maplibre/maputnik:main
@@ -1,101 +0,0 @@
-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@v5
-        with:
-          fetch-depth: 0
-          ref: main
-
-      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@v5
-        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@v5
-        with:
-          fetch-depth: 0
-          ref: main
-
-      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@v5
-        with:
-          node-version-file: ".nvmrc"
-          registry-url: "https://registry.npmjs.org"
-
-      - name: Set up Go for desktop build
-        uses: actions/setup-go@v6
-        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
@@ -33,14 +33,6 @@ node_modules
 public
 /errorShots
 /old
+/build
 /cypress/screenshots
 /dist/
-/desktop/version.go
-
-# IDE
-.vscode/
-.idea/
-
-# Window metadata files
-/desktop/winres/winres.json
-/desktop/*.syso
@@ -1 +1 @@
-22.13
+18.19
@@ -1,24 +0,0 @@
-# See https://pre-commit.com for more information
-# See https://pre-commit.com/hooks.html for more hooks
-
-ci:
-  autoupdate_schedule: monthly
-
-repos:
-  - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v6.0.0
-    hooks:
-      - id: check-added-large-files
-      - id: check-executables-have-shebangs
-      - id: check-json
-        exclude: 'tsconfig(\.node)?\.json'
-      - id: check-shebang-scripts-are-executable
-      - id: check-symlinks
-      - id: check-toml
-      - id: check-yaml
-        args: [ --allow-multiple-documents ]
-      - id: destroyed-symlinks
-      - id: end-of-file-fixer
-      - id: mixed-line-ending
-        args: [ --fix=lf ]
-      - id: trailing-whitespace
@@ -1,47 +0,0 @@
-Maputnik is a MapLibre style editor written using React and TypeScript.
-
-To get started, install all npm packages:
-
-```
-npm install
-```
-
-Verify code correctness by running ESLint:
-
-```
-npm run lint
-```
-
-Or try fixing lint issues with:
-
-```
-npm run lint -- --fix
-```
-
-The project type checked and built with:
-
-```
-npm run build
-```
-
-To run the tests make sure that xvfb is installed:
-
-```
-apt install xvfb
-```
-
-Run the development server in the background with Vite:
-
-```
-nohup npm run start &
-```
-
-Then start the Cypress tests with:
-
-```
-xvfb-run -a npm run test
-```
-
-## Pull Requests
-
- Pull requests should update `CHANGELOG.md` with a short description of the change.
@@ -1,54 +0,0 @@
-## main
-
-### ✨ Features and improvements
- _...Add new stuff here..._
-
-### 🐞 Bug fixes
-
- _...Add new stuff here..._
-
-## 3.0.0
-
-### ✨ Features and improvements
- Fix radio/delete filter buttons styling regression
- 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
- When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry
- Remove react-autobind dependency
- Remove usage of legacy `childContextTypes` API
- Refactor Field components to use arrow function syntax
- Replace react-autocomplete with Downshift in the autocomplete component
- Add LocationIQ as supported map provider with access token field and gallery style
- Use maputnik go binary for the docker image to allow file watching
- Revmove support for `debug` and `localport` url parameters
- Replace react-sortable-hoc with dnd-kit to avoid react console warnings and also use a maintained library
-
-### 🐞 Bug fixes
-
- Fix incorrect handing of network error response (#944)
- Show an error when adding a layer with a duplicate ID
- Replace deprecated `ReactDOM.render` usage with `createRoot` and drop the
-  `DOMNodeRemoved` cleanup hack
-
-## 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
@@ -1,14 +1,16 @@
-FROM golang:1.23-alpine AS builder
+FROM node:18 as builder
 WORKDIR /maputnik

-RUN apk add --no-cache nodejs npm make git gcc g++ libc-dev
+# Only copy package.json to prevent npm install from running on every build
+COPY package.json package-lock.json .npmrc ./
+RUN npm ci

 # Build maputnik
 COPY . .
-RUN npm ci
-RUN CGO_ENABLED=1 GOOS=linux npm run build-linux
+RUN npx vite build

-FROM alpine:latest
-WORKDIR /app
-COPY --from=builder /maputnik/desktop/bin/linux ./
-ENTRYPOINT ["/app/maputnik"]
+#---------------------------------------------------------------------------
+# Create a clean nginx-alpine slim image with just the build results
+FROM nginx:alpine-slim
+
+COPY --from=builder /maputnik/dist /usr/share/nginx/html/
@@ -20,3 +20,4 @@ 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.
+
@@ -18,15 +18,9 @@ targeted at developers and map designers.
 - 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:8000 ghcr.io/maplibre/maputnik:main
+docker run -it --rm -p 8888:80 ghcr.io/maplibre/maputnik:main
 ```

-To see the CLI options (for example file watching or style serving) run:
-```bash
-docker run -it --rm -p 8888:8000 ghcr.io/maplibre/maputnik:main --help
-```
-You might need to mount a volume (`-v`) to be able to use these options.
-
 ## Documentation

 The documentation can be found in the [Wiki](https://github.com/maplibre/maputnik/wiki). You are welcome to collaborate!
@@ -42,8 +36,6 @@ 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.

@@ -74,14 +66,14 @@ Lint the JavaScript code.
 ```
 # run linter
 npm run lint
-npm run lint-css
-npm run sort-styles
+npm run lint-styles
 ```

+
 ## Tests
 For E2E testing we use [Cypress](https://www.cypress.io/)

- [Cypress](https://www.cypress.io/) doesn't start a server so you'll need to start one manually by running `npm run start`.
+ [Cypress](https://www.cypress.io/) doesn't starts a server so you'll need to start one manually by running `npm run start`.

 Now open a terminal and run the following using *chrome*:

@@ -101,16 +93,6 @@ You can also see the tests as they run or select which suites to run by executin
 npm run cy:open
 ```

-## Release process
-
-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.
-
-
 ## Sponsors

 Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)**. This project would not be possible without these commercial and individual sponsors.
@@ -1,11 +0,0 @@
-# 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
@@ -1,29 +0,0 @@
-#!/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');
@@ -1,47 +0,0 @@
-#!/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());
@@ -8,7 +8,6 @@ export default defineConfig({
      exclude: "cypress/**/*.*",
    },
  },
-
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
@@ -21,11 +20,4 @@ export default defineConfig({
      openMode: 0,
    },
  },
-
-  component: {
-    devServer: {
-      framework: "react",
-      bundler: "vite",
-    },
-  },
 });
@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";

 describe("accessibility", () => {
-  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
  beforeAndAfter();

  describe("skip links", () => {
@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";

 describe("history", () => {
-  const { beforeAndAfter, when, get, then } = new MaputnikDriver();
+  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
  beforeAndAfter();

  let undoKeyCombo: string;
@@ -16,6 +16,7 @@ describe("history", () => {
  it("undo/redo", () => {
    when.setStyle("geojson");
    when.modal.open();
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });

    when.modal.fillLayers({
      id: "step 1",
@@ -1,35 +0,0 @@
-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("スタイル設定");
-    });
-  });
-});
@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";

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

 describe("layers", () => {
-  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
  beforeAndAfter();
  beforeEach(() => {
    when.setStyle("both");
@@ -101,7 +101,7 @@ describe("layers", () => {
  });
  describe("background", () => {
    it("add", () => {
-      const id = when.modal.fillLayers({
+      let id = when.modal.fillLayers({
        type: "background",
      });
      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -117,7 +117,7 @@ describe("layers", () => {
    describe("modify", () => {
      function createBackground() {
        // Setup
-        const id = uuid();
+        let 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", () => {
-          const bgId = createBackground();
+          let bgId = createBackground();

          when.click("layer-list-item:background:" + bgId);

-          const id = uuid();
+          let 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;
-          const comment = "42";
+          let comment = "42";

          beforeEach(() => {
            bgId = createBackground();
@@ -320,11 +320,11 @@ describe("layers", () => {

        // TODO
        it.skip("parse error", () => {
-          const bgId = createBackground();
+          let bgId = createBackground();

          when.click("layer-list-item:background:" + bgId);

-          const errorSelector = ".CodeMirror-lint-marker-error";
+          let errorSelector = ".CodeMirror-lint-marker-error";
          then(get.elementByTestId(errorSelector)).shouldNotExist();

          when.click(".CodeMirror");
@@ -339,7 +339,7 @@ describe("layers", () => {

  describe("fill", () => {
    it("add", () => {
-      const id = when.modal.fillLayers({
+      let id = when.modal.fillLayers({
        type: "fill",
        layer: "example",
      });
@@ -361,7 +361,7 @@ describe("layers", () => {

  describe("line", () => {
    it("add", () => {
-      const id = when.modal.fillLayers({
+      let id = when.modal.fillLayers({
        type: "line",
        layer: "example",
      });
@@ -378,63 +378,14 @@ describe("layers", () => {
    });

    it("groups", () => {
-      when.modal.open();
-      const id1 = when.modal.fillLayers({
-        id: "aa",
-        type: "line",
-        layer: "example",
-      });
-
-      when.modal.open();
-      const id2 = when.modal.fillLayers({
-        id: "aa-2",
-        type: "line",
-        layer: "example",
-      });
-
-      when.modal.open();
-      const id3 = when.modal.fillLayers({
-        id: "b",
-        type: "line",
-        layer: "example",
-      });
-
-      then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
-      then(get.elementByTestId("layer-list-item:" + id2)).shouldNotBeVisible();
-      then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
-      when.click("layer-list-group:aa-0");
-      then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
-      then(get.elementByTestId("layer-list-item:" + id2)).shouldBeVisible();
-      then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
-      when.click("layer-list-item:" + id2);
-      when.click("skip-target-layer-editor");
-      when.click("menu-move-layer-down");
-      then(get.elementByTestId("layer-list-group:aa-0")).shouldNotExist();
-      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          {
-            id: "aa",
-            type: "line",
-            source: "example",
-          },
-          {
-            id: "b",
-            type: "line",
-            source: "example",
-          },
-          {
-            id: "aa-2",
-            type: "line",
-            source: "example",
-          },
-        ],
-      });
+      // TODO
+      // Click each of the layer groups.
    });
  });

  describe("symbol", () => {
    it("add", () => {
-      const id = when.modal.fillLayers({
+      let id = when.modal.fillLayers({
        type: "symbol",
        layer: "example",
      });
@@ -453,7 +404,7 @@ describe("layers", () => {

  describe("raster", () => {
    it("add", () => {
-      const id = when.modal.fillLayers({
+      let id = when.modal.fillLayers({
        type: "raster",
        layer: "raster",
      });
@@ -472,7 +423,7 @@ describe("layers", () => {

  describe("circle", () => {
    it("add", () => {
-      const id = when.modal.fillLayers({
+      let id = when.modal.fillLayers({
        type: "circle",
        layer: "example",
      });
@@ -491,7 +442,7 @@ describe("layers", () => {

  describe("fill extrusion", () => {
    it("add", () => {
-      const id = when.modal.fillLayers({
+      let id = when.modal.fillLayers({
        type: "fill-extrusion",
        layer: "example",
      });
@@ -543,69 +494,4 @@ 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');
-    });
-  });
-
-  describe("drag and drop", () => {
-    it("move layer should update local storage", () => {
-      when.modal.open();
-      const firstId = when.modal.fillLayers({
-        id: "a",
-        type: "background",
-      });
-      when.modal.open();
-      const secondId = when.modal.fillLayers({
-        id: "b",
-        type: "background",
-      });
-      when.modal.open();
-      const thirdId = when.modal.fillLayers({
-        id: "c",
-        type: "background",
-      });
-      when.dragAndDrop(get.elementByTestId("layer-list-item:" + firstId), get.elementByTestId("layer-list-item:" + thirdId));
-
-      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          {
-            id: secondId,
-            type: "background",
-          },
-          {
-            id: thirdId,
-            type: "background",
-          },
-          {
-            id: firstId,
-            type: "background",
-          },
-        ],
-      });
-    });
-  });
 });
@@ -1,11 +1,11 @@
 import { MaputnikDriver } from "./maputnik-driver";

 describe("map", () => {
-  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
  beforeAndAfter();
  describe("zoom level", () => {
    it("via url", () => {
-      const zoomLevel = 12.37;
+      let 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", () => {
-      const zoomLevel = 12.37;
+      let zoomLevel = 12.37;
      when.setStyle("geojson", zoomLevel);
      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
      when.clickZoomIn();
@@ -8,10 +8,8 @@ const baseUrl = "http://localhost:8888/";

 const styleFromWindow = (win: Window) => {
  const styleId = win.localStorage.getItem("maputnik:latest_style");
-  const styleItemKey = `maputnik:style:${styleId}`;
-  const styleItem = win.localStorage.getItem(styleItemKey);
-  if (!styleItem) throw new Error("Could not get styleItem from localStorage");
-  const obj = JSON.parse(styleItem);
+  const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
+  const obj = JSON.parse(styleItem || "");
  return obj;
 };

@@ -94,8 +92,8 @@ export class MaputnikDriver {
  public when = {
    ...this.helper.when,
    modal: this.modalDriver.when,
-    doWithin: (selector: string, fn: () => void) => {
-      this.helper.when.doWithin(fn, selector);
+    within: (selector: string, fn: () => void) => {
+      this.helper.when.within(fn, selector);
    },
    tab: () => this.helper.get.element("body").tab(),
    waitForExampleFileResponse: () => {
@@ -110,32 +108,30 @@ export class MaputnikDriver {
      styleProperties: "geojson" | "raster" | "both" | "layer" | "",
      zoom?: number
    ) => {
-      const url = new URL(baseUrl);
+      let url = "?debug";
      switch (styleProperties) {
      case "geojson":
-        url.searchParams.set("style", baseUrl + "geojson-style.json");
+        url += `&style=${baseUrl}geojson-style.json`;
        break;
      case "raster":
-        url.searchParams.set("style", baseUrl + "raster-style.json");
+        url += `&style=${baseUrl}raster-style.json`;
        break;
      case "both":
-        url.searchParams.set("style", baseUrl + "geojson-raster-style.json");
+        url += `&style=${baseUrl}geojson-raster-style.json`;
        break;
      case "layer":
-        url.searchParams.set("style", baseUrl + "example-layer-style.json");
+        url += `&style=${baseUrl}/example-layer-style.json`;
        break;
      }
      if (zoom) {
-        url.hash = `${zoom}/41.3805/2.1635`;
+        url += `#${zoom}/41.3805/2.1635`;
      }
-      this.helper.when.visit(url.toString());
+      this.helper.when.visit(baseUrl + url);
      if (styleProperties) {
        this.helper.when.acceptConfirm();
      }
      // when methods should not include assertions
-      const toolbarLink = this.helper.get.elementByTestId("toolbar:link")
-      toolbarLink.scrollIntoView();
-      toolbarLink.should("be.visible");
+      this.helper.get.elementByTestId("toolbar:link").should("be.visible");
    },

    typeKeys: (keys: string) => this.helper.get.element("body").type(keys),
@@ -145,7 +141,7 @@ export class MaputnikDriver {
    },

    selectWithin: (selector: string, value: string) => {
-      this.when.doWithin(selector, () => {
+      this.when.within(selector, () => {
        this.helper.get.element("select").select(value);
      });
    },
@@ -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
-      const type = opts.type;
-      const layer = opts.layer;
+      let type = opts.type;
+      let layer = opts.layer;
      let id;
      if (opts.id) {
        id = opts.id;
@@ -20,8 +20,8 @@ export default class ModalDriver {
      this.helper.when.type("add-layer.layer-id.input", id);

      if (layer) {
-        this.helper.when.doWithin(() => {
-          this.helper.get.element("input").clear().type(layer!);
+        this.helper.when.within(() => {
+          this.helper.get.element("input").type(layer!);
        }, "add-layer.layer-source-block");
      }
      this.helper.when.click("add-layer");
@@ -1,8 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
-import tokens from "../../src/config/tokens.json" with {type: "json"};

 describe("modals", () => {
-  const { beforeAndAfter, when, get, given, then } = new MaputnikDriver();
+  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
  beforeAndAfter();

  beforeEach(() => {
@@ -26,7 +25,7 @@ describe("modals", () => {

    describe("when click open url", () => {
      beforeEach(() => {
-        const styleFileUrl = get.exampleFileUrl();
+        let styleFileUrl = get.exampleFileUrl();

        when.setValue("modal:open.url.input", styleFileUrl);
        when.click("modal:open.url.button");
@@ -62,60 +61,9 @@ describe("modals", () => {
  });

  describe("sources", () => {
-    beforeEach(() => {
-      when.setStyle("layer");
-      when.click("nav:sources");
-    });
-
    it("active sources");
    it("public 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,
-      });
-    });
+    it("add new source");
  });

  describe("inspect", () => {
@@ -178,7 +126,7 @@ describe("modals", () => {
      });
    });
    it("glyphs url", () => {
-      const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
+      let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
      when.setValue("modal:settings.glyphs", glyphsUrl);
      when.click("modal:settings.name");
      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -187,7 +135,7 @@ describe("modals", () => {
    });

    it("maptiler access token", () => {
-      const apiKey = "testing123";
+      let apiKey = "testing123";
      when.setValue(
        "modal:settings.maputnik:openmaptiles_access_token",
        apiKey
@@ -201,7 +149,7 @@ describe("modals", () => {
    });

    it("thunderforest access token", () => {
-      const apiKey = "testing123";
+      let apiKey = "testing123";
      when.setValue(
        "modal:settings.maputnik:thunderforest_access_token",
        apiKey
@@ -212,30 +160,6 @@ describe("modals", () => {
      ).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("locationiq access token", () => {
-      const apiKey = "testing123";
-      when.setValue(
-        "modal:settings.maputnik:locationiq_access_token",
-        apiKey
-      );
-      when.click("modal:settings.name");
-      then(
-        get.styleFromLocalStorage().then((style) => style.metadata)
-      ).shouldInclude({ "maputnik:locationiq_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");
@@ -248,99 +172,9 @@ 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.wait(1000);
-      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("add layer", () => {
-    beforeEach(() => {
-      when.setStyle("layer");
-      when.modal.open();
-    });
-
-    it("shows duplicate id error", () => {
-      when.setValue("add-layer.layer-id.input", "background");
-      when.click("add-layer");
-      then(get.elementByTestId("modal:add-layer")).shouldExist();
-      then(get.element(".maputnik-modal-error")).shouldContainText(
-        "Layer ID already exists"
-      );
-    });
  });

  describe("sources", () => {
    it("toggle");
  });
-
-  describe("Handle localStorage QuotaExceededError", () => {
-    it("handles quota exceeded error when opening style from URL", () => {
-      // Clear localStorage to start fresh
-      cy.clearLocalStorage();
-
-      // fill localStorage until we get a QuotaExceededError
-      cy.window().then(win => {
-        let chunkSize = 1000;
-        const chunk = new Array(chunkSize).join("x");
-        let index = 0;
-
-        // Keep adding until we hit the quota
-        while (true) {
-          try {
-            const key = `maputnik:fill-${index++}`;
-            win.localStorage.setItem(key, chunk);
-          } catch (e: any) {
-            // Verify it's a quota error
-            if (e.name === 'QuotaExceededError') {
-              if (chunkSize <= 1) return;
-              else {
-                chunkSize /= 2;
-                continue;
-              }
-            }
-            throw e; // Unexpected error
-          }
-        }
-      });
-
-      // Open the style via URL input
-      when.click("nav:open");
-      when.setValue("modal:open.url.input", get.exampleFileUrl());
-      when.click("modal:open.url.button");
-
-      then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
-      then(get.styleFromLocalStorage()).shouldExist();
-    });
-  });
 });
@@ -15,3 +15,4 @@
    }
  ]
 }
+
@@ -3,109 +3,7 @@
  "version": 8,
  "name": "Test Style",
  "metadata": {
-        "maputnik:renderer": "mlgljs",
-        "data": [
-            0,
-            1,
-            2,
-            3,
-            4,
-            5,
-            6,
-            7,
-            8,
-            9,
-            10,
-            11,
-            12,
-            13,
-            14,
-            15,
-            16,
-            17,
-            18,
-            19,
-            20,
-            21,
-            22,
-            23,
-            24,
-            25,
-            26,
-            27,
-            28,
-            29,
-            30,
-            31,
-            32,
-            33,
-            34,
-            35,
-            36,
-            37,
-            38,
-            39,
-            40,
-            41,
-            42,
-            43,
-            44,
-            45,
-            46,
-            47,
-            48,
-            49,
-            50,
-            51,
-            52,
-            53,
-            54,
-            55,
-            56,
-            57,
-            58,
-            59,
-            60,
-            61,
-            62,
-            63,
-            64,
-            65,
-            66,
-            67,
-            68,
-            69,
-            70,
-            71,
-            72,
-            73,
-            74,
-            75,
-            76,
-            77,
-            78,
-            79,
-            80,
-            81,
-            82,
-            83,
-            84,
-            85,
-            86,
-            87,
-            88,
-            89,
-            90,
-            91,
-            92,
-            93,
-            94,
-            95,
-            96,
-            97,
-            98,
-            99
-        ]
+    "maputnik:renderer": "mlgljs"
  },
  "sources": {},
  "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>
@@ -1,37 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-import { mount } from 'cypress/react'
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-  /* eslint-disable @typescript-eslint/no-namespace */
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount
-    }
-  }
-}
-
-Cypress.Commands.add('mount', mount)
-
-// Example use:
-// cy.mount(<MyComponent />)
@@ -1,30 +1,21 @@
 SOURCEDIR=.
 SOURCES := $(shell find $(SOURCEDIR) -name '*.go')
 BINARY=maputnik
-VERSION := $(shell node -p "require('../package.json').version")
-GOBIN := $(or $(shell if [ -d /go/bin ]; then echo "/go/bin"; fi),$(HOME)/go/bin)
+EDITOR_VERSION ?= v1.7.0
+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)
+$(BINARY): $(GOBIN)/gox $(SOURCES) rice-box.go
 	$(GOBIN)/gox -osarch "windows/amd64 linux/amd64 darwin/amd64" -output "bin/{{.OS}}/${BINARY}"

-bin/linux/$(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 "linux/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:
+editor/create_folder:
 	mkdir -p editor
-	cp -r ../dist/* editor
+
+editor/pull_release: editor/create_folder
+        # if the directory /home/runner/work/editor/editor/build/build exists, we assume that we are are running the makefile within the editor ci workflow
+	test -d /home/runner/work/editor/editor/build/build && echo "exists" && cd editor && cp -R /home/runner/work/editor/editor/build/build public/ || (echo "does not exist" && cd editor && rm -rf public && curl -L https://github.com/maputnik/editor/releases/download/$(EDITOR_VERSION)/public.zip --output public.zip && unzip public.zip && rm public.zip)

 $(GOBIN)/gox:
 	go install github.com/mitchellh/gox@v1.0.1
@@ -32,16 +23,9 @@ $(GOBIN)/gox:
 $(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
+	rm -rf editor/public && rm -f rice-box.go && rm -rf bin
@@ -1,18 +1,18 @@
-# Maputnik Desktop [![GitHub CI status](https://github.com/maplibre/maputnik/workflows/ci/badge.svg)][github-action-ci]
+# Maputnik Desktop [![GitHub CI status](https://github.com/maputnik/desktop/workflows/ci/badge.svg)](https://github.com/maputnik/desktop/actions?query=workflow%3Aci)

 ---

 A Golang based cross platform executable for integrating Maputnik locally.
-This binary packages up the JavaScript and CSS bundle produced by maputnik
+This binary packages up the JavaScript and CSS bundle produced by [maputnik/editor](https://github.com/maputnik/desktop)
 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).
+Report issues on [maputnik/editor](https://github.com/maputnik/editor).

 ## 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).
+You can download a single binary for Linux, OSX or Windows from [the latest releases of **maputnik/editor**](https://github.com/maputnik/editor/releases/latest).

 ### Usage

@@ -54,20 +54,25 @@ maputnik --static ./localFolder

 `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 |
+| 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.
+Clone the repository. Make sure you clone it into the correct directory `$GOPATH/src/github.com/maputnik`.

 ```
-npm install
-npm run build-desktop
+git clone git@github.com:maputnik/desktop.git
 ```

-You should now find the `maputnik` binary in your `desktop/bin` directory.
+Run `make` to install the 3rd party dependencies and build the `maputnik` binary embedding the editor.
+
+```
+make
+```
+
+You should now find the `maputnik` binary in your `bin` directory.
@@ -5,6 +5,7 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+
        "github.com/GeertJohan/go.rice"
 	"github.com/gorilla/handlers"
 	"github.com/gorilla/mux"
@@ -16,7 +17,7 @@ func main() {
 	app := cli.NewApp()
 	app.Name = "maputnik"
 	app.Usage = "Server for integrating Maputnik locally"
-	app.Version = Version
+	app.Version = "Editor: 1.7.0; Desktop: 1.1.0"

 	app.Flags = []cli.Flag{
 		&cli.StringFlag{
@@ -39,7 +40,7 @@ func main() {
 	}

 	app.Action = func(c *cli.Context) error {
-		gui := http.FileServer(rice.MustFindBox("editor").HTTPBox())
+		gui := http.FileServer(rice.MustFindBox("editor/public").HTTPBox())

 		router := mux.NewRouter().StrictSlash(true)

@@ -1,60 +0,0 @@
-{
-  "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": ""
-          }
-        }
-      }
-    }
-  }
-}
@@ -1,61 +0,0 @@
-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
-  }
-}
-)
@@ -1,17 +0,0 @@
-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__';
-  }
-}
@@ -1,20 +1,16 @@
 {
  "name": "maputnik",
-  "version": "3.0.0",
+  "version": "2.0.0",
  "description": "A MapLibre GL visual style editor",
  "type": "module",
  "main": "''",
  "scripts": {
    "start": "vite",
-    "build": "tsc && vite build --mode=production",
-    "build-desktop": "tsc && vite build --mode=desktop && cd desktop && make",
-    "build-linux": "tsc && vite build --mode=desktop && cd desktop && make bin/linux/maputnik",
-    "i18n:refresh": "i18next 'src/**/*.{ts,tsx,js,jsx}'",
-    "lint": "eslint",
+    "build": "tsc && vite build --base=/maputnik/",
+    "lint": "eslint ./src ./cypress --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
    "test": "cypress run",
    "cy:open": "cypress open",
-    "lint-css": "stylelint \"src/styles/*.scss\"",
-    "sort-styles": "jq 'sort_by(.id)' src/config/styles.json > tmp.json && mv tmp.json src/config/styles.json"
+    "lint-css": "stylelint \"src/styles/*.scss\""
  },
  "repository": {
    "type": "git",
@@ -24,30 +20,26 @@
  "license": "MIT",
  "homepage": "https://github.com/maplibre/maputnik#readme",
  "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
-    "@maplibre/maplibre-gl-geocoder": "^1.9.0",
-    "@maplibre/maplibre-gl-inspect": "^1.7.1",
-    "@maplibre/maplibre-gl-style-spec": "^23.3.0",
+    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
+    "@maplibre/maplibre-gl-geocoder": "^1.5.0",
+    "@maplibre/maplibre-gl-inspect": "^1.6.3",
+    "@maplibre/maplibre-gl-style-spec": "^20.1.1",
    "@mdi/js": "^7.4.47",
    "@mdi/react": "^1.6.1",
-    "@prantlf/jsonlint": "^16.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
    "array-move": "^4.0.0",
    "buffer": "^6.0.3",
    "classnames": "^2.5.1",
-    "codemirror": "^5.65.20",
-    "color": "^5.0.0",
+    "codemirror": "^5.65.2",
+    "color": "^4.2.3",
+    "cypress-plugin-tab": "^1.0.5",
    "detect-browser": "^5.3.0",
-    "downshift": "^9.0.10",
    "events": "^3.3.0",
    "file-saver": "^2.0.5",
-    "i18next": "^25.5.2",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "i18next-resources-to-backend": "^1.2.1",
    "json-stringify-pretty-compact": "^4.0.0",
    "json-to-ast": "^2.1.0",
+    "jsonlint": "github:josdejong/jsonlint#85a19d7",
    "lodash": "^4.17.21",
    "lodash.capitalize": "^4.2.1",
    "lodash.clamp": "^4.0.3",
@@ -55,27 +47,29 @@
    "lodash.get": "^4.4.2",
    "lodash.isequal": "^4.5.0",
    "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^5.7.1",
+    "maplibre-gl": "^4.1.1",
    "maputnik-design": "github:maputnik/design#172b06c",
-    "ol": "^10.6.1",
-    "ol-mapbox-style": "^13.1.0",
-    "pmtiles": "^4.3.0",
+    "ol": "^6.14.1",
+    "ol-mapbox-style": "^7.1.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
-    "react-accessible-accordion": "^5.0.1",
+    "react-accessible-accordion": "^5.0.0",
    "react-aria-menubutton": "^7.0.3",
    "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": "^18.2.0",
    "react-file-reader-input": "^2.0.0",
-    "react-i18next": "^15.7.3",
    "react-icon-base": "^2.1.2",
-    "react-icons": "^5.5.0",
+    "react-icons": "^5.0.1",
+    "react-sortable-hoc": "^2.0.0",
    "reconnecting-websocket": "^4.4.0",
+    "sass": "^1.72.0",
    "slugify": "^1.6.6",
    "string-hash": "^1.1.3",
-    "url": "^0.11.4"
+    "url": "^0.11.3"
  },
  "jshintConfig": {
    "esversion": 6
@@ -95,16 +89,15 @@
    }
  },
  "devDependencies": {
-    "@cypress/code-coverage": "^3.14.6",
-    "@eslint/js": "^9.35.0",
+    "@cypress/code-coverage": "^3.12.30",
    "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@shellygo/cypress-test-utils": "^6.0.1",
-    "@types/codemirror": "^5.60.16",
-    "@types/color": "^4.2.0",
-    "@types/cors": "^2.8.19",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@shellygo/cypress-test-utils": "^2.0.52",
+    "@types/codemirror": "^5.60.15",
+    "@types/color": "^3.0.6",
+    "@types/cors": "^2.8.17",
    "@types/file-saver": "^2.0.7",
-    "@types/geojson": "^7946.0.16",
+    "@types/geojson": "^7946.0.14",
    "@types/json-to-ast": "^2.1.4",
    "@types/lodash.capitalize": "^4.2.9",
    "@types/lodash.clamp": "^4.0.9",
@@ -112,39 +105,37 @@
    "@types/lodash.get": "^4.4.9",
    "@types/lodash.isequal": "^4.5.8",
    "@types/lodash.throttle": "^4.1.9",
+    "@types/mocha": "^10.0.6",
    "@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-aria-modal": "^4.0.10",
+    "@types/react-autocomplete": "^1.8.10",
    "@types/react-collapse": "^5.0.4",
-    "@types/react-color": "^3.0.13",
+    "@types/react-color": "^3.0.12",
    "@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": "^10.0.0",
-    "@types/wicg-file-system-access": "^2023.10.6",
-    "@vitejs/plugin-react": "^5.0.2",
+    "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-react": "^4.2.1",
    "cors": "^2.8.5",
-    "cypress": "^15.1.0",
-    "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^9.35.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "i18next-parser": "^9.3.0",
+    "cypress": "^13.7.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
    "istanbul": "^0.4.5",
    "istanbul-lib-coverage": "^3.2.2",
-    "postcss": "^8.5.6",
+    "mocha": "^10.3.0",
+    "postcss": "^8.4.38",
    "react-hot-loader": "^4.13.1",
-    "sass": "^1.92.1",
-    "stylelint": "^16.24.0",
-    "stylelint-config-recommended-scss": "^16.0.0",
-    "stylelint-scss": "^6.12.1",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.43.0",
-    "uuid": "^13.0.0",
-    "vite": "^7.1.5",
-    "vite-plugin-istanbul": "^7.1.0"
+    "stylelint": "^16.2.1",
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-scss": "^6.2.1",
+    "typescript": "^5.4.3",
+    "uuid": "^9.0.1",
+    "vite": "^5.2.2",
+    "vite-plugin-istanbul": "^6.0.0"
  }
 }
@@ -1,3 +1,5 @@
+// @ts-ignore - this can be easily replaced with arrow functions
+import autoBind from 'react-autobind';
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
@@ -6,7 +8,6 @@ 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, validateStyleMin} from '@maplibre/maplibre-gl-style-spec'

@@ -23,18 +24,22 @@ 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'
 import style from '../libs/style'
+import { initialStyleUrl, loadStyleUrl, removeStyleQuerystring } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
-import { createStyleStore, type IStyleStore } from '../libs/store/style-store-factory'
+import { StyleStore } from '../libs/stylestore'
+import { ApiStyleStore } from '../libs/apistore'
 import { RevisionStore } from '../libs/revisions'
 import LayerWatcher from '../libs/layerwatcher'
 import tokens from '../config/tokens.json'
 import isEqual from 'lodash.isequal'
+import Debug from '../libs/debug'
+import { SortEnd } from 'react-sortable-hoc';
 import { MapOptions } from 'maplibre-gl';
-import { OnStyleChangedOpts, StyleSpecificationWithId } from '../libs/definitions'

 // Buffer must be defined globally for @maplibre/maplibre-gl-style-spec validate() function to succeed.
 window.Buffer = buffer.Buffer;
@@ -43,7 +48,6 @@ function setFetchAccessToken(url: string, mapStyle: StyleSpecification) {
  const matchesTilehosting = url.match(/\.tilehosting\.com/);
  const matchesMaptiler = url.match(/\.maptiler\.com/);
  const matchesThunderforest = url.match(/\.thunderforest\.com/);
-  const matchesLocationIQ = url.match(/\.locationiq\.com/);
  if (matchesTilehosting || matchesMaptiler) {
    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true})
    if (accessToken) {
@@ -56,12 +60,6 @@ function setFetchAccessToken(url: string, mapStyle: StyleSpecification) {
      return url.replace('{key}', accessToken)
    }
  }
-  else if (matchesLocationIQ) {
-    const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true})
-    if (accessToken) {
-      return url.replace('{key}', accessToken)
-    }
-  }
  else {
    return url;
  }
@@ -80,6 +78,12 @@ function updateRootSpec(spec: any, fieldName: string, newValues: any) {
  }
 }

+type OnStyleChangedOpts = {
+  save?: boolean
+  addRevision?: boolean
+  initialLoad?: boolean
+}
+
 type MappedErrors = {
  message: string
  parsed?: {
@@ -95,11 +99,11 @@ type MappedErrors = {
 type AppState = {
  errors: MappedErrors[],
  infos: string[],
-  mapStyle: StyleSpecificationWithId,
+  mapStyle: StyleSpecification & {id: string},
  dirtyMapStyle?: StyleSpecification,
  selectedLayerIndex: number,
  selectedLayerOriginalId?: string,
-  sources: {[key: string]: SourceSpecification & {layers: string[]} },
+  sources: {[key: string]: SourceSpecification},
  vectorLayers: {},
  spec: any,
  mapView: {
@@ -124,63 +128,34 @@ 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: IStyleStore | null = null;
+  styleStore: StyleStore | ApiStyleStore;
  layerWatcher: LayerWatcher;
+  shortcutEl: ModalShortcuts | null = null;

  constructor(props: any) {
    super(props)
+    autoBind(this);

-    this.revisionStore = new RevisionStore();
-    this.configureKeyboardShortcuts();
-
-    this.state = {
-      errors: [],
-      infos: [],
-      mapStyle: style.emptyStyle,
-      selectedLayerIndex: 0,
-      sources: {},
-      vectorLayers: {},
-      mapState: "map",
-      spec: latest,
-      mapView: {
-        zoom: 0,
-        center: {
-          lng: 0,
-          lat: 0,
-        },
-      },
-      isOpen: {
-        settings: false,
-        sources: false,
-        open: false,
-        shortcuts: false,
-        export: false,
-        debug: false,
-      },
-      maplibreGlDebugOptions: {
-        showTileBoundaries: false,
-        showCollisionBoxes: false,
-        showOverdrawInspector: false,
-      },
-      openlayersDebugOptions: {
-        debugToolbox: false,
-      },
-      fileHandle: null,
+    this.revisionStore = new RevisionStore()
+    const params = new URLSearchParams(window.location.search.substring(1))
+    let port = params.get("localport")
+    if (port == null && (window.location.port !== "80" && window.location.port !== "443")) {
+      port = window.location.port
    }
-
-    this.layerWatcher = new LayerWatcher({
-      onVectorLayersChange: v => this.setState({ vectorLayers: v })
+    this.styleStore = new ApiStyleStore({
+      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, {save: false}),
+      port: port,
+      host: params.get("localhost")
    })
-  }

-  configureKeyboardShortcuts = () => {
+
    const shortcuts = [
      {
        key: "?",
@@ -250,6 +225,74 @@ export default class App extends React.Component<any, AppState> {
        }
      }
    })
+
+    const styleUrl = initialStyleUrl()
+    if(styleUrl && window.confirm("Load style from URL: " + styleUrl + " and discard current changes?")) {
+      this.styleStore = new StyleStore()
+      loadStyleUrl(styleUrl, mapStyle => this.onStyleChanged(mapStyle))
+      removeStyleQuerystring()
+    } else {
+      if(styleUrl) {
+        removeStyleQuerystring()
+      }
+      this.styleStore.init(err => {
+        if(err) {
+          console.log('Falling back to local storage for storing styles')
+          this.styleStore = new StyleStore()
+        }
+        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle, {initialLoad: true}))
+
+        if(Debug.enabled()) {
+          Debug.set("maputnik", "styleStore", this.styleStore);
+          Debug.set("maputnik", "revisionStore", this.revisionStore);
+        }
+      })
+    }
+
+    if(Debug.enabled()) {
+      Debug.set("maputnik", "revisionStore", this.revisionStore);
+      Debug.set("maputnik", "styleStore", this.styleStore);
+    }
+
+    this.state = {
+      errors: [],
+      infos: [],
+      mapStyle: style.emptyStyle,
+      selectedLayerIndex: 0,
+      sources: {},
+      vectorLayers: {},
+      mapState: "map",
+      spec: latest,
+      mapView: {
+        zoom: 0,
+        center: {
+          lng: 0,
+          lat: 0,
+        },
+      },
+      isOpen: {
+        settings: false,
+        sources: false,
+        open: false,
+        shortcuts: false,
+        export: false,
+        // TODO: Disabled for now, this should be opened on the Nth visit to the editor
+        survey: false,
+        debug: false,
+      },
+      maplibreGlDebugOptions: {
+        showTileBoundaries: false,
+        showCollisionBoxes: false,
+        showOverdrawInspector: false,
+      },
+      openlayersDebugOptions: {
+        debugToolbox: false,
+      },
+    }
+
+    this.layerWatcher = new LayerWatcher({
+      onVectorLayersChange: v => this.setState({ vectorLayers: v })
+    })
  }

  handleKeyPress = (e: KeyboardEvent) => {
@@ -275,8 +318,7 @@ export default class App extends React.Component<any, AppState> {
    }
  }

-  async componentDidMount() {
-    this.styleStore = await createStyleStore((mapStyle, opts) => this.onStyleChanged(mapStyle, opts));
+  componentDidMount() {
    window.addEventListener("keydown", this.handleKeyPress);
  }

@@ -284,8 +326,8 @@ export default class App extends React.Component<any, AppState> {
    window.removeEventListener("keydown", this.handleKeyPress);
  }

-  saveStyle(snapshotStyle: StyleSpecificationWithId) {
-    this.styleStore?.save(snapshotStyle)
+  saveStyle(snapshotStyle: StyleSpecification & {id: string}) {
+    this.styleStore.save(snapshotStyle)
  }

  updateFonts(urlTemplate: string) {
@@ -322,11 +364,10 @@ export default class App extends React.Component<any, AppState> {
        [property]: value
      }
    }
-
    this.onStyleChanged(changedStyle)
  }

-  onStyleChanged = (newStyle: StyleSpecificationWithId, opts: OnStyleChangedOpts={}): void => {
+  onStyleChanged = (newStyle: StyleSpecification & {id: string}, opts: OnStyleChangedOpts={}) => {
    opts = {
      save: true,
      addRevision: true,
@@ -334,29 +375,12 @@ 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);
    }

    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.
    const layerErrors: (Error | ValidationError)[] = [];
@@ -435,7 +459,7 @@ export default class App extends React.Component<any, AppState> {
    if (errors.length > 0) {
      dirtyMapStyle = cloneDeep(newStyle);

-      for (const error of errors) {
+      errors.forEach(error => {
        const {message} = error;
        if (message) {
          try {
@@ -445,10 +469,10 @@ export default class App extends React.Component<any, AppState> {
            unset(dirtyMapStyle, unsetPath);
          }
          catch (err) {
-            console.warn(message + " " + err);
-          }
+            console.warn(err);
          }
        }
+      });
    }

    if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
@@ -462,7 +486,7 @@ export default class App extends React.Component<any, AppState> {
      this.revisionStore.addRevision(newStyle);
    }
    if (opts.save) {
-      this.saveStyle(newStyle);
+      this.saveStyle(newStyle as StyleSpecification & {id: string});
    }

    this.setState({
@@ -495,7 +519,7 @@ export default class App extends React.Component<any, AppState> {
    })
  }

-  onMoveLayer = (move: {oldIndex: number; newIndex: number}) => {
+  onMoveLayer = (move: SortEnd) => {
    let { oldIndex, newIndex } = move;
    let layers = this.state.mapStyle.layers;
    oldIndex = clamp(oldIndex, 0, layers.length-1);
@@ -575,7 +599,7 @@ export default class App extends React.Component<any, AppState> {
    }, this.setStateInUrl);
  }

-  setDefaultValues = (styleObj: StyleSpecificationWithId) => {
+  setDefaultValues = (styleObj: StyleSpecification & {id: string}) => {
    const metadata: {[key: string]: string} = styleObj.metadata || {} as any
    if(metadata['maputnik:renderer'] === undefined) {
      const changedStyle = {
@@ -591,28 +615,26 @@ export default class App extends React.Component<any, AppState> {
    }
  }

-  openStyle = (styleObj: StyleSpecificationWithId, fileHandle: FileSystemFileHandle | null) => {
-    this.setState({fileHandle: fileHandle});
+  openStyle = (styleObj: StyleSpecification & {id: string}) => {
    styleObj = this.setDefaultValues(styleObj)
    this.onStyleChanged(styleObj)
  }

-  async fetchSources() {
-    const sourceList: {[key: string]: SourceSpecification & {layers: string[]}} = {};
-    for(const key of Object.keys(this.state.mapStyle.sources)) {
-      const source = this.state.mapStyle.sources[key];
-      if(source.type !== "vector" || !('url' in source)) {
-        sourceList[key] = this.state.sources[key] || {...this.state.mapStyle.sources[key]};
-        if (sourceList[key].layers === undefined) {
-          sourceList[key].layers = [];
-        }
-      } else {
+  fetchSources() {
+    const sourceList: {[key: string]: any} = {};
+
+    for(const [key, val] of Object.entries(this.state.mapStyle.sources)) {
+      if(
+        !Object.prototype.hasOwnProperty.call(this.state.sources, key) &&
+        val.type === "vector" &&
+        Object.prototype.hasOwnProperty.call(val, "url")
+      ) {
        sourceList[key] = {
-          type: source.type,
+          type: val.type,
          layers: []
        };

-        let url = source.url;
+        let url = val.url;

        try {
          url = setFetchAccessToken(url!, this.state.mapStyle)
@@ -620,33 +642,41 @@ export default class App extends React.Component<any, AppState> {
          console.warn("Failed to setFetchAccessToken: ", err);
        }

-        const setVectorLayers = (json:any) => {
+        fetch(url!, {
+          mode: 'cors',
+        })
+          .then(response => response.json())
+          .then(json => {
+
            if(!Object.prototype.hasOwnProperty.call(json, "vector_layers")) {
              return;
            }

-          for(const layer of json.vector_layers) {
-            sourceList[key].layers.push(layer.id)
-          }
-        };
+            // Create new objects before setState
+            const sources = Object.assign({}, {
+              [key]: this.state.sources[key],
+            });

-        try {
-          if (url!.startsWith("pmtiles://")) {
-            const json = await (new PMTiles(url!.substring(10))).getTileJson("");
-            setVectorLayers(json);
-          } else {
-            const response = await fetch(url!, { mode: 'cors' });
-            const json = await response.json();
-            setVectorLayers(json);
+            for(const layer of json.vector_layers) {
+              (sources[key] as any).layers.push(layer.id)
            }
-        } catch(err) {
-          console.error(`Failed to process source for url: '${url}', ${err}`);
+
+            console.debug("Updating source: "+key);
+            this.setState({
+              sources: sources
+            });
+          })
+          .catch(err => {
+            console.error("Failed to process sources for '%s'", url, err);
+          });
      }
+      else {
+        sourceList[key] = this.state.sources[key] || this.state.mapStyle.sources[key];
      }
    }

    if(!isEqual(this.state.sources, sourceList)) {
-      console.debug("Setting sources", sourceList);
+      console.debug("Setting sources");
      this.setState({
        sources: sourceList
      })
@@ -699,7 +729,6 @@ export default class App extends React.Component<any, AppState> {
        onLayerSelect={this.onLayerSelect}
      />
    } else {
-
      mapElement = <MapMaplibreGl {...mapProps}
        onChange={this.onMapChange}
        options={this.state.maplibreGlDebugOptions}
@@ -753,7 +782,6 @@ 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} = {};
@@ -811,6 +839,10 @@ 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,
@@ -823,10 +855,6 @@ export default class App extends React.Component<any, AppState> {
    this.setModal(modalName, !this.state.isOpen[modalName]);
  }

-  onSetFileHandle = (fileHandle: FileSystemFileHandle | null) => {
-    this.setState({ fileHandle });
-  }
-
  onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
    this.setState({
      openlayersDebugOptions: {
@@ -914,6 +942,7 @@ 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')}
      />
@@ -929,14 +958,11 @@ 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}
@@ -944,6 +970,10 @@ 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
@@ -1,26 +1,30 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ScrollContainer from './ScrollContainer'
-import { WithTranslation, withTranslation } from 'react-i18next';
-import { IconContext } from 'react-icons';

-type AppLayoutInternalProps = {
+type AppLayoutProps = {
  toolbar: React.ReactElement
  layerList: React.ReactElement
  layerEditor?: React.ReactElement
  map: React.ReactElement
  bottom?: React.ReactElement
  modals?: React.ReactNode
-} & WithTranslation;
+};

-class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
+class AppLayout extends React.Component<AppLayoutProps> {
+  static childContextTypes = {
+    reactIconBase: PropTypes.object
+  }
+
+  getChildContext() {
+    return {
+      reactIconBase: { size: 14 }
+    }
+  }

  render() {
-    document.body.dir = this.props.i18n.dir();
-
-    return <IconContext.Provider value={{size: '14px'}}>
-      <div className="maputnik-layout">
+    return <div className="maputnik-layout">
      {this.props.toolbar}
-        <div className="maputnik-layout-main">
      <div className="maputnik-layout-list">
        {this.props.layerList}
      </div>
@@ -30,16 +34,13 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
        </ScrollContainer>
      </div>
      {this.props.map}
-        </div>
      {this.props.bottom && <div className="maputnik-layout-bottom">
        {this.props.bottom}
      </div>
      }
      {this.props.modals}
    </div>
-    </IconContext.Provider>
  }
 }

-const AppLayout = withTranslation()(AppLayoutInternal);
-export default AppLayout;
+export default AppLayout
@@ -1,24 +1,23 @@
 import React from 'react'
 import {formatLayerId} from '../libs/format';
 import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
-import { Trans, WithTranslation, withTranslation } from 'react-i18next';

-type AppMessagePanelInternalProps = {
+type AppMessagePanelProps = {
  errors?: unknown[]
  infos?: string[]
  mapStyle?: StyleSpecification
  onLayerSelect?(...args: unknown[]): unknown
  currentLayer?: LayerSpecification
  selectedLayerIndex?: number
-} & WithTranslation;
+};

-class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalProps> {
+export default class AppMessagePanel extends React.Component<AppMessagePanelProps> {
  static defaultProps = {
    onLayerSelect: () => {},
  }

  render() {
-    const {t, selectedLayerIndex} = this.props;
+    const {selectedLayerIndex} = this.props;
    const errors = this.props.errors?.map((error: any, idx) => {
      let content;
      if (error.parsed && error.parsed.type === "layer") {
@@ -26,9 +25,7 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
        const layerId = this.props.mapStyle?.layers[parsed.data.index].id;
        content = (
          <>
-            <Trans t={t}>
            Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
-            </Trans>
            {selectedLayerIndex !== parsed.data.index &&
              <>
                &nbsp;&mdash;&nbsp;
@@ -36,7 +33,7 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
                  className="maputnik-message-panel__switch-button"
                  onClick={() => this.props.onLayerSelect!(parsed.data.index)}
                >
-                  {t("switch to layer")}
+                  switch to layer
                </button>
              </>
            }
@@ -62,5 +59,3 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
  }
 }

-const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
-export default AppMessagePanel;
@@ -2,21 +2,10 @@ import React from 'react'
 import classnames from 'classnames'
 import {detect} from 'detect-browser';

-import {
-  MdOpenInBrowser,
-  MdSettings,
-  MdLayers,
-  MdHelpOutline,
-  MdFindInPage,
-  MdLanguage,
-  MdSave
-} from 'react-icons/md'
+import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage} 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';
-import type { OnStyleChangedCallback } from '../libs/definitions';

 // 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();
@@ -91,12 +80,12 @@ class ToolbarAction extends React.Component<ToolbarActionProps> {

 export type MapState = "map" | "inspect" | "filter-achromatopsia" | "filter-deuteranopia" | "filter-protanopia" | "filter-tritanopia";

-type AppToolbarInternalProps = {
+type AppToolbarProps = {
  mapStyle: object
  inspectModeEnabled: boolean
-  onStyleChanged: OnStyleChangedCallback
+  onStyleChanged(...args: unknown[]): unknown
  // A new style has been uploaded
-  onStyleOpen: OnStyleChangedCallback
+  onStyleOpen(...args: unknown[]): unknown
  // A dict of source id's and the available source layers
  sources: object
  children?: React.ReactNode
@@ -104,9 +93,9 @@ type AppToolbarInternalProps = {
  onSetMapState(mapState: MapState): unknown
  mapState?: MapState
  renderer?: string
-} & WithTranslation;
+};

-class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
+export default class AppToolbar extends React.Component<AppToolbarProps> {
  state = {
    isOpen: {
      settings: false,
@@ -121,10 +110,6 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
    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();
@@ -136,41 +121,40 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
  }

  render() {
-    const t = this.props.t;
    const views = [
      {
        id: "map",
        group: "general",
-        title: t("Map"),
+        title: "Map",
      },
      {
        id: "inspect",
        group: "general",
-        title: t("Inspect"),
+        title: "Inspect",
        disabled: this.props.renderer === 'ol',
      },
      {
        id: "filter-deuteranopia",
        group: "color-accessibility",
-        title: t("Deuteranopia filter"),
+        title: "Deuteranopia filter",
        disabled: !colorAccessibilityFiltersEnabled,
      },
      {
        id: "filter-protanopia",
        group: "color-accessibility",
-        title: t("Protanopia filter"),
+        title: "Protanopia filter",
        disabled: !colorAccessibilityFiltersEnabled,
      },
      {
        id: "filter-tritanopia",
        group: "color-accessibility",
-        title: t("Tritanopia filter"),
+        title: "Tritanopia filter",
        disabled: !colorAccessibilityFiltersEnabled,
      },
      {
        id: "filter-achromatopsia",
        group: "color-accessibility",
-        title: t("Achromatopsia filter"),
+        title: "Achromatopsia filter",
        disabled: !colorAccessibilityFiltersEnabled,
      },
    ];
@@ -190,21 +174,21 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
            className="maputnik-toolbar-skip"
            onClick={_e => this.onSkip("layer-list")}
          >
-            {t("Layers list")}
+            Layers list
          </button>
          <button
            data-wd-key="root:skip:layer-editor"
            className="maputnik-toolbar-skip"
            onClick={_e => this.onSkip("layer-editor")}
          >
-            {t("Layer editor")}
+            Layer editor
          </button>
          <button
            data-wd-key="root:skip:map-view"
            className="maputnik-toolbar-skip"
            onClick={_e => this.onSkip("map")}
          >
-            {t("Map view")}
+            Map view
          </button>
          <a
            className="maputnik-toolbar-logo"
@@ -212,7 +196,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
            rel="noreferrer noopener"
            href="https://github.com/maplibre/maputnik"
          >
-            <img src={maputnikLogo} alt={t("Maputnik on GitHub")} />
+            <img src={maputnikLogo} alt="Maputnik on GitHub" />
            <h1>
              <span className="maputnik-toolbar-name">{pkgJson.name}</span>
              <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
@@ -222,24 +206,24 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
        <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
          <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
            <MdOpenInBrowser />
-            <IconText>{t("Open")}</IconText>
+            <IconText>Open</IconText>
          </ToolbarAction>
          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
-            <MdSave />
-            <IconText>{t("Save")}</IconText>
+            <MdFileDownload />
+            <IconText>Export</IconText>
          </ToolbarAction>
          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
            <MdLayers />
-            <IconText>{t("Data Sources")}</IconText>
+            <IconText>Data Sources</IconText>
          </ToolbarAction>
          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
            <MdSettings />
-            <IconText>{t("Style Settings")}</IconText>
+            <IconText>Style Settings</IconText>
          </ToolbarAction>

          <ToolbarSelect wdKey="nav:inspect">
            <MdFindInPage />
-            <IconText>{t("View")}
+            <label>View
              <select
                className="maputnik-select"
                data-wd-key="maputnik-select"
@@ -253,7 +237,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                    </option>
                  );
                })}
-                <optgroup label={t("Color accessibility")}>
+                <optgroup label="Color accessibility">
                  {views.filter(v => v.group === "color-accessibility").map((item) => {
                    return (
                      <option key={item.id} value={item.id} disabled={item.disabled}>
@@ -263,38 +247,15 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                  })}
                </optgroup>
              </select>
-            </IconText>
-          </ToolbarSelect>
-
-          <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>
+            </label>
          </ToolbarSelect>

          <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>
            <MdHelpOutline />
-            <IconText>{t("Help")}</IconText>
+            <IconText>Help</IconText>
          </ToolbarLink>
        </div>
      </div>
    </nav>
  }
 }
-
-const AppToolbar = withTranslation()(AppToolbarInternal);
-export default AppToolbar;
@@ -56,10 +56,8 @@ export default class Block extends React.Component<BlockProps, BlockState> {
    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
      event.stopPropagation();
    }
-    if (event.nativeEvent.target.nodeName !== "A") {
    event.preventDefault();
  }
-  }

  render() {
    return <label style={this.props.style}
@@ -102,3 +100,4 @@ export default class Block extends React.Component<BlockProps, BlockState> {
    </label>
  }
 }
+
@@ -31,3 +31,4 @@ export default class Collapse extends React.Component<CollapseProps> {
    }
  }
 }
+
@@ -16,3 +16,4 @@ export default class Collapser extends React.Component<CollapserProps> {
    return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
  }
 }
+
@@ -18,8 +18,6 @@ type DocProps = {
    'sdk-support'?: {
      [key: string]: typeof headers
    }
-    docUrl?: string,
-    docUrlLinkText?: string
  }
 };

@@ -27,7 +25,7 @@ export default class Doc extends React.Component<DocProps> {
  render () {
    const {fieldSpec} = this.props;

-    const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
+    const {doc, values} = fieldSpec;
    const sdkSupport = fieldSpec['sdk-support'];

    const renderValues = (
@@ -87,11 +85,6 @@ 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>
-        }
      </>
    );
  }
@@ -1,3 +1,4 @@
+import React from 'react'
 import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
 import Fieldset from './Fieldset'

@@ -8,12 +9,11 @@ type FieldArrayProps = InputArrayProps & {
  }
 };

-const FieldArray: React.FC<FieldArrayProps> = (props) => {
-  return (
-    <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
-      <InputArray {...props} />
+export default class FieldArray extends React.Component<FieldArrayProps> {
+  render() {
+    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputArray {...this.props} />
    </Fieldset>
-  );
-};
+  }
+}

-export default FieldArray;
@@ -1,3 +1,4 @@
+import React from 'react'
 import Block from './Block'
 import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'

@@ -7,12 +8,11 @@ type FieldAutocompleteProps = InputAutocompleteProps & {
 };


-const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
-  return (
-    <Block label={props.label}>
-      <InputAutocomplete {...props} />
+export default class FieldAutocomplete extends React.Component<FieldAutocompleteProps> {
+  render() {
+    return <Block label={this.props.label}>
+      <InputAutocomplete {...this.props} />
    </Block>
-  );
-};
+  }
+}

-export default FieldAutocomplete;
@@ -1,3 +1,4 @@
+import React from 'react'
 import Block from './Block'
 import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'

@@ -7,12 +8,11 @@ type FieldCheckboxProps = InputCheckboxProps & {
 };


-const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
-  return (
-    <Block label={props.label}>
-      <InputCheckbox {...props} />
+export default class FieldCheckbox extends React.Component<FieldCheckboxProps> {
+  render() {
+    return <Block label={this.props.label}>
+      <InputCheckbox {...this.props} />
    </Block>
-  );
-};
+  }
+}

-export default FieldCheckbox;
@@ -1,3 +1,4 @@
+import React from 'react'
 import Block from './Block'
 import InputColor, {InputColorProps} from './InputColor'

@@ -10,12 +11,11 @@ type FieldColorProps = InputColorProps & {
 };


-const FieldColor: React.FC<FieldColorProps> = (props) => {
-  return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputColor {...props} />
+export default class FieldColor extends React.Component<FieldColorProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputColor {...this.props} />
    </Block>
-  );
-};
+  }
+}

-export default FieldColor;
@@ -2,39 +2,32 @@ import React from 'react'

 import Block from './Block'
 import InputString from './InputString'
-import { WithTranslation, withTranslation } from 'react-i18next';

-type FieldCommentInternalProps = {
+type FieldCommentProps = {
  value?: string
  onChange(value: string | undefined): unknown
  error: {message: string}
-} & WithTranslation;
-
-const FieldCommentInternal: React.FC<FieldCommentInternalProps> = (props) => {
-  const t = props.t;
-  const fieldSpec = {
-    doc: t(
-      "Comments for the current layer. This is non-standard and not in the spec."
-    ),
 };

-  return (
-    <Block
-      label={t("Comments")}
+export default class FieldComment extends React.Component<FieldCommentProps> {
+  render() {
+    const fieldSpec = {
+      doc: "Comments for the current layer. This is non-standard and not in the spec."
+    };
+
+    return <Block
+      label={"Comments"}
      fieldSpec={fieldSpec}
      data-wd-key="layer-comment"
-      error={props.error}
+      error={this.props.error}
    >
      <InputString
        multi={true}
-        value={props.value}
-        onChange={props.onChange}
-        default={t("Comment...")}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        default="Comment..."
        data-wd-key="layer-comment.input"
      />
    </Block>
-  );
-};
-
-const FieldComment = withTranslation()(FieldCommentInternal);
-export default FieldComment;
+  }
+}
@@ -9,45 +9,57 @@ type FieldDocLabelProps = {
  onToggleDoc?(...args: unknown[]): unknown
 };

-
-const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
-  const [open, setOpen] = React.useState(false);
-
-  const onToggleDoc = (state: boolean) => {
-    setOpen(state);
-    if (props.onToggleDoc) {
-      props.onToggleDoc(state);
-    }
+type FieldDocLabelState = {
+  open: boolean
 };

-  const { label, fieldSpec } = props;
+export default class FieldDocLabel extends React.Component<FieldDocLabelProps, FieldDocLabelState> {
+  constructor (props: FieldDocLabelProps) {
+    super(props);
+    this.state = {
+      open: false,
+    }
+  }
+
+  onToggleDoc = (open: boolean) => {
+    this.setState({
+      open,
+    }, () => {
+      if (this.props.onToggleDoc) {
+        this.props.onToggleDoc(this.state.open);
+      }
+    });
+  }
+
+  render() {
+    const {label, fieldSpec} = this.props;
    const {doc} = fieldSpec || {};

    if (doc) {
-    return (
-      <label className="maputnik-doc-wrapper">
+      return <label className="maputnik-doc-wrapper">
        <div className="maputnik-doc-target">
          {label}
          {'\xa0'}
          <button
-            aria-label={open ? 'close property documentation' : 'open property documentation'}
-            className={`maputnik-doc-button maputnik-doc-button--${open ? 'open' : 'closed'}`}
-            onClick={() => onToggleDoc(!open)}
+            aria-label={this.state.open ? "close property documentation" : "open property documentation"}
+            className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
+            onClick={() => this.onToggleDoc(!this.state.open)}
            data-wd-key={'field-doc-button-'+label}
          >
-            {open ? <MdHighlightOff /> : <MdInfoOutline />}
+            {this.state.open ? <MdHighlightOff /> : <MdInfoOutline />}
          </button>
        </div>
      </label>
-    );
-  } else if (label) {
-    return (
-      <label className="maputnik-doc-wrapper">
-        <div className="maputnik-doc-target">{label}</div>
-      </label>
-    );
    }
-  return <div />;
-};
-
-export default FieldDocLabel;
+    else if (label) {
+      return <label className="maputnik-doc-wrapper">
+        <div className="maputnik-doc-target">
+          {label}
+        </div>
+      </label>
+    }
+    else {
+      <div />
+    }
+  }
+}
@@ -1,3 +1,4 @@
+import React from 'react'
 import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
 import Fieldset from './Fieldset'

@@ -5,12 +6,11 @@ type FieldDynamicArrayProps = InputDynamicArrayProps & {
  name?: string
 };

-const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
-  return (
-    <Fieldset label={props.label}>
-      <InputDynamicArray {...props} />
+export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
+  render() {
+    return <Fieldset label={this.props.label}>
+      <InputDynamicArray {...this.props} />
    </Fieldset>
-  );
-};
+  }
+}

-export default FieldDynamicArray;
@@ -1,3 +1,4 @@
+import React from 'react'
 import InputEnum, {InputEnumProps} from './InputEnum'
 import Fieldset from './Fieldset';

@@ -10,12 +11,10 @@ type FieldEnumProps = InputEnumProps & {
 };


-const FieldEnum: React.FC<FieldEnumProps> = (props) => {
-  return (
-    <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
-      <InputEnum {...props} />
+export default class FieldEnum extends React.Component<FieldEnumProps> {
+  render() {
+    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputEnum {...this.props} />
    </Fieldset>
-  );
-};
-
-export default FieldEnum;
+  }
+}
@@ -111,268 +111,297 @@ type FieldFunctionProps = {
  value?: any
 };

+type FieldFunctionState = {
+  dataType: string
+  isEditing: boolean
+}

 /** Supports displaying spec field for zoom function objects
 * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
 */
-const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
-  const [dataType, setDataType] = React.useState(
-    getDataType(props.value, props.fieldSpec)
-  );
-  const [isEditing, setIsEditing] = React.useState(false);
+export default class FieldFunction extends React.Component<FieldFunctionProps, FieldFunctionState> {
+  constructor (props: FieldFunctionProps) {
+    super(props);
+    this.state = {
+      dataType: getDataType(props.value, props.fieldSpec),
+      isEditing: false,
+    }
+  }

-  React.useEffect(() => {
-    if (!isEditing) {
-      setDataType(getDataType(props.value, props.fieldSpec));
+  static getDerivedStateFromProps(props: FieldFunctionProps, state: FieldFunctionState) {
+    // Because otherwise when editing values we end up accidentally changing field type.
+    if (state.isEditing) {
+      return {};
    }
-  }, [props.value, props.fieldSpec, isEditing]);
-
-  const getFieldFunctionType = (fieldSpec: any) => {
-    if (fieldSpec.expression.interpolated) {
-      return 'exponential';
-    }
-    if (fieldSpec.type === 'number') {
-      return 'interval';
-    }
-    return 'categorical';
+    else {
+      return {
+        isEditing: false,
+        dataType: getDataType(props.value, props.fieldSpec)
      };
+    }
+  }

-  const addStop = () => {
-    const stops = props.value.stops.slice(0);
-    const lastStop = stops[stops.length - 1];
-    if (typeof lastStop[0] === 'object') {
+  getFieldFunctionType(fieldSpec: any) {
+    if (fieldSpec.expression.interpolated) {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
+  addStop = () => {
+    const stops = this.props.value.stops.slice(0)
+    const lastStop = stops[stops.length - 1]
+    if (typeof lastStop[0] === "object") {
      stops.push([
        {zoom: lastStop[0].zoom + 1, value: lastStop[0].value},
-        lastStop[1],
-      ]);
-    } else {
-      stops.push([lastStop[0] + 1, lastStop[1]]);
+        lastStop[1]
+      ])
+    }
+    else {
+      stops.push([lastStop[0] + 1, lastStop[1]])
    }

    const changedValue = {
-      ...props.value,
+      ...this.props.value,
      stops: stops,
-    };
-
-    props.onChange(props.fieldName, changedValue);
-  };
-
-  const deleteExpression = () => {
-    const { fieldSpec, fieldName } = props;
-    props.onChange(fieldName, fieldSpec.default);
-    setDataType('value');
-  };
-
-  const deleteStop = (stopIdx: number) => {
-    const stops = props.value.stops.slice(0);
-    stops.splice(stopIdx, 1);
-
-    let changedValue: any = {
-      ...props.value,
-      stops: stops,
-    };
-
-    if (stops.length === 1) {
-      changedValue = stops[0][1];
    }

-    props.onChange(props.fieldName, changedValue);
-  };
+    this.props.onChange(this.props.fieldName, changedValue)
+  }

-  const makeZoomFunction = () => {
-    const { value } = props;
+  deleteExpression = () => {
+    const {fieldSpec, fieldName} = this.props;
+    this.props.onChange(fieldName, fieldSpec.default);
+    this.setState({
+      dataType: "value",
+    });
+  }

-    let zoomFunc: any;
-    if (typeof value === 'object') {
+  deleteStop = (stopIdx: number) => {
+    const stops = this.props.value.stops.slice(0)
+    stops.splice(stopIdx, 1)
+
+    let changedValue = {
+      ...this.props.value,
+      stops: stops,
+    }
+
+    if(stops.length === 1) {
+      changedValue = stops[0][1]
+    }
+
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
+  makeZoomFunction = () => {
+    const {value} = this.props;
+
+    let zoomFunc;
+    if (typeof(value) === "object") {
      if (value.stops) {
        zoomFunc = {
          base: value.base,
          stops: value.stops.map((stop: Stop) => {
-            return [stop[0].zoom, stop[1] || findDefaultFromSpec(props.fieldSpec)];
-          }),
-        };
-      } else {
+            return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
        zoomFunc = {
          base: value.base,
          stops: [
-            [6, findDefaultFromSpec(props.fieldSpec)],
-            [10, findDefaultFromSpec(props.fieldSpec)],
-          ],
-        };
+            [6, findDefaultFromSpec(this.props.fieldSpec)],
+            [10, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
        }
-    } else {
+      }
+    }
+    else {
      zoomFunc = {
        stops: [
-          [6, value || findDefaultFromSpec(props.fieldSpec)],
-          [10, value || findDefaultFromSpec(props.fieldSpec)],
-        ],
-      };
+          [6, value || findDefaultFromSpec(this.props.fieldSpec)],
+          [10, value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
    }

-    props.onChange(props.fieldName, zoomFunc);
-  };
+    this.props.onChange(this.props.fieldName, zoomFunc)
+  }

-  const undoExpression = () => {
-    const { value, fieldName } = props;
+  undoExpression = () => {
+    const {value, fieldName} = this.props;

    if (isGetExpression(value)) {
-      props.onChange(fieldName, {
-        type: 'identity',
-        property: value[1],
+      this.props.onChange(fieldName, {
+        "type": "identity",
+        "property": value[1]
+      });
+      this.setState({
+        dataType: "value",
      });
-      setDataType('value');
-    } else if (isLiteralExpression(value)) {
-      props.onChange(fieldName, value[1]);
-      setDataType('value');
    }
-  };
+    else if (isLiteralExpression(value)) {
+      this.props.onChange(fieldName, value[1]);
+      this.setState({
+        dataType: "value",
+      });
+    }
+  }

-  const canUndo = () => {
-    const { value, fieldSpec } = props;
+  canUndo = () => {
+    const {value, fieldSpec} = this.props;
    return (
      isGetExpression(value) ||
      isLiteralExpression(value) ||
      isPrimative(value) ||
-      (Array.isArray(value) && fieldSpec.type === 'array')
+      (Array.isArray(value) && fieldSpec.type === "array")
    );
-  };
+  }

-  const makeExpression = () => {
-    const { value, fieldSpec } = props;
+  makeExpression = () => {
+    const {value, fieldSpec} = this.props;
    let expression;

-    if (typeof value === 'object' && 'stops' in value) {
+    if (typeof(value) === "object" && 'stops' in value) {
      expression = styleFunction.convertFunction(value, fieldSpec);
-    } else if (isIdentityProperty(value)) {
-      expression = ['get', value.property];
-    } else {
-      expression = ['literal', value || props.fieldSpec.default];
    }
-    props.onChange(props.fieldName, expression);
-  };
+    else if (isIdentityProperty(value)) {
+      expression = ["get", value.property];
+    }
+    else {
+      expression = ["literal", value || this.props.fieldSpec.default];
+    }
+    this.props.onChange(this.props.fieldName, expression);
+  }

-  const makeDataFunction = () => {
-    const functionType = getFieldFunctionType(props.fieldSpec);
+  makeDataFunction = () => {
+    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
    const stopValue = functionType === 'categorical' ? '' : 0;
-    const { value } = props;
+    const {value} = this.props;
    let dataFunc;

-    if (typeof value === 'object') {
+    if (typeof(value) === "object") {
      if (value.stops) {
        dataFunc = {
-          property: '',
+          property: "",
          type: functionType,
          base: value.base,
          stops: value.stops.map((stop: Stop) => {
-            return [{ zoom: stop[0], value: stopValue }, stop[1] || findDefaultFromSpec(props.fieldSpec)];
-          }),
-        };
-      } else {
+            return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
        dataFunc = {
-          property: '',
+          property: "",
          type: functionType,
          base: value.base,
          stops: [
-            [{ zoom: 6, value: stopValue }, findDefaultFromSpec(props.fieldSpec)],
-            [{ zoom: 10, value: stopValue }, findDefaultFromSpec(props.fieldSpec)],
-          ],
-        };
+            [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
+            [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
        }
-    } else {
+      }
+    }
+    else {
      dataFunc = {
-        property: '',
+        property: "",
        type: functionType,
        base: value.base,
        stops: [
-          [{ zoom: 6, value: stopValue }, props.value || findDefaultFromSpec(props.fieldSpec)],
-          [{ zoom: 10, value: stopValue }, props.value || findDefaultFromSpec(props.fieldSpec)],
-        ],
-      };
+          [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
+          [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
    }

-    props.onChange(props.fieldName, dataFunc);
-  };
+    this.props.onChange(this.props.fieldName, dataFunc)
+  }

-  const onMarkEditing = () => {
-    setIsEditing(true);
-  };
+  onMarkEditing = () => {
+    this.setState({isEditing: true});
+  }

-  const onUnmarkEditing = () => {
-    setIsEditing(false);
-  };
-
-  const propClass =
-    props.fieldSpec.default === props.value ? 'maputnik-default-property' : 'maputnik-modified-property';
+  onUnmarkEditing = () => {
+    this.setState({isEditing: false});
+  }

+  render() {
+    const {dataType} = this.state;
+    const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
    let specField;

-  if (dataType === 'expression') {
+    if (dataType === "expression") {
      specField = (
        <ExpressionProperty
-        errors={props.errors}
-        onChange={props.onChange.bind(null, props.fieldName)}
-        canUndo={canUndo}
-        onUndo={undoExpression}
-        onDelete={deleteExpression}
-        fieldType={props.fieldType}
-        fieldName={props.fieldName}
-        fieldSpec={props.fieldSpec}
-        value={props.value}
-        onFocus={onMarkEditing}
-        onBlur={onUnmarkEditing}
-      />
-    );
-  } else if (dataType === 'zoom_function') {
-    specField = (
-      <ZoomProperty
-        errors={props.errors}
-        onChange={props.onChange.bind(null)}
-        fieldType={props.fieldType}
-        fieldName={props.fieldName}
-        fieldSpec={props.fieldSpec}
-        value={props.value}
-        onDeleteStop={deleteStop}
-        onAddStop={addStop}
-        onChangeToDataFunction={makeDataFunction}
-        onExpressionClick={makeExpression}
-      />
-    );
-  } else if (dataType === 'data_function') {
-    specField = (
-      <DataProperty
-        errors={props.errors}
-        onChange={props.onChange.bind(null)}
-        fieldType={props.fieldType}
-        fieldName={props.fieldName}
-        fieldSpec={props.fieldSpec}
-        value={props.value}
-        onDeleteStop={deleteStop}
-        onAddStop={addStop}
-        onChangeToZoomFunction={makeZoomFunction}
-        onExpressionClick={makeExpression}
-      />
-    );
-  } else {
-    specField = (
-      <SpecProperty
-        errors={props.errors}
-        onChange={props.onChange.bind(null)}
-        fieldType={props.fieldType}
-        fieldName={props.fieldName}
-        fieldSpec={props.fieldSpec}
-        value={props.value}
-        onZoomClick={makeZoomFunction}
-        onDataClick={makeDataFunction}
-        onExpressionClick={makeExpression}
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this, this.props.fieldName)}
+          canUndo={this.canUndo}
+          onUndo={this.undoExpression}
+          onDelete={this.deleteExpression}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onFocus={this.onMarkEditing}
+          onBlur={this.onUnmarkEditing}
        />
      );
    }
-
-  return (
-    <div className={propClass} data-wd-key={'spec-field-container:' + props.fieldName}>
+    else if (dataType === "zoom_function") {
+      specField = (
+        <ZoomProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+          onChangeToDataFunction={this.makeDataFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    else if (dataType === "data_function") {
+      // TODO: Rename to FieldFunction **this file** shouldn't be called that
+      specField = (
+        <DataProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+          onChangeToZoomFunction={this.makeZoomFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    else {
+      specField = (
+        <SpecProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onZoomClick={this.makeZoomFunction}
+          onDataClick={this.makeDataFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    return <div className={propClass} data-wd-key={"spec-field-container:"+this.props.fieldName}>
      {specField}
    </div>
-  );
-};
+  }
+}

-export default FieldFunction;
@@ -1,3 +1,4 @@
+import React from 'react'

 import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
@@ -10,19 +11,17 @@ type FieldIdProps = {
  error?: {message: string}
 };

-const FieldId: React.FC<FieldIdProps> = (props) => {
-  return (
-    <Block label="ID" fieldSpec={latest.layer.id}
-      data-wd-key={props.wdKey}
-      error={props.error}
+export default class FieldId extends React.Component<FieldIdProps> {
+  render() {
+    return <Block label={"ID"} fieldSpec={latest.layer.id}
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
    >
      <InputString
-        value={props.value}
-        onInput={props.onChange}
-        data-wd-key={props.wdKey + ".input"}
+        value={this.props.value}
+        onInput={this.props.onChange}
+        data-wd-key={this.props.wdKey + ".input"}
      />
    </Block>
-  );
-};
-
-export default FieldId;
+  }
+}
@@ -1,11 +1,13 @@
+import React from 'react'
 import InputJson, {InputJsonProps} from './InputJson'


 type FieldJsonProps = InputJsonProps & {};


-const FieldJson: React.FC<FieldJsonProps> = (props) => {
-  return <InputJson {...props} />;
-};
+export default class FieldJson extends React.Component<FieldJsonProps> {
+  render() {
+    return <InputJson {...this.props} />
+  }
+}

-export default FieldJson;
@@ -3,33 +3,28 @@ import React from 'react'
 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 FieldMaxZoomInternalProps = {
+type FieldMaxZoomProps = {
  value?: number
  onChange(value: number | undefined): unknown
  error?: {message: string}
-} & WithTranslation;
+};

-const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
-  const t = props.t;
-  return (
-    <Block label={t('Max Zoom')} fieldSpec={latest.layer.maxzoom}
-      error={props.error}
+export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {
+  render() {
+    return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
+      error={this.props.error}
      data-wd-key="max-zoom"
    >
      <InputNumber
        allowRange={true}
-        value={props.value}
-        onChange={props.onChange}
+        value={this.props.value}
+        onChange={this.props.onChange}
        min={latest.layer.maxzoom.minimum}
        max={latest.layer.maxzoom.maximum}
        default={latest.layer.maxzoom.maximum}
        data-wd-key="max-zoom.input"
      />
    </Block>
-  );
-};
-
-const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
-export default FieldMaxZoom;
+  }
+}
@@ -3,33 +3,28 @@ import React from 'react'
 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 FieldMinZoomInternalProps = {
+type FieldMinZoomProps = {
  value?: number
  onChange(...args: unknown[]): unknown
  error?: {message: string}
-} & WithTranslation;
+};

-const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
-  const t = props.t;
-  return (
-    <Block label={t('Min Zoom')} fieldSpec={latest.layer.minzoom}
-      error={props.error}
+export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {
+  render() {
+    return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
+      error={this.props.error}
      data-wd-key="min-zoom"
    >
      <InputNumber
        allowRange={true}
-        value={props.value}
-        onChange={props.onChange}
+        value={this.props.value}
+        onChange={this.props.onChange}
        min={latest.layer.minzoom.minimum}
        max={latest.layer.minzoom.maximum}
        default={latest.layer.minzoom.minimum}
        data-wd-key='min-zoom.input'
      />
    </Block>
-  );
-};
-
-const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
-export default FieldMinZoom;
+  }
+}
@@ -1,3 +1,4 @@
+import React from 'react'
 import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
 import Fieldset from './Fieldset'

@@ -7,12 +8,11 @@ type FieldMultiInputProps = InputMultiInputProps & {
 };


-const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
-  return (
-    <Fieldset label={props.label}>
-      <InputMultiInput {...props} />
+export default class FieldMultiInput extends React.Component<FieldMultiInputProps> {
+  render() {
+    return <Fieldset label={this.props.label}>
+      <InputMultiInput {...this.props} />
    </Fieldset>
-  );
-};
+  }
+}

-export default FieldMultiInput;
@@ -1,3 +1,4 @@
+import React from 'react'
 import InputNumber, {InputNumberProps} from './InputNumber'
 import Block from './Block'

@@ -10,12 +11,10 @@ type FieldNumberProps = InputNumberProps & {
 };


-const FieldNumber: React.FC<FieldNumberProps> = (props) => {
-  return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputNumber {...props} />
+export default class FieldNumber extends React.Component<FieldNumberProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputNumber {...this.props} />
    </Block>
-  );
-};
-
-export default FieldNumber;
+  }
+}
@@ -1,3 +1,4 @@
+import React from 'react'
 import Block from './Block'
 import InputSelect, {InputSelectProps} from './InputSelect'

@@ -10,12 +11,12 @@ type FieldSelectProps = InputSelectProps & {
 };


-const FieldSelect: React.FC<FieldSelectProps> = (props) => {
-  return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputSelect {...props} />
+export default class FieldSelect extends React.Component<FieldSelectProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputSelect {...this.props}/>
    </Block>
-  );
-};
+  }
+}
+

-export default FieldSelect;
@@ -3,40 +3,33 @@ import React from 'react'
 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 FieldSourceInternalProps = {
+type FieldSourceProps = {
  value?: string
  wdKey?: string
  onChange?(value: string| undefined): unknown
  sourceIds?: unknown[]
  error?: {message: string}
-} & WithTranslation;
-
-const FieldSourceInternal: React.FC<FieldSourceInternalProps> = ({
-  onChange = () => {},
-  sourceIds = [],
-  wdKey,
-  value,
-  error,
-  t
-}) => {
-  return (
-    <Block
-      label={t('Source')}
-      fieldSpec={latest.layer.source}
-      error={error}
-      data-wd-key={wdKey}
-    >
-      <InputAutocomplete
-        value={value}
-        onChange={onChange}
-        options={sourceIds?.map((src) => [src, src])}
-      />
-    </Block>
-  );
 };

+export default class FieldSource extends React.Component<FieldSourceProps> {
+  static defaultProps = {
+    onChange: () => {},
+    sourceIds: [],
+  }

-const FieldSource = withTranslation()(FieldSourceInternal);
-export default FieldSource;
+  render() {
+    return <Block
+      label={"Source"}
+      fieldSpec={latest.layer.source}
+      error={this.props.error}
+      data-wd-key={this.props.wdKey}
+    >
+      <InputAutocomplete
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceIds?.map(src => [src, src])}
+      />
+    </Block>
+  }
+}
@@ -3,37 +3,35 @@ 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 FieldSourceLayerInternalProps = {
+type FieldSourceLayerProps = {
  value?: string
  onChange?(...args: unknown[]): unknown
  sourceLayerIds?: unknown[]
+  isFixed?: boolean
  error?: {message: string}
-} & WithTranslation;
-
-const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = ({
-  onChange = () => {},
-  sourceLayerIds = [],
-  value,
-  error,
-  t
-}) => {
-  return (
-    <Block
-      label={t('Source Layer')}
-      fieldSpec={latest.layer['source-layer']}
-      data-wd-key="layer-source-layer"
-      error={error}
-    >
-      <InputAutocomplete
-        value={value}
-        onChange={onChange}
-        options={sourceLayerIds?.map((l) => [l, l])}
-      />
-    </Block>
-  );
 };

-const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
-export default FieldSourceLayer;
+export default class FieldSourceLayer extends React.Component<FieldSourceLayerProps> {
+  static defaultProps = {
+    onChange: () => {},
+    sourceLayerIds: [],
+    isFixed: false
+  }
+
+  render() {
+    return <Block 
+      label={"Source Layer"} 
+      fieldSpec={latest.layer['source-layer']}
+      data-wd-key="layer-source-layer"
+      error={this.props.error}
+    >
+      <InputAutocomplete
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceLayerIds?.map(l => [l, l])}
+      />
+    </Block>
+  }
+}
@@ -1,3 +1,4 @@
+import React from 'react'
 import Block from './Block'
 import InputString, {InputStringProps} from './InputString'

@@ -9,12 +10,10 @@ type FieldStringProps = InputStringProps & {
  }
 };

-const FieldString: React.FC<FieldStringProps> = (props) => {
-  return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputString {...props} />
+export default class FieldString extends React.Component<FieldStringProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputString {...this.props} />
    </Block>
-  );
-};
-
-export default FieldString;
+  }
+}
@@ -1,47 +1,52 @@
 import React from 'react'
-import {v8} 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';
-import { startCase } from 'lodash'

-type FieldTypeInternalProps = {
+type FieldTypeProps = {
  value: string
  wdKey?: string
  onChange(value: string): unknown
  error?: {message: string}
  disabled?: boolean
-} & WithTranslation;
-
-const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
-  t,
-  value,
-  wdKey,
-  onChange,
-  error,
-  disabled = false
-}) => {
-  const layerstypes: [string, string][] = Object.keys(v8.layer.type.values || {}).map(v => [v, startCase(v.replace(/-/g, ' '))]);
-  return (
-    <Block label={t('Type')} fieldSpec={v8.layer.type}
-      data-wd-key={wdKey}
-      error={error}
-    >
-      {disabled && (
-        <InputString value={value} disabled={true} />
-      )}
-      {!disabled && (
-        <InputSelect
-          options={layerstypes}
-          onChange={onChange}
-          value={value}
-          data-wd-key={wdKey + '.select'}
-        />
-      )}
-    </Block>
-  );
 };

-const FieldType = withTranslation()(FieldTypeInternal);
-export default FieldType;
+export default class FieldType extends React.Component<FieldTypeProps> {
+  static defaultProps = {
+    disabled: false,
+  }
+
+  render() {
+    return <Block label={"Type"} fieldSpec={latest.layer.type}
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
+    >
+      {this.props.disabled &&
+        <InputString
+          value={this.props.value}
+          disabled={true}
+        />
+      }
+      {!this.props.disabled &&
+        <InputSelect
+          options={[
+            ['background', 'Background'],
+            ['fill', 'Fill'],
+            ['line', 'Line'],
+            ['symbol', 'Symbol'],
+            ['raster', 'Raster'],
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+            ['hillshade', 'Hillshade'],
+            ['heatmap', 'Heatmap'],
+          ]}
+          onChange={this.props.onChange}
+          value={this.props.value}
+          data-wd-key={this.props.wdKey + ".select"}
+        />
+      }
+    </Block>
+  }
+}
@@ -1,3 +1,4 @@
+import React from 'react'
 import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
 import Block from './Block'

@@ -10,12 +11,13 @@ type FieldUrlProps = InputUrlProps & {
 };


-const FieldUrl: React.FC<FieldUrlProps> = (props) => {
+export default class FieldUrl extends React.Component<FieldUrlProps> {
+  render () {
    return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputUrl {...props} />
+      <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+        <InputUrl {...this.props} />
      </Block>
    );
-};
+  }
+}

-export default FieldUrl;
@@ -9,40 +9,57 @@ type FieldsetProps = PropsWithChildren & {
  action?: ReactElement,
 };

-
-const Fieldset: React.FC<FieldsetProps> = (props) => {
-  const [showDoc, setShowDoc] = React.useState(false);
-  const labelId = React.useRef(generateUniqueId('fieldset_label_'));
-
-  const onToggleDoc = (val: boolean) => {
-    setShowDoc(val);
+type FieldsetState = {
+  showDoc: boolean
 };

-  return (
-    <div className="maputnik-input-block" role="group" aria-labelledby={labelId.current}>
-      {props.fieldSpec && (
+export default class Fieldset extends React.Component<FieldsetProps, FieldsetState> {
+  _labelId: string;
+
+  constructor (props: FieldsetProps) {
+    super(props);
+    this._labelId = generateUniqueId(`fieldset_label_`);
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onToggleDoc = (val: boolean) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
+  render () {
+    return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
+      {this.props.fieldSpec &&
        <div className="maputnik-input-block-label">
          <FieldDocLabel
-            label={props.label}
-            onToggleDoc={onToggleDoc}
-            fieldSpec={props.fieldSpec}
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
          />
        </div>
-      )}
-      {!props.fieldSpec && (
+      }
+      {!this.props.fieldSpec &&
        <div className="maputnik-input-block-label">
-          {props.label}
+          {this.props.label}
        </div>
-      )}
-      <div className="maputnik-input-block-action">{props.action}</div>
-      <div className="maputnik-input-block-content">{props.children}</div>
-      {props.fieldSpec && (
-        <div className="maputnik-doc-inline" style={{ display: showDoc ? '' : 'none' }}>
-          <Doc fieldSpec={props.fieldSpec} />
+      }
+      <div className="maputnik-input-block-action">
+        {this.props.action}
      </div>
-      )}
+      <div className="maputnik-input-block-content">
+        {this.props.children}
      </div>
-  );
-};
-
-export default Fieldset;
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
+    </div>
+  }
+}
@@ -1,7 +1,7 @@
 import React from 'react'
 import {mdiTableRowPlusAfter} from '@mdi/js';
 import {isEqual} from 'lodash';
-import {ExpressionSpecification, LegacyFilterSpecification} from 'maplibre-gl'
+import {ExpressionSpecification, LegacyFilterSpecification, StyleSpecification} from 'maplibre-gl'
 import {latest, migrate, convertFilter} from '@maplibre/maplibre-gl-style-spec'
 import {mdiFunctionVariant} from '@mdi/js';

@@ -13,11 +13,9 @@ import FilterEditorBlock from './FilterEditorBlock'
 import InputButton from './InputButton'
 import Doc from './Doc'
 import ExpressionProperty from './_ExpressionProperty';
-import { WithTranslation, withTranslation } from 'react-i18next';
-import type { StyleSpecificationWithId } from '../libs/definitions';


-function combiningFilter(props: FilterEditorInternalProps): LegacyFilterSpecification | ExpressionSpecification {
+function combiningFilter(props: FilterEditorProps): LegacyFilterSpecification | ExpressionSpecification {
  const filter = props.filter || ['all'];

  if (!Array.isArray(filter)) {
@@ -40,7 +38,7 @@ function migrateFilter(filter: LegacyFilterSpecification | ExpressionSpecificati
  return (migrate(createStyleFromFilter(filter) as any).layers[0] as any).filter;
 }

-function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpecification): StyleSpecificationWithId {
+function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpecification): StyleSpecification & {id: string} {
  return {
    "id": "tmp",
    "version": 8,
@@ -91,13 +89,13 @@ function hasNestedCombiningFilter(filter: LegacyFilterSpecification | Expression
  return false
 }

-type FilterEditorInternalProps = {
+type FilterEditorProps = {
  /** 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
@@ -105,12 +103,12 @@ type FilterEditorState = {
  valueIsSimpleFilter?: boolean
 };

-class FilterEditorInternal extends React.Component<FilterEditorInternalProps, FilterEditorState> {
+export default class FilterEditor extends React.Component<FilterEditorProps, FilterEditorState> {
  static defaultProps = {
    filter: ["all"],
  }

-  constructor (props: FilterEditorInternalProps) {
+  constructor (props: FilterEditorProps) {
    super(props);
    this.state = {
      showDoc: false,
@@ -157,17 +155,17 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
    })
  }

-  static getDerivedStateFromProps(props: Readonly<FilterEditorInternalProps>, state: FilterEditorState) {
+  static getDerivedStateFromProps(props: FilterEditorProps, currentState: FilterEditorState) {
    const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));

    // Upgrade but never downgrade
-    if (!displaySimpleFilter && state.displaySimpleFilter === true) {
+    if (!displaySimpleFilter && currentState.displaySimpleFilter === true) {
      return {
        displaySimpleFilter: false,
        valueIsSimpleFilter: false,
      };
    }
-    else if (displaySimpleFilter && state.displaySimpleFilter === false) {
+    else if (displaySimpleFilter && currentState.displaySimpleFilter === false) {
      return {
        valueIsSimpleFilter: true,
      }
@@ -180,7 +178,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
  }

  render() {
-    const {errors, t} = this.props;
+    const {errors} = this.props;
    const {displaySimpleFilter} = this.state;
    const fieldSpec={
      doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."
@@ -192,16 +190,16 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
    if (isNestedCombiningFilter) {
      return <div className="maputnik-filter-editor-unsupported">
        <p>
-          {t("Nested filters are not supported.")}
+          Nested filters are not supported.
        </p>
        <InputButton
          onClick={this.makeExpression}
-          title={t("Convert to expression")}
+          title="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>
-          {t("Upgrade to expression")}
+          Upgrade to expression
        </InputButton>
      </div>
    }
@@ -214,7 +212,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
        <div>
          <InputButton
            onClick={this.makeExpression}
-            title={t("Convert to expression")}
+            title="Convert to expression"
            className="maputnik-make-zoom-function"
          >
            <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
@@ -249,17 +247,13 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
          <Block
            key="top"
            fieldSpec={fieldSpec}
-            label={t("Filter")}
+            label={"Filter"}
            action={actions}
          >
            <InputSelect
              value={combiningOp}
              onChange={(v: [string, any]) => this.onFilterPartChanged(0, v)}
-              options={[
-                ["all", t("every filter matches")],
-                ["none", t("no filter matches")],
-                ["any", t("any filter matches")]
-              ]}
+              options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
            />
          </Block>
          {editorBlocks}
@@ -274,7 +268,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
            >
              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                <path fill="currentColor" d={mdiTableRowPlusAfter} />
-              </svg> {t("Add filter")}
+              </svg> Add filter
            </InputButton>
          </div>
          <div
@@ -305,13 +299,12 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
          />
          {this.state.valueIsSimpleFilter &&
            <div className="maputnik-expr-infobox">
-              {t("You've entered an old style filter.")}
-              {' '}
+              You&apos;ve entered a old style filter,{' '}
              <button
                onClick={this.makeFilter}
                className="maputnik-expr-infobox__button"
              >
-                {t("Switch to filter editor.")}
+                switch to filter editor
              </button>
            </div>
          }
@@ -320,6 +313,3 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
    }
  }
 }
-
-const FilterEditor = withTranslation()(FilterEditorInternal);
-export default FilterEditor;
@@ -1,31 +1,27 @@
 import React, { PropsWithChildren } from 'react'
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
-import { WithTranslation, withTranslation } from 'react-i18next';

-type FilterEditorBlockInternalProps = PropsWithChildren & {
+type FilterEditorBlockProps = PropsWithChildren & {
  onDelete(...args: unknown[]): unknown
-} & WithTranslation;
+};

-class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInternalProps> {
+export default class FilterEditorBlock extends React.Component<FilterEditorBlockProps> {
  render() {
-    const t = this.props.t;
    return <div className="maputnik-filter-editor-block">
-      <div className="maputnik-filter-editor-block-content">
-        {this.props.children}
-      </div>
      <div className="maputnik-filter-editor-block-action">
        <InputButton
-          className="maputnik-icon-button"
+          className="maputnik-delete-filter"
          onClick={this.props.onDelete}
-          title={t("Delete filter block")}
+          title="Delete filter block"
        >
          <MdDelete />
        </InputButton>
      </div>
+      <div className="maputnik-filter-editor-block-content">
+        {this.props.children}
+      </div>
    </div>
  }
 }

-const FilterEditorBlock = withTranslation()(FilterEditorBlockInternal);
-export default FilterEditorBlock;
@@ -11,3 +11,5 @@ export default class IconBackground extends React.Component {
    )
  }
 }
+
+
@@ -11,3 +11,5 @@ export default class IconCircle extends React.Component {
    )
  }
 }
+
+
@@ -11,3 +11,5 @@ export default class IconFill extends React.Component {
    )
  }
 }
+
+
@@ -30,3 +30,4 @@ export default class IconLayer extends React.Component<IconLayerProps> {
    }
  }
 }
+
@@ -11,3 +11,5 @@ export default class IconLine extends React.Component {
    )
  }
 }
+
+
@@ -13,3 +13,6 @@ export default class IconSymbol extends React.Component {
    )
  }
 }
+
+
+
@@ -32,7 +32,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
    };
  }

-  static getDerivedStateFromProps(props: Readonly<FieldArrayProps>, state: FieldArrayState) {
+  static getDerivedStateFromProps(props: FieldArrayProps, state: FieldArrayState) {
    const value: any[] = [];
    const initialPropsValue = state.initialPropsValue.slice(0);

@@ -115,3 +115,4 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
    )
  }
 }
+
@@ -1,18 +0,0 @@
-import InputAutocomplete from './InputAutocomplete'
-import { mount } from 'cypress/react'
-
-const fruits = ['apple', 'banana', 'cherry'];
-
-describe('<InputAutocomplete />', () => {
-  it('filters options when typing', () => {
-    mount(
-      <InputAutocomplete aria-label="Fruit" options={fruits.map(f => [f, f])} />
-    );
-    cy.get('input').focus();
-    cy.get('.maputnik-autocomplete-menu-item').should('have.length', 3);
-    cy.get('input').type('ch');
-    cy.get('.maputnik-autocomplete-menu-item').should('have.length', 1).and('contain', 'cherry');
-    cy.get('.maputnik-autocomplete-menu-item').click();
-    cy.get('input').should('have.value', 'cherry');
-  });
-});
@@ -1,116 +1,102 @@
 import React from 'react'
 import classnames from 'classnames'
-import {useCombobox} from 'downshift'
+import Autocomplete from 'react-autocomplete'

-const MAX_HEIGHT = 140
+
+const MAX_HEIGHT = 140;

 export type InputAutocompleteProps = {
  value?: string
-  options?: any[]
-  onChange?(value: string | undefined): unknown
+  options: any[]
+  onChange(value: string | undefined): unknown
+  keepMenuWithinWindowBounds?: boolean
  'aria-label'?: string
 };

-export default function InputAutocomplete({
-  value,
-  options = [],
-  onChange = () => {},
-  'aria-label': ariaLabel,
-}: InputAutocompleteProps) {
-  const [input, setInput] = React.useState(value || '')
-  const menuRef = React.useRef<HTMLDivElement>(null)
-  const [maxHeight, setMaxHeight] = React.useState(MAX_HEIGHT)
-
-  const filteredItems = React.useMemo(() => {
-    const lv = input.toLowerCase()
-    return options.filter((item) => item[0].toLowerCase().includes(lv))
-  }, [options, input])
-
-  const calcMaxHeight = React.useCallback(() => {
-    if (menuRef.current) {
-      const space = window.innerHeight - menuRef.current.getBoundingClientRect().top
-      setMaxHeight(Math.min(space, MAX_HEIGHT))
+export default class InputAutocomplete extends React.Component<InputAutocompleteProps> {
+  state = {
+    maxHeight: MAX_HEIGHT
  }
-  }, [])

-  const {
-    isOpen,
-    getMenuProps,
-    getInputProps,
-    getItemProps,
-    highlightedIndex,
-    openMenu,
-  } = useCombobox({
-    items: filteredItems,
-    inputValue: input,
-    itemToString: (item) => (item ? item[0] : ''),
-    stateReducer: (_state, action) => {
-      if (action.type === useCombobox.stateChangeTypes.InputClick) {
-        return {...action.changes, isOpen: true}
+  autocompleteMenuEl: HTMLDivElement | null = null;
+
+  static defaultProps = {
+    onChange: () => {},
+    options: [],
  }
-      return action.changes
-    },
-    onSelectedItemChange: ({selectedItem}) => {
-      const v = selectedItem ? selectedItem[0] : ''
-      setInput(v)
-      onChange(selectedItem ? selectedItem[0] : undefined)
-    },
-    onInputValueChange: ({inputValue: v}) => {
-      if (typeof v === 'string') {
-        setInput(v)
-        onChange(v === '' ? undefined : v)
-        openMenu()
-      }
-    },
+
+  calcMaxHeight() {
+    if(this.props.keepMenuWithinWindowBounds) {
+      const maxHeight = window.innerHeight - this.autocompleteMenuEl!.getBoundingClientRect().top;
+      const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
+
+      if(limitedMaxHeight != this.state.maxHeight) {
+        this.setState({
+          maxHeight: limitedMaxHeight
        })
-
-  React.useEffect(() => {
-    if (isOpen) {
-      calcMaxHeight()
      }
-  }, [isOpen, calcMaxHeight])
+    }
+  }

-  React.useEffect(() => {
-    window.addEventListener('resize', calcMaxHeight)
-    return () => window.removeEventListener('resize', calcMaxHeight)
-  }, [calcMaxHeight])
+  componentDidMount() {
+    this.calcMaxHeight();
+  }

-  React.useEffect(() => {
-    setInput(value || '')
-  }, [value])
+  componentDidUpdate() {
+    this.calcMaxHeight();
+  }

-  return (
-    <div className="maputnik-autocomplete">
-      <input
-        {...getInputProps({
-          'aria-label': ariaLabel,
-          className: 'maputnik-string',
-          spellCheck: false,
-          onFocus: () => openMenu(),
-        })}
-      />
-      <div
-        {...getMenuProps({}, {suppressRefError: true})}
-        ref={menuRef}
-        style={{position: 'fixed', overflow: 'auto', maxHeight, zIndex: 998}}
-        className="maputnik-autocomplete-menu"
+  onChange(v: string) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
+  render() {
+    return <div
+      ref={(el) => {
+        this.autocompleteMenuEl = el;
+      }}
    >
-        {isOpen &&
-          filteredItems.map((item, index) => (
+      <Autocomplete
+        menuStyle={{
+          position: "fixed",
+          overflow: "auto",
+          maxHeight: this.state.maxHeight,
+          zIndex: '998'
+        }}
+        wrapperProps={{
+          className: "maputnik-autocomplete",
+          style: {}
+        }}
+        inputProps={{
+          'aria-label': this.props['aria-label'],
+          className: "maputnik-string",
+          spellCheck: false
+        }}
+        value={this.props.value}
+        items={this.props.options}
+        getItemValue={(item) => item[0]}
+        onSelect={v => this.onChange(v)}
+        onChange={(_e, v) => this.onChange(v)}
+        shouldItemRender={(item, value="") => {
+          if (typeof(value) === "string") {
+            return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
+          }
+          return false
+        }}
+        renderItem={(item, isHighlighted) => (
          <div
            key={item[0]}
-              {...getItemProps({
-                item,
-                index,
-                className: classnames('maputnik-autocomplete-menu-item', {
-                  'maputnik-autocomplete-menu-item-selected': highlightedIndex === index,
-                }),
+            className={classnames({
+              "maputnik-autocomplete-menu-item": true,
+              "maputnik-autocomplete-menu-item-selected": isHighlighted,
            })}
          >
            {item[1]}
          </div>
-          ))}
+        )}
+      />
    </div>
-    </div>
-  )
  }
+}
+
+
@@ -133,3 +133,4 @@ export default class InputColor extends React.Component<InputColorProps> {
    </div>
  }
 }
+
@@ -1,7 +1,6 @@
 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'
@@ -22,11 +21,10 @@ export type FieldDynamicArrayProps = {
  }
  'aria-label'?: string
  label: string
-}
+};

-type FieldDynamicArrayInternalProps = FieldDynamicArrayProps & WithTranslation;

-class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInternalProps> {
+export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
  changeValue(idx: number, newValue: string | number | undefined) {
    const values = this.values.slice(0)
    values[idx] = newValue
@@ -64,13 +62,8 @@ class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInterna
  }

  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)}
-        {...i18nProps}
-      />;
+      const deleteValueBtn= <DeleteValueInputButton onClick={this.deleteValue.bind(this, i)} />
      let input;
      if(this.props.type === 'url') {
        input = <InputUrl
@@ -124,27 +117,23 @@ class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInterna
          className="maputnik-array-add-value"
          onClick={this.addValue}
        >
-          {t("Add value")}
+          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={t("Remove array item")}
+      title="Remove array item"
    >
      <FieldDocLabel
        label={<MdDelete />}
@@ -152,3 +141,4 @@ class DeleteValueInputButton extends React.Component<DeleteValueInputButtonProps
    </InputButton>
  }
 }
+
@@ -47,3 +47,4 @@ export default class InputEnum extends React.Component<InputEnumProps> {
    }
  }
 }
+
@@ -1,7 +1,6 @@
 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'
@@ -28,7 +27,6 @@ export type InputJsonProps = {
  mode?: ModeSpec<any>
  lint?: boolean | object
 };
-type InputJsonInternalProps = InputJsonProps & WithTranslation;

 type InputJsonState = {
  isEditing: boolean
@@ -36,7 +34,7 @@ type InputJsonState = {
  prevValue: string
 };

-class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJsonState> {
+export default class InputJson extends React.Component<InputJsonProps, InputJsonState> {
  static defaultProps = {
    lineNumbers: true,
    lineWrapping: false,
@@ -54,7 +52,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
  _el: HTMLDivElement | null = null;
  _cancelNextChange: boolean = false;

-  constructor(props: InputJsonInternalProps) {
+  constructor(props: InputJsonProps) {
    super(props);
    this._keyEvent = "keyboard";
    this.state = {
@@ -158,7 +156,6 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
  }

  render() {
-    const t = this.props.t;
    const {showMessage} = this.state;
    const style = {} as {maxHeight?: number};
    if (this.props.maxHeight) {
@@ -167,9 +164,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso

    return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
      <div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
-        <Trans t={t}>
        Press <kbd>ESC</kbd> to lose focus
-        </Trans>
      </div>
      <div
        className={classnames("codemirror-container", this.props.className)}
@@ -179,6 +174,3 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
    </div>
  }
 }
-
-const InputJson = withTranslation()(InputJsonInternal);
-export default InputJson;
@@ -20,7 +20,7 @@ export default class InputMultiInput extends React.Component<InputMultiInputProp
    const radios = options.map(([val, label])=> {
      return <label
        key={val}
-        className={classnames("maputnik-button", "maputnik-radio-as-button", {"maputnik-button-selected": val === selectedValue})}
+        className={classnames("maputnik-radio-as-button", {"maputnik-button-selected": val === selectedValue})}
      >
        <input type="radio"
          name={this.props.name}
@@ -37,3 +37,5 @@ export default class InputMultiInput extends React.Component<InputMultiInputProp
    </fieldset>
  }
 }
+
+
@@ -41,7 +41,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
    }
  }

-  static getDerivedStateFromProps(props: Readonly<InputNumberProps>, state: InputNumberState) {
+  static getDerivedStateFromProps(props: InputNumberProps, state: InputNumberState) {
    if (!state.editing && props.value !== state.value) {
      return {
        value: props.value,
@@ -244,3 +244,5 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
    }
  }
 }
+
+
@@ -30,3 +30,5 @@ export default class InputSelect extends React.Component<InputSelectProps> {
    </select>
  }
 }
+
+
@@ -33,7 +33,7 @@ export default class InputString extends React.Component<InputStringProps, Input
    }
  }

-  static getDerivedStateFromProps(props: Readonly<InputStringProps>, state: InputStringState) {
+  static getDerivedStateFromProps(props: InputStringProps, state: InputStringState) {
    if (!state.editing) {
      return {
        value: props.value
@@ -97,3 +97,5 @@ export default class InputString extends React.Component<InputStringProps, Input
    });
  }
 }
+
+
@@ -1,10 +1,9 @@
 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, t: TFunction): JSX.Element | undefined {
+
+function validate(url: string) {
  if (url === "") {
    return;
  }
@@ -15,7 +14,7 @@ function validate(url: string, t: TFunction): JSX.Element | undefined {
      const urlObj = new URL(url);
      return urlObj.protocol;
    }
-    catch (_err) {
+    catch (err) {
      return undefined;
    }
  };
@@ -23,19 +22,15 @@ function validate(url: string, t: TFunction): JSX.Element | undefined {
  const isSsl = window.location.protocol === "https:";

  if (!protocol) {
-    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>
-      );
+        Must provide protocol {
+          isSsl
+            ? <code>https://</code>
+            : <><code>http://</code> or <code>https://</code></>
        }
+      </SmallError>
+    );
  }
  else if (
    protocol &&
@@ -44,9 +39,7 @@ function validate(url: string, t: TFunction): JSX.Element | undefined {
  ) {
    error = (
      <SmallError>
-        <Trans t={t}>
        CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
-        </Trans>
      </SmallError>
    );
  }
@@ -68,34 +61,32 @@ export type FieldUrlProps = {
  className?: string
 };

-type FieldUrlInternalProps = FieldUrlProps & WithTranslation;
-
 type FieldUrlState = {
  error?: React.ReactNode
 }

-class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlState> {
+export default class FieldUrl extends React.Component<FieldUrlProps, FieldUrlState> {
  static defaultProps = {
    onInput: () => {},
  }

-  constructor (props: FieldUrlInternalProps) {
+  constructor (props: FieldUrlProps) {
    super(props);
    this.state = {
-      error: validate(props.value, props.t),
+      error: validate(props.value)
    };
  }

  onInput = (url: string) => {
    this.setState({
-      error: validate(url, this.props.t),
+      error: validate(url)
    });
    if (this.props.onInput) this.props.onInput(url);
  }

  onChange = (url: string) => {
    this.setState({
-      error: validate(url, this.props.t),
+      error: validate(url)
    });
    this.props.onChange(url);
  }
@@ -115,5 +106,3 @@ class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlSt
  }
 }

-const FieldUrl = withTranslation()(FieldUrlInternal);
-export default FieldUrl;
@@ -1,10 +1,9 @@
 import React, {type JSX} from 'react'
+import PropTypes from 'prop-types'
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 import {Accordion} from 'react-accessible-accordion';
 import {MdMoreVert} from 'react-icons/md'
-import { IconContext } from 'react-icons'
 import {BackgroundLayerSpecification, LayerSpecification, SourceSpecification} from 'maplibre-gl';
-import {v8} from '@maplibre/maplibre-gl-style-spec';

 import FieldJson from './FieldJson'
 import FilterEditor from './FilterEditor'
@@ -18,110 +17,40 @@ import FieldComment from './FieldComment'
 import FieldSource from './FieldSource'
 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';
-import { NON_SOURCE_LAYERS } from '../libs/non-source-layers';
-import { OnMoveLayerCallback } from '../libs/definitions';

-type MaputnikLayoutGroup = {
-  id: string;
-  title: string;
-  type: string;
-  fields: string[];
+
+function getLayoutForType(type: LayerSpecification["type"]) {
+  return layout[type] ? layout[type] : layout.invalid;
 }

-function getLayoutForSymbolType(t: TFunction): MaputnikLayoutGroup[] {
-  const groups: MaputnikLayoutGroup[] = [];
-  groups.push({
-    title: t("General layout properties"),
-    id: "General_layout_properties",
-    type: "properties",
-    fields: Object.keys(v8["layout_symbol"]).filter(f => f.startsWith("symbol-"))
-  });
-  groups.push({
-    title: t("Text layout properties"),
-    id: "Text_layout_properties",
-    type: "properties",
-    fields: Object.keys(v8["layout_symbol"]).filter(f => f.startsWith("text-"))
-  });
-  groups.push({
-    title: t("Icon layout properties"),
-    id: "Icon_layout_properties",
-    type: "properties",
-    fields: Object.keys(v8["layout_symbol"]).filter(f => f.startsWith("icon-"))
-  });
-  groups.push({
-    title: t("Text paint properties"),
-    id: "Text_paint_properties",
-    type: "properties",
-    fields: Object.keys(v8["paint_symbol"]).filter(f => f.startsWith("text-"))
-  });
-  groups.push({
-    title: t("Icon paint properties"),
-    id: "Icon_paint_properties",
-    type: "properties",
-    fields: Object.keys(v8["paint_symbol"]).filter(f => f.startsWith("icon-"))
-  });
-  return groups;
-}
-
-function getLayoutForType(type: LayerSpecification["type"], t: TFunction): MaputnikLayoutGroup[] {
-  if (Object.keys(v8.layer.type.values).indexOf(type) < 0) {
-    return []
-  }
-  if (type === "symbol") {
-    return getLayoutForSymbolType(t);
-  }
-  const groups: MaputnikLayoutGroup[] = [];
-  if (Object.keys(v8["paint_" + type]).length > 0) {
-    groups.push({
-      title: t("Paint properties"),
-      id: "Paint_properties",
-      type: "properties",
-      fields: Object.keys(v8["paint_" + type]),
-    });
-  }
-  if (Object.keys(v8["layout_" + type]).length > 0) {
-    groups.push({
-      title: t("Layout properties"),
-      id: "Layout_properties",
-      type: "properties",
-      fields: Object.keys(v8["layout_" + type])
-    });
-  }
-  return groups;
-}
-
-function layoutGroups(layerType: LayerSpecification["type"], t: TFunction): {id: string, title: string, type: string, fields?: string[]}[] {
+function layoutGroups(layerType: LayerSpecification["type"]): {title: string, type: string, fields?: string[]}[] {
  const layerGroup = {
-    id: 'layer',
-    title: t('Layer'),
+    title: 'Layer',
    type: 'layer'
  }
  const filterGroup = {
-    id: 'filter',
-    title: t('Filter'),
+    title: 'Filter',
    type: 'filter'
  }
  const editorGroup = {
-    id: 'jsoneditor',
-    title: t('JSON Editor'),
+    title: 'JSON Editor',
    type: 'jsoneditor'
  }
  return [layerGroup, filterGroup]
-    .concat(getLayoutForType(layerType, t))
+    .concat(getLayoutForType(layerType).groups)
    .concat([editorGroup])
 }

-type LayerEditorInternalProps = {
+type LayerEditorProps = {
  layer: LayerSpecification
-  sources: {[key: string]: SourceSpecification & {layers: string[]}}
+  sources: {[key: string]: SourceSpecification}
  vectorLayers: {[key: string]: any}
  spec: object
  onLayerChanged(...args: unknown[]): unknown
  onLayerIdChange(...args: unknown[]): unknown
-  onMoveLayer: OnMoveLayerCallback
+  onMoveLayer(...args: unknown[]): unknown
  onLayerDestroy(...args: unknown[]): unknown
  onLayerCopy(...args: unknown[]): unknown
  onLayerVisibilityToggle(...args: unknown[]): unknown
@@ -129,45 +58,58 @@ type LayerEditorInternalProps = {
  isLastLayer?: boolean
  layerIndex: number
  errors?: any[]
-} & WithTranslation;
+};

 type LayerEditorState = {
  editorGroups: {[keys:string]: boolean}
 };

 /** Layer editor supporting multiple types of layers. */
-class LayerEditorInternal extends React.Component<LayerEditorInternalProps, LayerEditorState> {
+export default class LayerEditor extends React.Component<LayerEditorProps, LayerEditorState> {
  static defaultProps = {
    onLayerChanged: () => {},
    onLayerIdChange: () => {},
    onLayerDestroyed: () => {},
  }

-  constructor(props: LayerEditorInternalProps) {
+  static childContextTypes = {
+    reactIconBase: PropTypes.object
+  }
+
+  constructor(props: LayerEditorProps) {
    super(props)

+    //TODO: Clean this up and refactor into function
    const editorGroups: {[keys:string]: boolean} = {}
-    for (const group of layoutGroups(this.props.layer.type, props.t)) {
+    layoutGroups(this.props.layer.type).forEach(group => {
      editorGroups[group.title] = true
-    }
+    })

    this.state = { editorGroups }
  }

-  static getDerivedStateFromProps(props: Readonly<LayerEditorInternalProps>, state: LayerEditorState) {
+  static getDerivedStateFromProps(props: LayerEditorProps, state: LayerEditorState) {
    const additionalGroups = { ...state.editorGroups }

-    for (const group of getLayoutForType(props.layer.type, props.t)) {
+    getLayoutForType(props.layer.type).groups.forEach(group => {
      if(!(group.title in additionalGroups)) {
        additionalGroups[group.title] = true
      }
-    }
+    })

    return {
      editorGroups: additionalGroups
    };
  }

+  getChildContext () {
+    return {
+      reactIconBase: {
+        size: 14,
+        color: '#8e8e8e',
+      }
+    }
+  }

  changeProperty(group: keyof LayerSpecification | null, property: string, newValue: any) {
    this.props.onLayerChanged(
@@ -209,7 +151,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
    let sourceLayerIds;
    const layer = this.props.layer as Exclude<LayerSpecification, BackgroundLayerSpecification>;
    if(Object.prototype.hasOwnProperty.call(this.props.sources, layer.source)) {
-      sourceLayerIds = this.props.sources[layer.source].layers;
+      sourceLayerIds = (this.props.sources[layer.source] as any).layers;
    }

    switch(type) {
@@ -236,7 +178,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
        onChange={v => this.changeProperty(null, 'source', v)}
      />
      }
-      {!NON_SOURCE_LAYERS.includes(this.props.layer.type) &&
+      {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
        <FieldSourceLayer
          error={errorData['source-layer']}
          sourceLayerIds={sourceLayerIds}
@@ -300,19 +242,17 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
  }

  render() {
-    const t = this.props.t;
-
    const groupIds: string[] = [];
    const layerType = this.props.layer.type
-    const groups = layoutGroups(layerType, t).filter(group => {
+    const groups = layoutGroups(layerType).filter(group => {
      return !(layerType === 'background' && group.type === 'source')
    }).map(group => {
-      const groupId = group.id;
+      const groupId = group.title.replace(/ /g, "_");
      groupIds.push(groupId);
      return <LayerEditorGroup
        data-wd-key={group.title}
        id={groupId}
-        key={groupId}
+        key={group.title}
        title={group.title}
        isActive={this.state.editorGroups[group.title]}
        onActiveToggle={this.onGroupToggle.bind(this, group.title)}
@@ -323,38 +263,30 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye

    const layout = this.props.layer.layout || {}

-    const items: {[key: string]: {
-      text: string,
-      handler: () => void,
-      disabled?: boolean,
-      wdKey?: string
-    }} = {
+    const items: {[key: string]: {text: string, handler: () => void, disabled?: boolean}} = {
      delete: {
-        text: t("Delete"),
-        handler: () => this.props.onLayerDestroy(this.props.layerIndex),
-        wdKey: "menu-delete-layer"
+        text: "Delete",
+        handler: () => this.props.onLayerDestroy(this.props.layerIndex)
      },
      duplicate: {
-        text: t("Duplicate"),
-        handler: () => this.props.onLayerCopy(this.props.layerIndex),
-        wdKey: "menu-duplicate-layer"
+        text: "Duplicate",
+        handler: () => this.props.onLayerCopy(this.props.layerIndex)
      },
      hide: {
-        text: (layout.visibility === "none") ? t("Show") : t("Hide"),
-        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex),
-        wdKey: "menu-hide-layer"
+        text: (layout.visibility === "none") ? "Show" : "Hide",
+        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
      },
      moveLayerUp: {
-        text: t("Move layer up"),
+        text: "Move layer up",
+        // Not actually used...
        disabled: this.props.isFirstLayer,
-        handler: () => this.moveLayer(-1),
-        wdKey: "menu-move-layer-up"
+        handler: () => this.moveLayer(-1)
      },
      moveLayerDown: {
-        text: t("Move layer down"),
+        text: "Move layer down",
+        // Not actually used...
        disabled: this.props.isLastLayer,
-        handler: () => this.moveLayer(+1),
-        wdKey: "menu-move-layer-down"
+        handler: () => this.moveLayer(+1)
      }
    }

@@ -363,15 +295,14 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
      items[id].handler();
    }

-    return <IconContext.Provider value={{size: '14px', color: '#8e8e8e'}}>
-      <section className="maputnik-layer-editor"
+    return <section className="maputnik-layer-editor"
      role="main"
-        aria-label={t("Layer editor")}
+      aria-label="Layer editor"
    >
      <header>
        <div className="layer-header">
          <h2 className="layer-header__title">
-              {t("Layer: {{layerId}}", { layerId: formatLayerId(this.props.layer.id) })}
+            Layer: {formatLayerId(this.props.layer.id)}
          </h2>
          <div className="layer-header__info">
            <Wrapper
@@ -379,11 +310,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
              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>
@@ -391,7 +318,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
                  {Object.keys(items).map((id) => {
                    const item = items[id];
                    return <li key={id}>
-                        <MenuItem value={id} className='more-menu__menu__item' data-wd-key={item.wdKey}>
+                      <MenuItem value={id} className='more-menu__menu__item'>
                        {item.text}
                      </MenuItem>
                    </li>
@@ -411,9 +338,5 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
        {groups}
      </Accordion>
    </section>
-    </IconContext.Provider>
  }
 }
-
-const LayerEditor = withTranslation()(LayerEditorInternal);
-export default LayerEditor;
@@ -1,28 +1,15 @@
 import React, {type JSX} from 'react'
 import classnames from 'classnames'
 import lodash from 'lodash';
-import {
-  DndContext,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  closestCenter,
-  DragEndEvent,
-} from '@dnd-kit/core';
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';

 import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
 import ModalAdd from './ModalAdd'

-import type {LayerSpecification, SourceSpecification} from 'maplibre-gl';
+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';
-import { OnMoveLayerCallback } from '../libs/definitions';

 type LayerListContainerProps = {
  layers: LayerSpecification[]
@@ -32,10 +19,9 @@ type LayerListContainerProps = {
  onLayerDestroy?(...args: unknown[]): unknown
  onLayerCopy(...args: unknown[]): unknown
  onLayerVisibilityToggle(...args: unknown[]): unknown
-  sources: Record<string, SourceSpecification & {layers: string[]}>;
+  sources: object
  errors: any[]
 };
-type LayerListContainerInternalProps = LayerListContainerProps & WithTranslation;

 type LayerListContainerState = {
  collapsedGroups: {[ket: string]: boolean}
@@ -45,14 +31,14 @@ type LayerListContainerState = {
 };

 // List of collapsible layer editors
-class LayerListContainerInternal extends React.Component<LayerListContainerInternalProps, LayerListContainerState> {
+class LayerListContainer extends React.Component<LayerListContainerProps, LayerListContainerState> {
  static defaultProps = {
    onLayerSelect: () => {},
  }
  selectedItemRef: React.RefObject<any>;
  scrollContainerRef: React.RefObject<HTMLElement>;

-  constructor(props: LayerListContainerInternalProps) {
+  constructor(props: LayerListContainerProps) {
    super(props);
    this.selectedItemRef = React.createRef();
    this.scrollContainerRef = React.createRef();
@@ -254,6 +240,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
            'maputnik-layer-list-item--error': !!layerError
          })}
+          index={idx}
          key={layer.key}
          id={layer.key}
          layerId={layer.id}
@@ -272,12 +259,10 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
      })
    })

-    const t = this.props.t;
-
    return <section
      className="maputnik-layer-list"
      role="complementary"
-      aria-label={t("Layers list")}
+      aria-label="Layers list"
      ref={this.scrollContainerRef}
    >
      <ModalAdd
@@ -289,7 +274,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
        onLayersChange={this.props.onLayersChange}
      />
      <header className="maputnik-layer-list-header">
-        <span className="maputnik-layer-list-header-title">{t("Layers")}</span>
+        <span className="maputnik-layer-list-header-title">Layers</span>
        <span className="maputnik-space" />
        <div className="maputnik-default-property">
          <div className="maputnik-multibutton">
@@ -298,11 +283,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
              data-wd-key="skip-target-layer-list"
              onClick={this.toggleLayers}
              className="maputnik-button">
-              {this.state.areAllGroupsExpanded === true ?
-                t("Collapse")
-                :
-                t("Expand")
-              }
+              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
            </button>
          </div>
        </div>
@@ -312,14 +293,14 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
              onClick={this.toggleModal.bind(this, 'add')}
              data-wd-key="layer-list:add-layer"
              className="maputnik-button maputnik-button-selected">
-              {t("Add Layer")}
+             Add Layer
            </button>
          </div>
        </div>
      </header>
      <div
        role="navigation"
-        aria-label={t("Layers list")}
+        aria-label="Layers list"
      >
        <ul className="maputnik-layer-list-container">
          {listItems}
@@ -329,36 +310,21 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
  }
 }

-const LayerListContainer = withTranslation()(LayerListContainerInternal);
+// eslint-disable-next-line react-refresh/only-export-components
+const LayerListContainerSortable = SortableContainer((props: LayerListContainerProps) => <LayerListContainer {...props} />)

 type LayerListProps = LayerListContainerProps & {
-  onMoveLayer: OnMoveLayerCallback
+  onMoveLayer: SortEndHandler
 };

-const LayerList: React.FC<LayerListProps> = (props) => {
-  const sensors = useSensors(useSensor(PointerSensor));
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const {active, over} = event;
-    if (!over) return;
-
-    const oldIndex = props.layers.findIndex(layer => layer.id === active.id);
-    const newIndex = props.layers.findIndex(layer => layer.id === over.id);
-
-    if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
-      props.onMoveLayer({oldIndex, newIndex});
+export default class LayerList extends React.Component<LayerListProps> {
+  render() {
+    return <LayerListContainerSortable
+      {...this.props}
+      helperClass='sortableHelper'
+      onSortEnd={this.props.onMoveLayer.bind(this)}
+      useDragHandle={true}
+      shouldCancelStart={() => false}
+    />
  }
-  };
-
-  const layerIds = props.layers.map(layer => layer.id);
-
-  return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <SortableContext items={layerIds} strategy={verticalListSortingStrategy}>
-        <LayerListContainer {...props} />
-      </SortableContext>
-    </DndContext>
-  );
 }
-
-export default LayerList;
@@ -1,23 +1,20 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
+
 import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
-import { IconContext } from 'react-icons'
-import {useSortable} from '@dnd-kit/sortable'
-import {CSS} from '@dnd-kit/utilities'

 import IconLayer from './IconLayer'
+import {SortableElement, SortableHandle} from 'react-sortable-hoc'


 type DraggableLabelProps = {
  layerId: string
  layerType: string
-  dragAttributes?: React.HTMLAttributes<HTMLElement>
-  dragListeners?: React.HTMLAttributes<HTMLElement>
 };

-const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
-  const {dragAttributes, dragListeners} = props;
-  return <div className="maputnik-layer-list-item-handle" {...dragAttributes} {...dragListeners}>
+const DraggableLabel = SortableHandle((props: DraggableLabelProps) => {
+  return <div className="maputnik-layer-list-item-handle">
    <IconLayer
      className="layer-handle__icon"
      type={props.layerType}
@@ -26,7 +23,7 @@ const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
      {props.layerId}
    </button>
  </div>
-};
+});

 type IconActionProps = {
  action: string
@@ -85,80 +82,63 @@ type LayerListItemProps = {
  onLayerVisibilityToggle?(...args: unknown[]): unknown
 };

-const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props, ref) => {
-  const {
-    isSelected = false,
-    visibility = 'visible',
-    onLayerCopy = () => {},
-    onLayerDestroy = () => {},
-    onLayerVisibilityToggle = () => {},
-  } = props;
-
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({id: props.layerId});
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  const visibilityAction = visibility === 'visible' ? 'show' : 'hide';
-
-  // Cast ref to MutableRefObject since we know from the codebase that's what's always passed
-  const refObject = ref as React.MutableRefObject<HTMLLIElement | null> | null;
-
-  return <IconContext.Provider value={{size: '14px'}}>
-    <li
-      ref={(node) => {
-        setNodeRef(node);
-        if (refObject) {
-          refObject.current = node;
+class LayerListItem extends React.Component<LayerListItemProps> {
+  static defaultProps = {
+    isSelected: false,
+    visibility: 'visible',
+    onLayerCopy: () => {},
+    onLayerDestroy: () => {},
+    onLayerVisibilityToggle: () => {},
  }
-      }}
-      style={style}
-      id={props.id}
-      onClick={_e => props.onLayerSelect(props.layerIndex)}
-      data-wd-key={"layer-list-item:" + props.layerId}
+
+  static childContextTypes = {
+    reactIconBase: PropTypes.object
+  }
+
+  getChildContext() {
+    return {
+      reactIconBase: { size: 14 }
+    }
+  }
+
+  render() {
+    const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
+
+    return <li
+      id={this.props.id}
+      key={this.props.layerId}
+      onClick={_e => this.props.onLayerSelect(this.props.layerIndex)}
+      data-wd-key={"layer-list-item:"+this.props.layerId}
      className={classnames({
        "maputnik-layer-list-item": true,
-        "maputnik-layer-list-item-selected": isSelected,
-        [props.className!]: true,
+        "maputnik-layer-list-item-selected": this.props.isSelected,
+        [this.props.className!]: true,
      })}>
-      <DraggableLabel
-        layerId={props.layerId}
-        layerType={props.layerType}
-        dragAttributes={attributes}
-        dragListeners={listeners}
-      />
+      <DraggableLabel {...this.props} />
      <span style={{flexGrow: 1}} />
      <IconAction
-        wdKey={"layer-list-item:" + props.layerId+":delete"}
+        wdKey={"layer-list-item:"+this.props.layerId+":delete"}
        action={'delete'}
        classBlockName="delete"
-        onClick={_e => onLayerDestroy!(props.layerIndex)}
+        onClick={_e => this.props.onLayerDestroy!(this.props.layerIndex)}
      />
      <IconAction
-        wdKey={"layer-list-item:" + props.layerId+":copy"}
+        wdKey={"layer-list-item:"+this.props.layerId+":copy"}
        action={'duplicate'}
        classBlockName="duplicate"
-        onClick={_e => onLayerCopy!(props.layerIndex)}
+        onClick={_e => this.props.onLayerCopy!(this.props.layerIndex)}
      />
      <IconAction
-        wdKey={"layer-list-item:"+props.layerId+":toggle-visibility"}
+        wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
        action={visibilityAction}
        classBlockName="visibility"
        classBlockModifier={visibilityAction}
-        onClick={_e => onLayerVisibilityToggle!(props.layerIndex)}
+        onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
      />
    </li>
-  </IconContext.Provider>
-});
+  }
+}

-export default LayerListItem;
+const LayerListItemSortable = SortableElement<LayerListItemProps>((props: LayerListItemProps) => <LayerListItem {...props} />);
+
+export default LayerListItemSortable;
@@ -1,5 +1,5 @@
 import React, {type JSX} from 'react'
-import {createRoot} from 'react-dom/client'
+import ReactDOM from 'react-dom'
 import MapLibreGl, {LayerSpecification, LngLat, Map, MapOptions, SourceSpecification, StyleSpecification} from 'maplibre-gl'
 import MaplibreInspect from '@maplibre/maplibre-gl-inspect'
 import colors from '@maplibre/maplibre-gl-inspect/lib/colors'
@@ -11,20 +11,12 @@ 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';
+//@ts-ignore
+import MaplibreGeocoder 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";

-function renderPopup(
-  popupElement: JSX.Element,
-  mountNode: HTMLElement,
-  popup: MapLibreGl.Popup
-): HTMLElement {
-  const root = createRoot(mountNode);
-  popup.once('close', () => root.unmount());
-  root.render(popupElement);
+function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
+  ReactDOM.render(popup, mountNode);
  return mountNode as HTMLElement;
 }

@@ -59,7 +51,7 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
  return inspectStyle
 }

-type MapMaplibreGlInternalProps = {
+type MapMaplibreGlProps = {
  onDataChange?(event: {map: Map | null}): unknown
  onLayerSelect(...args: unknown[]): unknown
  mapStyle: StyleSpecification
@@ -72,17 +64,15 @@ type MapMaplibreGlInternalProps = {
  }
  replaceAccessTokens(mapStyle: StyleSpecification): StyleSpecification
  onChange(value: {center: LngLat, zoom: number}): unknown
-} & WithTranslation;
-
-type MapMaplibreGlState = {
-  map: Map | null;
-  inspect: MaplibreInspect | null;
-  geocoder: MaplibreGeocoder | null;
-  zoomControl: ZoomControl | null;
-  zoom?: number;
 };

-class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
+type MapMaplibreGlState = {
+  map: Map | null
+  inspect: MaplibreInspect | null
+  zoom?: number
+};
+
+export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, MapMaplibreGlState> {
  static defaultProps = {
    onMapLoaded: () => {},
    onDataChange: () => {},
@@ -92,25 +82,20 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
  }
  container: HTMLDivElement | null = null

-  constructor(props: MapMaplibreGlInternalProps) {
+  constructor(props: MapMaplibreGlProps) {
    super(props)
    this.state = {
      map: null,
      inspect: null,
-      geocoder: null,
-      zoomControl: null,
    }
-    i18next.on('languageChanged', () => {
-      this.forceUpdate();
-    })
  }


-  shouldComponentUpdate(nextProps: MapMaplibreGlInternalProps, nextState: MapMaplibreGlState) {
+  shouldComponentUpdate(nextProps: MapMaplibreGlProps, 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;
@@ -140,7 +125,6 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
        this.state.inspect!.render();
      }, 500);
    }
-
  }

  componentDidMount() {
@@ -152,11 +136,10 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
      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;
+      // typedef of MapLibreGl.MapOptions doesn't accept boolean but this follow the doc.
+      localIdeographFontFamily: false as any
+    }

-    const protocol = new Protocol({metadata: true});
-    MapLibreGl.addProtocol("pmtiles",protocol.tile);
    const map = new MapLibreGl.Map(mapOpts);

    const mapViewChange = () => {
@@ -170,9 +153,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
    map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
    map.showOverdrawInspector = mapOpts.showOverdrawInspector!;

-    const geocoder = this.initGeocoder(map);
+    this.initGeocoder(map);

-    const zoomControl = new ZoomControl();
+    const zoomControl = new ZoomControl;
    map.addControl(zoomControl, 'top-right');

    const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
@@ -180,12 +163,10 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,

    const tmpNode = document.createElement('div');

-    const inspectPopup = new MapLibreGl.Popup({
-      closeOnClick: false
-    });
-
    const inspect = new MaplibreInspect({
-      popup: inspectPopup,
+      popup: new MapLibreGl.Popup({
+        closeOnClick: false
+      }),
      showMapPopup: true,
      showMapPopupOnHover: false,
      showInspectMapPopupOnHover: true,
@@ -197,21 +178,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
      buildInspectStyle: (originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[]) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
      renderPopup: (features: InspectFeature[]) => {
        if(this.props.inspectModeEnabled) {
-          return renderPopup(
-            <MapMaplibreGlFeaturePropertyPopup features={features} />,
-            tmpNode,
-            inspectPopup
-          );
+          return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
        } else {
-          return renderPopup(
-            <MapMaplibreGlLayerPopup
-              features={features}
-              onLayerSelect={this.onLayerSelectById}
-              zoom={this.state.zoom}
-            />,
-            tmpNode,
-            inspectPopup
-          );
+          return renderPopup(<MapMaplibreGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
        }
      }
    })
@@ -221,8 +190,6 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
      this.setState({
        map,
        inspect,
-        geocoder,
-        zoomControl,
        zoom: map.getZoom()
      });
    })
@@ -255,7 +222,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,

  initGeocoder(map: Map) {
    const geocoderConfig = {
-      forwardGeocode: async (config: MaplibreGeocoderApiConfig) => {
+      forwardGeocode: async (config:{query: string, limit: number, language: string[]}) => {
        const features = [];
        try {
          const request = `https://nominatim.openstreetmap.org/search?q=${config.query}&format=geojson&polygon_geojson=1&addressdetails=1`;
@@ -288,29 +255,20 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
        return {
          features
        };
-      },
-    } as unknown as MaplibreGeocoderApi;
-    const geocoder = new MaplibreGeocoder(geocoderConfig, {
-      placeholder: this.props.t("Search"),
-      maplibregl: MapLibreGl,
-    });
+      }
+    };
+    const geocoder = new MaplibreGeocoder(geocoderConfig, {maplibregl: MapLibreGl});
    map.addControl(geocoder, 'top-left');
-    return geocoder;
  }

  render() {
-    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")}
+      aria-label="Map view"
      ref={x => this.container = x}
      data-wd-key="maplibre:map"
    ></div>
  }
 }

-const MapMaplibreGl = withTranslation()(MapMaplibreGlInternal);
-export default MapMaplibreGl;
@@ -28,7 +28,7 @@ function renderFeature(feature: InspectFeature, idx: number) {
      <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))}
+    {renderKeyValueTableRow("Feature ID", displayValue(feature.id))}
    {Object.keys(feature.properties).map(propertyName => {
      const property = feature.properties[propertyName];
      return renderKeyValueTableRow(propertyName, displayValue(property))
@@ -1,11 +1,9 @@
 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';

@@ -24,7 +22,7 @@ function renderCoords (coords: string[]) {
  }
 }

-type MapOpenLayersInternalProps = {
+type MapOpenLayersProps = {
  onDataChange?(...args: unknown[]): unknown
  mapStyle: object
  accessToken?: string
@@ -33,7 +31,7 @@ type MapOpenLayersInternalProps = {
  debugToolbox: boolean
  replaceAccessTokens(...args: unknown[]): unknown
  onChange(...args: unknown[]): unknown
-} & WithTranslation;
+};

 type MapOpenLayersState = {
  zoom: string
@@ -43,7 +41,7 @@ type MapOpenLayersState = {
  selectedFeatures?: any[]
 };

-class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps, MapOpenLayersState> {
+export default class MapOpenLayers extends React.Component<MapOpenLayersProps, MapOpenLayersState> {
  static defaultProps = {
    onMapLoaded: () => {},
    onDataChange: () => {},
@@ -55,7 +53,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
  overlay: Overlay | undefined;
  popupContainer: HTMLElement | null = null;

-  constructor(props: MapOpenLayersInternalProps) {
+  constructor(props: MapOpenLayersProps) {
    super(props);
    this.state = {
      zoom: "0",
@@ -74,7 +72,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
    apply(this.map, newMapStyle);
  }

-  componentDidUpdate(prevProps: MapOpenLayersInternalProps) {
+  componentDidUpdate(prevProps: MapOpenLayersProps) {
    if (this.props.mapStyle !== prevProps.mapStyle) {
      this.updateStyle(
        this.props.replaceAccessTokens(this.props.mapStyle)
@@ -85,11 +83,10 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
  componentDidMount() {
    this.overlay = new Overlay({
      element: this.popupContainer!,
-      autoPan: {
-        animation: {
+      autoPan: true,
+      autoPanAnimation: {
        duration: 250
      }
-      },
    });

    const map = new Map({
@@ -153,7 +150,6 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
  }

  render() {
-    const t = this.props.t;
    return <div className="maputnik-ol-container">
      <div
        ref={x => this.popupContainer = x}
@@ -163,7 +159,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
        <button
          className="maplibregl-popup-close-button"
          onClick={this.closeOverlay}
-          aria-label={t("Close popup")}
+          aria-label="Close popup"
        >
          ×
        </button>
@@ -173,20 +169,20 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
        />
      </div>
      <div className="maputnik-ol-zoom">
-        {t("Zoom:")} {this.state.zoom}
+        Zoom: {this.state.zoom}
      </div>
      {this.props.debugToolbox &&
        <div className="maputnik-ol-debug">
          <div>
-            <label>{t("cursor:")} </label>
+            <label>cursor: </label>
            <span>{renderCoords(this.state.cursor)}</span>
          </div>
          <div>
-            <label>{t("center:")} </label>
+            <label>center: </label>
            <span>{renderCoords(this.state.center)}</span>
          </div>
          <div>
-            <label>{t("rotation:")} </label>
+            <label>rotation: </label>
            <span>{this.state.rotation}</span>
          </div>
        </div>
@@ -195,7 +191,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
        className="maputnik-ol"
        ref={x => this.container = x}
        role="region"
-        aria-label={t("Map view")}
+        aria-label="Map view"
        style={{
          ...this.props.style,
        }}>
@@ -204,5 +200,3 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
  }
 }

-const MapOpenLayers = withTranslation()(MapOpenLayersInternal);
-export default MapOpenLayers;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Kanahiro	ade6ce03a0	rm trailing comma	2024-03-25 22:08:46 +09:00
Kanahiro	1a266e8a5c	feat: localIdeographFontFamily: false	2024-03-25 21:55:25 +09:00
@@ -1 +1 @@
 .13
 .19