From 5fe38bb6ff30e7af2c51f89ee912f2686cd46d4d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 13 Sep 2025 18:45:03 +0000
Subject: [PATCH] chore(deps-dev): Bump typescript from 5.8.3 to 5.9.2 (#1301)

Bumps [typescript](https://github.com/microsoft/TypeScript) from 5.8.3
to 5.9.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/microsoft/TypeScript/releases">typescript's
releases</a>.</em></p>
<blockquote>
<h2>TypeScript 5.9</h2>
<p>Release notes pending.</p>
<!-- raw HTML omitted -->
<ul>
<li><a
href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&amp;q=milestone%3A%22TypeScript+5.9.0%22+is%3Aclosed+">fixed
issues query for Typescript 5.9.0 (Beta)</a>.</li>
<li><a
href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&amp;q=milestone%3A%22TypeScript+5.9.1%22+is%3Aclosed+">fixed
issues query for Typescript 5.9.1 (RC)</a>.</li>
<li>[[No specific changes for TypeScript 5.9.2 (Stable)]]</li>
</ul>
<p>Downloads are available on:</p>
<ul>
<li><a href="https://www.npmjs.com/package/typescript">npm</a></li>
</ul>
<h2>TypeScript 5.9 RC</h2>
<p>For release notes, check out the <a
href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-9-rc/">release
announcement</a></p>
<ul>
<li><a
href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&amp;q=milestone%3A%22TypeScript+5.9.0%22+is%3Aclosed+">fixed
issues query for Typescript 5.9.0 (Beta)</a>.</li>
<li><a
href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&amp;q=milestone%3A%22TypeScript+5.9.1%22+is%3Aclosed+">fixed
issues query for Typescript 5.9.1 (RC)</a>.</li>
</ul>
<p>Downloads are available on:</p>
<ul>
<li><a href="https://www.npmjs.com/package/typescript">npm</a></li>
</ul>
<h2>TypeScript 5.9 Beta</h2>
<p>For release notes, check out the <a
href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-9-beta/">release
announcement</a>.</p>
<ul>
<li><a
href="https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&amp;q=milestone%3A%22TypeScript+5.9.0%22+is%3Aclosed+">fixed
issues query for Typescript 5.9.0 (Beta)</a>.</li>
</ul>
<p>Downloads are available on:</p>
<ul>
<li><a href="https://www.npmjs.com/package/typescript">npm</a></li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/microsoft/TypeScript/commit/be8678315541e814da14316848a9468e8f90ab11"><code>be86783</code></a>
Give more specific errors for <code>verbatimModuleSyntax</code> (<a
href="https://redirect.github.com/microsoft/TypeScript/issues/62113">#62113</a>)</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/22ef57786f5ca99837c430439bc6003c068fe1d2"><code>22ef577</code></a>
LEGO: Pull request from
lego/hb_5378966c-b857-470a-8675-daebef4a6da1_20250714...</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/d5a414cd1dceb209fd2569e89d1096812218e8c5"><code>d5a414c</code></a>
Don't use <code>noErrorTruncation</code> when printing types with
<code>maximumLength</code> set (#...</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/f14b5c8a2f0be503ac455054a91573c63f0e5088"><code>f14b5c8</code></a>
Remove unused and confusing dom.iterable.d.ts file (<a
href="https://redirect.github.com/microsoft/TypeScript/issues/62037">#62037</a>)</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/2778e84ed88894156e2c5a17d74a25c73cc96ffe"><code>2778e84</code></a>
Restore AbortSignal.abort (<a
href="https://redirect.github.com/microsoft/TypeScript/issues/62086">#62086</a>)</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/65cb4bd2d52cd882f2c3a503681479eb2ed291ca"><code>65cb4bd</code></a>
LEGO: Pull request from
lego/hb_5378966c-b857-470a-8675-daebef4a6da1_20250710...</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/9e20e032effad965567d4a1e1c30d5433b0a3332"><code>9e20e03</code></a>
Clear out checker-level stacks on pop (<a
href="https://redirect.github.com/microsoft/TypeScript/issues/62016">#62016</a>)</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/87740bc7fe3d8d2af47d767db081491f40b8a90d"><code>87740bc</code></a>
Fix for Issue 61081 (<a
href="https://redirect.github.com/microsoft/TypeScript/issues/61221">#61221</a>)</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/833a8d492c728d606454865e8c0fee84842f9f10"><code>833a8d4</code></a>
Fix Symbol completion priority and cursor positioning (<a
href="https://redirect.github.com/microsoft/TypeScript/issues/61945">#61945</a>)</li>
<li><a
href="https://github.com/microsoft/TypeScript/commit/0018c9ff12e657b84997dc1843818fea0a2ce850"><code>0018c9f</code></a>
LEGO: Pull request from
lego/hb_5378966c-b857-470a-8675-daebef4a6da1_20250702...</li>
<li>Additional commits viewable in <a
href="https://github.com/microsoft/TypeScript/compare/v5.8.3...v5.9.2">compare
view</a></li>
</ul>
</details>
<br />


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

You can trigger a rebase of this PR by commenting `@dependabot rebase`.

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

---

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

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


</details>

> **Note**
> Automatic rebases have been disabled on this pull request as it has
been open for over 30 days.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Harel M <harel.mazor@gmail.com>
---
 build/bump-version-changelog.js               |  12 +-
 build/release-notes.js                        |  14 +-
 cypress/e2e/layers.cy.ts                      |  20 +-
 cypress/e2e/map.cy.ts                         |   4 +-
 cypress/e2e/maputnik-cypress-helper.ts        |   4 +-
 cypress/e2e/maputnik-driver.ts                |  34 +-
 cypress/e2e/modals.cy.ts                      |   6 +-
 cypress/support/component.ts                  |   6 +-
 eslint.config.js                              |  69 ++--
 i18next-parser.config.ts                      |   8 +-
 package-lock.json                             |  56 +++-
 package.json                                  |   3 +-
 src/components/App.tsx                        | 312 +++++++++---------
 src/components/AppLayout.tsx                  |  12 +-
 src/components/AppMessagePanel.tsx            |  20 +-
 src/components/AppToolbar.tsx                 |  46 +--
 src/components/Block.tsx                      |  24 +-
 src/components/Collapse.tsx                   |  12 +-
 src/components/Collapser.tsx                  |   8 +-
 src/components/Doc.tsx                        |   6 +-
 src/components/FieldArray.tsx                 |   4 +-
 src/components/FieldAutocomplete.tsx          |   4 +-
 src/components/FieldCheckbox.tsx              |   4 +-
 src/components/FieldColor.tsx                 |   4 +-
 src/components/FieldComment.tsx               |   8 +-
 src/components/FieldDocLabel.tsx              |  12 +-
 src/components/FieldDynamicArray.tsx          |   4 +-
 src/components/FieldEnum.tsx                  |   4 +-
 src/components/FieldFunction.tsx              |  74 ++---
 src/components/FieldId.tsx                    |   6 +-
 src/components/FieldJson.tsx                  |   2 +-
 src/components/FieldMaxZoom.tsx               |  12 +-
 src/components/FieldMinZoom.tsx               |  12 +-
 src/components/FieldMultiInput.tsx            |   4 +-
 src/components/FieldNumber.tsx                |   4 +-
 src/components/FieldSelect.tsx                |   4 +-
 src/components/FieldSource.tsx                |  12 +-
 src/components/FieldSourceLayer.tsx           |  14 +-
 src/components/FieldSpec.tsx                  |  60 ++--
 src/components/FieldString.tsx                |   4 +-
 src/components/FieldType.tsx                  |  20 +-
 src/components/FieldUrl.tsx                   |   4 +-
 src/components/Fieldset.tsx                   |  12 +-
 src/components/FilterEditor.tsx               |  86 ++---
 src/components/FilterEditorBlock.tsx          |  10 +-
 src/components/IconLayer.tsx                  |  36 +-
 src/components/InputArray.tsx                 |  32 +-
 src/components/InputAutocomplete.cy.tsx       |  22 +-
 src/components/InputAutocomplete.tsx          |  78 ++---
 src/components/InputButton.tsx                |   6 +-
 src/components/InputCheckbox.tsx              |  10 +-
 src/components/InputColor.tsx                 |  58 ++--
 src/components/InputDynamicArray.tsx          |  92 +++---
 src/components/InputEnum.tsx                  |  22 +-
 src/components/InputFont.tsx                  |  20 +-
 src/components/InputJson.tsx                  |  60 ++--
 src/components/InputMultiInput.tsx            |  20 +-
 src/components/InputNumber.tsx                |  40 +--
 src/components/InputSelect.tsx                |   8 +-
 src/components/InputSpec.tsx                  | 198 +++++------
 src/components/InputString.tsx                |  22 +-
 src/components/InputUrl.tsx                   |  22 +-
 src/components/LayerEditor.tsx                | 272 +++++++--------
 src/components/LayerEditorGroup.tsx           |  10 +-
 src/components/LayerList.tsx                  | 122 +++----
 src/components/LayerListGroup.tsx             |  10 +-
 src/components/LayerListItem.tsx              |  42 +--
 src/components/MapMaplibreGl.tsx              | 112 +++----
 .../MapMaplibreGlFeaturePropertyPopup.tsx     |  46 +--
 src/components/MapMaplibreGlLayerPopup.tsx    |  44 +--
 src/components/MapOpenLayers.tsx              |  44 +--
 src/components/PropertyGroup.tsx              |  50 +--
 src/components/ScrollContainer.tsx            |   4 +-
 src/components/SingleFilterEditor.tsx         |  42 +--
 src/components/SmallError.tsx                 |   6 +-
 src/components/_DataProperty.tsx              | 102 +++---
 src/components/_DeleteStopButton.tsx          |  10 +-
 src/components/_ExpressionProperty.tsx        |  32 +-
 src/components/_FunctionButtons.tsx           |  28 +-
 src/components/_SpecProperty.tsx              |  16 +-
 src/components/_ZoomProperty.tsx              |  64 ++--
 src/components/modals/Modal.tsx               |  16 +-
 src/components/modals/ModalAdd.tsx            | 104 +++---
 src/components/modals/ModalDebug.tsx          |  18 +-
 src/components/modals/ModalExport.tsx         |  52 +--
 src/components/modals/ModalLoading.tsx        |  10 +-
 src/components/modals/ModalOpen.tsx           |  72 ++--
 src/components/modals/ModalSettings.tsx       |  54 +--
 src/components/modals/ModalShortcuts.tsx      |  18 +-
 src/components/modals/ModalSources.tsx        | 268 +++++++--------
 .../modals/ModalSourcesTypeEditor.tsx         | 148 ++++-----
 src/index.jsx                                 |  12 +-
 src/libs/accessibility.ts                     |   8 +-
 src/libs/codemirror-mgl.ts                    |  20 +-
 src/libs/definitions.d.ts                     |   2 +-
 src/libs/diffmessage.ts                       |  12 +-
 src/libs/field-spec-additional.ts             |   4 +-
 src/libs/filterops.ts                         |   6 +-
 src/libs/highlight.ts                         |  40 +--
 src/libs/label-from-field-name.ts             |   6 +-
 src/libs/layer.ts                             |  40 +--
 src/libs/layerwatcher.ts                      |  54 +--
 src/libs/maplibre-rtl.ts                      |   4 +-
 src/libs/metadata.ts                          |  30 +-
 src/libs/non-source-layers.ts                 |   2 +-
 src/libs/revisions.ts                         |  16 +-
 src/libs/sort-numerically.ts                  |   4 +-
 src/libs/source.ts                            |  12 +-
 src/libs/spec-helper.ts                       |  18 +-
 src/libs/store/apistore.ts                    |  64 ++--
 src/libs/store/style-store-factory.ts         |   4 +-
 src/libs/store/stylestore.ts                  |  70 ++--
 src/libs/style.ts                             |  84 ++---
 src/libs/urlopen.ts                           |  18 +-
 src/libs/zoomcontrol.ts                       |  12 +-
 115 files changed, 2111 insertions(+), 2053 deletions(-)

diff --git a/build/bump-version-changelog.js b/build/bump-version-changelog.js
index 1c9795b8..9652b6e7 100755
--- a/build/bump-version-changelog.js
+++ b/build/bump-version-changelog.js
@@ -10,12 +10,12 @@
  * https://github.com/maplibre/maplibre-gl-js/blob/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build/release-notes.js
  */
 
-import * as fs from 'fs';
+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', '');
+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
@@ -26,4 +26,4 @@ changelog = `## main
 
 ` + changelog;
 
-fs.writeFileSync(changelogPath, changelog, 'utf8');
+fs.writeFileSync(changelogPath, changelog, "utf8");
diff --git a/build/release-notes.js b/build/release-notes.js
index 0cf331a6..24791387 100755
--- a/build/release-notes.js
+++ b/build/release-notes.js
@@ -3,10 +3,10 @@
 // Copied from maplibre/maplibre-gl-js
 // https://github.com/maplibre/maplibre-gl-js/blob/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build/release-notes.js
 
-import * as fs from 'fs';
+import * as fs from "fs";
 
-const changelogPath = 'CHANGELOG.md';
-const changelog = fs.readFileSync(changelogPath, 'utf8');
+const changelogPath = "CHANGELOG.md";
+const changelog = fs.readFileSync(changelogPath, "utf8");
 
 /*
   Parse the raw changelog text and split it into individual releases.
@@ -25,8 +25,8 @@ let match;
 // eslint-disable-next-line no-cond-assign
 while (match = regex.exec(changelog)) {
   releaseNotes.push({
-    'version': match[1],
-    'changelog': match[2].trim(),
+    "version": match[1],
+    "changelog": match[2].trim(),
   });
 }
 
@@ -35,10 +35,10 @@ const previous = releaseNotes[1];
 
 //  Print the release notes template.
 
-let header = 'Changes since previous version'
+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})`
+  [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}
 
diff --git a/cypress/e2e/layers.cy.ts b/cypress/e2e/layers.cy.ts
index 3687c0da..06c17e8a 100644
--- a/cypress/e2e/layers.cy.ts
+++ b/cypress/e2e/layers.cy.ts
@@ -313,7 +313,7 @@ describe("layers", () => {
 
           it("should revert to a valid value when focus out", () => {
             when.click("layer-list-item:background:" + bgId);
-            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue('0');
+            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
           });
         });
 
@@ -575,10 +575,10 @@ describe("layers", () => {
       });
       when.collapseGroupInLayerEditor();
       when.collapseGroupInLayerEditor(1);
-      when.setValueToPropertyArray("spec-field:hillshade-illumination-direction", '1');
-      when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", '2');
-      when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", '3');
-      when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", '4');
+      when.setValueToPropertyArray("spec-field:hillshade-illumination-direction", "1");
+      when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "2");
+      when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "3");
+      when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "4");
 
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         layers: [
@@ -600,9 +600,9 @@ describe("layers", () => {
         layer: "example",
       });
       when.collapseGroupInLayerEditor();
-      when.setValueToPropertyArray("spec-field:hillshade-highlight-color", 'blue');
-      when.addValueToPropertyArray("spec-field:hillshade-highlight-color", '#00ff00');
-      when.addValueToPropertyArray("spec-field:hillshade-highlight-color", 'rgba(255, 255, 0, 1)');
+      when.setValueToPropertyArray("spec-field:hillshade-highlight-color", "blue");
+      when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "#00ff00");
+      when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "rgba(255, 255, 0, 1)");
 
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         layers: [
@@ -706,8 +706,8 @@ describe("layers", () => {
       sourceText.click();
       sourceText.type("\"");
 
-      const error = get.element('.CodeMirror-lint-marker-error');
-      error.should('exist');
+      const error = get.element(".CodeMirror-lint-marker-error");
+      error.should("exist");
     });
   });
 
diff --git a/cypress/e2e/map.cy.ts b/cypress/e2e/map.cy.ts
index 7ce34c18..1845dd8d 100644
--- a/cypress/e2e/map.cy.ts
+++ b/cypress/e2e/map.cy.ts
@@ -25,7 +25,7 @@ describe("map", () => {
   });
 
   describe("search", () => {
-    it('should exist', () => {
+    it("should exist", () => {
       then(get.searchControl()).shouldBeVisible();
     });
   });
@@ -33,7 +33,7 @@ describe("map", () => {
   describe("popup", () => {
     beforeEach(() => {
       when.setStyle("rectangles");
-    })
+    });
     it("should open on feature click", () => {
       when.clickCenter("maplibre:map");
       then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
diff --git a/cypress/e2e/maputnik-cypress-helper.ts b/cypress/e2e/maputnik-cypress-helper.ts
index 8c20bee8..b2a83d31 100644
--- a/cypress/e2e/maputnik-cypress-helper.ts
+++ b/cypress/e2e/maputnik-cypress-helper.ts
@@ -1,6 +1,6 @@
 /// <reference types="cypress-real-events" />
 import { CypressHelper } from "@shellygo/cypress-test-utils";
-import 'cypress-real-events/support';
+import "cypress-real-events/support";
 
 export default class MaputnikCypressHelper {
   private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
@@ -17,7 +17,7 @@ export default class MaputnikCypressHelper {
     dragAndDropWithWait: (element: string, targetElement: string) => {
       this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
       this.helper.get.elementByTestId(element).realMouseMove(0, 10, { position: "center" });
-      this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" })
+      this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" });
       this.helper.when.wait(1);
       this.helper.get.elementByTestId(targetElement).realMouseUp();
     },
diff --git a/cypress/e2e/maputnik-driver.ts b/cypress/e2e/maputnik-driver.ts
index 964215e9..c4a5b7e5 100644
--- a/cypress/e2e/maputnik-driver.ts
+++ b/cypress/e2e/maputnik-driver.ts
@@ -119,21 +119,21 @@ export class MaputnikDriver {
     ) => {
       const url = new URL(baseUrl);
       switch (styleProperties) {
-      case "geojson":
-        url.searchParams.set("style", baseUrl + "geojson-style.json");
-        break;
-      case "raster":
-        url.searchParams.set("style", baseUrl + "raster-style.json");
-        break;
-      case "both":
-        url.searchParams.set("style", baseUrl + "geojson-raster-style.json");
-        break;
-      case "layer":
-        url.searchParams.set("style", baseUrl + "example-layer-style.json");
-        break;
-      case "rectangles":
-        url.searchParams.set("style", baseUrl + "rectangles-style.json");
-        break;
+        case "geojson":
+          url.searchParams.set("style", baseUrl + "geojson-style.json");
+          break;
+        case "raster":
+          url.searchParams.set("style", baseUrl + "raster-style.json");
+          break;
+        case "both":
+          url.searchParams.set("style", baseUrl + "geojson-raster-style.json");
+          break;
+        case "layer":
+          url.searchParams.set("style", baseUrl + "example-layer-style.json");
+          break;
+        case "rectangles":
+          url.searchParams.set("style", baseUrl + "rectangles-style.json");
+          break;
       }
 
       if (zoom) {
@@ -144,7 +144,7 @@ export class MaputnikDriver {
         this.helper.when.acceptConfirm();
       }
       // when methods should not include assertions
-      const toolbarLink = this.helper.get.elementByTestId("toolbar:link")
+      const toolbarLink = this.helper.get.elementByTestId("toolbar:link");
       toolbarLink.scrollIntoView();
       toolbarLink.should("be.visible");
     },
@@ -215,6 +215,6 @@ export class MaputnikDriver {
     skipTargetLayerEditor: () =>
       this.helper.get.elementByTestId("skip-target-layer-editor"),
     canvas: () => this.helper.get.element("canvas"),
-    searchControl: () => this.helper.get.element('.maplibregl-ctrl-geocoder')
+    searchControl: () => this.helper.get.element(".maplibregl-ctrl-geocoder")
   };
 }
diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts
index 657727a5..04c0cf9e 100644
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -253,10 +253,10 @@ describe("modals", () => {
 
     it("inlcude API key when change renderer", () => {
 
-      when.click("modal:settings.close-modal")
+      when.click("modal:settings.close-modal");
       when.click("nav:open");
 
-      get.elementByAttribute('aria-label', "MapTiler Basic").should('exist').click();
+      get.elementByAttribute("aria-label", "MapTiler Basic").should("exist").click();
       when.wait(1000);
       when.click("nav:settings");
 
@@ -322,7 +322,7 @@ describe("modals", () => {
             win.localStorage.setItem(key, chunk);
           } catch (e: any) {
             // Verify it's a quota error
-            if (e.name === 'QuotaExceededError') {
+            if (e.name === "QuotaExceededError") {
               if (chunkSize <= 1) return;
               else {
                 chunkSize /= 2;
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
index b2c275d6..1b940dc5 100644
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@@ -14,9 +14,9 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
-import { mount } from 'cypress/react'
+import { mount } from "cypress/react";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -31,7 +31,7 @@ declare global {
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add("mount", mount);
 
 // Example use:
 // cy.mount(<MyComponent />)
diff --git a/eslint.config.js b/eslint.config.js
index 4800f10a..8825a6bc 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,56 +1,65 @@
-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';
+import eslint from "@eslint/js";
+import {defineConfig} from "eslint/config";
+import stylisticTs from "@stylistic/eslint-plugin";
+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({
+export default defineConfig({
   extends: [
     eslint.configs.recommended,
     tseslint.configs.recommended,
   ],
-  files: ['**/*.{js,jsx,ts,tsx}'],
+  files: ["**/*.{js,jsx,ts,tsx}"],
   ignores: [
     "dist/**/*",
   ],
   languageOptions: {
     ecmaVersion: 2024,
-    sourceType: 'module',
+    sourceType: "module",
     globals: {
-      global: 'readonly'
+      global: "readonly"
     }
   },
   settings: {
-    react: { version: '18.2' }
+    react: { version: "18.2" }
   },
   plugins: {
-    'react': reactPlugin,
-    'react-hooks': reactHooksPlugin,
-    'react-refresh': reactRefreshPlugin
+    "react": reactPlugin,
+    "react-hooks": reactHooksPlugin,
+    "react-refresh": reactRefreshPlugin,
+    "@stylistic": stylisticTs
   },
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true }
     ],
     "@typescript-eslint/no-explicit-any": "off",
-    '@typescript-eslint/no-unused-vars': [
-      'warn',
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
       {
-        varsIgnorePattern: '^_',
-        caughtErrors: 'all',
-        caughtErrorsIgnorePattern: '^_',
-        argsIgnorePattern: '^_'
+        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',
+    "no-unused-vars": "off",
+    "react/prop-types": "off",
+    "no-undef": "off",
+    "indent": "off",
+    "@stylistic/indent": ["error", 2],
+    "semi": "off",
+    "@stylistic/semi": ["error", "always"],
+    "quotes": "off",
+    "@stylistic/quotes": ["error", "double", { avoidEscape: true }],
+    "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",
+    "@typescript-eslint/consistent-type-imports": ["error", { "fixStyle": "inline-type-imports" }],
 
   },
   linterOptions: {
@@ -58,4 +67,4 @@ export default tseslint.config({
     noInlineConfig: false
   }
 }
-)
+);
diff --git a/i18next-parser.config.ts b/i18next-parser.config.ts
index 70c37158..e16bf8d3 100644
--- a/i18next-parser.config.ts
+++ b/i18next-parser.config.ts
@@ -1,6 +1,6 @@
 export default {
-  output: 'src/locales/$LOCALE/$NAMESPACE.json',
-  locales: [ 'de', 'fr', 'he', 'it','ja', 'zh' ],
+  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.
@@ -12,6 +12,6 @@ export default {
 
   defaultValue: (_locale, _ns, _key) => {
     // The default value is a string that indicates that the string is not translated.
-    return '__STRING_NOT_TRANSLATED__';
+    return "__STRING_NOT_TRANSLATED__";
   }
-}
+};
diff --git a/package-lock.json b/package-lock.json
index f804337b..e33d5ac2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@rollup/plugin-replace": "^6.0.2",
         "@shellygo/cypress-test-utils": "^6.0.1",
+        "@stylistic/eslint-plugin": "^5.3.1",
         "@types/codemirror": "^5.60.16",
         "@types/color": "^4.2.0",
         "@types/cors": "^2.8.19",
@@ -107,7 +108,7 @@
         "stylelint": "^16.24.0",
         "stylelint-config-recommended-scss": "^16.0.1",
         "stylelint-scss": "^6.12.1",
-        "typescript": "^5.8.3",
+        "typescript": "^5.9.2",
         "typescript-eslint": "^8.43.0",
         "uuid": "^13.0.0",
         "vite": "^7.1.5",
@@ -2805,6 +2806,53 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@stylistic/eslint-plugin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-5.3.1.tgz",
+      "integrity": "sha512-Ykums1VYonM0TgkD0VteVq9mrlO2FhF48MDJnPyv3MktIB2ydtuhlO0AfWm7xnW1kyf5bjOqA6xc7JjviuVTxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/types": "^8.41.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "estraverse": "^5.3.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -12708,9 +12756,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
-      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/package.json b/package.json
index 64d4af7f..026261f9 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@rollup/plugin-replace": "^6.0.2",
     "@shellygo/cypress-test-utils": "^6.0.1",
+    "@stylistic/eslint-plugin": "^5.3.1",
     "@types/codemirror": "^5.60.16",
     "@types/color": "^4.2.0",
     "@types/cors": "^2.8.19",
@@ -139,7 +140,7 @@
     "stylelint": "^16.24.0",
     "stylelint-config-recommended-scss": "^16.0.1",
     "stylelint-scss": "^6.12.1",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "typescript-eslint": "^8.43.0",
     "uuid": "^13.0.0",
     "vite": "^7.1.5",
diff --git a/src/components/App.tsx b/src/components/App.tsx
index b666d2a6..2447aed8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,41 +1,41 @@
-import React from 'react'
-import cloneDeep from 'lodash.clonedeep'
-import clamp from 'lodash.clamp'
-import buffer from 'buffer'
-import get from 'lodash.get'
-import {unset} from 'lodash'
-import {arrayMoveMutable} from 'array-move'
+import React from "react";
+import cloneDeep from "lodash.clonedeep";
+import clamp from "lodash.clamp";
+import buffer from "buffer";
+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 {validateStyleMin} from '@maplibre/maplibre-gl-style-spec'
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import {type Map, type LayerSpecification, type StyleSpecification, type ValidationError, type SourceSpecification} from "maplibre-gl";
+import {validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
-import MapMaplibreGl from './MapMaplibreGl'
-import MapOpenLayers from './MapOpenLayers'
-import LayerList from './LayerList'
-import LayerEditor from './LayerEditor'
-import AppToolbar, { MapState } from './AppToolbar'
-import AppLayout from './AppLayout'
-import MessagePanel from './AppMessagePanel'
+import MapMaplibreGl from "./MapMaplibreGl";
+import MapOpenLayers from "./MapOpenLayers";
+import LayerList from "./LayerList";
+import LayerEditor from "./LayerEditor";
+import AppToolbar, { type MapState } from "./AppToolbar";
+import AppLayout from "./AppLayout";
+import MessagePanel from "./AppMessagePanel";
 
-import ModalSettings from './modals/ModalSettings'
-import ModalExport from './modals/ModalExport'
-import ModalSources from './modals/ModalSources'
-import ModalOpen from './modals/ModalOpen'
-import ModalShortcuts from './modals/ModalShortcuts'
-import ModalDebug from './modals/ModalDebug'
+import ModalSettings from "./modals/ModalSettings";
+import ModalExport from "./modals/ModalExport";
+import ModalSources from "./modals/ModalSources";
+import ModalOpen from "./modals/ModalOpen";
+import ModalShortcuts from "./modals/ModalShortcuts";
+import ModalDebug from "./modals/ModalDebug";
 
-import {downloadGlyphsMetadata, downloadSpriteMetadata} from '../libs/metadata'
-import style from '../libs/style'
-import { undoMessages, redoMessages } from '../libs/diffmessage'
-import { createStyleStore, type IStyleStore } from '../libs/store/style-store-factory'
-import { RevisionStore } from '../libs/revisions'
-import LayerWatcher from '../libs/layerwatcher'
-import tokens from '../config/tokens.json'
-import isEqual from 'lodash.isequal'
-import { MapOptions } from 'maplibre-gl';
-import { OnStyleChangedOpts, StyleSpecificationWithId } from '../libs/definitions'
+import {downloadGlyphsMetadata, downloadSpriteMetadata} from "../libs/metadata";
+import style from "../libs/style";
+import { undoMessages, redoMessages } from "../libs/diffmessage";
+import { createStyleStore, type IStyleStore } from "../libs/store/style-store-factory";
+import { RevisionStore } from "../libs/revisions";
+import LayerWatcher from "../libs/layerwatcher";
+import tokens from "../config/tokens.json";
+import isEqual from "lodash.isequal";
+import { type MapOptions } from "maplibre-gl";
+import { type OnStyleChangedOpts, type StyleSpecificationWithId } from "../libs/definitions";
 
 // Buffer must be defined globally for @maplibre/maplibre-gl-style-spec validate() function to succeed.
 window.Buffer = buffer.Buffer;
@@ -46,21 +46,21 @@ function setFetchAccessToken(url: string, mapStyle: StyleSpecification) {
   const matchesThunderforest = url.match(/\.thunderforest\.com/);
   const matchesLocationIQ = url.match(/\.locationiq\.com/);
   if (matchesTilehosting || matchesMaptiler) {
-    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true})
+    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true});
     if (accessToken) {
-      return url.replace('{key}', accessToken)
+      return url.replace("{key}", accessToken);
     }
   }
   else if (matchesThunderforest) {
-    const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true})
+    const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true});
     if (accessToken) {
-      return url.replace('{key}', accessToken)
+      return url.replace("{key}", accessToken);
     }
   }
   else if (matchesLocationIQ) {
-    const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true})
+    const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true});
     if (accessToken) {
-      return url.replace('{key}', accessToken)
+      return url.replace("{key}", accessToken);
     }
   }
   else {
@@ -78,7 +78,7 @@ function updateRootSpec(spec: any, fieldName: string, newValues: any) {
         values: newValues
       }
     }
-  }
+  };
 }
 
 type MappedErrors = {
@@ -91,7 +91,7 @@ type MappedErrors = {
       message: string
     }
   }
-}
+};
 
 type AppState = {
   errors: MappedErrors[],
@@ -128,7 +128,7 @@ type AppState = {
     debug: boolean
   }
   fileHandle: FileSystemFileHandle | null
-}
+};
 
 export default class App extends React.Component<any, AppState> {
   revisionStore: RevisionStore;
@@ -136,7 +136,7 @@ export default class App extends React.Component<any, AppState> {
   layerWatcher: LayerWatcher;
 
   constructor(props: any) {
-    super(props)
+    super(props);
 
     this.revisionStore = new RevisionStore();
     this.configureKeyboardShortcuts();
@@ -174,11 +174,11 @@ export default class App extends React.Component<any, AppState> {
         debugToolbox: false,
       },
       fileHandle: null,
-    }
+    };
 
     this.layerWatcher = new LayerWatcher({
       onVectorLayersChange: v => this.setState({ vectorLayers: v })
-    })
+    });
   }
 
   configureKeyboardShortcuts = () => {
@@ -233,7 +233,7 @@ export default class App extends React.Component<any, AppState> {
           this.toggleModal("debug");
         }
       },
-    ]
+    ];
 
     document.body.addEventListener("keyup", (e) => {
       if(e.key === "Escape") {
@@ -242,19 +242,19 @@ export default class App extends React.Component<any, AppState> {
       }
       else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
         const shortcut = shortcuts.find((shortcut) => {
-          return (shortcut.key === e.key)
-        })
+          return (shortcut.key === e.key);
+        });
 
         if(shortcut) {
           this.setModal("shortcuts", false);
           shortcut.handler();
         }
       }
-    })
-  }
+    });
+  };
 
   handleKeyPress = (e: KeyboardEvent) => {
-    if(navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
+    if(navigator.platform.toUpperCase().indexOf("MAC") >= 0) {
       if(e.metaKey && e.shiftKey && e.keyCode === 90) {
         e.preventDefault();
         this.onRedo();
@@ -274,7 +274,7 @@ export default class App extends React.Component<any, AppState> {
         this.onRedo();
       }
     }
-  }
+  };
 
   async componentDidMount() {
     this.styleStore = await createStyleStore((mapStyle, opts) => this.onStyleChanged(mapStyle, opts));
@@ -286,33 +286,33 @@ export default class App extends React.Component<any, AppState> {
   }
 
   saveStyle(snapshotStyle: StyleSpecificationWithId) {
-    this.styleStore?.save(snapshotStyle)
+    this.styleStore?.save(snapshotStyle);
   }
 
   updateFonts(urlTemplate: string) {
-    const metadata: {[key: string]: string} = this.state.mapStyle.metadata || {} as any
-    const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
+    const metadata: {[key: string]: string} = this.state.mapStyle.metadata || {} as any;
+    const accessToken = metadata["maputnik:openmaptiles_access_token"] || tokens.openmaptiles;
 
-    const glyphUrl = (typeof urlTemplate === 'string')? urlTemplate.replace('{key}', accessToken): urlTemplate;
+    const glyphUrl = (typeof urlTemplate === "string")? urlTemplate.replace("{key}", accessToken): urlTemplate;
     downloadGlyphsMetadata(glyphUrl, fonts => {
-      this.setState({ spec: updateRootSpec(this.state.spec, 'glyphs', fonts)})
-    })
+      this.setState({ spec: updateRootSpec(this.state.spec, "glyphs", fonts)});
+    });
   }
 
   updateIcons(baseUrl: string) {
     downloadSpriteMetadata(baseUrl, icons => {
-      this.setState({ spec: updateRootSpec(this.state.spec, 'sprite', icons)})
-    })
+      this.setState({ spec: updateRootSpec(this.state.spec, "sprite", icons)});
+    });
   }
 
   onChangeMetadataProperty = (property: string, value: any) => {
     // If we're changing renderer reset the map state.
     if (
-      property === 'maputnik:renderer' &&
-      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mlgljs')
+      property === "maputnik:renderer" &&
+      value !== get(this.state.mapStyle, ["metadata", "maputnik:renderer"], "mlgljs")
     ) {
       this.setState({
-        mapState: 'map'
+        mapState: "map"
       });
     }
 
@@ -322,10 +322,10 @@ export default class App extends React.Component<any, AppState> {
         ...(this.state.mapStyle as any).metadata,
         [property]: value
       }
-    }
+    };
 
-    this.onStyleChanged(changedStyle)
-  }
+    this.onStyleChanged(changedStyle);
+  };
 
   onStyleChanged = (newStyle: StyleSpecificationWithId, opts: OnStyleChangedOpts={}): void => {
     opts = {
@@ -338,16 +338,16 @@ export default class App extends React.Component<any, AppState> {
     // 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') {
+    if (newStyle.glyphs && typeof newStyle.glyphs === "string") {
       newStyle.glyphs = setFetchAccessToken(newStyle.glyphs, newStyle);
     }
 
-    if (newStyle.sprite && typeof newStyle.sprite === 'string') {
+    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') {
+      if (source && "url" in source && typeof source.url === "string") {
         source.url = setFetchAccessToken(source.url, newStyle);
       }
     }
@@ -389,7 +389,7 @@ export default class App extends React.Component<any, AppState> {
               message,
             }
           }
-        }
+        };
       }
 
       // Special case: Invalid source
@@ -406,7 +406,7 @@ export default class App extends React.Component<any, AppState> {
               message,
             }
           }
-        }
+        };
       }
 
       const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
@@ -423,7 +423,7 @@ export default class App extends React.Component<any, AppState> {
               message
             }
           }
-        }
+        };
       }
       else {
         return {
@@ -453,10 +453,10 @@ export default class App extends React.Component<any, AppState> {
     }
 
     if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
-      this.updateFonts(newStyle.glyphs as string)
+      this.updateFonts(newStyle.glyphs as string);
     }
     if(newStyle.sprite !== this.state.mapStyle.sprite) {
-      this.updateIcons(newStyle.sprite as string)
+      this.updateIcons(newStyle.sprite as string);
     }
 
     if (opts.addRevision) {
@@ -473,28 +473,28 @@ export default class App extends React.Component<any, AppState> {
     }, () => {
       this.fetchSources();
       this.setStateInUrl();
-    })
+    });
 
-  }
+  };
 
   onUndo = () => {
-    const activeStyle = this.revisionStore.undo()
+    const activeStyle = this.revisionStore.undo();
 
-    const messages = undoMessages(this.state.mapStyle, activeStyle)
+    const messages = undoMessages(this.state.mapStyle, activeStyle);
     this.onStyleChanged(activeStyle, {addRevision: false});
     this.setState({
       infos: messages,
-    })
-  }
+    });
+  };
 
   onRedo = () => {
-    const activeStyle = this.revisionStore.redo()
-    const messages = redoMessages(this.state.mapStyle, activeStyle)
+    const activeStyle = this.revisionStore.redo();
+    const messages = redoMessages(this.state.mapStyle, activeStyle);
     this.onStyleChanged(activeStyle, {addRevision: false});
     this.setState({
       infos: messages,
-    })
-  }
+    });
+  };
 
   onMoveLayer = (move: {oldIndex: number; newIndex: number}) => {
     let { oldIndex, newIndex } = move;
@@ -512,97 +512,97 @@ export default class App extends React.Component<any, AppState> {
     layers = layers.slice(0);
     arrayMoveMutable(layers, oldIndex, newIndex);
     this.onLayersChange(layers);
-  }
+  };
 
   onLayersChange = (changedLayers: LayerSpecification[]) => {
     const changedStyle = {
       ...this.state.mapStyle,
       layers: changedLayers
-    }
-    this.onStyleChanged(changedStyle)
-  }
+    };
+    this.onStyleChanged(changedStyle);
+  };
 
   onLayerDestroy = (index: number) => {
     const layers = this.state.mapStyle.layers;
     const remainingLayers = layers.slice(0);
     remainingLayers.splice(index, 1);
     this.onLayersChange(remainingLayers);
-  }
+  };
 
   onLayerCopy = (index: number) => {
     const layers = this.state.mapStyle.layers;
-    const changedLayers = layers.slice(0)
+    const changedLayers = layers.slice(0);
 
-    const clonedLayer = cloneDeep(changedLayers[index])
-    clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(index, 0, clonedLayer)
-    this.onLayersChange(changedLayers)
-  }
+    const clonedLayer = cloneDeep(changedLayers[index]);
+    clonedLayer.id = clonedLayer.id + "-copy";
+    changedLayers.splice(index, 0, clonedLayer);
+    this.onLayersChange(changedLayers);
+  };
 
   onLayerVisibilityToggle = (index: number) => {
     const layers = this.state.mapStyle.layers;
-    const changedLayers = layers.slice(0)
+    const changedLayers = layers.slice(0);
 
-    const layer = { ...changedLayers[index] }
-    const changedLayout = 'layout' in layer ? {...layer.layout} : {}
-    changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
+    const layer = { ...changedLayers[index] };
+    const changedLayout = "layout" in layer ? {...layer.layout} : {};
+    changedLayout.visibility = changedLayout.visibility === "none" ? "visible" : "none";
 
-    layer.layout = changedLayout
-    changedLayers[index] = layer
-    this.onLayersChange(changedLayers)
-  }
+    layer.layout = changedLayout;
+    changedLayers[index] = layer;
+    this.onLayersChange(changedLayers);
+  };
 
 
   onLayerIdChange = (index: number, _oldId: string, newId: string) => {
-    const changedLayers = this.state.mapStyle.layers.slice(0)
+    const changedLayers = this.state.mapStyle.layers.slice(0);
     changedLayers[index] = {
       ...changedLayers[index],
       id: newId
-    }
+    };
 
-    this.onLayersChange(changedLayers)
-  }
+    this.onLayersChange(changedLayers);
+  };
 
   onLayerChanged = (index: number, layer: LayerSpecification) => {
-    const changedLayers = this.state.mapStyle.layers.slice(0)
-    changedLayers[index] = layer
+    const changedLayers = this.state.mapStyle.layers.slice(0);
+    changedLayers[index] = layer;
 
-    this.onLayersChange(changedLayers)
-  }
+    this.onLayersChange(changedLayers);
+  };
 
   setMapState = (newState: MapState) => {
     this.setState({
       mapState: newState
     }, this.setStateInUrl);
-  }
+  };
 
   setDefaultValues = (styleObj: StyleSpecificationWithId) => {
-    const metadata: {[key: string]: string} = styleObj.metadata || {} as any
-    if(metadata['maputnik:renderer'] === undefined) {
+    const metadata: {[key: string]: string} = styleObj.metadata || {} as any;
+    if(metadata["maputnik:renderer"] === undefined) {
       const changedStyle = {
         ...styleObj,
         metadata: {
           ...styleObj.metadata as any,
-          'maputnik:renderer': 'mlgljs'
+          "maputnik:renderer": "mlgljs"
         }
-      }
-      return changedStyle
+      };
+      return changedStyle;
     } else {
-      return styleObj
+      return styleObj;
     }
-  }
+  };
 
   openStyle = (styleObj: StyleSpecificationWithId, fileHandle: FileSystemFileHandle | null) => {
     this.setState({fileHandle: fileHandle});
-    styleObj = this.setDefaultValues(styleObj)
-    this.onStyleChanged(styleObj)
-  }
+    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)) {
+      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 = [];
@@ -616,7 +616,7 @@ export default class App extends React.Component<any, AppState> {
         let url = source.url;
 
         try {
-          url = setFetchAccessToken(url!, this.state.mapStyle)
+          url = setFetchAccessToken(url!, this.state.mapStyle);
         } catch(err) {
           console.warn("Failed to setFetchAccessToken: ", err);
         }
@@ -627,7 +627,7 @@ export default class App extends React.Component<any, AppState> {
           }
 
           for(const layer of json.vector_layers) {
-            sourceList[key].layers.push(layer.id)
+            sourceList[key].layers.push(layer.id);
           }
         };
 
@@ -636,7 +636,7 @@ export default class App extends React.Component<any, AppState> {
             const json = await (new PMTiles(url!.substring(10))).getTileJson("");
             setVectorLayers(json);
           } else {
-            const response = await fetch(url!, { mode: 'cors' });
+            const response = await fetch(url!, { mode: "cors" });
             const json = await response.json();
             setVectorLayers(json);
           }
@@ -650,13 +650,13 @@ export default class App extends React.Component<any, AppState> {
       console.debug("Setting sources", sourceList);
       this.setState({
         sources: sourceList
-      })
+      });
     }
   }
 
   _getRenderer () {
     const metadata: {[key:string]: string} = this.state.mapStyle.metadata || {} as any;
-    return metadata['maputnik:renderer'] || 'mlgljs';
+    return metadata["maputnik:renderer"] || "mlgljs";
   }
 
   onMapChange = (mapView: {
@@ -669,7 +669,7 @@ export default class App extends React.Component<any, AppState> {
     this.setState({
       mapView,
     });
-  }
+  };
 
   mapRenderer() {
     const {mapStyle, dirtyMapStyle} = this.state;
@@ -682,23 +682,23 @@ export default class App extends React.Component<any, AppState> {
         });
       },
       onDataChange: (e: {map: Map}) => {
-        this.layerWatcher.analyzeMap(e.map)
+        this.layerWatcher.analyzeMap(e.map);
         this.fetchSources();
       },
-    }
+    };
 
     const renderer = this._getRenderer();
 
     let mapElement;
 
     // Check if OL code has been loaded?
-    if(renderer === 'ol') {
+    if(renderer === "ol") {
       mapElement = <MapOpenLayers
         {...mapProps}
         onChange={this.onMapChange}
         debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
         onLayerSelect={(layerId) => this.onLayerSelect(+layerId)}
-      />
+      />;
     } else {
 
       mapElement = <MapMaplibreGl {...mapProps}
@@ -706,7 +706,7 @@ export default class App extends React.Component<any, AppState> {
         options={this.state.maplibreGlDebugOptions}
         inspectModeEnabled={this.state.mapState === "inspect"}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
-        onLayerSelect={this.onLayerSelect} />
+        onLayerSelect={this.onLayerSelect} />;
     }
 
     let filterName;
@@ -720,7 +720,7 @@ export default class App extends React.Component<any, AppState> {
 
     return <div style={elementStyle} className="maputnik-map__container" data-wd-key="maplibre:container">
       {mapElement}
-    </div>
+    </div>;
   }
 
   setStateInUrl = () => {
@@ -749,7 +749,7 @@ export default class App extends React.Component<any, AppState> {
     }
 
     history.replaceState({selectedLayerIndex}, "Maputnik", url.href);
-  }
+  };
 
   getInitialStateFromUrl = (mapStyle: StyleSpecification) => {
     const url = new URL(location.href);
@@ -802,14 +802,14 @@ export default class App extends React.Component<any, AppState> {
         console.warn(err);
       }
     }
-  }
+  };
 
   onLayerSelect = (index: number) => {
     this.setState({
       selectedLayerIndex: index,
       selectedLayerOriginalId: this.state.mapStyle.layers[index].id,
     }, this.setStateInUrl);
-  }
+  };
 
   setModal(modalName: keyof AppState["isOpen"], value: boolean) {
     this.setState({
@@ -817,7 +817,7 @@ export default class App extends React.Component<any, AppState> {
         ...this.state.isOpen,
         [modalName]: value
       }
-    }, this.setStateInUrl)
+    }, this.setStateInUrl);
   }
 
   toggleModal(modalName: keyof AppState["isOpen"]) {
@@ -826,7 +826,7 @@ export default class App extends React.Component<any, AppState> {
 
   onSetFileHandle = (fileHandle: FileSystemFileHandle | null) => {
     this.setState({ fileHandle });
-  }
+  };
 
   onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
     this.setState({
@@ -835,7 +835,7 @@ export default class App extends React.Component<any, AppState> {
         [key]: value,
       }
     });
-  }
+  };
 
   onChangeMaplibreGlDebug = (key: keyof AppState["maplibreGlDebugOptions"], value: any) => {
     this.setState({
@@ -844,11 +844,11 @@ export default class App extends React.Component<any, AppState> {
         [key]: value,
       }
     });
-  }
+  };
 
   render() {
-    const layers = this.state.mapStyle.layers || []
-    const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : undefined
+    const layers = this.state.mapStyle.layers || [];
+    const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : undefined;
 
     const toolbar = <AppToolbar
       renderer={this._getRenderer()}
@@ -860,7 +860,7 @@ export default class App extends React.Component<any, AppState> {
       onStyleOpen={this.onStyleChanged}
       onSetMapState={this.setMapState}
       onToggleModal={this.toggleModal.bind(this)}
-    />
+    />;
 
     const layerList = <LayerList
       onMoveLayer={this.onMoveLayer}
@@ -873,7 +873,7 @@ export default class App extends React.Component<any, AppState> {
       layers={layers}
       sources={this.state.sources}
       errors={this.state.errors}
-    />
+    />;
 
     const layerEditor = selectedLayer ? <LayerEditor
       key={this.state.selectedLayerOriginalId}
@@ -891,7 +891,7 @@ export default class App extends React.Component<any, AppState> {
       onLayerVisibilityToggle={this.onLayerVisibilityToggle}
       onLayerIdChange={this.onLayerIdChange}
       errors={this.state.errors}
-    /> : undefined
+    /> : undefined;
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
       currentLayer={selectedLayer}
@@ -900,7 +900,7 @@ export default class App extends React.Component<any, AppState> {
       mapStyle={this.state.mapStyle}
       errors={this.state.errors}
       infos={this.state.infos}
-    /> : undefined
+    /> : undefined;
 
 
     const modals = <div>
@@ -911,41 +911,41 @@ export default class App extends React.Component<any, AppState> {
         onChangeMaplibreGlDebug={this.onChangeMaplibreGlDebug}
         onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
         isOpen={this.state.isOpen.debug}
-        onOpenToggle={this.toggleModal.bind(this, 'debug')}
+        onOpenToggle={this.toggleModal.bind(this, "debug")}
         mapView={this.state.mapView}
       />
       <ModalShortcuts
         isOpen={this.state.isOpen.shortcuts}
-        onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
+        onOpenToggle={this.toggleModal.bind(this, "shortcuts")}
       />
       <ModalSettings
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         onChangeMetadataProperty={this.onChangeMetadataProperty}
         isOpen={this.state.isOpen.settings}
-        onOpenToggle={this.toggleModal.bind(this, 'settings')}
+        onOpenToggle={this.toggleModal.bind(this, "settings")}
       />
       <ModalExport
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.export}
-        onOpenToggle={this.toggleModal.bind(this, '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')}
+        onOpenToggle={this.toggleModal.bind(this, "open")}
         fileHandle={this.state.fileHandle}
       />
       <ModalSources
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.sources}
-        onOpenToggle={this.toggleModal.bind(this, 'sources')}
+        onOpenToggle={this.toggleModal.bind(this, "sources")}
       />
-    </div>
+    </div>;
 
     return <AppLayout
       toolbar={toolbar}
@@ -954,6 +954,6 @@ export default class App extends React.Component<any, AppState> {
       map={this.mapRenderer()}
       bottom={bottomPanel}
       modals={modals}
-    />
+    />;
   }
 }
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 784abbcd..8d6590cc 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import ScrollContainer from './ScrollContainer'
-import { WithTranslation, withTranslation } from 'react-i18next';
-import { IconContext } from 'react-icons';
+import React from "react";
+import ScrollContainer from "./ScrollContainer";
+import { type WithTranslation, withTranslation } from "react-i18next";
+import { IconContext } from "react-icons";
 
 type AppLayoutInternalProps = {
   toolbar: React.ReactElement
@@ -17,7 +17,7 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
   render() {
     document.body.dir = this.props.i18n.dir();
 
-    return <IconContext.Provider value={{size: '14px'}}>
+    return <IconContext.Provider value={{size: "14px"}}>
       <div className="maputnik-layout">
         {this.props.toolbar}
         <div className="maputnik-layout-main">
@@ -37,7 +37,7 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
         }
         {this.props.modals}
       </div>
-    </IconContext.Provider>
+    </IconContext.Provider>;
   }
 }
 
diff --git a/src/components/AppMessagePanel.tsx b/src/components/AppMessagePanel.tsx
index 2e7df6b4..c2fe44e4 100644
--- a/src/components/AppMessagePanel.tsx
+++ b/src/components/AppMessagePanel.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import {formatLayerId} from '../libs/format';
-import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
-import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import {formatLayerId} from "../libs/format";
+import {type LayerSpecification, type StyleSpecification} from "maplibre-gl";
+import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
 type AppMessagePanelInternalProps = {
   errors?: unknown[]
@@ -15,7 +15,7 @@ type AppMessagePanelInternalProps = {
 class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalProps> {
   static defaultProps = {
     onLayerSelect: () => {},
-  }
+  };
 
   render() {
     const {t, selectedLayerIndex} = this.props;
@@ -48,17 +48,17 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
       }
       return <p key={"error-"+idx} className="maputnik-message-panel-error">
         {content}
-      </p>
-    })
+      </p>;
+    });
 
     const infos = this.props.infos?.map((m, i) => {
-      return <p key={"info-"+i}>{m}</p>
-    })
+      return <p key={"info-"+i}>{m}</p>;
+    });
 
     return <div className="maputnik-message-panel">
       {errors}
       {infos}
-    </div>
+    </div>;
   }
 }
 
diff --git a/src/components/AppToolbar.tsx b/src/components/AppToolbar.tsx
index 2844c4bf..d3359174 100644
--- a/src/components/AppToolbar.tsx
+++ b/src/components/AppToolbar.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import classnames from 'classnames'
-import {detect} from 'detect-browser';
+import React from "react";
+import classnames from "classnames";
+import {detect} from "detect-browser";
 
 import {
   MdOpenInBrowser,
@@ -10,17 +10,17 @@ import {
   MdFindInPage,
   MdLanguage,
   MdSave
-} from 'react-icons/md'
-import pkgJson from '../../package.json'
+} 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';
+import maputnikLogo from "maputnik-design/logos/logo-color.svg?inline";
+import { withTranslation, type 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();
-const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser!.name) > -1;
+const colorAccessibilityFiltersEnabled = ["chrome", "firefox"].indexOf(browser!.name) > -1;
 
 
 type IconTextProps = {
@@ -30,7 +30,7 @@ type IconTextProps = {
 
 class IconText extends React.Component<IconTextProps> {
   render() {
-    return <span className="maputnik-icon-text">{this.props.children}</span>
+    return <span className="maputnik-icon-text">{this.props.children}</span>;
   }
 }
 
@@ -44,14 +44,14 @@ type ToolbarLinkProps = {
 class ToolbarLink extends React.Component<ToolbarLinkProps> {
   render() {
     return <a
-      className={classnames('maputnik-toolbar-link', this.props.className)}
+      className={classnames("maputnik-toolbar-link", this.props.className)}
       href={this.props.href}
       rel="noopener noreferrer"
       target="_blank"
       data-wd-key="toolbar:link"
     >
       {this.props.children}
-    </a>
+    </a>;
   }
 }
 
@@ -67,7 +67,7 @@ class ToolbarSelect extends React.Component<ToolbarSelectProps> {
       data-wd-key={this.props.wdKey}
     >
       {this.props.children}
-    </div>
+    </div>;
   }
 }
 
@@ -85,7 +85,7 @@ class ToolbarAction extends React.Component<ToolbarActionProps> {
       onClick={this.props.onClick}
     >
       {this.props.children}
-    </button>
+    </button>;
   }
 }
 
@@ -115,7 +115,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
       add: false,
       export: false,
     }
-  }
+  };
 
   handleSelection(val: MapState) {
     this.props.onSetMapState(val);
@@ -133,7 +133,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
       const el = document.querySelector("#skip-target-"+target) as HTMLButtonElement;
       el.focus();
     }
-  }
+  };
 
   render() {
     const t = this.props.t;
@@ -147,7 +147,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
         id: "inspect",
         group: "general",
         title: t("Inspect"),
-        disabled: this.props.renderer === 'ol',
+        disabled: this.props.renderer === "ol",
       },
       {
         id: "filter-deuteranopia",
@@ -220,19 +220,19 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
           </a>
         </div>
         <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
-          <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
+          <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, "open")}>
             <MdOpenInBrowser />
             <IconText>{t("Open")}</IconText>
           </ToolbarAction>
-          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
+          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, "export")}>
             <MdSave />
             <IconText>{t("Save")}</IconText>
           </ToolbarAction>
-          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
+          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, "sources")}>
             <MdLayers />
             <IconText>{t("Data Sources")}</IconText>
           </ToolbarAction>
-          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
+          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, "settings")}>
             <MdSettings />
             <IconText>{t("Style Settings")}</IconText>
           </ToolbarAction>
@@ -292,7 +292,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
           </ToolbarLink>
         </div>
       </div>
-    </nav>
+    </nav>;
   }
 }
 
diff --git a/src/components/Block.tsx b/src/components/Block.tsx
index 32911812..d38d2af3 100644
--- a/src/components/Block.tsx
+++ b/src/components/Block.tsx
@@ -1,7 +1,7 @@
-import React, {PropsWithChildren, SyntheticEvent} from 'react'
-import classnames from 'classnames'
-import FieldDocLabel from './FieldDocLabel'
-import Doc from './Doc'
+import React, {type PropsWithChildren, type SyntheticEvent} from "react";
+import classnames from "classnames";
+import FieldDocLabel from "./FieldDocLabel";
+import Doc from "./Doc";
 
 type BlockProps = PropsWithChildren & {
   "data-wd-key"?: string
@@ -26,13 +26,13 @@ export default class Block extends React.Component<BlockProps, BlockState> {
     super(props);
     this.state = {
       showDoc: false,
-    }
+    };
   }
 
   onChange(e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) {
-    const value = e.target.value
+    const value = e.target.value;
     if (this.props.onChange) {
-      return this.props.onChange(value === "" ? undefined : value)
+      return this.props.onChange(value === "" ? undefined : value);
     }
   }
 
@@ -40,7 +40,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
     this.setState({
       showDoc: val
     });
-  }
+  };
 
   /**
    * Some fields for example <InputColor/> bind click events inside the element
@@ -58,7 +58,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
     if (event.nativeEvent.target.nodeName !== "A") {
       event.preventDefault();
     }
-  }
+  };
 
   render() {
     return <label style={this.props.style}
@@ -87,17 +87,17 @@ export default class Block extends React.Component<BlockProps, BlockState> {
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
-      <div className="maputnik-input-block-content" ref={el => {this._blockEl = el}}>
+      <div className="maputnik-input-block-content" ref={el => {this._blockEl = el;}}>
         {this.props.children}
       </div>
       {this.props.fieldSpec &&
         <div
           className="maputnik-doc-inline"
-          style={{display: this.state.showDoc ? '' : 'none'}}
+          style={{display: this.state.showDoc ? "" : "none"}}
         >
           <Doc fieldSpec={this.props.fieldSpec} />
         </div>
       }
-    </label>
+    </label>;
   }
 }
diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 3a67d530..5dcac77d 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { Collapse as ReactCollapse } from 'react-collapse'
-import {reducedMotionEnabled} from '../libs/accessibility'
+import React from "react";
+import { Collapse as ReactCollapse } from "react-collapse";
+import {reducedMotionEnabled} from "../libs/accessibility";
 
 
 type CollapseProps = {
@@ -12,7 +12,7 @@ type CollapseProps = {
 export default class Collapse extends React.Component<CollapseProps> {
   static defaultProps = {
     isActive: true
-  }
+  };
 
   render() {
     if (reducedMotionEnabled()) {
@@ -20,14 +20,14 @@ export default class Collapse extends React.Component<CollapseProps> {
         <div style={{display: this.props.isActive ? "block" : "none"}}>
           {this.props.children}
         </div>
-      )
+      );
     }
     else {
       return (
         <ReactCollapse isOpened={this.props.isActive}>
           {this.props.children}
         </ReactCollapse>
-      )
+      );
     }
   }
 }
diff --git a/src/components/Collapser.tsx b/src/components/Collapser.tsx
index 9d3334cc..3590d4d0 100644
--- a/src/components/Collapser.tsx
+++ b/src/components/Collapser.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
+import React from "react";
+import {MdArrowDropDown, MdArrowDropUp} from "react-icons/md";
 
 type CollapserProps = {
   isCollapsed: boolean
@@ -12,7 +12,7 @@ export default class Collapser extends React.Component<CollapserProps> {
       width: 20,
       height: 20,
       ...this.props.style,
-    }
-    return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
+    };
+    return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />;
   }
 }
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index 8996a37e..acc84d98 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 const headers = {
   js: "JS",
@@ -15,7 +15,7 @@ type DocProps = {
         doc?: string
       }
     }
-    'sdk-support'?: {
+    "sdk-support"?: {
       [key: string]: typeof headers
     }
     docUrl?: string,
@@ -28,7 +28,7 @@ export default class Doc extends React.Component<DocProps> {
     const {fieldSpec} = this.props;
 
     const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
-    const sdkSupport = fieldSpec['sdk-support'];
+    const sdkSupport = fieldSpec["sdk-support"];
 
     const renderValues = (
       !!values &&
diff --git a/src/components/FieldArray.tsx b/src/components/FieldArray.tsx
index 91fdab0a..39e5cd48 100644
--- a/src/components/FieldArray.tsx
+++ b/src/components/FieldArray.tsx
@@ -1,5 +1,5 @@
-import InputArray, { InputArrayProps } from './InputArray'
-import Fieldset from './Fieldset'
+import InputArray, { type InputArrayProps } from "./InputArray";
+import Fieldset from "./Fieldset";
 
 type FieldArrayProps = InputArrayProps & {
   name?: string
diff --git a/src/components/FieldAutocomplete.tsx b/src/components/FieldAutocomplete.tsx
index 71fae196..30fe7f93 100644
--- a/src/components/FieldAutocomplete.tsx
+++ b/src/components/FieldAutocomplete.tsx
@@ -1,5 +1,5 @@
-import Block from './Block'
-import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
+import Block from "./Block";
+import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
 
 
 type FieldAutocompleteProps = InputAutocompleteProps & {
diff --git a/src/components/FieldCheckbox.tsx b/src/components/FieldCheckbox.tsx
index 5338cc42..b4dd6ffa 100644
--- a/src/components/FieldCheckbox.tsx
+++ b/src/components/FieldCheckbox.tsx
@@ -1,5 +1,5 @@
-import Block from './Block'
-import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
+import Block from "./Block";
+import InputCheckbox, {type InputCheckboxProps} from "./InputCheckbox";
 
 
 type FieldCheckboxProps = InputCheckboxProps & {
diff --git a/src/components/FieldColor.tsx b/src/components/FieldColor.tsx
index e2c534d5..acb67513 100644
--- a/src/components/FieldColor.tsx
+++ b/src/components/FieldColor.tsx
@@ -1,5 +1,5 @@
-import Block from './Block'
-import InputColor, {InputColorProps} from './InputColor'
+import Block from "./Block";
+import InputColor, {type InputColorProps} from "./InputColor";
 
 
 type FieldColorProps = InputColorProps & {
diff --git a/src/components/FieldComment.tsx b/src/components/FieldComment.tsx
index 4c84ddbc..1d1fb344 100644
--- a/src/components/FieldComment.tsx
+++ b/src/components/FieldComment.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React from "react";
 
-import Block from './Block'
-import InputString from './InputString'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import Block from "./Block";
+import InputString from "./InputString";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldCommentInternalProps = {
   value?: string
diff --git a/src/components/FieldDocLabel.tsx b/src/components/FieldDocLabel.tsx
index 7bd34b58..87e5fa4c 100644
--- a/src/components/FieldDocLabel.tsx
+++ b/src/components/FieldDocLabel.tsx
@@ -1,5 +1,5 @@
-import React, { JSX } from 'react'
-import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
+import React, { type JSX } from "react";
+import {MdInfoOutline, MdHighlightOff} from "react-icons/md";
 
 type FieldDocLabelProps = {
   label: JSX.Element | string | undefined
@@ -28,12 +28,12 @@ const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
       <label className="maputnik-doc-wrapper">
         <div className="maputnik-doc-target">
           {label}
-          {'\xa0'}
+          {"\xa0"}
           <button
-            aria-label={open ? 'close property documentation' : 'open property documentation'}
-            className={`maputnik-doc-button maputnik-doc-button--${open ? 'open' : 'closed'}`}
+            aria-label={open ? "close property documentation" : "open property documentation"}
+            className={`maputnik-doc-button maputnik-doc-button--${open ? "open" : "closed"}`}
             onClick={() => onToggleDoc(!open)}
-            data-wd-key={'field-doc-button-' + label}
+            data-wd-key={"field-doc-button-" + label}
           >
             {open ? <MdHighlightOff /> : <MdInfoOutline />}
           </button>
diff --git a/src/components/FieldDynamicArray.tsx b/src/components/FieldDynamicArray.tsx
index c383bb9a..4af7027f 100644
--- a/src/components/FieldDynamicArray.tsx
+++ b/src/components/FieldDynamicArray.tsx
@@ -1,5 +1,5 @@
-import InputDynamicArray, {InputDynamicArrayProps} from './InputDynamicArray'
-import Fieldset from './Fieldset'
+import InputDynamicArray, {type InputDynamicArrayProps} from "./InputDynamicArray";
+import Fieldset from "./Fieldset";
 
 type FieldDynamicArrayProps = InputDynamicArrayProps & {
   name?: string
diff --git a/src/components/FieldEnum.tsx b/src/components/FieldEnum.tsx
index 86c9ac63..497ae2c0 100644
--- a/src/components/FieldEnum.tsx
+++ b/src/components/FieldEnum.tsx
@@ -1,5 +1,5 @@
-import InputEnum, {InputEnumProps} from './InputEnum'
-import Fieldset from './Fieldset';
+import InputEnum, {type InputEnumProps} from "./InputEnum";
+import Fieldset from "./Fieldset";
 
 
 type FieldEnumProps = InputEnumProps & {
diff --git a/src/components/FieldFunction.tsx b/src/components/FieldFunction.tsx
index 0f38a95d..1378f043 100644
--- a/src/components/FieldFunction.tsx
+++ b/src/components/FieldFunction.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React from "react";
 
-import SpecProperty from './_SpecProperty'
-import DataProperty, { Stop } from './_DataProperty'
-import ZoomProperty from './_ZoomProperty'
-import ExpressionProperty from './_ExpressionProperty'
-import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
-import {findDefaultFromSpec} from '../libs/spec-helper';
+import SpecProperty from "./_SpecProperty";
+import DataProperty, { type Stop } from "./_DataProperty";
+import ZoomProperty from "./_ZoomProperty";
+import ExpressionProperty from "./_ExpressionProperty";
+import {function as styleFunction} from "@maplibre/maplibre-gl-style-spec";
+import {findDefaultFromSpec} from "../libs/spec-helper";
 
 
 function isLiteralExpression(value: any) {
@@ -22,9 +22,9 @@ function isGetExpression(value: any) {
 
 function isZoomField(value: any) {
   return (
-    typeof(value) === 'object' &&
+    typeof(value) === "object" &&
     value.stops &&
-    typeof(value.property) === 'undefined' &&
+    typeof(value.property) === "undefined" &&
     Array.isArray(value.stops) &&
     value.stops.length > 1 &&
     value.stops.every((stop: Stop) => {
@@ -38,7 +38,7 @@ function isZoomField(value: any) {
 
 function isIdentityProperty(value: any) {
   return (
-    typeof(value) === 'object' &&
+    typeof(value) === "object" &&
     value.type === "identity" &&
     Object.prototype.hasOwnProperty.call(value, "property")
   );
@@ -46,16 +46,16 @@ function isIdentityProperty(value: any) {
 
 function isDataStopProperty(value: any) {
   return (
-    typeof(value) === 'object' &&
+    typeof(value) === "object" &&
     value.stops &&
-    typeof(value.property) !== 'undefined' &&
+    typeof(value.property) !== "undefined" &&
     value.stops.length > 1 &&
     Array.isArray(value.stops) &&
     value.stops.every((stop: Stop) => {
       return (
         Array.isArray(stop) &&
         stop.length === 2 &&
-        typeof(stop[0]) === 'object'
+        typeof(stop[0]) === "object"
       );
     })
   );
@@ -141,18 +141,18 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
 
   const getFieldFunctionType = (fieldSpec: any) => {
     if (fieldSpec.expression.interpolated) {
-      return 'exponential';
+      return "exponential";
     }
-    if (fieldSpec.type === 'number') {
-      return 'interval';
+    if (fieldSpec.type === "number") {
+      return "interval";
     }
-    return 'categorical';
+    return "categorical";
   };
 
   const addStop = () => {
     const stops = props.value.stops.slice(0);
     const lastStop = stops[stops.length - 1];
-    if (typeof lastStop[0] === 'object') {
+    if (typeof lastStop[0] === "object") {
       stops.push([
         { zoom: lastStop[0].zoom + 1, value: lastStop[0].value },
         lastStop[1],
@@ -172,7 +172,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   const deleteExpression = () => {
     const { fieldSpec, fieldName } = props;
     props.onChange(fieldName, fieldSpec.default);
-    setDataType('value');
+    setDataType("value");
   };
 
   const deleteStop = (stopIdx: number) => {
@@ -195,7 +195,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
     const { value } = props;
 
     let zoomFunc: any;
-    if (typeof value === 'object') {
+    if (typeof value === "object") {
       if (value.stops) {
         zoomFunc = {
           base: value.base,
@@ -229,13 +229,13 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
 
     if (isGetExpression(value)) {
       props.onChange(fieldName, {
-        type: 'identity',
+        type: "identity",
         property: value[1],
       });
-      setDataType('value');
+      setDataType("value");
     } else if (isLiteralExpression(value)) {
       props.onChange(fieldName, value[1]);
-      setDataType('value');
+      setDataType("value");
     }
   };
 
@@ -245,7 +245,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
       isGetExpression(value) ||
       isLiteralExpression(value) ||
       isPrimative(value) ||
-      (Array.isArray(value) && fieldSpec.type === 'array')
+      (Array.isArray(value) && fieldSpec.type === "array")
     );
   };
 
@@ -253,26 +253,26 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
     const { value, fieldSpec } = 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];
+      expression = ["get", value.property];
     } else {
-      expression = ['literal', value || props.fieldSpec.default];
+      expression = ["literal", value || props.fieldSpec.default];
     }
     props.onChange(props.fieldName, expression);
   };
 
   const makeDataFunction = () => {
     const functionType = getFieldFunctionType(props.fieldSpec);
-    const stopValue = functionType === 'categorical' ? '' : 0;
+    const stopValue = functionType === "categorical" ? "" : 0;
     const { value } = 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) => {
@@ -281,7 +281,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         };
       } else {
         dataFunc = {
-          property: '',
+          property: "",
           type: functionType,
           base: value.base,
           stops: [
@@ -292,7 +292,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
       }
     } else {
       dataFunc = {
-        property: '',
+        property: "",
         type: functionType,
         base: value.base,
         stops: [
@@ -328,11 +328,11 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   };
 
   const propClass =
-    props.fieldSpec.default === props.value ? 'maputnik-default-property' : 'maputnik-modified-property';
+    props.fieldSpec.default === props.value ? "maputnik-default-property" : "maputnik-modified-property";
 
   let specField;
 
-  if (dataType === 'expression') {
+  if (dataType === "expression") {
     specField = (
       <ExpressionProperty
         errors={props.errors}
@@ -348,7 +348,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         onBlur={onUnmarkEditing}
       />
     );
-  } else if (dataType === 'zoom_function') {
+  } else if (dataType === "zoom_function") {
     specField = (
       <ZoomProperty
         errors={props.errors}
@@ -363,7 +363,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         onExpressionClick={makeExpression}
       />
     );
-  } else if (dataType === 'data_function') {
+  } else if (dataType === "data_function") {
     specField = (
       <DataProperty
         errors={props.errors}
@@ -396,7 +396,7 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   }
 
   return (
-    <div className={propClass} data-wd-key={'spec-field-container:' + props.fieldName}>
+    <div className={propClass} data-wd-key={"spec-field-container:" + props.fieldName}>
       {specField}
     </div>
   );
diff --git a/src/components/FieldId.tsx b/src/components/FieldId.tsx
index c2c832e2..63966d4c 100644
--- a/src/components/FieldId.tsx
+++ b/src/components/FieldId.tsx
@@ -1,7 +1,7 @@
 
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
-import Block from './Block'
-import InputString from './InputString'
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
+import Block from "./Block";
+import InputString from "./InputString";
 
 type FieldIdProps = {
   value: string
diff --git a/src/components/FieldJson.tsx b/src/components/FieldJson.tsx
index e99e9d78..5582739e 100644
--- a/src/components/FieldJson.tsx
+++ b/src/components/FieldJson.tsx
@@ -1,4 +1,4 @@
-import InputJson, {InputJsonProps} from './InputJson'
+import InputJson, {type InputJsonProps} from "./InputJson";
 
 
 type FieldJsonProps = InputJsonProps & {};
diff --git a/src/components/FieldMaxZoom.tsx b/src/components/FieldMaxZoom.tsx
index e7c985a2..4fc7da3b 100644
--- a/src/components/FieldMaxZoom.tsx
+++ b/src/components/FieldMaxZoom.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+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';
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
+import Block from "./Block";
+import InputNumber from "./InputNumber";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldMaxZoomInternalProps = {
   value?: number
@@ -14,7 +14,7 @@ type FieldMaxZoomInternalProps = {
 const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
   const t = props.t;
   return (
-    <Block label={t('Max Zoom')} fieldSpec={latest.layer.maxzoom}
+    <Block label={t("Max Zoom")} fieldSpec={latest.layer.maxzoom}
       error={props.error}
       data-wd-key="max-zoom"
     >
diff --git a/src/components/FieldMinZoom.tsx b/src/components/FieldMinZoom.tsx
index d269b25f..010570e6 100644
--- a/src/components/FieldMinZoom.tsx
+++ b/src/components/FieldMinZoom.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+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';
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
+import Block from "./Block";
+import InputNumber from "./InputNumber";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldMinZoomInternalProps = {
   value?: number
@@ -14,7 +14,7 @@ type FieldMinZoomInternalProps = {
 const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
   const t = props.t;
   return (
-    <Block label={t('Min Zoom')} fieldSpec={latest.layer.minzoom}
+    <Block label={t("Min Zoom")} fieldSpec={latest.layer.minzoom}
       error={props.error}
       data-wd-key="min-zoom"
     >
diff --git a/src/components/FieldMultiInput.tsx b/src/components/FieldMultiInput.tsx
index 9b0366ae..8625fb41 100644
--- a/src/components/FieldMultiInput.tsx
+++ b/src/components/FieldMultiInput.tsx
@@ -1,5 +1,5 @@
-import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
-import Fieldset from './Fieldset'
+import InputMultiInput, {type InputMultiInputProps} from "./InputMultiInput";
+import Fieldset from "./Fieldset";
 
 
 type FieldMultiInputProps = InputMultiInputProps & {
diff --git a/src/components/FieldNumber.tsx b/src/components/FieldNumber.tsx
index 3198e81e..73af887c 100644
--- a/src/components/FieldNumber.tsx
+++ b/src/components/FieldNumber.tsx
@@ -1,5 +1,5 @@
-import InputNumber, {InputNumberProps} from './InputNumber'
-import Block from './Block'
+import InputNumber, {type InputNumberProps} from "./InputNumber";
+import Block from "./Block";
 
 
 type FieldNumberProps = InputNumberProps & {
diff --git a/src/components/FieldSelect.tsx b/src/components/FieldSelect.tsx
index b911fe1d..8c17b47b 100644
--- a/src/components/FieldSelect.tsx
+++ b/src/components/FieldSelect.tsx
@@ -1,5 +1,5 @@
-import Block from './Block'
-import InputSelect, {InputSelectProps} from './InputSelect'
+import Block from "./Block";
+import InputSelect, {type InputSelectProps} from "./InputSelect";
 
 
 type FieldSelectProps = InputSelectProps & {
diff --git a/src/components/FieldSource.tsx b/src/components/FieldSource.tsx
index 3303e1f4..b288a4d4 100644
--- a/src/components/FieldSource.tsx
+++ b/src/components/FieldSource.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+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';
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
+import Block from "./Block";
+import InputAutocomplete from "./InputAutocomplete";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldSourceInternalProps = {
   value?: string
@@ -23,7 +23,7 @@ const FieldSourceInternal: React.FC<FieldSourceInternalProps> = ({
 }) => {
   return (
     <Block
-      label={t('Source')}
+      label={t("Source")}
       fieldSpec={latest.layer.source}
       error={error}
       data-wd-key={wdKey}
diff --git a/src/components/FieldSourceLayer.tsx b/src/components/FieldSourceLayer.tsx
index e13057ec..16e597bd 100644
--- a/src/components/FieldSourceLayer.tsx
+++ b/src/components/FieldSourceLayer.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+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';
+import {latest} from "@maplibre/maplibre-gl-style-spec";
+import Block from "./Block";
+import InputAutocomplete from "./InputAutocomplete";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldSourceLayerInternalProps = {
   value?: string
@@ -21,8 +21,8 @@ const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = ({
 }) => {
   return (
     <Block
-      label={t('Source Layer')}
-      fieldSpec={latest.layer['source-layer']}
+      label={t("Source Layer")}
+      fieldSpec={latest.layer["source-layer"]}
       data-wd-key="layer-source-layer"
       error={error}
     >
diff --git a/src/components/FieldSpec.tsx b/src/components/FieldSpec.tsx
index 6f079c2e..241984b3 100644
--- a/src/components/FieldSpec.tsx
+++ b/src/components/FieldSpec.tsx
@@ -1,36 +1,36 @@
-import Block from './Block'
-import InputSpec, { FieldSpecType, InputSpecProps } from './InputSpec'
-import Fieldset from './Fieldset'
+import Block from "./Block";
+import InputSpec, { type FieldSpecType, type InputSpecProps } from "./InputSpec";
+import Fieldset from "./Fieldset";
 
 function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[] }): typeof Fieldset | typeof Block {
   switch(fieldSpec.type) {
-  case 'color':
-    return Block;
-  case 'enum':
-    return (Object.keys(fieldSpec.values!).length <= 3 ? Fieldset : Block)
-  case 'boolean':
-    return Block;
-  case 'array':
-    return Fieldset;
-  case 'resolvedImage':
-    return Block;
-  case 'number':
-    return Block;
-  case 'string':
-    return Block;
-  case 'formatted':
-    return Block;
-  case 'padding':
-    return Block;
-  case 'numberArray':
-    return Fieldset;
-  case 'colorArray':
-    return Fieldset;
-  case 'variableAnchorOffsetCollection':
-    return Fieldset;
-  default:
-    console.warn("No such type for: " + fieldSpec.type);
-    return Block;
+    case "color":
+      return Block;
+    case "enum":
+      return (Object.keys(fieldSpec.values!).length <= 3 ? Fieldset : Block);
+    case "boolean":
+      return Block;
+    case "array":
+      return Fieldset;
+    case "resolvedImage":
+      return Block;
+    case "number":
+      return Block;
+    case "string":
+      return Block;
+    case "formatted":
+      return Block;
+    case "padding":
+      return Block;
+    case "numberArray":
+      return Fieldset;
+    case "colorArray":
+      return Fieldset;
+    case "variableAnchorOffsetCollection":
+      return Fieldset;
+    default:
+      console.warn("No such type for: " + fieldSpec.type);
+      return Block;
   }
 }
 
diff --git a/src/components/FieldString.tsx b/src/components/FieldString.tsx
index 00577ec9..6f8fdb89 100644
--- a/src/components/FieldString.tsx
+++ b/src/components/FieldString.tsx
@@ -1,5 +1,5 @@
-import Block from './Block'
-import InputString, {InputStringProps} from './InputString'
+import Block from "./Block";
+import InputString, {type InputStringProps} from "./InputString";
 
 type FieldStringProps = InputStringProps & {
   name?: string
diff --git a/src/components/FieldType.tsx b/src/components/FieldType.tsx
index 4f939c4f..87e14b27 100644
--- a/src/components/FieldType.tsx
+++ b/src/components/FieldType.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import {v8} from '@maplibre/maplibre-gl-style-spec'
-import Block from './Block'
-import InputSelect from './InputSelect'
-import InputString from './InputString'
-import { WithTranslation, withTranslation } from 'react-i18next';
-import { startCase } from 'lodash'
+import React from "react";
+import {v8} from "@maplibre/maplibre-gl-style-spec";
+import Block from "./Block";
+import InputSelect from "./InputSelect";
+import InputString from "./InputString";
+import { type WithTranslation, withTranslation } from "react-i18next";
+import { startCase } from "lodash";
 
 type FieldTypeInternalProps = {
   value: string
@@ -22,9 +22,9 @@ const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
   error,
   disabled = false
 }) => {
-  const layerstypes: [string, string][] = Object.keys(v8.layer.type.values || {}).map(v => [v, startCase(v.replace(/-/g, ' '))]);
+  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}
+    <Block label={t("Type")} fieldSpec={v8.layer.type}
       data-wd-key={wdKey}
       error={error}
     >
@@ -36,7 +36,7 @@ const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
           options={layerstypes}
           onChange={onChange}
           value={value}
-          data-wd-key={wdKey + '.select'}
+          data-wd-key={wdKey + ".select"}
         />
       )}
     </Block>
diff --git a/src/components/FieldUrl.tsx b/src/components/FieldUrl.tsx
index 702cfd30..6466022b 100644
--- a/src/components/FieldUrl.tsx
+++ b/src/components/FieldUrl.tsx
@@ -1,5 +1,5 @@
-import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
-import Block from './Block'
+import InputUrl, {type FieldUrlProps as InputUrlProps} from "./InputUrl";
+import Block from "./Block";
 
 
 type FieldUrlProps = InputUrlProps & {
diff --git a/src/components/Fieldset.tsx b/src/components/Fieldset.tsx
index 0c69cdae..82b318b6 100644
--- a/src/components/Fieldset.tsx
+++ b/src/components/Fieldset.tsx
@@ -1,7 +1,7 @@
-import React, { PropsWithChildren, ReactElement } from 'react'
-import FieldDocLabel from './FieldDocLabel'
-import Doc from './Doc'
-import generateUniqueId from '../libs/document-uid';
+import React, { type PropsWithChildren, type ReactElement } from "react";
+import FieldDocLabel from "./FieldDocLabel";
+import Doc from "./Doc";
+import generateUniqueId from "../libs/document-uid";
 
 type FieldsetProps = PropsWithChildren & {
   label?: string,
@@ -12,7 +12,7 @@ type FieldsetProps = PropsWithChildren & {
 
 const Fieldset: React.FC<FieldsetProps> = (props) => {
   const [showDoc, setShowDoc] = React.useState(false);
-  const labelId = React.useRef(generateUniqueId('fieldset_label_'));
+  const labelId = React.useRef(generateUniqueId("fieldset_label_"));
 
   const onToggleDoc = (val: boolean) => {
     setShowDoc(val);
@@ -37,7 +37,7 @@ const Fieldset: React.FC<FieldsetProps> = (props) => {
       <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' }}>
+        <div className="maputnik-doc-inline" style={{ display: showDoc ? "" : "none" }}>
           <Doc fieldSpec={props.fieldSpec} />
         </div>
       )}
diff --git a/src/components/FilterEditor.tsx b/src/components/FilterEditor.tsx
index 801ef21d..df1ca85b 100644
--- a/src/components/FilterEditor.tsx
+++ b/src/components/FilterEditor.tsx
@@ -1,24 +1,24 @@
-import React from 'react'
-import {mdiTableRowPlusAfter} from '@mdi/js';
-import {isEqual} from 'lodash';
-import {ExpressionSpecification, LegacyFilterSpecification} from 'maplibre-gl'
-import {latest, migrate, convertFilter} from '@maplibre/maplibre-gl-style-spec'
-import {mdiFunctionVariant} from '@mdi/js';
+import React from "react";
+import {mdiTableRowPlusAfter} from "@mdi/js";
+import {isEqual} from "lodash";
+import {type ExpressionSpecification, type LegacyFilterSpecification} from "maplibre-gl";
+import {latest, migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
+import {mdiFunctionVariant} from "@mdi/js";
 
-import {combiningFilterOps} from '../libs/filterops'
-import InputSelect from './InputSelect'
-import Block from './Block'
-import SingleFilterEditor from './SingleFilterEditor'
-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';
+import {combiningFilterOps} from "../libs/filterops";
+import InputSelect from "./InputSelect";
+import Block from "./Block";
+import SingleFilterEditor from "./SingleFilterEditor";
+import FilterEditorBlock from "./FilterEditorBlock";
+import InputButton from "./InputButton";
+import Doc from "./Doc";
+import ExpressionProperty from "./_ExpressionProperty";
+import { type WithTranslation, withTranslation } from "react-i18next";
+import type { StyleSpecificationWithId } from "../libs/definitions";
 
 
 function combiningFilter(props: FilterEditorInternalProps): LegacyFilterSpecification | ExpressionSpecification {
-  const filter = props.filter || ['all'];
+  const filter = props.filter || ["all"];
 
   if (!Array.isArray(filter)) {
     return filter;
@@ -28,7 +28,7 @@ function combiningFilter(props: FilterEditorInternalProps): LegacyFilterSpecific
   let filters = filter.slice(1);
 
   if(combiningFilterOps.indexOf(combiningOp) < 0) {
-    combiningOp = 'all';
+    combiningOp = "all";
     filters = [filter.slice(0)];
   }
 
@@ -49,7 +49,7 @@ function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpe
     "sources": {
       "tmp": {
         "type": "geojson",
-        "data": ''
+        "data": ""
       }
     },
     "sprite": "",
@@ -81,14 +81,14 @@ function checkIfSimpleFilter (filter: LegacyFilterSpecification | ExpressionSpec
 }
 
 function hasCombiningFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
-  return combiningFilterOps.indexOf(filter[0]) >= 0
+  return combiningFilterOps.indexOf(filter[0]) >= 0;
 }
 
 function hasNestedCombiningFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
   if(hasCombiningFilter(filter)) {
-    return filter.slice(1).map(f => hasCombiningFilter(f as any)).filter(f => f == true).length > 0
+    return filter.slice(1).map(f => hasCombiningFilter(f as any)).filter(f => f == true).length > 0;
   }
-  return false
+  return false;
 }
 
 type FilterEditorInternalProps = {
@@ -108,7 +108,7 @@ type FilterEditorState = {
 class FilterEditorInternal extends React.Component<FilterEditorInternalProps, FilterEditorState> {
   static defaultProps = {
     filter: ["all"],
-  }
+  };
 
   constructor (props: FilterEditorInternalProps) {
     super(props);
@@ -120,42 +120,42 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
 
   // Convert filter to combining filter
   onFilterPartChanged(filterIdx: number, newPart: any[]) {
-    const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
-    newFilter[filterIdx] = newPart
-    this.props.onChange(newFilter)
+    const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification;
+    newFilter[filterIdx] = newPart;
+    this.props.onChange(newFilter);
   }
 
   deleteFilterItem(filterIdx: number) {
-    const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
-    newFilter.splice(filterIdx + 1, 1)
-    this.props.onChange(newFilter)
+    const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification;
+    newFilter.splice(filterIdx + 1, 1);
+    this.props.onChange(newFilter);
   }
 
   addFilterItem = () => {
-    const newFilterItem = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
-    (newFilterItem as any[]).push(['==', 'name', ''])
-    this.props.onChange(newFilterItem)
-  }
+    const newFilterItem = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification;
+    (newFilterItem as any[]).push(["==", "name", ""]);
+    this.props.onChange(newFilterItem);
+  };
 
   onToggleDoc = (val: boolean) => {
     this.setState({
       showDoc: val
     });
-  }
+  };
 
   makeFilter = () => {
     this.setState({
       displaySimpleFilter: true,
-    })
-  }
+    });
+  };
 
   makeExpression = () => {
     const filter = combiningFilter(this.props);
     this.props.onChange(migrateFilter(filter));
     this.setState({
       displaySimpleFilter: false,
-    })
-  }
+    });
+  };
 
   static getDerivedStateFromProps(props: Readonly<FilterEditorInternalProps>, state: FilterEditorState) {
     const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
@@ -170,7 +170,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
     else if (displaySimpleFilter && state.displaySimpleFilter === false) {
       return {
         valueIsSimpleFilter: true,
-      }
+      };
     }
     else {
       return {
@@ -203,7 +203,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
           </svg>
           {t("Upgrade to expression")}
         </InputButton>
-      </div>
+      </div>;
     }
     else if (displaySimpleFilter) {
       const filter = combiningFilter(this.props);
@@ -241,7 +241,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
             }
           </div>
         );
-      })
+      });
 
 
       return (
@@ -280,7 +280,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
           <div
             key="doc"
             className="maputnik-doc-inline"
-            style={{display: this.state.showDoc ? '' : 'none'}}
+            style={{display: this.state.showDoc ? "" : "none"}}
           >
             <Doc fieldSpec={fieldSpec} />
           </div>
@@ -306,7 +306,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
           {this.state.valueIsSimpleFilter &&
             <div className="maputnik-expr-infobox">
               {t("You've entered an old style filter.")}
-              {' '}
+              {" "}
               <button
                 onClick={this.makeFilter}
                 className="maputnik-expr-infobox__button"
diff --git a/src/components/FilterEditorBlock.tsx b/src/components/FilterEditorBlock.tsx
index d4190e8a..74efe80c 100644
--- a/src/components/FilterEditorBlock.tsx
+++ b/src/components/FilterEditorBlock.tsx
@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react'
-import InputButton from './InputButton'
-import {MdDelete} from 'react-icons/md'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React, { type PropsWithChildren } from "react";
+import InputButton from "./InputButton";
+import {MdDelete} from "react-icons/md";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FilterEditorBlockInternalProps = PropsWithChildren & {
   onDelete(...args: unknown[]): unknown
@@ -23,7 +23,7 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
           <MdDelete />
         </InputButton>
       </div>
-    </div>
+    </div>;
   }
 }
 
diff --git a/src/components/IconLayer.tsx b/src/components/IconLayer.tsx
index 850e6691..d01c6059 100644
--- a/src/components/IconLayer.tsx
+++ b/src/components/IconLayer.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react";
 
-import type {CSSProperties} from 'react'
-import { BsDiamond, BsDiamondFill, BsFonts, BsSun } from 'react-icons/bs'
-import { MdBubbleChart, MdOutlineCircle, MdPriorityHigh } from 'react-icons/md'
-import { IoAnalyticsOutline } from 'react-icons/io5'
+import type {CSSProperties} from "react";
+import { BsDiamond, BsDiamondFill, BsFonts, BsSun } from "react-icons/bs";
+import { MdBubbleChart, MdOutlineCircle, MdPriorityHigh } from "react-icons/md";
+import { IoAnalyticsOutline } from "react-icons/io5";
 
 type IconLayerProps = {
   type: string
@@ -12,20 +12,20 @@ type IconLayerProps = {
 };
 
 const IconLayer: React.FC<IconLayerProps> = (props) => {
-  const iconProps = { style: props.style }
+  const iconProps = { style: props.style };
   switch(props.type) {
-  case 'fill-extrusion': return <BsDiamondFill {...iconProps} />
-  case 'raster': return <BsDiamond {...iconProps} />
-  case 'hillshade': return <BsSun {...iconProps} />
-  case 'color-relief': return <MdBubbleChart {...iconProps} />
-  case 'heatmap': return <BsDiamond {...iconProps} />
-  case 'fill': return <BsDiamond {...iconProps} />
-  case 'background': return <BsDiamondFill {...iconProps} />
-  case 'line': return <IoAnalyticsOutline {...iconProps} />
-  case 'symbol': return <BsFonts {...iconProps} />
-  case 'circle': return <MdOutlineCircle {...iconProps} />
-  default: return <MdPriorityHigh {...iconProps} />
+    case "fill-extrusion": return <BsDiamondFill {...iconProps} />;
+    case "raster": return <BsDiamond {...iconProps} />;
+    case "hillshade": return <BsSun {...iconProps} />;
+    case "color-relief": return <MdBubbleChart {...iconProps} />;
+    case "heatmap": return <BsDiamond {...iconProps} />;
+    case "fill": return <BsDiamond {...iconProps} />;
+    case "background": return <BsDiamondFill {...iconProps} />;
+    case "line": return <IoAnalyticsOutline {...iconProps} />;
+    case "symbol": return <BsFonts {...iconProps} />;
+    case "circle": return <MdOutlineCircle {...iconProps} />;
+    default: return <MdPriorityHigh {...iconProps} />;
   }
-}
+};
 
 export default IconLayer;
diff --git a/src/components/InputArray.tsx b/src/components/InputArray.tsx
index 4db2310b..41e96381 100644
--- a/src/components/InputArray.tsx
+++ b/src/components/InputArray.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import InputString from './InputString'
-import InputNumber from './InputNumber'
+import React from "react";
+import InputString from "./InputString";
+import InputNumber from "./InputNumber";
 
 export type InputArrayProps = {
   value: (string | number | undefined)[]
@@ -8,20 +8,20 @@ export type InputArrayProps = {
   length?: number
   default?: (string | number | undefined)[]
   onChange?(value: (string | number | undefined)[] | undefined): unknown
-  'aria-label'?: string
+  "aria-label"?: string
   label?: string
 };
 
 type InputArrayState = {
   value: (string | number | undefined)[]
   initialPropsValue: unknown[]
-}
+};
 
 export default class InputArray extends React.Component<InputArrayProps, InputArrayState> {
   static defaultProps = {
     value: [],
     default: [],
-  }
+  };
 
   constructor (props: InputArrayProps) {
     super(props);
@@ -44,7 +44,7 @@ export default class InputArray extends React.Component<InputArrayProps, InputAr
         value[i] = state.value[i];
         initialPropsValue[i] = state.value[i];
       }
-    })
+    });
 
     return {
       value,
@@ -54,7 +54,7 @@ export default class InputArray extends React.Component<InputArrayProps, InputAr
 
   isComplete(value: unknown[]) {
     return Array(this.props.length).fill(null).every((_, i) => {
-      const val = value[i]
+      const val = value[i];
       return !(val === undefined || val === "");
     });
   }
@@ -82,20 +82,20 @@ export default class InputArray extends React.Component<InputArrayProps, InputAr
     const containsValues = (
       value.length > 0 &&
       !value.every(val => {
-        return (val === "" || val === undefined)
+        return (val === "" || val === undefined);
       })
     );
 
     const inputs = Array(this.props.length).fill(null).map((_, i) => {
-      if(this.props.type === 'number') {
+      if(this.props.type === "number") {
         return <InputNumber
           key={i}
           default={containsValues || !this.props.default ? undefined : this.props.default[i] as number}
           value={value[i] as number}
           required={containsValues ? true : false}
           onChange={(v) => this.changeValue(i, v)}
-          aria-label={this.props['aria-label'] || this.props.label}
-        />
+          aria-label={this.props["aria-label"] || this.props.label}
+        />;
       } else {
         return <InputString
           key={i}
@@ -103,15 +103,15 @@ export default class InputArray extends React.Component<InputArrayProps, InputAr
           value={value[i] as string}
           required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label'] || this.props.label}
-        />
+          aria-label={this.props["aria-label"] || this.props.label}
+        />;
       }
-    })
+    });
 
     return (
       <div className="maputnik-array">
         {inputs}
       </div>
-    )
+    );
   }
 }
diff --git a/src/components/InputAutocomplete.cy.tsx b/src/components/InputAutocomplete.cy.tsx
index cf3d81cd..1dc0c5c6 100644
--- a/src/components/InputAutocomplete.cy.tsx
+++ b/src/components/InputAutocomplete.cy.tsx
@@ -1,18 +1,18 @@
-import InputAutocomplete from './InputAutocomplete'
-import { mount } from 'cypress/react'
+import InputAutocomplete from "./InputAutocomplete";
+import { mount } from "cypress/react";
 
-const fruits = ['apple', 'banana', 'cherry'];
+const fruits = ["apple", "banana", "cherry"];
 
-describe('<InputAutocomplete />', () => {
-  it('filters options when typing', () => {
+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');
+    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");
   });
 });
diff --git a/src/components/InputAutocomplete.tsx b/src/components/InputAutocomplete.tsx
index 59558740..7591a776 100644
--- a/src/components/InputAutocomplete.tsx
+++ b/src/components/InputAutocomplete.tsx
@@ -1,37 +1,37 @@
-import React from 'react'
-import classnames from 'classnames'
-import {useCombobox} from 'downshift'
+import React from "react";
+import classnames from "classnames";
+import {useCombobox} from "downshift";
 
-const MAX_HEIGHT = 140
+const MAX_HEIGHT = 140;
 
 export type InputAutocompleteProps = {
   value?: string
   options?: any[]
   onChange?(value: string | undefined): unknown
-  'aria-label'?: string
+  "aria-label"?: string
 };
 
 export default function InputAutocomplete({
   value,
   options = [],
   onChange = () => {},
-  'aria-label': ariaLabel,
+  "aria-label": ariaLabel,
 }: InputAutocompleteProps) {
-  const [input, setInput] = React.useState(value || '')
-  const menuRef = React.useRef<HTMLDivElement>(null)
-  const [maxHeight, setMaxHeight] = React.useState(MAX_HEIGHT)
+  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 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))
+      const space = window.innerHeight - menuRef.current.getBoundingClientRect().top;
+      setMaxHeight(Math.min(space, MAX_HEIGHT));
     }
-  }, [])
+  }, []);
 
   const {
     isOpen,
@@ -43,48 +43,48 @@ export default function InputAutocomplete({
   } = useCombobox({
     items: filteredItems,
     inputValue: input,
-    itemToString: (item) => (item ? item[0] : ''),
+    itemToString: (item) => (item ? item[0] : ""),
     stateReducer: (_state, action) => {
       if (action.type === useCombobox.stateChangeTypes.InputClick) {
-        return {...action.changes, isOpen: true}
+        return {...action.changes, isOpen: true};
       }
-      return action.changes
+      return action.changes;
     },
     onSelectedItemChange: ({selectedItem}) => {
-      const v = selectedItem ? selectedItem[0] : ''
-      setInput(v)
-      onChange(selectedItem ? selectedItem[0] : undefined)
+      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()
+      if (typeof v === "string") {
+        setInput(v);
+        onChange(v === "" ? undefined : v);
+        openMenu();
       }
     },
-  })
+  });
 
   React.useEffect(() => {
     if (isOpen) {
-      calcMaxHeight()
+      calcMaxHeight();
     }
-  }, [isOpen, calcMaxHeight])
+  }, [isOpen, calcMaxHeight]);
 
   React.useEffect(() => {
-    window.addEventListener('resize', calcMaxHeight)
-    return () => window.removeEventListener('resize', calcMaxHeight)
-  }, [calcMaxHeight])
+    window.addEventListener("resize", calcMaxHeight);
+    return () => window.removeEventListener("resize", calcMaxHeight);
+  }, [calcMaxHeight]);
 
   React.useEffect(() => {
-    setInput(value || '')
-  }, [value])
+    setInput(value || "");
+  }, [value]);
 
   return (
     <div className="maputnik-autocomplete">
       <input
         {...getInputProps({
-          'aria-label': ariaLabel,
-          className: 'maputnik-string',
+          "aria-label": ariaLabel,
+          className: "maputnik-string",
           spellCheck: false,
           onFocus: () => openMenu(),
         })}
@@ -92,7 +92,7 @@ export default function InputAutocomplete({
       <div
         {...getMenuProps({}, {suppressRefError: true})}
         ref={menuRef}
-        style={{position: 'fixed', overflow: 'auto', maxHeight, zIndex: 998}}
+        style={{position: "fixed", overflow: "auto", maxHeight, zIndex: 998}}
         className="maputnik-autocomplete-menu"
       >
         {isOpen &&
@@ -102,8 +102,8 @@ export default function InputAutocomplete({
               {...getItemProps({
                 item,
                 index,
-                className: classnames('maputnik-autocomplete-menu-item', {
-                  'maputnik-autocomplete-menu-item-selected': highlightedIndex === index,
+                className: classnames("maputnik-autocomplete-menu-item", {
+                  "maputnik-autocomplete-menu-item-selected": highlightedIndex === index,
                 }),
               })}
             >
@@ -112,5 +112,5 @@ export default function InputAutocomplete({
           ))}
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/InputButton.tsx b/src/components/InputButton.tsx
index 6c66f651..e87e6afa 100644
--- a/src/components/InputButton.tsx
+++ b/src/components/InputButton.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import classnames from 'classnames'
+import React from "react";
+import classnames from "classnames";
 
 type InputButtonProps = {
   "data-wd-key"?: string
@@ -28,6 +28,6 @@ export default class InputButton extends React.Component<InputButtonProps> {
       style={this.props.style}
     >
       {this.props.children}
-    </button>
+    </button>;
   }
 }
diff --git a/src/components/InputCheckbox.tsx b/src/components/InputCheckbox.tsx
index 9483ed87..63e20415 100644
--- a/src/components/InputCheckbox.tsx
+++ b/src/components/InputCheckbox.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 export type InputCheckboxProps = {
   value?: boolean
@@ -9,11 +9,11 @@ export type InputCheckboxProps = {
 export default class InputCheckbox extends React.Component<InputCheckboxProps> {
   static defaultProps = {
     value: false,
-  }
+  };
 
   onChange = () => {
     this.props.onChange(!this.props.value);
-  }
+  };
 
   render() {
     return <div className="maputnik-checkbox-wrapper">
@@ -27,11 +27,11 @@ export default class InputCheckbox extends React.Component<InputCheckboxProps> {
       />
       <div className="maputnik-checkbox-box">
         <svg style={{
-          display: this.props.value ? 'inline' : 'none'
+          display: this.props.value ? "inline" : "none"
         }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>
-    </div>
+    </div>;
   }
 }
diff --git a/src/components/InputColor.tsx b/src/components/InputColor.tsx
index c3e3ab27..75f87d04 100644
--- a/src/components/InputColor.tsx
+++ b/src/components/InputColor.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import Color from 'color'
-import ChromePicker from 'react-color/lib/components/chrome/Chrome'
-import {ColorResult} from 'react-color';
-import lodash from 'lodash';
+import React from "react";
+import Color from "color";
+import ChromePicker from "react-color/lib/components/chrome/Chrome";
+import {type ColorResult} from "react-color";
+import lodash from "lodash";
 
 function formatColor(color: ColorResult): string {
-  const rgb = color.rgb
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
+  const rgb = color.rgb;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
 }
 
 export type InputColorProps = {
@@ -16,14 +16,14 @@ export type InputColorProps = {
   doc?: string
   style?: object
   default?: string
-  'aria-label'?: string
+  "aria-label"?: string
 };
 
 /*** Number fields with support for min, max and units and documentation*/
 export default class InputColor extends React.Component<InputColorProps> {
   state = {
     pickerOpened: false
-  }
+  };
   colorInput: HTMLInputElement | null = null;
 
   constructor (props: InputColorProps) {
@@ -39,29 +39,29 @@ export default class InputColor extends React.Component<InputColorProps> {
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
   calcPickerOffset = () => {
-    const elem = this.colorInput
+    const elem = this.colorInput;
     if(elem) {
-      const pos = elem.getBoundingClientRect()
+      const pos = elem.getBoundingClientRect();
       return {
         top: pos.top,
         left: pos.left + 196,
-      }
+      };
     } else {
       return {
         top: 160,
         left: 555,
-      }
+      };
     }
-  }
+  };
 
   togglePicker = () => {
-    this.setState({ pickerOpened: !this.state.pickerOpened })
-  }
+    this.setState({ pickerOpened: !this.state.pickerOpened });
+  };
 
   get color() {
     // Catch invalid color.
     try {
-      return Color(this.props.value).rgb()
+      return Color(this.props.value).rgb();
     }
     catch(err) {
       console.warn("Error parsing color: ", err);
@@ -74,7 +74,7 @@ export default class InputColor extends React.Component<InputColorProps> {
   }
 
   render() {
-    const offset = this.calcPickerOffset()
+    const offset = this.calcPickerOffset();
     const currentColor = this.color.object();
     const currentChromeColor = {
       r: currentColor.r,
@@ -82,12 +82,12 @@ export default class InputColor extends React.Component<InputColorProps> {
       b: currentColor.b,
       // Rename alpha -> a for ChromePicker
       a: currentColor.alpha!
-    }
+    };
 
     const picker = <div
       className="maputnik-color-picker-offset"
       style={{
-        position: 'fixed',
+        position: "fixed",
         zIndex: 1,
         left: offset.left,
         top: offset.top,
@@ -101,14 +101,14 @@ export default class InputColor extends React.Component<InputColorProps> {
         onClick={this.togglePicker}
         style={{
           zIndex: -1,
-          position: 'fixed',
-          top: '0px',
-          right: '0px',
-          bottom: '0px',
-          left: '0px',
+          position: "fixed",
+          top: "0px",
+          right: "0px",
+          bottom: "0px",
+          left: "0px",
         }}
       />
-    </div>
+    </div>;
 
     const swatchStyle = {
       backgroundColor: this.props.value
@@ -118,11 +118,11 @@ export default class InputColor extends React.Component<InputColorProps> {
       {this.state.pickerOpened && picker}
       <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
-        aria-label={this.props['aria-label']}
+        aria-label={this.props["aria-label"]}
         spellCheck="false"
         autoComplete="off"
         className="maputnik-color"
-        ref={(input) => {this.colorInput = input}}
+        ref={(input) => {this.colorInput = input;}}
         onClick={this.togglePicker}
         style={this.props.style}
         name={this.props.name}
@@ -130,6 +130,6 @@ export default class InputColor extends React.Component<InputColorProps> {
         value={this.props.value ? this.props.value : ""}
         onChange={(e) => this.onChange(e.target.value)}
       />
-    </div>
+    </div>;
   }
 }
diff --git a/src/components/InputDynamicArray.tsx b/src/components/InputDynamicArray.tsx
index 98c384aa..88f8add5 100644
--- a/src/components/InputDynamicArray.tsx
+++ b/src/components/InputDynamicArray.tsx
@@ -1,67 +1,67 @@
-import React from 'react'
-import capitalize from 'lodash.capitalize'
-import {MdDelete} from 'react-icons/md'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import capitalize from "lodash.capitalize";
+import {MdDelete} from "react-icons/md";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import InputString from './InputString'
-import InputNumber from './InputNumber'
-import InputButton from './InputButton'
-import FieldDocLabel from './FieldDocLabel'
-import InputEnum from './InputEnum'
-import InputUrl from './InputUrl'
-import InputColor from './InputColor';
+import InputString from "./InputString";
+import InputNumber from "./InputNumber";
+import InputButton from "./InputButton";
+import FieldDocLabel from "./FieldDocLabel";
+import InputEnum from "./InputEnum";
+import InputUrl from "./InputUrl";
+import InputColor from "./InputColor";
 
 
 export type InputDynamicArrayProps = {
   value?: (string | number | undefined)[]
-  type?: 'url' | 'number' | 'enum' | 'string' | 'color'
+  type?: "url" | "number" | "enum" | "string" | "color"
   default?: (string | number | undefined)[]
   onChange?(values: (string | number | undefined)[] | undefined): unknown
   style?: object
   fieldSpec?: {
     values?: any
   }
-  'aria-label'?: string
+  "aria-label"?: string
   label: string
-}
+};
 
 type InputDynamicArrayInternalProps = InputDynamicArrayProps & WithTranslation;
 
 class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInternalProps> {
   changeValue(idx: number, newValue: string | number | undefined) {
-    const values = this.values.slice(0)
-    values[idx] = newValue
-    if (this.props.onChange) this.props.onChange(values)
+    const values = this.values.slice(0);
+    values[idx] = newValue;
+    if (this.props.onChange) this.props.onChange(values);
   }
 
   get values() {
-    return this.props.value || this.props.default || []
+    return this.props.value || this.props.default || [];
   }
 
   addValue = () => {
-    const values = this.values.slice(0)
-    if (this.props.type === 'number') {
-      values.push(0)
+    const values = this.values.slice(0);
+    if (this.props.type === "number") {
+      values.push(0);
     }
-    else if (this.props.type === 'url') {
+    else if (this.props.type === "url") {
       values.push("");
     }
-    else if (this.props.type === 'enum') {
+    else if (this.props.type === "enum") {
       const {fieldSpec} = this.props;
       const defaultValue = Object.keys(fieldSpec!.values)[0];
       values.push(defaultValue);
-    } else if (this.props.type === 'color') {
+    } else if (this.props.type === "color") {
       values.push("#000000");
     } else {
-      values.push("")
+      values.push("");
     }
 
-    if (this.props.onChange) this.props.onChange(values)
-  }
+    if (this.props.onChange) this.props.onChange(values);
+  };
 
   deleteValue(valueIdx: number) {
-    const values = this.values.slice(0)
-    values.splice(valueIdx, 1)
+    const values = this.values.slice(0);
+    values.splice(valueIdx, 1);
 
     if (this.props.onChange) this.props.onChange(values.length > 0 ? values : undefined);
   }
@@ -75,42 +75,42 @@ class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInterna
         {...i18nProps}
       />;
       let input;
-      if(this.props.type === 'url') {
+      if(this.props.type === "url") {
         input = <InputUrl
           value={v as string}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label'] || this.props.label}
-        />
+          aria-label={this.props["aria-label"] || this.props.label}
+        />;
       }
-      else if (this.props.type === 'number') {
+      else if (this.props.type === "number") {
         input = <InputNumber
           value={v as number}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label'] || this.props.label}
-        />
+          aria-label={this.props["aria-label"] || this.props.label}
+        />;
       }
-      else if (this.props.type === 'enum') {
+      else if (this.props.type === "enum") {
         const options = Object.keys(this.props.fieldSpec?.values).map(v => [v, capitalize(v)]);
         input = <InputEnum
           options={options}
           value={v as string}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label'] || this.props.label}
-        />
+          aria-label={this.props["aria-label"] || this.props.label}
+        />;
       }
-      else if (this.props.type === 'color') {
+      else if (this.props.type === "color") {
         input = <InputColor
           value={v as string}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label'] || this.props.label}
-        />
+          aria-label={this.props["aria-label"] || this.props.label}
+        />;
       }
       else {
         input = <InputString
           value={v as string}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label'] || this.props.label}
-        />
+          aria-label={this.props["aria-label"] || this.props.label}
+        />;
       }
 
       return <div
@@ -124,8 +124,8 @@ class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInterna
         <div className="maputnik-array-block-content">
           {input}
         </div>
-      </div>
-    })
+      </div>;
+    });
 
     return (
       <div className="maputnik-array">
@@ -159,6 +159,6 @@ class DeleteValueInputButton extends React.Component<DeleteValueInputButtonProps
       <FieldDocLabel
         label={<MdDelete />}
       />
-    </InputButton>
+    </InputButton>;
   }
 }
diff --git a/src/components/InputEnum.tsx b/src/components/InputEnum.tsx
index fbb3a329..d58848f6 100644
--- a/src/components/InputEnum.tsx
+++ b/src/components/InputEnum.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
-import InputSelect from './InputSelect'
-import InputMultiInput from './InputMultiInput'
+import React from "react";
+import InputSelect from "./InputSelect";
+import InputMultiInput from "./InputMultiInput";
 
 
 function optionsLabelLength(options: any[]) {
   let sum = 0;
   options.forEach(([_, label]) => {
-    sum += label.length
-  })
-  return sum
+    sum += label.length;
+  });
+  return sum;
 }
 
 
@@ -20,7 +20,7 @@ export type InputEnumProps = {
   name?: string
   onChange(...args: unknown[]): unknown
   options: any[]
-  'aria-label'?: string
+  "aria-label"?: string
   label?: string
 };
 
@@ -35,15 +35,15 @@ export default class InputEnum extends React.Component<InputEnumProps> {
         options={options}
         value={(value || this.props.default)!}
         onChange={onChange}
-        aria-label={this.props['aria-label'] || label}
-      />
+        aria-label={this.props["aria-label"] || label}
+      />;
     } else {
       return <InputSelect
         options={options}
         value={(value || this.props.default)!}
         onChange={onChange}
-        aria-label={this.props['aria-label'] || label}
-      />
+        aria-label={this.props["aria-label"] || label}
+      />;
     }
   }
 }
diff --git a/src/components/InputFont.tsx b/src/components/InputFont.tsx
index 4aef765b..2044f242 100644
--- a/src/components/InputFont.tsx
+++ b/src/components/InputFont.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import InputAutocomplete from './InputAutocomplete'
+import React from "react";
+import InputAutocomplete from "./InputAutocomplete";
 
 export type InputFontProps = {
   name: string
@@ -8,13 +8,13 @@ export type InputFontProps = {
   fonts?: unknown[]
   style?: object
   onChange(...args: unknown[]): unknown
-  'aria-label'?: string
+  "aria-label"?: string
 };
 
 export default class InputFont extends React.Component<InputFontProps> {
   static defaultProps = {
     fonts: []
-  }
+  };
 
   get values() {
     const out = this.props.value || this.props.default || [];
@@ -29,11 +29,11 @@ export default class InputFont extends React.Component<InputFontProps> {
   }
 
   changeFont(idx: number, newValue: string) {
-    const changedValues = this.values.slice(0)
-    changedValues[idx] = newValue
+    const changedValues = this.values.slice(0);
+    changedValues[idx] = newValue;
     const filteredValues = changedValues
       .filter(v => v !== undefined)
-      .filter(v => v !== "")
+      .filter(v => v !== "");
 
     this.props.onChange(filteredValues);
   }
@@ -44,13 +44,13 @@ export default class InputFont extends React.Component<InputFontProps> {
         key={i}
       >
         <InputAutocomplete
-          aria-label={this.props['aria-label'] || this.props.name}
+          aria-label={this.props["aria-label"] || this.props.name}
           value={value}
           options={this.props.fonts?.map(f => [f, f])}
           onChange={this.changeFont.bind(this, i)}
         />
-      </li>
-    })
+      </li>;
+    });
 
     return (
       <ul className="maputnik-font">
diff --git a/src/components/InputJson.tsx b/src/components/InputJson.tsx
index 7f58ebe3..75d9af56 100644
--- a/src/components/InputJson.tsx
+++ b/src/components/InputJson.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import classnames from 'classnames';
-import CodeMirror, { ModeSpec } from 'codemirror';
-import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import classnames from "classnames";
+import CodeMirror, { type ModeSpec } from "codemirror";
+import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/addon/lint/lint'
-import 'codemirror/addon/edit/matchbrackets'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/addon/lint/lint.css'
-import stringifyPretty from 'json-stringify-pretty-compact'
-import '../libs/codemirror-mgl';
-import type { LayerSpecification } from 'maplibre-gl';
+import "codemirror/mode/javascript/javascript";
+import "codemirror/addon/lint/lint";
+import "codemirror/addon/edit/matchbrackets";
+import "codemirror/lib/codemirror.css";
+import "codemirror/addon/lint/lint.css";
+import stringifyPretty from "json-stringify-pretty-compact";
+import "../libs/codemirror-mgl";
+import type { LayerSpecification } from "maplibre-gl";
 
 
 export type InputJsonProps = {
@@ -49,7 +49,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
     onBlur: () => {},
     onJSONInvalid: () => {},
     onJSONValid: () => {},
-  }
+  };
   _keyEvent: string;
   _doc: CodeMirror.Editor | undefined;
   _el: HTMLDivElement | null = null;
@@ -73,7 +73,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       },
       lineWrapping: this.props.lineWrapping,
       tabSize: 2,
-      theme: 'maputnik',
+      theme: "maputnik",
       viewportMargin: Infinity,
       lineNumbers: this.props.lineNumbers,
       lint: this.props.lint || {
@@ -84,14 +84,14 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       scrollbarStyle: "null",
     });
 
-    this._doc.on('change', this.onChange);
-    this._doc.on('focus', this.onFocus);
-    this._doc.on('blur', this.onBlur);
+    this._doc.on("change", this.onChange);
+    this._doc.on("focus", this.onFocus);
+    this._doc.on("blur", this.onBlur);
   }
 
   onPointerDown = () => {
     this._keyEvent = "pointer";
-  }
+  };
 
   onFocus = () => {
     if (this.props.onFocus) this.props.onFocus();
@@ -99,7 +99,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       isEditing: true,
       showMessage: (this._keyEvent === "keyboard"),
     });
-  }
+  };
 
   onBlur = () => {
     this._keyEvent = "keyboard";
@@ -108,12 +108,12 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       isEditing: false,
       showMessage: false,
     });
-  }
+  };
 
   componentWillUnMount () {
-    this._doc!.off('change', this.onChange);
-    this._doc!.off('focus', this.onFocus);
-    this._doc!.off('blur', this.onBlur);
+    this._doc!.off("change", this.onChange);
+    this._doc!.off("focus", this.onFocus);
+    this._doc!.off("blur", this.onBlur);
   }
 
   componentDidUpdate(prevProps: InputJsonProps) {
@@ -121,7 +121,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       this._cancelNextChange = true;
       this._doc!.setValue(
         this.props.getValue!(this.props.layer),
-      )
+      );
     }
   }
 
@@ -130,7 +130,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       this._cancelNextChange = false;
       this.setState({
         prevValue: this._doc!.getValue(),
-      })
+      });
       return;
     }
     const newCode = this._doc!.getValue();
@@ -141,14 +141,14 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
         parsedLayer = JSON.parse(newCode);
       } catch(_err) {
         err = _err;
-        console.warn(_err)
+        console.warn(_err);
       }
 
       if (err && this.props.onJSONInvalid) {
         this.props.onJSONInvalid();
       }
       else {
-        if (this.props.onChange) this.props.onChange(parsedLayer)
+        if (this.props.onChange) this.props.onChange(parsedLayer);
         if (this.props.onJSONValid) this.props.onJSONValid();
       }
     }
@@ -156,7 +156,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
     this.setState({
       prevValue: newCode,
     });
-  }
+  };
 
   render() {
     const t = this.props.t;
@@ -174,10 +174,10 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       </div>
       <div
         className={classnames("codemirror-container", this.props.className)}
-        ref={(el) => {this._el = el}}
+        ref={(el) => {this._el = el;}}
         style={style}
       />
-    </div>
+    </div>;
   }
 }
 
diff --git a/src/components/InputMultiInput.tsx b/src/components/InputMultiInput.tsx
index ad0c9253..4db5b307 100644
--- a/src/components/InputMultiInput.tsx
+++ b/src/components/InputMultiInput.tsx
@@ -1,22 +1,22 @@
-import React from 'react'
-import classnames from 'classnames'
+import React from "react";
+import classnames from "classnames";
 
 export type InputMultiInputProps = {
   name?: string
   value: string
   options: any[]
   onChange(...args: unknown[]): unknown
-  'aria-label'?: string
+  "aria-label"?: string
 };
 
 export default class InputMultiInput extends React.Component<InputMultiInputProps> {
   render() {
-    let options = this.props.options
+    let options = this.props.options;
     if(options.length > 0 && !Array.isArray(options[0])) {
-      options = options.map(v => [v, v])
+      options = options.map(v => [v, v]);
     }
 
-    const selectedValue = this.props.value || options[0][0]
+    const selectedValue = this.props.value || options[0][0];
     const radios = options.map(([val, label])=> {
       return <label
         key={val}
@@ -29,11 +29,11 @@ export default class InputMultiInput extends React.Component<InputMultiInputProp
           checked={val === selectedValue}
         />
         {label}
-      </label>
-    })
+      </label>;
+    });
 
-    return <fieldset className="maputnik-multibutton" aria-label={this.props['aria-label']}>
+    return <fieldset className="maputnik-multibutton" aria-label={this.props["aria-label"]}>
       {radios}
-    </fieldset>
+    </fieldset>;
   }
 }
diff --git a/src/components/InputNumber.tsx b/src/components/InputNumber.tsx
index 19067aa7..ba8f9361 100644
--- a/src/components/InputNumber.tsx
+++ b/src/components/InputNumber.tsx
@@ -1,5 +1,5 @@
-import React, { BaseSyntheticEvent } from 'react'
-import generateUniqueId from '../libs/document-uid';
+import React, { type BaseSyntheticEvent } from "react";
+import generateUniqueId from "../libs/document-uid";
 
 export type InputNumberProps = {
   value?: number
@@ -23,22 +23,22 @@ type InputNumberState = {
    * This is the value that is currently being edited. It can be an invalid value.
    */
   dirtyValue?: number | string | undefined
-}
+};
 
 export default class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
   static defaultProps = {
     rangeStep: 1
-  }
+  };
   _keyboardEvent: boolean = false;
 
   constructor(props: InputNumberProps) {
-    super(props)
+    super(props);
     this.state = {
       uuid: +generateUniqueId(),
       editing: false,
       value: props.value,
       dirtyValue: props.value,
-    }
+    };
   }
 
   static getDerivedStateFromProps(props: Readonly<InputNumberProps>, state: InputNumberState) {
@@ -57,7 +57,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
 
     const hasChanged = this.props.value !== value;
     if(this.isValid(value) && hasChanged) {
-      if (this.props.onChange) this.props.onChange(value)
+      if (this.props.onChange) this.props.onChange(value);
       this.setState({
         value: value,
       });
@@ -70,7 +70,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
 
     this.setState({
       dirtyValue: newValue === "" ? undefined : newValue,
-    })
+    });
   }
 
   isValid(v: number | string | undefined) {
@@ -80,18 +80,18 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
 
     const value = +v;
     if(isNaN(value)) {
-      return false
+      return false;
     }
 
     if(!isNaN(this.props.min!) && value < this.props.min!) {
-      return false
+      return false;
     }
 
     if(!isNaN(this.props.max!) && value > this.props.max!) {
-      return false
+      return false;
     }
 
-    return true
+    return true;
   }
 
   resetValue = () => {
@@ -104,14 +104,14 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
     // If set value is invalid fall back to the last valid value from props or at last resort the default value
     if (!this.isValid(this.state.value)) {
       if(this.isValid(this.props.value)) {
-        this.changeValue(this.props.value)
+        this.changeValue(this.props.value);
         this.setState({dirtyValue: this.props.value});
       } else {
         this.changeValue(undefined);
         this.setState({dirtyValue: undefined});
       }
     }
-  }
+  };
 
   onChangeRange = (e: BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
     let value = parseFloat(e.target.value);
@@ -132,7 +132,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
           value = this.state.value! - step;
         }
         else {
-          value = this.state.value! + step
+          value = this.state.value! + step;
         }
         dirtyValue = value;
       }
@@ -153,7 +153,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
 
     this.setState({value, dirtyValue});
     if (this.props.onChange) this.props.onChange(value);
-  }
+  };
 
   render() {
     if(
@@ -217,18 +217,18 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
           }}
           onBlur={_e => {
             this.setState({editing: false});
-            this.resetValue()
+            this.resetValue();
           }}
           data-wd-key={this.props["data-wd-key"] + "-text"}
 
         />
-      </div>
+      </div>;
     }
     else {
       const value = this.state.editing ? this.state.dirtyValue : this.state.value;
 
       return <input
-        aria-label={this.props['aria-label']}
+        aria-label={this.props["aria-label"]}
         spellCheck="false"
         className="maputnik-number"
         placeholder={this.props.default?.toString()}
@@ -240,7 +240,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
         onBlur={this.resetValue}
         required={this.props.required}
         data-wd-key={this.props["data-wd-key"]}
-      />
+      />;
     }
   }
 }
diff --git a/src/components/InputSelect.tsx b/src/components/InputSelect.tsx
index 8922a29d..492df824 100644
--- a/src/components/InputSelect.tsx
+++ b/src/components/InputSelect.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 export type InputSelectProps = {
   value: string
@@ -7,7 +7,7 @@ export type InputSelectProps = {
   style?: object
   onChange(value: string | [string, any]): unknown
   title?: string
-  'aria-label'?: string
+  "aria-label"?: string
 };
 
 export default class InputSelect extends React.Component<InputSelectProps> {
@@ -24,9 +24,9 @@ export default class InputSelect extends React.Component<InputSelectProps> {
       title={this.props.title}
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}
-      aria-label={this.props['aria-label']}
+      aria-label={this.props["aria-label"]}
     >
       { options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
-    </select>
+    </select>;
   }
 }
diff --git a/src/components/InputSpec.tsx b/src/components/InputSpec.tsx
index d69d1aa1..e6a8481b 100644
--- a/src/components/InputSpec.tsx
+++ b/src/components/InputSpec.tsx
@@ -1,19 +1,19 @@
-import React, { ReactElement } from 'react'
+import React, { type ReactElement } from "react";
 
-import InputColor, { InputColorProps } from './InputColor'
-import InputNumber, { InputNumberProps } from './InputNumber'
-import InputCheckbox, { InputCheckboxProps } from './InputCheckbox'
-import InputString, { InputStringProps } from './InputString'
-import InputArray, { InputArrayProps } from './InputArray'
-import InputDynamicArray, { InputDynamicArrayProps } from './InputDynamicArray'
-import InputFont, { InputFontProps } from './InputFont'
-import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
-import InputEnum, { InputEnumProps } from './InputEnum'
-import capitalize from 'lodash.capitalize'
+import InputColor, { type InputColorProps } from "./InputColor";
+import InputNumber, { type InputNumberProps } from "./InputNumber";
+import InputCheckbox, { type InputCheckboxProps } from "./InputCheckbox";
+import InputString, { type InputStringProps } from "./InputString";
+import InputArray, { type InputArrayProps } from "./InputArray";
+import InputDynamicArray, { type InputDynamicArrayProps } from "./InputDynamicArray";
+import InputFont, { type InputFontProps } from "./InputFont";
+import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
+import InputEnum, { type InputEnumProps } from "./InputEnum";
+import capitalize from "lodash.capitalize";
 
-const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
+const iconProperties = ["background-pattern", "fill-pattern", "line-pattern", "fill-extrusion-pattern", "icon-image"];
 
-export type FieldSpecType = 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array' | 'numberArray' | 'padding' | 'colorArray' | 'variableAnchorOffsetCollection';
+export type FieldSpecType = "number" | "enum" | "resolvedImage" | "formatted" | "string" | "color" | "boolean" | "array" | "numberArray" | "padding" | "colorArray" | "variableAnchorOffsetCollection";
 
 export type InputSpecProps = {
   onChange?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
@@ -30,7 +30,7 @@ export type InputSpecProps = {
   value?: string | number | unknown[] | boolean
   /** Override the style of the field */
   style?: object
-  'aria-label'?: string
+  "aria-label"?: string
   error?: unknown[]
   label?: string
   action?: ReactElement
@@ -53,96 +53,96 @@ export default class InputSpec extends React.Component<InputSpecProps> {
       name: this.props.fieldName,
       "data-wd-key": "spec-field-input:" + this.props.fieldName,
       onChange: (newValue: number | undefined | (string | number | undefined)[]) => this.props.onChange!(this.props.fieldName, newValue),
-      'aria-label': this.props['aria-label'],
-    }
+      "aria-label": this.props["aria-label"],
+    };
     switch(this.props.fieldSpec?.type) {
-    case 'number': return (
-      <InputNumber
-        {...commonProps as InputNumberProps}
-        min={this.props.fieldSpec.minimum}
-        max={this.props.fieldSpec.maximum}
-      />
-    )
-    case 'enum': {
-      const options = Object.keys(this.props.fieldSpec.values || []).map(v => [v, capitalize(v)])
+      case "number": return (
+        <InputNumber
+          {...commonProps as InputNumberProps}
+          min={this.props.fieldSpec.minimum}
+          max={this.props.fieldSpec.maximum}
+        />
+      );
+      case "enum": {
+        const options = Object.keys(this.props.fieldSpec.values || []).map(v => [v, capitalize(v)]);
 
-      return <InputEnum
-        {...commonProps as Omit<InputEnumProps, "options">}
-        options={options}
-      />
-    }
-    case 'resolvedImage':
-    case 'formatted':
-    case 'string':
-      if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
-        const options = this.props.fieldSpec.values || [];
-        return <InputAutocomplete
-          {...commonProps as Omit<InputAutocompleteProps, "options">}
-          options={options.map(f => [f, f])}
-        />
-      } else {
-        return <InputString
-          {...commonProps as InputStringProps}
-        />
+        return <InputEnum
+          {...commonProps as Omit<InputEnumProps, "options">}
+          options={options}
+        />;
       }
-    case 'color': return (
-      <InputColor
-        {...commonProps as InputColorProps}
-      />
-    )
-    case 'boolean': return (
-      <InputCheckbox
-        {...commonProps as InputCheckboxProps}
-      />
-    )
-    case 'array':
-      if(this.props.fieldName === 'text-font') {
-        return <InputFont
-          {...commonProps as InputFontProps}
-          fonts={this.props.fieldSpec.values}
-        />
-      } else {
-        if (this.props.fieldSpec.length) {
-          return <InputArray
-            {...commonProps as InputArrayProps}
-            type={this.props.fieldSpec.value}
-            length={this.props.fieldSpec.length}
-          />
+      case "resolvedImage":
+      case "formatted":
+      case "string":
+        if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
+          const options = this.props.fieldSpec.values || [];
+          return <InputAutocomplete
+            {...commonProps as Omit<InputAutocompleteProps, "options">}
+            options={options.map(f => [f, f])}
+          />;
         } else {
-          return <InputDynamicArray
-            {...commonProps as InputDynamicArrayProps}
-            fieldSpec={this.props.fieldSpec}
-            type={this.props.fieldSpec.value as InputDynamicArrayProps['type']}
-          />
+          return <InputString
+            {...commonProps as InputStringProps}
+          />;
         }
-      }
-    case 'numberArray': return (
-      <InputDynamicArray
-        {...commonProps as InputDynamicArrayProps}
-        fieldSpec={this.props.fieldSpec}
-        type="number"
-        value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
-      />
-    )
-    case 'colorArray': return (
-      <InputDynamicArray
-        {...commonProps as InputDynamicArrayProps}
-        fieldSpec={this.props.fieldSpec}
-        type="color"
-        value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
-      />
-    )
-    case 'padding': return (
-      <InputArray
-        {...commonProps as InputArrayProps}
-        type="number"
-        value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
-        length={4}
-      />
-    )
-    default:
-      console.warn(`No proper field input for ${this.props.fieldName} type: ${this.props.fieldSpec?.type}`);
-      return null
+      case "color": return (
+        <InputColor
+          {...commonProps as InputColorProps}
+        />
+      );
+      case "boolean": return (
+        <InputCheckbox
+          {...commonProps as InputCheckboxProps}
+        />
+      );
+      case "array":
+        if(this.props.fieldName === "text-font") {
+          return <InputFont
+            {...commonProps as InputFontProps}
+            fonts={this.props.fieldSpec.values}
+          />;
+        } else {
+          if (this.props.fieldSpec.length) {
+            return <InputArray
+              {...commonProps as InputArrayProps}
+              type={this.props.fieldSpec.value}
+              length={this.props.fieldSpec.length}
+            />;
+          } else {
+            return <InputDynamicArray
+              {...commonProps as InputDynamicArrayProps}
+              fieldSpec={this.props.fieldSpec}
+              type={this.props.fieldSpec.value as InputDynamicArrayProps["type"]}
+            />;
+          }
+        }
+      case "numberArray": return (
+        <InputDynamicArray
+          {...commonProps as InputDynamicArrayProps}
+          fieldSpec={this.props.fieldSpec}
+          type="number"
+          value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
+        />
+      );
+      case "colorArray": return (
+        <InputDynamicArray
+          {...commonProps as InputDynamicArrayProps}
+          fieldSpec={this.props.fieldSpec}
+          type="color"
+          value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
+        />
+      );
+      case "padding": return (
+        <InputArray
+          {...commonProps as InputArrayProps}
+          type="number"
+          value={(Array.isArray(this.props.value) ? this.props.value : [this.props.value]) as (string | number | undefined)[]}
+          length={4}
+        />
+      );
+      default:
+        console.warn(`No proper field input for ${this.props.fieldName} type: ${this.props.fieldSpec?.type}`);
+        return null;
     }
   }
 
diff --git a/src/components/InputString.tsx b/src/components/InputString.tsx
index 1fa91f49..3403e5e2 100644
--- a/src/components/InputString.tsx
+++ b/src/components/InputString.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 export type InputStringProps = {
   "data-wd-key"?: string
@@ -11,26 +11,26 @@ export type InputStringProps = {
   required?: boolean
   disabled?: boolean
   spellCheck?: boolean
-  'aria-label'?: string
+  "aria-label"?: string
   title?: string
 };
 
 type InputStringState = {
   editing: boolean
   value?: string
-}
+};
 
 export default class InputString extends React.Component<InputStringProps, InputStringState> {
   static defaultProps = {
     onInput: () => {},
-  }
+  };
 
   constructor(props: InputStringProps) {
-    super(props)
+    super(props);
     this.state = {
       editing: false,
-      value: props.value || ''
-    }
+      value: props.value || ""
+    };
   }
 
   static getDerivedStateFromProps(props: Readonly<InputStringProps>, state: InputStringState) {
@@ -47,17 +47,17 @@ export default class InputString extends React.Component<InputStringProps, Input
     let classes;
 
     if(this.props.multi) {
-      tag = "textarea"
+      tag = "textarea";
       classes = [
         "maputnik-string",
         "maputnik-string--multi"
-      ]
+      ];
     }
     else {
-      tag = "input"
+      tag = "input";
       classes = [
         "maputnik-string"
-      ]
+      ];
     }
 
     if(this.props.disabled) {
diff --git a/src/components/InputUrl.tsx b/src/components/InputUrl.tsx
index f8779d61..3cf3810d 100644
--- a/src/components/InputUrl.tsx
+++ b/src/components/InputUrl.tsx
@@ -1,8 +1,8 @@
-import React, { JSX } from 'react'
-import InputString from './InputString'
-import SmallError from './SmallError'
-import { Trans, WithTranslation, withTranslation } from 'react-i18next';
-import { TFunction } from 'i18next';
+import React, { type JSX } from "react";
+import InputString from "./InputString";
+import SmallError from "./SmallError";
+import { Trans, type WithTranslation, withTranslation } from "react-i18next";
+import { type TFunction } from "i18next";
 
 function validate(url: string, t: TFunction): JSX.Element | undefined {
   if (url === "") {
@@ -63,7 +63,7 @@ export type FieldUrlProps = {
   onInput?(...args: unknown[]): unknown
   multi?: boolean
   required?: boolean
-  'aria-label'?: string
+  "aria-label"?: string
   type?: string
   className?: string
 };
@@ -72,12 +72,12 @@ type InputUrlInternalProps = FieldUrlProps & WithTranslation;
 
 type InputUrlState = {
   error?: React.ReactNode
-}
+};
 
 class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlState> {
   static defaultProps = {
     onInput: () => {},
-  }
+  };
 
   constructor (props: InputUrlInternalProps) {
     super(props);
@@ -91,14 +91,14 @@ class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlSt
       error: validate(url, this.props.t),
     });
     if (this.props.onInput) this.props.onInput(url);
-  }
+  };
 
   onChange = (url: string) => {
     this.setState({
       error: validate(url, this.props.t),
     });
     this.props.onChange(url);
-  }
+  };
 
   render () {
     return (
@@ -107,7 +107,7 @@ class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlSt
           {...this.props}
           onInput={this.onInput}
           onChange={this.onChange}
-          aria-label={this.props['aria-label']}
+          aria-label={this.props["aria-label"]}
         />
         {this.state.error}
       </div>
diff --git a/src/components/LayerEditor.tsx b/src/components/LayerEditor.tsx
index cc803424..d4803934 100644
--- a/src/components/LayerEditor.tsx
+++ b/src/components/LayerEditor.tsx
@@ -1,35 +1,35 @@
-import React, {type JSX} from 'react'
-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 React, {type JSX} from "react";
+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 {type BackgroundLayerSpecification, type LayerSpecification, type SourceSpecification} from "maplibre-gl";
+import {v8} from "@maplibre/maplibre-gl-style-spec";
 
-import FieldJson from './FieldJson'
-import FilterEditor from './FilterEditor'
-import PropertyGroup from './PropertyGroup'
-import LayerEditorGroup from './LayerEditorGroup'
-import FieldType from './FieldType'
-import FieldId from './FieldId'
-import FieldMinZoom from './FieldMinZoom'
-import FieldMaxZoom from './FieldMaxZoom'
-import FieldComment from './FieldComment'
-import FieldSource from './FieldSource'
-import FieldSourceLayer from './FieldSourceLayer'
-import { changeType, changeProperty } from '../libs/layer'
-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';
+import FieldJson from "./FieldJson";
+import FilterEditor from "./FilterEditor";
+import PropertyGroup from "./PropertyGroup";
+import LayerEditorGroup from "./LayerEditorGroup";
+import FieldType from "./FieldType";
+import FieldId from "./FieldId";
+import FieldMinZoom from "./FieldMinZoom";
+import FieldMaxZoom from "./FieldMaxZoom";
+import FieldComment from "./FieldComment";
+import FieldSource from "./FieldSource";
+import FieldSourceLayer from "./FieldSourceLayer";
+import { changeType, changeProperty } from "../libs/layer";
+import {formatLayerId} from "../libs/format";
+import { type WithTranslation, withTranslation } from "react-i18next";
+import { type TFunction } from "i18next";
+import { NON_SOURCE_LAYERS } from "../libs/non-source-layers";
+import { type OnMoveLayerCallback } from "../libs/definitions";
 
 type MaputnikLayoutGroup = {
   id: string;
   title: string;
   type: string;
   fields: string[];
-}
+};
 
 function getLayoutForSymbolType(t: TFunction): MaputnikLayoutGroup[] {
   const groups: MaputnikLayoutGroup[] = [];
@@ -68,7 +68,7 @@ function getLayoutForSymbolType(t: TFunction): MaputnikLayoutGroup[] {
 
 function getLayoutForType(type: LayerSpecification["type"], t: TFunction): MaputnikLayoutGroup[] {
   if (Object.keys(v8.layer.type.values).indexOf(type) < 0) {
-    return []
+    return [];
   }
   if (type === "symbol") {
     return getLayoutForSymbolType(t);
@@ -95,23 +95,23 @@ function getLayoutForType(type: LayerSpecification["type"], t: TFunction): Maput
 
 function layoutGroups(layerType: LayerSpecification["type"], t: TFunction): {id: string, title: string, type: string, fields?: string[]}[] {
   const layerGroup = {
-    id: 'layer',
-    title: t('Layer'),
-    type: 'layer'
-  }
+    id: "layer",
+    title: t("Layer"),
+    type: "layer"
+  };
   const filterGroup = {
-    id: 'filter',
-    title: t('Filter'),
-    type: 'filter'
-  }
+    id: "filter",
+    title: t("Filter"),
+    type: "filter"
+  };
   const editorGroup = {
-    id: 'jsoneditor',
-    title: t('JSON Editor'),
-    type: 'jsoneditor'
-  }
+    id: "jsoneditor",
+    title: t("JSON Editor"),
+    type: "jsoneditor"
+  };
   return [layerGroup, filterGroup]
     .concat(getLayoutForType(layerType, t))
-    .concat([editorGroup])
+    .concat([editorGroup]);
 }
 
 type LayerEditorInternalProps = {
@@ -141,25 +141,25 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     onLayerChanged: () => {},
     onLayerIdChange: () => {},
     onLayerDestroyed: () => {},
-  }
+  };
 
   constructor(props: LayerEditorInternalProps) {
-    super(props)
+    super(props);
 
-    const editorGroups: {[keys:string]: boolean} = {}
+    const editorGroups: {[keys:string]: boolean} = {};
     for (const group of layoutGroups(this.props.layer.type, props.t)) {
-      editorGroups[group.title] = true
+      editorGroups[group.title] = true;
     }
 
-    this.state = { editorGroups }
+    this.state = { editorGroups };
   }
 
   static getDerivedStateFromProps(props: Readonly<LayerEditorInternalProps>, state: LayerEditorState) {
-    const additionalGroups = { ...state.editorGroups }
+    const additionalGroups = { ...state.editorGroups };
 
     for (const group of getLayoutForType(props.layer.type, props.t)) {
       if(!(group.title in additionalGroups)) {
-        additionalGroups[group.title] = true
+        additionalGroups[group.title] = true;
       }
     }
 
@@ -173,23 +173,23 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     this.props.onLayerChanged(
       this.props.layerIndex,
       changeProperty(this.props.layer, group, property, newValue)
-    )
+    );
   }
 
   onGroupToggle(groupTitle: string, active: boolean) {
     const changedActiveGroups = {
       ...this.state.editorGroups,
       [groupTitle]: active,
-    }
+    };
     this.setState({
       editorGroups: changedActiveGroups
-    })
+    });
   }
 
   renderGroupType(type: string, fields?: string[]): JSX.Element {
-    let comment = ""
+    let comment = "";
     if(this.props.layer.metadata) {
-      comment = (this.props.layer.metadata as any)['maputnik:comment']
+      comment = (this.props.layer.metadata as any)["maputnik:comment"];
     }
     const {errors, layerIndex} = this.props;
 
@@ -204,7 +204,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
           message: error.parsed.data.message
         };
       }
-    })
+    });
 
     let sourceLayerIds;
     const layer = this.props.layer as Exclude<LayerSpecification, BackgroundLayerSpecification>;
@@ -213,82 +213,82 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     }
 
     switch(type) {
-    case 'layer': return <div>
-      <FieldId
-        value={this.props.layer.id}
-        wdKey="layer-editor.layer-id"
-        error={errorData.id}
-        onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
-      />
-      <FieldType
-        disabled={true}
-        error={errorData.type}
-        value={this.props.layer.type}
-        onChange={newType => this.props.onLayerChanged(
-          this.props.layerIndex,
-          changeType(this.props.layer, newType)
-        )}
-      />
-      {this.props.layer.type !== 'background' && <FieldSource
-        error={errorData.source}
-        sourceIds={Object.keys(this.props.sources!)}
-        value={this.props.layer.source}
-        onChange={v => this.changeProperty(null, 'source', v)}
-      />
-      }
-      {!NON_SOURCE_LAYERS.includes(this.props.layer.type) &&
-        <FieldSourceLayer
-          error={errorData['source-layer']}
-          sourceLayerIds={sourceLayerIds}
-          value={(this.props.layer as any)['source-layer']}
-          onChange={v => this.changeProperty(null, 'source-layer', v)}
+      case "layer": return <div>
+        <FieldId
+          value={this.props.layer.id}
+          wdKey="layer-editor.layer-id"
+          error={errorData.id}
+          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
         />
-      }
-      <FieldMinZoom
-        error={errorData.minzoom}
-        value={this.props.layer.minzoom}
-        onChange={v => this.changeProperty(null, 'minzoom', v)}
-      />
-      <FieldMaxZoom
-        error={errorData.maxzoom}
-        value={this.props.layer.maxzoom}
-        onChange={v => this.changeProperty(null, 'maxzoom', v)}
-      />
-      <FieldComment
-        error={errorData.comment}
-        value={comment}
-        onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
-      />
-    </div>
-    case 'filter': return <div>
-      <div className="maputnik-filter-editor-wrapper">
-        <FilterEditor
-          errors={errorData}
-          filter={(this.props.layer as any).filter}
-          properties={this.props.vectorLayers[(this.props.layer as any)['source-layer']]}
-          onChange={f => this.changeProperty(null, 'filter', f)}
-        />
-      </div>
-    </div>
-    case 'properties':
-      return <PropertyGroup
-        errors={errorData}
-        layer={this.props.layer}
-        groupFields={fields!}
-        spec={this.props.spec}
-        onChange={this.changeProperty.bind(this)}
-      />
-    case 'jsoneditor':
-      return <FieldJson
-        layer={this.props.layer}
-        onChange={(layer) => {
-          this.props.onLayerChanged(
+        <FieldType
+          disabled={true}
+          error={errorData.type}
+          value={this.props.layer.type}
+          onChange={newType => this.props.onLayerChanged(
             this.props.layerIndex,
-            layer
-          );
-        }}
-      />
-    default: return <></>
+            changeType(this.props.layer, newType)
+          )}
+        />
+        {this.props.layer.type !== "background" && <FieldSource
+          error={errorData.source}
+          sourceIds={Object.keys(this.props.sources!)}
+          value={this.props.layer.source}
+          onChange={v => this.changeProperty(null, "source", v)}
+        />
+        }
+        {!NON_SOURCE_LAYERS.includes(this.props.layer.type) &&
+        <FieldSourceLayer
+          error={errorData["source-layer"]}
+          sourceLayerIds={sourceLayerIds}
+          value={(this.props.layer as any)["source-layer"]}
+          onChange={v => this.changeProperty(null, "source-layer", v)}
+        />
+        }
+        <FieldMinZoom
+          error={errorData.minzoom}
+          value={this.props.layer.minzoom}
+          onChange={v => this.changeProperty(null, "minzoom", v)}
+        />
+        <FieldMaxZoom
+          error={errorData.maxzoom}
+          value={this.props.layer.maxzoom}
+          onChange={v => this.changeProperty(null, "maxzoom", v)}
+        />
+        <FieldComment
+          error={errorData.comment}
+          value={comment}
+          onChange={v => this.changeProperty("metadata", "maputnik:comment", v == ""  ? undefined : v)}
+        />
+      </div>;
+      case "filter": return <div>
+        <div className="maputnik-filter-editor-wrapper">
+          <FilterEditor
+            errors={errorData}
+            filter={(this.props.layer as any).filter}
+            properties={this.props.vectorLayers[(this.props.layer as any)["source-layer"]]}
+            onChange={f => this.changeProperty(null, "filter", f)}
+          />
+        </div>
+      </div>;
+      case "properties":
+        return <PropertyGroup
+          errors={errorData}
+          layer={this.props.layer}
+          groupFields={fields!}
+          spec={this.props.spec}
+          onChange={this.changeProperty.bind(this)}
+        />;
+      case "jsoneditor":
+        return <FieldJson
+          layer={this.props.layer}
+          onChange={(layer) => {
+            this.props.onLayerChanged(
+              this.props.layerIndex,
+              layer
+            );
+          }}
+        />;
+      default: return <></>;
     }
   }
 
@@ -296,16 +296,16 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     this.props.onMoveLayer({
       oldIndex: this.props.layerIndex,
       newIndex: this.props.layerIndex+offset
-    })
+    });
   }
 
   render() {
     const t = this.props.t;
 
     const groupIds: string[] = [];
-    const layerType = this.props.layer.type
+    const layerType = this.props.layer.type;
     const groups = layoutGroups(layerType, t).filter(group => {
-      return !(layerType === 'background' && group.type === 'source')
+      return !(layerType === "background" && group.type === "source");
     }).map(group => {
       const groupId = group.id;
       groupIds.push(groupId);
@@ -318,10 +318,10 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
         onActiveToggle={this.onGroupToggle.bind(this, group.title)}
       >
         {this.renderGroupType(group.type, group.fields)}
-      </LayerEditorGroup>
-    })
+      </LayerEditorGroup>;
+    });
 
-    const layout = this.props.layer.layout || {}
+    const layout = this.props.layer.layout || {};
 
     const items: {[key: string]: {
       text: string,
@@ -356,14 +356,14 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
         handler: () => this.moveLayer(+1),
         wdKey: "menu-move-layer-down"
       }
-    }
+    };
 
     function handleSelection(id: string, event: React.SyntheticEvent) {
       event.stopPropagation();
       items[id].handler();
     }
 
-    return <IconContext.Provider value={{size: '14px', color: '#8e8e8e'}}>
+    return <IconContext.Provider value={{size: "14px", color: "#8e8e8e"}}>
       <section className="maputnik-layer-editor"
         role="main"
         aria-label={t("Layer editor")}
@@ -395,7 +395,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
                         <MenuItem value={id} className='more-menu__menu__item' data-wd-key={item.wdKey}>
                           {item.text}
                         </MenuItem>
-                      </li>
+                      </li>;
                     })}
                   </ul>
                 </Menu>
@@ -412,7 +412,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
           {groups}
         </Accordion>
       </section>
-    </IconContext.Provider>
+    </IconContext.Provider>;
   }
 }
 
diff --git a/src/components/LayerEditorGroup.tsx b/src/components/LayerEditorGroup.tsx
index 33f32712..d41a738f 100644
--- a/src/components/LayerEditorGroup.tsx
+++ b/src/components/LayerEditorGroup.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
-import Icon from '@mdi/react'
+import React from "react";
+import Icon from "@mdi/react";
 import {
   mdiMenuDown,
   mdiMenuUp
-} from '@mdi/js';
+} from "@mdi/js";
 import {
   AccordionItem,
   AccordionItemHeading,
   AccordionItemButton,
   AccordionItemPanel,
-} from 'react-accessible-accordion';
+} from "react-accessible-accordion";
 
 
 type LayerEditorGroupProps = {
@@ -46,6 +46,6 @@ export default class LayerEditorGroup extends React.Component<LayerEditorGroupPr
       <AccordionItemPanel>
         {this.props.children}
       </AccordionItemPanel>
-    </AccordionItem>
+    </AccordionItem>;
   }
 }
diff --git a/src/components/LayerList.tsx b/src/components/LayerList.tsx
index 5c12dbd2..a515b856 100644
--- a/src/components/LayerList.tsx
+++ b/src/components/LayerList.tsx
@@ -1,28 +1,28 @@
-import React, {type JSX} from 'react'
-import classnames from 'classnames'
-import lodash from 'lodash';
+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';
+  type DragEndEvent,
+} from "@dnd-kit/core";
 import {
   SortableContext,
   verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
+} from "@dnd-kit/sortable";
 
-import LayerListGroup from './LayerListGroup'
-import LayerListItem from './LayerListItem'
-import ModalAdd from './modals/ModalAdd'
+import LayerListGroup from "./LayerListGroup";
+import LayerListItem from "./LayerListItem";
+import ModalAdd from "./modals/ModalAdd";
 
-import type {LayerSpecification, SourceSpecification} 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';
+import type {LayerSpecification, SourceSpecification} from "maplibre-gl";
+import generateUniqueId from "../libs/document-uid";
+import { findClosestCommonPrefix, layerPrefix } from "../libs/layer";
+import { type WithTranslation, withTranslation } from "react-i18next";
+import { type OnMoveLayerCallback } from "../libs/definitions";
 
 type LayerListContainerProps = {
   layers: LayerSpecification[]
@@ -48,7 +48,7 @@ type LayerListContainerState = {
 class LayerListContainerInternal extends React.Component<LayerListContainerInternalProps, LayerListContainerState> {
   static defaultProps = {
     onLayerSelect: () => {},
-  }
+  };
   selectedItemRef: React.RefObject<any>;
   scrollContainerRef: React.RefObject<HTMLElement | null>;
 
@@ -65,7 +65,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
       isOpen: {
         add: false,
       }
-    }
+    };
   }
 
   toggleModal(modalName: string) {
@@ -78,74 +78,74 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
         ...this.state.isOpen,
         [modalName]: !this.state.isOpen[modalName]
       }
-    })
+    });
   }
 
   toggleLayers = () => {
-    let idx = 0
+    let idx = 0;
 
-    const newGroups: {[key:string]: boolean} = {}
+    const newGroups: {[key:string]: boolean} = {};
 
     this.groupedLayers().forEach(layers => {
-      const groupPrefix = layerPrefix(layers[0].id)
-      const lookupKey = [groupPrefix, idx].join('-')
+      const groupPrefix = layerPrefix(layers[0].id);
+      const lookupKey = [groupPrefix, idx].join("-");
 
 
       if (layers.length > 1) {
-        newGroups[lookupKey] = this.state.areAllGroupsExpanded
+        newGroups[lookupKey] = this.state.areAllGroupsExpanded;
       }
 
       layers.forEach((_layer) => {
-        idx += 1
-      })
+        idx += 1;
+      });
     });
 
     this.setState({
       collapsedGroups: newGroups,
       areAllGroupsExpanded: !this.state.areAllGroupsExpanded
-    })
-  }
+    });
+  };
 
   groupedLayers(): (LayerSpecification & {key: string})[][] {
-    const groups = []
+    const groups = [];
     const layerIdCount = new Map();
 
     for (let i = 0; i < this.props.layers.length; i++) {
       const origLayer = this.props.layers[i];
-      const previousLayer = this.props.layers[i-1]
+      const previousLayer = this.props.layers[i-1];
       layerIdCount.set(origLayer.id,
         layerIdCount.has(origLayer.id) ? layerIdCount.get(origLayer.id) + 1 : 0
       );
       const layer = {
         ...origLayer,
         key: `layers-list-${origLayer.id}-${layerIdCount.get(origLayer.id)}`,
-      }
+      };
       if(previousLayer && layerPrefix(previousLayer.id) == layerPrefix(layer.id)) {
-        const lastGroup = groups[groups.length - 1]
-        lastGroup.push(layer)
+        const lastGroup = groups[groups.length - 1];
+        lastGroup.push(layer);
       } else {
-        groups.push([layer])
+        groups.push([layer]);
       }
     }
-    return groups
+    return groups;
   }
 
   toggleLayerGroup(groupPrefix: string, idx: number) {
-    const lookupKey = [groupPrefix, idx].join('-')
-    const newGroups = { ...this.state.collapsedGroups }
+    const lookupKey = [groupPrefix, idx].join("-");
+    const newGroups = { ...this.state.collapsedGroups };
     if(lookupKey in this.state.collapsedGroups) {
-      newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey]
+      newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey];
     } else {
-      newGroups[lookupKey] = false
+      newGroups[lookupKey] = false;
     }
     this.setState({
       collapsedGroups: newGroups
-    })
+    });
   }
 
   isCollapsed(groupPrefix: string, idx: number) {
-    const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
-    return collapsed === undefined ? true : collapsed
+    const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join("-")];
+    return collapsed === undefined ? true : collapsed;
   }
 
   shouldComponentUpdate (nextProps: LayerListContainerProps, nextState: LayerListContainerState) {
@@ -177,7 +177,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
       const out = {
         ...props
       } as LayerListContainerProps & { layers?: any };
-      delete out['layers'];
+      delete out["layers"];
       return out;
     }
 
@@ -200,7 +200,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
         const options = {
           root: this.scrollContainerRef.current,
           threshold: 1.0
-        }
+        };
         const observer = new IntersectionObserver(entries => {
           observer.unobserve(target);
           if (entries.length > 0 && entries[0].intersectionRatio < 1) {
@@ -215,25 +215,25 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
 
   render() {
 
-    const listItems: JSX.Element[] = []
-    let idx = 0
+    const listItems: JSX.Element[] = [];
+    let idx = 0;
     const layersByGroup = this.groupedLayers();
     layersByGroup.forEach(layers => {
-      const groupPrefix = layerPrefix(layers[0].id)
+      const groupPrefix = layerPrefix(layers[0].id);
       if(layers.length > 1) {
         const grp = <LayerListGroup
-          data-wd-key={[groupPrefix, idx].join('-')}
+          data-wd-key={[groupPrefix, idx].join("-")}
           aria-controls={layers.map(l => l.key).join(" ")}
           key={`group-${groupPrefix}-${idx}`}
           title={groupPrefix}
           isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
-        />
-        listItems.push(grp)
+        />;
+        listItems.push(grp);
       }
 
       layers.forEach((layer, idxInGroup) => {
-        const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
+        const groupIdx = findClosestCommonPrefix(this.props.layers, idx);
 
         const layerError = this.props.errors.find(error => {
           return (
@@ -250,9 +250,9 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
 
         const listItem = <LayerListItem
           className={classnames({
-            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
-            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
-            'maputnik-layer-list-item--error': !!layerError
+            "maputnik-layer-list-item-collapsed": layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
+            "maputnik-layer-list-item-group-last": idxInGroup == layers.length - 1 && layers.length > 1,
+            "maputnik-layer-list-item--error": !!layerError
           })}
           key={layer.key}
           id={layer.key}
@@ -266,11 +266,11 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
           onLayerCopy={this.props.onLayerCopy.bind(this)}
           onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
           {...additionalProps}
-        />
-        listItems.push(listItem)
-        idx += 1
-      })
-    })
+        />;
+        listItems.push(listItem);
+        idx += 1;
+      });
+    });
 
     const t = this.props.t;
 
@@ -286,7 +286,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
         layers={this.props.layers}
         sources={this.props.sources}
         isOpen={this.state.isOpen.add}
-        onOpenToggle={this.toggleModal.bind(this, 'add')}
+        onOpenToggle={this.toggleModal.bind(this, "add")}
         onLayersChange={this.props.onLayersChange}
       />
       <header className="maputnik-layer-list-header">
@@ -310,7 +310,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
             <button
-              onClick={this.toggleModal.bind(this, 'add')}
+              onClick={this.toggleModal.bind(this, "add")}
               data-wd-key="layer-list:add-layer"
               className="maputnik-button maputnik-button-selected">
               {t("Add Layer")}
@@ -326,7 +326,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
           {listItems}
         </ul>
       </div>
-    </section>
+    </section>;
   }
 }
 
@@ -360,6 +360,6 @@ const LayerList: React.FC<LayerListProps> = (props) => {
       </SortableContext>
     </DndContext>
   );
-}
+};
 
 export default LayerList;
diff --git a/src/components/LayerListGroup.tsx b/src/components/LayerListGroup.tsx
index b362b8ea..c4c08e4a 100644
--- a/src/components/LayerListGroup.tsx
+++ b/src/components/LayerListGroup.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import Collapser from './Collapser'
+import React from "react";
+import Collapser from "./Collapser";
 
 type LayerListGroupProps = {
   title: string
   "data-wd-key"?: string
   isActive: boolean
   onActiveToggle(...args: unknown[]): unknown
-  'aria-controls'?: string
+  "aria-controls"?: string
 };
 
 export default class LayerListGroup extends React.Component<LayerListGroupProps> {
@@ -18,7 +18,7 @@ export default class LayerListGroup extends React.Component<LayerListGroupProps>
       >
         <button
           className="maputnik-layer-list-group-title"
-          aria-controls={this.props['aria-controls']}
+          aria-controls={this.props["aria-controls"]}
           aria-expanded={this.props.isActive}
         >
           {this.props.title}
@@ -29,6 +29,6 @@ export default class LayerListGroup extends React.Component<LayerListGroupProps>
           isCollapsed={this.props.isActive}
         />
       </div>
-    </li>
+    </li>;
   }
 }
diff --git a/src/components/LayerListItem.tsx b/src/components/LayerListItem.tsx
index c850df7e..2af2be59 100644
--- a/src/components/LayerListItem.tsx
+++ b/src/components/LayerListItem.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
-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 React from "react";
+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 IconLayer from "./IconLayer";
 
 
 type DraggableLabelProps = {
@@ -21,12 +21,12 @@ const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
     <IconLayer
       className="layer-handle__icon"
       type={props.layerType}
-      style={{ width: '1em', height: '1em', verticalAlign: 'middle' }}
+      style={{ width: "1em", height: "1em", verticalAlign: "middle" }}
     />
     <button className="maputnik-layer-list-item-id">
       {props.layerId}
     </button>
-  </div>
+  </div>;
 };
 
 type IconActionProps = {
@@ -40,17 +40,17 @@ type IconActionProps = {
 class IconAction extends React.Component<IconActionProps> {
   renderIcon() {
     switch(this.props.action) {
-    case 'duplicate': return <MdContentCopy />
-    case 'show': return <MdVisibility />
-    case 'hide': return <MdVisibilityOff />
-    case 'delete': return <MdDelete />
+      case "duplicate": return <MdContentCopy />;
+      case "show": return <MdVisibility />;
+      case "hide": return <MdVisibilityOff />;
+      case "delete": return <MdDelete />;
     }
   }
 
   render() {
     const {classBlockName, classBlockModifier} = this.props;
 
-    let classAdditions = '';
+    let classAdditions = "";
     if (classBlockName) {
       classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
 
@@ -68,7 +68,7 @@ class IconAction extends React.Component<IconActionProps> {
       aria-hidden="true"
     >
       {this.renderIcon()}
-    </button>
+    </button>;
   }
 }
 
@@ -89,7 +89,7 @@ type LayerListItemProps = {
 const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props, ref) => {
   const {
     isSelected = false,
-    visibility = 'visible',
+    visibility = "visible",
     onLayerCopy = () => {},
     onLayerDestroy = () => {},
     onLayerVisibilityToggle = () => {},
@@ -110,12 +110,12 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
     opacity: isDragging ? 0.5 : 1,
   };
 
-  const visibilityAction = visibility === 'visible' ? 'show' : 'hide';
+  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'}}>
+  return <IconContext.Provider value={{size: "14px"}}>
     <li
       ref={(node) => {
         setNodeRef(node);
@@ -141,13 +141,13 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
       <span style={{flexGrow: 1}} />
       <IconAction
         wdKey={"layer-list-item:" + props.layerId+":delete"}
-        action={'delete'}
+        action={"delete"}
         classBlockName="delete"
         onClick={_e => onLayerDestroy!(props.layerIndex)}
       />
       <IconAction
         wdKey={"layer-list-item:" + props.layerId+":copy"}
-        action={'duplicate'}
+        action={"duplicate"}
         classBlockName="duplicate"
         onClick={_e => onLayerCopy!(props.layerIndex)}
       />
@@ -159,7 +159,7 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
         onClick={_e => onLayerVisibilityToggle!(props.layerIndex)}
       />
     </li>
-  </IconContext.Provider>
+  </IconContext.Provider>;
 });
 
 export default LayerListItem;
diff --git a/src/components/MapMaplibreGl.tsx b/src/components/MapMaplibreGl.tsx
index de4886eb..1ef080b8 100644
--- a/src/components/MapMaplibreGl.tsx
+++ b/src/components/MapMaplibreGl.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
-import {createRoot} from 'react-dom/client'
-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'
-import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
-import MapMaplibreGlFeaturePropertyPopup, { InspectFeature } from './MapMaplibreGlFeaturePropertyPopup'
-import Color from 'color'
-import ZoomControl from '../libs/zoomcontrol'
-import { HighlightedLayer, colorHighlightedLayer } from '../libs/highlight'
-import 'maplibre-gl/dist/maplibre-gl.css'
-import '../maplibregl.css'
-import '../libs/maplibre-rtl'
-import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from '@maplibre/maplibre-gl-geocoder';
-import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
-import { withTranslation, WithTranslation } from 'react-i18next'
-import i18next from 'i18next'
+import React from "react";
+import {createRoot} from "react-dom/client";
+import MapLibreGl, {type LayerSpecification, type LngLat, type Map, type MapOptions, type SourceSpecification, type StyleSpecification} from "maplibre-gl";
+import MaplibreInspect from "@maplibre/maplibre-gl-inspect";
+import colors from "@maplibre/maplibre-gl-inspect/lib/colors";
+import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
+import MapMaplibreGlFeaturePropertyPopup, { type InspectFeature } from "./MapMaplibreGlFeaturePropertyPopup";
+import Color from "color";
+import ZoomControl from "../libs/zoomcontrol";
+import { type HighlightedLayer, colorHighlightedLayer } from "../libs/highlight";
+import "maplibre-gl/dist/maplibre-gl.css";
+import "../maplibregl.css";
+import "../libs/maplibre-rtl";
+import MaplibreGeocoder, { type MaplibreGeocoderApi, type MaplibreGeocoderApiConfig } from "@maplibre/maplibre-gl-geocoder";
+import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";
+import { withTranslation, type WithTranslation } from "react-i18next";
+import i18next from "i18next";
 import { Protocol } from "pmtiles";
 
 function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[], highlightedLayer?: HighlightedLayer) {
@@ -22,30 +22,30 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
     "id": "background",
     "type": "background",
     "paint": {
-      "background-color": '#1c1f24',
+      "background-color": "#1c1f24",
     }
-  } as LayerSpecification
+  } as LayerSpecification;
 
-  const layer = colorHighlightedLayer(highlightedLayer)
+  const layer = colorHighlightedLayer(highlightedLayer);
   if(layer) {
-    coloredLayers.push(layer)
+    coloredLayers.push(layer);
   }
 
-  const sources: {[key:string]: SourceSpecification} = {}
+  const sources: {[key:string]: SourceSpecification} = {};
 
   Object.keys(originalMapStyle.sources).forEach(sourceId => {
-    const source = originalMapStyle.sources[sourceId]
-    if(source.type !== 'raster' && source.type !== 'raster-dem') {
-      sources[sourceId] = source
+    const source = originalMapStyle.sources[sourceId];
+    if(source.type !== "raster" && source.type !== "raster-dem") {
+      sources[sourceId] = source;
     }
-  })
+  });
 
   const inspectStyle = {
     ...originalMapStyle,
     sources: sources,
     layers: [backgroundLayer].concat(coloredLayers as LayerSpecification[])
-  }
-  return inspectStyle
+  };
+  return inspectStyle;
 }
 
 type MapMaplibreGlInternalProps = {
@@ -78,20 +78,20 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     onLayerSelect: () => {},
     onChange: () => {},
     options: {} as MapOptions,
-  }
-  container: HTMLDivElement | null = null
+  };
+  container: HTMLDivElement | null = null;
 
   constructor(props: MapMaplibreGlInternalProps) {
-    super(props)
+    super(props);
     this.state = {
       map: null,
       inspect: null,
       geocoder: null,
       zoomControl: null,
-    }
-    i18next.on('languageChanged', () => {
+    };
+    i18next.on("languageChanged", () => {
       this.forceUpdate();
-    })
+    });
   }
 
 
@@ -120,7 +120,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     }
 
     if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
-      this.state.inspect.toggleInspector()
+      this.state.inspect.toggleInspector();
     }
     if (this.state.inspect && this.props.inspectModeEnabled) {
       this.state.inspect.setOriginalStyle(styleWithTokens);
@@ -152,7 +152,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       const center = map.getCenter();
       const zoom = map.getZoom();
       this.props.onChange({center, zoom});
-    }
+    };
     mapViewChange();
 
     map.showTileBoundaries = mapOpts.showTileBoundaries!;
@@ -162,12 +162,12 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     const geocoder = this.initGeocoder(map);
 
     const zoomControl = new ZoomControl();
-    map.addControl(zoomControl, 'top-right');
+    map.addControl(zoomControl, "top-right");
 
     const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
-    map.addControl(nav, 'top-right');
+    map.addControl(nav, "top-right");
 
-    const tmpNode = document.createElement('div');
+    const tmpNode = document.createElement("div");
     const root = createRoot(tmpNode);
 
     const inspectPopup = new MapLibreGl.Popup({
@@ -182,17 +182,17 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       showInspectButton: false,
       blockHoverPopupOnClick: true,
       assignLayerColor: (layerId: string, alpha: number) => {
-        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
+        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string();
       },
       buildInspectStyle: (originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[]) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: (features: InspectFeature[]) => {
         if(this.props.inspectModeEnabled) {
-          inspectPopup.once('open', () => {
+          inspectPopup.once("open", () => {
             root.render(<MapMaplibreGlFeaturePropertyPopup features={features} />);
           });
           return tmpNode;
         } else {
-          inspectPopup.once('open', () => {
+          inspectPopup.once("open", () => {
             root.render(<MapMaplibreGlLayerPopup
               features={features}
               onLayerSelect={this.onLayerSelectById}
@@ -202,8 +202,8 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
           return tmpNode;
         }
       }
-    })
-    map.addControl(inspect)
+    });
+    map.addControl(inspect);
 
     map.on("style.load", () => {
       this.setState({
@@ -213,18 +213,18 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
         zoomControl,
         zoom: map.getZoom()
       });
-    })
+    });
 
     map.on("data", e => {
-      if(e.dataType !== 'tile') return
+      if(e.dataType !== "tile") return;
       this.props.onDataChange!({
         map: this.state.map
-      })
-    })
+      });
+    });
 
     map.on("error", e => {
       console.log("ERROR", e);
-    })
+    });
 
     map.on("zoom", _e => {
       this.setState({
@@ -239,7 +239,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
   onLayerSelectById = (id: string) => {
     const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
     this.props.onLayerSelect(index);
-  }
+  };
 
   initGeocoder(map: Map) {
     const geocoderConfig = {
@@ -257,15 +257,15 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
                   (feature.bbox[3] - feature.bbox[1]) / 2
             ];
             const point = {
-              type: 'Feature',
+              type: "Feature",
               geometry: {
-                type: 'Point',
+                type: "Point",
                 coordinates: center
               },
               place_name: feature.properties.display_name,
               properties: feature.properties,
               text: feature.properties.display_name,
-              place_type: ['place'],
+              place_type: ["place"],
               center
             };
             features.push(point);
@@ -282,7 +282,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       placeholder: this.props.t("Search"),
       maplibregl: MapLibreGl,
     });
-    map.addControl(geocoder, 'top-left');
+    map.addControl(geocoder, "top-left");
     return geocoder;
   }
 
@@ -294,9 +294,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       className="maputnik-map__map"
       role="region"
       aria-label={t("Map view")}
-      ref={x => {this.container = x}}
+      ref={x => {this.container = x;}}
       data-wd-key="maplibre:map"
-    ></div>
+    ></div>;
   }
 }
 
diff --git a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
index 57cb47dc..9164c3e5 100644
--- a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
+++ b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
@@ -1,17 +1,17 @@
-import React from 'react'
-import type { GeoJSONFeatureWithSourceLayer } from '@maplibre/maplibre-gl-inspect'
+import React from "react";
+import type { GeoJSONFeatureWithSourceLayer } from "@maplibre/maplibre-gl-inspect";
 
 export type InspectFeature = GeoJSONFeatureWithSourceLayer & {
   inspectModeCounter?: number
   counter?: number
-}
+};
 
 function displayValue(value: string | number | Date | object | undefined) {
-  if (typeof value === 'undefined' || value === null) return value;
+  if (typeof value === "undefined" || value === null) return value;
   if (value instanceof Date) return value.toLocaleString();
-  if (typeof value === 'object' ||
-          typeof value === 'number' ||
-          typeof value === 'string') return value.toString();
+  if (typeof value === "object" ||
+          typeof value === "number" ||
+          typeof value === "string") return value.toString();
   return value;
 }
 
@@ -19,21 +19,21 @@ function renderKeyValueTableRow(key: string, value: string | undefined) {
   return <tr key={key}>
     <td className="maputnik-popup-table-cell">{key}</td>
     <td className="maputnik-popup-table-cell">{value}</td>
-  </tr>
+  </tr>;
 }
 
 function renderFeature(feature: InspectFeature, idx: number) {
   return <React.Fragment key={idx}>
     <tr>
-      <td colSpan={2} className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
+      <td colSpan={2} className="maputnik-popup-layer-id">{feature.layer["source"]}: {feature.layer["source-layer"]}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
     </tr>
     {renderKeyValueTableRow("$type", feature.geometry.type)}
     {renderKeyValueTableRow("$id", displayValue(feature.id))}
     {Object.keys(feature.properties).map(propertyName => {
       const property = feature.properties[propertyName];
-      return renderKeyValueTableRow(propertyName, displayValue(property))
+      return renderKeyValueTableRow(propertyName, displayValue(property));
     })}
-  </React.Fragment>
+  </React.Fragment>;
 }
 
 function removeDuplicatedFeatures(features: InspectFeature[]) {
@@ -41,22 +41,22 @@ function removeDuplicatedFeatures(features: InspectFeature[]) {
 
   features.forEach(feature => {
     const featureIndex = uniqueFeatures.findIndex(feature2 => {
-      return feature.layer['source-layer'] === feature2.layer['source-layer']
-        && JSON.stringify(feature.properties) === JSON.stringify(feature2.properties)
-    })
+      return feature.layer["source-layer"] === feature2.layer["source-layer"]
+        && JSON.stringify(feature.properties) === JSON.stringify(feature2.properties);
+    });
 
     if(featureIndex === -1) {
-      uniqueFeatures.push(feature)
+      uniqueFeatures.push(feature);
     } else {
-      if('inspectModeCounter' in uniqueFeatures[featureIndex]) {
-        uniqueFeatures[featureIndex].inspectModeCounter!++
+      if("inspectModeCounter" in uniqueFeatures[featureIndex]) {
+        uniqueFeatures[featureIndex].inspectModeCounter!++;
       } else {
-        uniqueFeatures[featureIndex].inspectModeCounter = 2
+        uniqueFeatures[featureIndex].inspectModeCounter = 2;
       }
     }
-  })
+  });
 
-  return uniqueFeatures
+  return uniqueFeatures;
 }
 
 type FeaturePropertyPopupProps = {
@@ -65,16 +65,16 @@ type FeaturePropertyPopupProps = {
 
 class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
   render() {
-    const features = removeDuplicatedFeatures(this.props.features)
+    const features = removeDuplicatedFeatures(this.props.features);
     return <div className="maputnik-feature-property-popup" dir="ltr" data-wd-key="feature-property-popup">
       <table className="maputnik-popup-table">
         <tbody>
           {features.map(renderFeature)}
         </tbody>
       </table>
-    </div>
+    </div>;
   }
 }
 
 
-export default FeaturePropertyPopup
+export default FeaturePropertyPopup;
diff --git a/src/components/MapMaplibreGlLayerPopup.tsx b/src/components/MapMaplibreGlLayerPopup.tsx
index d0ca0ab1..5b4423e0 100644
--- a/src/components/MapMaplibreGlLayerPopup.tsx
+++ b/src/components/MapMaplibreGlLayerPopup.tsx
@@ -1,29 +1,29 @@
-import React from 'react'
-import IconLayer from './IconLayer'
-import type {InspectFeature} from './MapMaplibreGlFeaturePropertyPopup';
+import React from "react";
+import IconLayer from "./IconLayer";
+import type {InspectFeature} from "./MapMaplibreGlFeaturePropertyPopup";
 
 function groupFeaturesBySourceLayer(features: InspectFeature[]) {
-  const sources: {[key: string]: InspectFeature[]} = {}
+  const sources: {[key: string]: InspectFeature[]} = {};
 
-  const returnedFeatures: {[key: string]: number} = {}
+  const returnedFeatures: {[key: string]: number} = {};
 
   features.forEach(feature => {
-    const sourceKey = feature.layer['source-layer'] as string;
+    const sourceKey = feature.layer["source-layer"] as string;
     if(Object.prototype.hasOwnProperty.call(returnedFeatures, feature.layer.id)) {
-      returnedFeatures[feature.layer.id]++
+      returnedFeatures[feature.layer.id]++;
 
-      const featureObject = sources[sourceKey].find((f: InspectFeature) => f.layer.id === feature.layer.id)
+      const featureObject = sources[sourceKey].find((f: InspectFeature) => f.layer.id === feature.layer.id);
 
-      featureObject!.counter = returnedFeatures[feature.layer.id]
+      featureObject!.counter = returnedFeatures[feature.layer.id];
     } else {
-      sources[sourceKey] = sources[sourceKey] || []
-      sources[sourceKey].push(feature)
+      sources[sourceKey] = sources[sourceKey] || [];
+      sources[sourceKey].push(feature);
 
-      returnedFeatures[feature.layer.id] = 1
+      returnedFeatures[feature.layer.id] = 1;
     }
-  })
+  });
 
-  return sources
+  return sources;
 }
 
 type FeatureLayerPopupProps = {
@@ -66,7 +66,7 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
   }
 
   render() {
-    const sources = groupFeaturesBySourceLayer(this.props.features)
+    const sources = groupFeaturesBySourceLayer(this.props.features);
 
     const items = Object.keys(sources).map(vectorLayerId => {
       const layers = sources[vectorLayerId].map((feature: InspectFeature, idx: number) => {
@@ -83,7 +83,7 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
           <label
             className="maputnik-popup-layer__label"
             onClick={() => {
-              this.props.onLayerSelect(feature.layer.id)
+              this.props.onLayerSelect(feature.layer.id);
             }}
           >
             {feature.layer.type &&
@@ -96,19 +96,19 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
             {feature.layer.id}
             {feature.counter && <span> × {feature.counter}</span>}
           </label>
-        </div>
-      })
+        </div>;
+      });
       return <div key={vectorLayerId}>
         <div className="maputnik-popup-layer-id">{vectorLayerId}</div>
         {layers}
-      </div>
-    })
+      </div>;
+    });
 
     return <div className="maputnik-feature-layer-popup" data-wd-key="feature-layer-popup" dir="ltr">
       {items}
-    </div>
+    </div>;
   }
 }
 
 
-export default FeatureLayerPopup
+export default FeatureLayerPopup;
diff --git a/src/components/MapOpenLayers.tsx b/src/components/MapOpenLayers.tsx
index ad8eb2a1..b39f448f 100644
--- a/src/components/MapOpenLayers.tsx
+++ b/src/components/MapOpenLayers.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import {throttle} from 'lodash';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import {throttle} from "lodash";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup';
+import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
 
-import 'ol/ol.css'
+import "ol/ol.css";
 //@ts-ignore
-import {apply} from 'ol-mapbox-style';
-import {Map, View, Overlay} from 'ol';
+import {apply} from "ol-mapbox-style";
+import {Map, View, Overlay} from "ol";
 
-import {toLonLat} from 'ol/proj';
-import type {StyleSpecification} from 'maplibre-gl';
+import {toLonLat} from "ol/proj";
+import type {StyleSpecification} from "maplibre-gl";
 
 
 function renderCoords (coords: string[]) {
@@ -19,8 +19,8 @@ function renderCoords (coords: string[]) {
   }
   else {
     return <span className="maputnik-coords">
-      {coords.map((coord) => String(coord).padStart(7, "\u00A0")).join(', ')}
-    </span>
+      {coords.map((coord) => String(coord).padStart(7, "\u00A0")).join(", ")}
+    </span>;
   }
 }
 
@@ -48,7 +48,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
     onMapLoaded: () => {},
     onDataChange: () => {},
     onLayerSelect: () => {},
-  }
+  };
   updateStyle: any;
   map: any;
   container: HTMLDivElement | null = null;
@@ -101,15 +101,15 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
       })
     });
 
-    map.on('pointermove', (evt) => {
+    map.on("pointermove", (evt) => {
       const coords = toLonLat(evt.coordinate);
       this.setState({
         cursor: [
           coords[0].toFixed(2),
           coords[1].toFixed(2)
         ]
-      })
-    })
+      });
+    });
 
     const onMoveEnd = () => {
       const zoom = map.getView().getZoom();
@@ -122,12 +122,12 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
           lat: center[1],
         },
       });
-    }
+    };
 
     onMoveEnd();
-    map.on('moveend', onMoveEnd);
+    map.on("moveend", onMoveEnd);
 
-    map.on('postrender', (_e) => {
+    map.on("postrender", (_e) => {
       const center = toLonLat(map.getView().getCenter()!);
       this.setState({
         center: [
@@ -150,13 +150,13 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
   closeOverlay = (e: any) => {
     e.target.blur();
     this.overlay!.setPosition(undefined);
-  }
+  };
 
   render() {
     const t = this.props.t;
     return <div className="maputnik-ol-container">
       <div
-        ref={x => {this.popupContainer = x}}
+        ref={x => {this.popupContainer = x;}}
         style={{background: "black"}}
         className="maputnik-popup"
       >
@@ -193,14 +193,14 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
       }
       <div
         className="maputnik-ol"
-        ref={x => {this.container = x}}
+        ref={x => {this.container = x;}}
         role="region"
         aria-label={t("Map view")}
         style={{
           ...this.props.style,
         }}>
       </div>
-    </div>
+    </div>;
   }
 }
 
diff --git a/src/components/PropertyGroup.tsx b/src/components/PropertyGroup.tsx
index 7b325159..b4cddaba 100644
--- a/src/components/PropertyGroup.tsx
+++ b/src/components/PropertyGroup.tsx
@@ -1,34 +1,34 @@
-import React from 'react'
+import React from "react";
 
-import FieldFunction from './FieldFunction'
-import type {LayerSpecification} from 'maplibre-gl'
+import FieldFunction from "./FieldFunction";
+import type {LayerSpecification} from "maplibre-gl";
 
-const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
+const iconProperties = ["background-pattern", "fill-pattern", "line-pattern", "fill-extrusion-pattern", "icon-image"];
 
 /** Extract field spec by {@fieldName} from the {@layerType} in the
  * style specification from either the paint or layout group */
 function getFieldSpec(spec: any, layerType: LayerSpecification["type"], fieldName: string) {
-  const groupName = getGroupName(spec, layerType, fieldName)
-  const group = spec[groupName + '_' + layerType]
-  const fieldSpec = group[fieldName]
+  const groupName = getGroupName(spec, layerType, fieldName);
+  const group = spec[groupName + "_" + layerType];
+  const fieldSpec = group[fieldName];
   if(iconProperties.indexOf(fieldName) >= 0) {
     return {
       ...fieldSpec,
       values: spec.$root.sprite.values
-    }
+    };
   }
-  if(fieldName === 'text-font') {
+  if(fieldName === "text-font") {
     return {
       ...fieldSpec,
       values: spec.$root.glyphs.values
-    }
+    };
   }
-  return fieldSpec
+  return fieldSpec;
 }
 
-function getGroupName(spec: any, layerType: LayerSpecification["type"], fieldName: string): 'paint' | 'layout' {
-  const paint = spec['paint_' + layerType] || {}
-  return (fieldName in paint) ? 'paint' : 'layout';
+function getGroupName(spec: any, layerType: LayerSpecification["type"], fieldName: string): "paint" | "layout" {
+  const paint = spec["paint_" + layerType] || {};
+  return (fieldName in paint) ? "paint" : "layout";
 }
 
 type PropertyGroupProps = {
@@ -41,21 +41,21 @@ type PropertyGroupProps = {
 
 export default class PropertyGroup extends React.Component<PropertyGroupProps> {
   onPropertyChange = (property: string, newValue: any) => {
-    const group = getGroupName(this.props.spec, this.props.layer.type, property)
-    this.props.onChange(group ,property, newValue)
-  }
+    const group = getGroupName(this.props.spec, this.props.layer.type, property);
+    this.props.onChange(group ,property, newValue);
+  };
 
   render() {
     const {errors} = this.props;
     const fields = this.props.groupFields.map(fieldName => {
-      const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
+      const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName);
 
-      const paint = this.props.layer.paint || {}
-      const layout = this.props.layer.layout || {}
+      const paint = this.props.layer.paint || {};
+      const layout = this.props.layer.layout || {};
       const fieldValue = fieldName in paint
         ? paint[fieldName as keyof typeof paint]
-        : layout[fieldName as keyof typeof layout]
-      const fieldType = fieldName in paint ? 'paint' : 'layout';
+        : layout[fieldName as keyof typeof layout];
+      const fieldType = fieldName in paint ? "paint" : "layout";
 
       return <FieldFunction
         errors={errors}
@@ -65,11 +65,11 @@ export default class PropertyGroup extends React.Component<PropertyGroupProps> {
         value={fieldValue}
         fieldType={fieldType}
         fieldSpec={fieldSpec}
-      />
-    })
+      />;
+    });
 
     return <div className="maputnik-property-group">
       {fields}
-    </div>
+    </div>;
   }
 }
diff --git a/src/components/ScrollContainer.tsx b/src/components/ScrollContainer.tsx
index a48560f0..89092052 100644
--- a/src/components/ScrollContainer.tsx
+++ b/src/components/ScrollContainer.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 type ScrollContainerProps = {
   children?: React.ReactNode
@@ -8,6 +8,6 @@ export default class ScrollContainer extends React.Component<ScrollContainerProp
   render() {
     return <div className="maputnik-scroll-container">
       {this.props.children}
-    </div>
+    </div>;
   }
 }
diff --git a/src/components/SingleFilterEditor.tsx b/src/components/SingleFilterEditor.tsx
index c2f56159..59088b29 100644
--- a/src/components/SingleFilterEditor.tsx
+++ b/src/components/SingleFilterEditor.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
+import React from "react";
 
-import {otherFilterOps} from '../libs/filterops'
-import InputString from './InputString'
-import InputAutocomplete from './InputAutocomplete'
-import InputSelect from './InputSelect'
+import {otherFilterOps} from "../libs/filterops";
+import InputString from "./InputString";
+import InputAutocomplete from "./InputAutocomplete";
+import InputSelect from "./InputSelect";
 
 function tryParseInt(v: string | number) {
-  if (v === '') return v
-  if (isNaN(v as number)) return v
-  return parseFloat(v as string)
+  if (v === "") return v;
+  if (isNaN(v as number)) return v;
+  return parseFloat(v as string);
 }
 
 function tryParseBool(v: string | boolean) {
@@ -43,23 +43,23 @@ type SingleFilterEditorProps = {
 export default class SingleFilterEditor extends React.Component<SingleFilterEditorProps> {
   static defaultProps = {
     properties: {},
-  }
+  };
 
   onFilterPartChanged(filterOp: string, propertyName: string, filterArgs: string[]) {
-    let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)]
-    if(filterOp === 'has' || filterOp === '!has') {
-      newFilter = [filterOp, propertyName]
+    let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)];
+    if(filterOp === "has" || filterOp === "!has") {
+      newFilter = [filterOp, propertyName];
     } else if(filterArgs.length === 0) {
-      newFilter = [filterOp, propertyName, '']
+      newFilter = [filterOp, propertyName, ""];
     }
-    this.props.onChange(newFilter)
+    this.props.onChange(newFilter);
   }
 
   render() {
-    const f = this.props.filter
-    const filterOp = f[0]
-    const propertyName = f[1]
-    const filterArgs = f.slice(2)
+    const f = this.props.filter;
+    const filterOp = f[0];
+    const propertyName = f[1];
+    const filterArgs = f.slice(2);
 
     return <div className="maputnik-filter-editor-single">
       <div className="maputnik-filter-editor-property">
@@ -82,11 +82,11 @@ export default class SingleFilterEditor extends React.Component<SingleFilterEdit
       <div className="maputnik-filter-editor-args">
         <InputString
           aria-label="value"
-          value={filterArgs.join(',')}
-          onChange={(v: string) => this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
+          value={filterArgs.join(",")}
+          onChange={(v: string) => this.onFilterPartChanged(filterOp, propertyName, v.split(","))}
         />
       </div>
       }
-    </div>
+    </div>;
   }
 }
diff --git a/src/components/SmallError.tsx b/src/components/SmallError.tsx
index be30daec..be2894ae 100644
--- a/src/components/SmallError.tsx
+++ b/src/components/SmallError.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { WithTranslation, withTranslation } from 'react-i18next';
-import './SmallError.scss';
+import React from "react";
+import { type WithTranslation, withTranslation } from "react-i18next";
+import "./SmallError.scss";
 
 
 type SmallErrorInternalProps = {
diff --git a/src/components/_DataProperty.tsx b/src/components/_DataProperty.tsx
index 7584503c..669eb610 100644
--- a/src/components/_DataProperty.tsx
+++ b/src/components/_DataProperty.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
-import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import React from "react";
+import {mdiFunctionVariant, mdiTableRowPlusAfter} from "@mdi/js";
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
-import InputButton from './InputButton'
-import InputSpec from './InputSpec'
-import InputNumber from './InputNumber'
-import InputString from './InputString'
-import InputSelect from './InputSelect'
-import Block from './Block'
-import docUid from '../libs/document-uid'
-import sortNumerically from '../libs/sort-numerically'
-import {findDefaultFromSpec} from '../libs/spec-helper';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import InputButton from "./InputButton";
+import InputSpec from "./InputSpec";
+import InputNumber from "./InputNumber";
+import InputString from "./InputString";
+import InputSelect from "./InputSelect";
+import Block from "./Block";
+import docUid from "../libs/document-uid";
+import sortNumerically from "../libs/sort-numerically";
+import {findDefaultFromSpec} from "../libs/spec-helper";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import labelFromFieldName from '../libs/label-from-field-name'
-import DeleteStopButton from './_DeleteStopButton'
+import labelFromFieldName from "../libs/label-from-field-name";
+import DeleteStopButton from "./_DeleteStopButton";
 
 
 
@@ -30,7 +30,7 @@ function setStopRefs(props: DataPropertyInternalProps, state: DataPropertyState)
         }
         newRefs[idx] = docUid("stop-");
       }
-    })
+    });
   }
 
   return newRefs;
@@ -59,17 +59,17 @@ type DataPropertyValue = {
   base?: number
   type?: string
   stops: Stop[]
-}
+};
 
 export type Stop = [{
   zoom: number
   value: number
-}, number]
+}, number];
 
 class DataPropertyInternal extends React.Component<DataPropertyInternalProps, DataPropertyState> {
   state = {
     refs: {} as {[key: number]: string}
-  }
+  };
 
   componentDidMount() {
     const newRefs = setStopRefs(this.props, this.state);
@@ -77,7 +77,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
     if(newRefs) {
       this.setState({
         refs: newRefs
-      })
+      });
     }
   }
 
@@ -93,20 +93,20 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
 
   getFieldFunctionType(fieldSpec: any) {
     if (fieldSpec.expression.interpolated) {
-      return "exponential"
+      return "exponential";
     }
     if (fieldSpec.type === "number") {
-      return "interval"
+      return "interval";
     }
-    return "categorical"
+    return "categorical";
   }
 
   getDataFunctionTypes(fieldSpec: any) {
     if (fieldSpec.expression.interpolated) {
-      return ["interpolate", "categorical", "interval", "exponential", "identity"]
+      return ["interpolate", "categorical", "interval", "exponential", "identity"];
     }
     else {
-      return ["categorical", "interval", "identity"]
+      return ["categorical", "interval", "identity"];
     }
   }
 
@@ -117,7 +117,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
         return {
           ref: this.state.refs[idx],
           data: stop
-        }
+        };
       })
     // Sort by zoom
       .sort((a, b) => sortNumerically(a.data[0].zoom, b.data[0].zoom));
@@ -127,7 +127,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
     mappedWithRef
       .forEach((stop, idx) =>{
         newRefs[idx] = stop.ref;
-      })
+      });
 
     this.setState({
       refs: newRefs
@@ -144,7 +144,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
       };
     }
     else {
-      const stopValue = value.type === 'categorical' ? '' : 0;
+      const stopValue = value.type === "categorical" ? "" : 0;
       value = {
         property: "",
         type: value.type,
@@ -154,13 +154,13 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
           [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec as any)]
         ],
         ...value,
-      }
+      };
     }
     this.props.onChange!(fieldName, value);
-  }
+  };
 
   changeStop(changeIdx: number, stopData: { zoom: number | undefined, value: number }, value: number) {
-    const stops = this.props.value?.stops.slice(0) || []
+    const stops = this.props.value?.stops.slice(0) || [];
     // const changedStop = stopData.zoom === undefined ? stopData.value : stopData
     stops[changeIdx] = [
       {
@@ -175,20 +175,20 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
     const changedValue = {
       ...this.props.value,
       stops: orderedStops,
-    }
-    this.onChange(this.props.fieldName, changedValue)
+    };
+    this.onChange(this.props.fieldName, changedValue);
   }
 
   changeBase(newValue: number | undefined) {
     const changedValue = {
       ...this.props.value,
       base: newValue
-    }
+    };
 
     if (changedValue.base === undefined) {
       delete changedValue["base"];
     }
-    this.props.onChange!(this.props.fieldName, changedValue)
+    this.props.onChange!(this.props.fieldName, changedValue);
   }
 
   changeDataType(propVal: string) {
@@ -205,43 +205,43 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
 
   changeDataProperty(propName: "property" | "default", propVal: any) {
     if (propVal) {
-      this.props.value![propName] = propVal
+      this.props.value![propName] = propVal;
     }
     else {
-      delete this.props.value![propName]
+      delete this.props.value![propName];
     }
-    this.onChange(this.props.fieldName, this.props.value)
+    this.onChange(this.props.fieldName, this.props.value);
   }
 
   render() {
     const t = this.props.t;
 
     if (typeof this.props.value?.type === "undefined") {
-      this.props.value!.type = this.getFieldFunctionType(this.props.fieldSpec)
+      this.props.value!.type = this.getFieldFunctionType(this.props.fieldSpec);
     }
 
     let dataFields;
     if (this.props.value?.stops) {
       dataFields = this.props.value.stops.map((stop, idx) => {
-        const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
+        const zoomLevel = typeof stop[0] === "object" ? stop[0].zoom : undefined;
         const key  = this.state.refs[idx];
-        const dataLevel = typeof stop[0] === 'object' ? stop[0].value : stop[0];
-        const value = stop[1]
-        const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />
+        const dataLevel = typeof stop[0] === "object" ? stop[0].value : stop[0];
+        const value = stop[1];
+        const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />;
 
         const dataProps = {
-          'aria-label': t("Input value"),
+          "aria-label": t("Input value"),
           label: t("Data value"),
           value: dataLevel as any,
           onChange: (newData: string | number | undefined) => this.changeStop(idx, { zoom: zoomLevel, value: newData as number }, value)
-        }
+        };
 
         let dataInput;
         if(this.props.value?.type === "categorical") {
-          dataInput = <InputString {...dataProps} />
+          dataInput = <InputString {...dataProps} />;
         }
         else {
-          dataInput = <InputNumber {...dataProps} />
+          dataInput = <InputNumber {...dataProps} />;
         }
 
         let zoomInput = null;
@@ -254,7 +254,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
               min={0}
               max={22}
             />
-          </div>
+          </div>;
         }
 
         return <tr key={key}>
@@ -276,8 +276,8 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
           <td>
             {deleteStopBtn}
           </td>
-        </tr>
-      })
+        </tr>;
+      });
     }
 
     return <div className="maputnik-data-spec-block">
@@ -376,7 +376,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
           </div>
         </div>
       </fieldset>
-    </div>
+    </div>;
   }
 }
 
diff --git a/src/components/_DeleteStopButton.tsx b/src/components/_DeleteStopButton.tsx
index fbfced3c..295617ae 100644
--- a/src/components/_DeleteStopButton.tsx
+++ b/src/components/_DeleteStopButton.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React from "react";
 
-import InputButton from './InputButton'
-import {MdDelete} from 'react-icons/md'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import InputButton from "./InputButton";
+import {MdDelete} from "react-icons/md";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 
 type DeleteStopButtonInternalProps = {
@@ -19,7 +19,7 @@ class DeleteStopButtonInternal extends React.Component<DeleteStopButtonInternalP
       title={t("Remove zoom level from stop")}
     >
       <MdDelete />
-    </InputButton>
+    </InputButton>;
   }
 }
 
diff --git a/src/components/_ExpressionProperty.tsx b/src/components/_ExpressionProperty.tsx
index 605759c9..85b5a20d 100644
--- a/src/components/_ExpressionProperty.tsx
+++ b/src/components/_ExpressionProperty.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import {MdDelete, MdUndo} from 'react-icons/md'
-import stringifyPretty from 'json-stringify-pretty-compact'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import {MdDelete, MdUndo} from "react-icons/md";
+import stringifyPretty from "json-stringify-pretty-compact";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import Block from './Block'
-import InputButton from './InputButton'
-import labelFromFieldName from '../libs/label-from-field-name'
-import FieldJson from './FieldJson'
+import Block from "./Block";
+import InputButton from "./InputButton";
+import labelFromFieldName from "../libs/label-from-field-name";
+import FieldJson from "./FieldJson";
 
 
 type ExpressionPropertyInternalProps = {
@@ -32,7 +32,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
     errors: {},
     onFocus: () => {},
     onBlur: () => {},
-  }
+  };
 
   constructor(props: ExpressionPropertyInternalProps) {
     super(props);
@@ -44,14 +44,14 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
   onJSONInvalid = (_err: Error) => {
     this.setState({
       jsonError: true,
-    })
-  }
+    });
+  };
 
   onJSONValid = () => {
     this.setState({
       jsonError: false,
-    })
-  }
+    });
+  };
 
   render() {
     const {t, errors, fieldName, fieldType, value, canUndo} = this.props;
@@ -89,7 +89,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
     const foundErrors = [];
 
     function getValue(data: any) {
-      return stringifyPretty(data, {indent: 2, maxLength: 38})
+      return stringifyPretty(data, {indent: 2, maxLength: 38});
     }
 
     if (jsonError) {
@@ -102,7 +102,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
         })
         .forEach(([_key, error]) => {
           return foundErrors.push(error);
-        })
+        });
 
       if (fieldError) {
         foundErrors.push(fieldError);
@@ -135,7 +135,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
         getValue={getValue}
         onChange={this.props.onChange}
       />
-    </Block>
+    </Block>;
   }
 }
 
diff --git a/src/components/_FunctionButtons.tsx b/src/components/_FunctionButtons.tsx
index 090bb447..c1e97a6e 100644
--- a/src/components/_FunctionButtons.tsx
+++ b/src/components/_FunctionButtons.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react";
 
-import InputButton from './InputButton'
-import {MdFunctions, MdInsertChart} from 'react-icons/md'
-import {mdiFunctionVariant} from '@mdi/js';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import InputButton from "./InputButton";
+import {MdFunctions, MdInsertChart} from "react-icons/md";
+import {mdiFunctionVariant} from "@mdi/js";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FunctionInputButtonsInternalProps = {
   fieldSpec?: any
@@ -17,7 +17,7 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
   render() {
     const t = this.props.t;
 
-    if (this.props.fieldSpec.expression?.parameters.includes('zoom')) {
+    if (this.props.fieldSpec.expression?.parameters.includes("zoom")) {
       const expressionInputButton = (
         <InputButton
           className="maputnik-make-zoom-function"
@@ -36,24 +36,24 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
         title={t("Convert property into a zoom function")}
       >
         <MdFunctions />
-      </InputButton>
+      </InputButton>;
 
       let makeDataInputButton;
-      if (this.props.fieldSpec['property-type'] === 'data-driven') {
+      if (this.props.fieldSpec["property-type"] === "data-driven") {
         makeDataInputButton = <InputButton
           className="maputnik-make-data-function"
           onClick={this.props.onDataClick}
           title={t("Convert property to data function")}
         >
           <MdInsertChart />
-        </InputButton>
+        </InputButton>;
       }
       return <div>
         {expressionInputButton}
         {makeDataInputButton}
         {makeZoomInputButton}
-      </div>
-    } else if (this.props.fieldSpec.expression?.parameters.includes('elevation')) {
+      </div>;
+    } else if (this.props.fieldSpec.expression?.parameters.includes("elevation")) {
       const inputElevationButton = <InputButton
         className="maputnik-make-elevation-function"
         onClick={this.props.onElevationClick}
@@ -61,10 +61,10 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
         data-wd-key='make-elevation-function'
       >
         <MdFunctions />
-      </InputButton>
-      return <div>{inputElevationButton}</div>
+      </InputButton>;
+      return <div>{inputElevationButton}</div>;
     } else {
-      return <div></div>
+      return <div></div>;
     }
   }
 }
diff --git a/src/components/_SpecProperty.tsx b/src/components/_SpecProperty.tsx
index c08a5396..ccdbfee5 100644
--- a/src/components/_SpecProperty.tsx
+++ b/src/components/_SpecProperty.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react";
 
-import FieldSpec, {FieldSpecProps} from './FieldSpec'
-import FunctionButtons from './_FunctionButtons'
+import FieldSpec, {type FieldSpecProps} from "./FieldSpec";
+import FunctionButtons from "./_FunctionButtons";
 
-import labelFromFieldName from '../libs/label-from-field-name'
+import labelFromFieldName from "../libs/label-from-field-name";
 
 
 type SpecPropertyProps = FieldSpecProps & {
@@ -22,7 +22,7 @@ type SpecPropertyProps = FieldSpecProps & {
 export default class SpecProperty extends React.Component<SpecPropertyProps> {
   static defaultProps = {
     errors: {},
-  }
+  };
 
   render() {
     const {errors, fieldName, fieldType} = this.props;
@@ -33,7 +33,7 @@ export default class SpecProperty extends React.Component<SpecPropertyProps> {
       onDataClick={this.props.onDataClick}
       onExpressionClick={this.props.onExpressionClick}
       onElevationClick={this.props.onElevationClick}
-    />
+    />;
 
     const error = errors![fieldType+"."+fieldName as any] as any;
 
@@ -41,8 +41,8 @@ export default class SpecProperty extends React.Component<SpecPropertyProps> {
       {...this.props}
       error={error}
       fieldSpec={this.props.fieldSpec}
-      label={labelFromFieldName(this.props.fieldName || '')}
+      label={labelFromFieldName(this.props.fieldName || "")}
       action={functionBtn}
-    />
+    />;
   }
 }
diff --git a/src/components/_ZoomProperty.tsx b/src/components/_ZoomProperty.tsx
index f4c66482..9addd8f5 100644
--- a/src/components/_ZoomProperty.tsx
+++ b/src/components/_ZoomProperty.tsx
@@ -1,19 +1,19 @@
-import React from 'react'
-import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import {mdiFunctionVariant, mdiTableRowPlusAfter} from "@mdi/js";
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import InputButton from './InputButton'
-import InputSpec from './InputSpec'
-import InputNumber from './InputNumber'
-import InputSelect from './InputSelect'
-import Block from './Block'
+import InputButton from "./InputButton";
+import InputSpec from "./InputSpec";
+import InputNumber from "./InputNumber";
+import InputSelect from "./InputSelect";
+import Block from "./Block";
 
-import DeleteStopButton from './_DeleteStopButton'
-import labelFromFieldName from '../libs/label-from-field-name'
+import DeleteStopButton from "./_DeleteStopButton";
+import labelFromFieldName from "../libs/label-from-field-name";
 
-import docUid from '../libs/document-uid'
-import sortNumerically from '../libs/sort-numerically'
+import docUid from "../libs/document-uid";
+import sortNumerically from "../libs/sort-numerically";
 
 
 /**
@@ -35,7 +35,7 @@ function setStopRefs(props: ZoomPropertyInternalProps, state: ZoomPropertyState)
       } else {
         newRefs[idx] = state.refs[idx];
       }
-    })
+    });
   }
   return newRefs;
 }
@@ -43,7 +43,7 @@ function setStopRefs(props: ZoomPropertyInternalProps, state: ZoomPropertyState)
 type ZoomWithStops = {
   stops: [number | undefined, number][]
   base?: number
-}
+};
 
 
 type ZoomPropertyInternalProps = {
@@ -64,16 +64,16 @@ type ZoomPropertyInternalProps = {
 
 type ZoomPropertyState = {
   refs: {[key: number]: string}
-}
+};
 
 class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, ZoomPropertyState> {
   static defaultProps = {
     errors: {},
-  }
+  };
 
   state = {
     refs: {} as {[key: number]: string}
-  }
+  };
 
   componentDidMount() {
     const newRefs = setStopRefs(this.props, this.state);
@@ -81,7 +81,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
     if(newRefs) {
       this.setState({
         refs: newRefs
-      })
+      });
     }
   }
 
@@ -102,7 +102,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
         return {
           ref: this.state.refs[idx],
           data: stop
-        }
+        };
       })
     // Sort by zoom
       .sort((a, b) => sortNumerically(a.data[0]!, b.data[0]!));
@@ -112,7 +112,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
     mappedWithRef
       .forEach((stop, idx) =>{
         newRefs[idx] = stop.ref;
-      })
+      });
 
     this.setState({
       refs: newRefs
@@ -130,34 +130,34 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
     const changedValue = {
       ...this.props.value as ZoomWithStops,
       stops: orderedStops
-    }
-    this.props.onChange!(this.props.fieldName, changedValue)
+    };
+    this.props.onChange!(this.props.fieldName, changedValue);
   }
 
   changeBase(newValue: number | undefined) {
     const changedValue = {
       ...this.props.value,
       base: newValue
-    }
+    };
 
     if (changedValue.base === undefined) {
       delete changedValue["base"];
     }
-    this.props.onChange!(this.props.fieldName, changedValue)
+    this.props.onChange!(this.props.fieldName, changedValue);
   }
 
   changeDataType = (type: string) => {
     if (type !== "interpolate" && this.props.onChangeToDataFunction) {
       this.props.onChangeToDataFunction(type);
     }
-  }
+  };
 
   render() {
     const t = this.props.t;
     const zoomFields = this.props.value?.stops.map((stop, idx) => {
-      const zoomLevel = stop[0]
-      const value = stop[1]
-      const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />
+      const zoomLevel = stop[0];
+      const value = stop[1];
+      const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop?.bind(this, idx)} />;
       return <tr
         key={`${stop[0]}-${stop[1]}`}
       >
@@ -182,7 +182,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
         <td>
           {deleteStopBtn}
         </td>
-      </tr>
+      </tr>;
     });
 
     // return <div className="maputnik-zoom-spec-property">
@@ -248,14 +248,14 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
           </div>
         </div>
       </fieldset>
-    </div>
+    </div>;
   }
 
   getDataFunctionTypes(fieldSpec: {
     "property-type"?: string
     "function-type"?: string
   }) {
-    if (fieldSpec['property-type'] === 'data-driven') {
+    if (fieldSpec["property-type"] === "data-driven") {
       return ["interpolate", "categorical", "interval", "exponential", "identity"];
     }
     else {
diff --git a/src/components/modals/Modal.tsx b/src/components/modals/Modal.tsx
index 48e8a2b6..9e2b9277 100644
--- a/src/components/modals/Modal.tsx
+++ b/src/components/modals/Modal.tsx
@@ -1,8 +1,8 @@
-import React, { PropsWithChildren } from 'react'
-import {MdClose} from 'react-icons/md'
-import AriaModal from 'react-aria-modal'
-import classnames from 'classnames';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React, { type PropsWithChildren } from "react";
+import {MdClose} from "react-icons/md";
+import AriaModal from "react-aria-modal";
+import classnames from "classnames";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
 type ModalInternalProps = PropsWithChildren & {
   "data-wd-key"?: string
@@ -17,7 +17,7 @@ type ModalInternalProps = PropsWithChildren & {
 class ModalInternal extends React.Component<ModalInternalProps> {
   static defaultProps = {
     underlayClickExits: true
-  }
+  };
 
   // See <https://github.com/maplibre/maputnik/issues/416>
   onClose = () => {
@@ -28,7 +28,7 @@ class ModalInternal extends React.Component<ModalInternalProps> {
     setTimeout(() => {
       this.props.onOpenToggle(false);
     }, 0);
-  }
+  };
 
   render() {
     const t = this.props.t;
@@ -59,7 +59,7 @@ class ModalInternal extends React.Component<ModalInternalProps> {
             <div className="maputnik-modal-content">{this.props.children}</div>
           </div>
         </div>
-      </AriaModal>
+      </AriaModal>;
     }
     else {
       return false;
diff --git a/src/components/modals/ModalAdd.tsx b/src/components/modals/ModalAdd.tsx
index 5bb88c42..bbf80305 100644
--- a/src/components/modals/ModalAdd.tsx
+++ b/src/components/modals/ModalAdd.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
-import { WithTranslation, withTranslation } from 'react-i18next';
-import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
+import React from "react";
+import { type WithTranslation, withTranslation } from "react-i18next";
+import type {LayerSpecification, SourceSpecification} from "maplibre-gl";
 
-import InputButton from '../InputButton'
-import Modal from './Modal'
-import FieldType from '../FieldType'
-import FieldId from '../FieldId'
-import FieldSource from '../FieldSource'
-import FieldSourceLayer from '../FieldSourceLayer'
-import { NON_SOURCE_LAYERS } from '../../libs/non-source-layers'
+import InputButton from "../InputButton";
+import Modal from "./Modal";
+import FieldType from "../FieldType";
+import FieldId from "../FieldId";
+import FieldSource from "../FieldSource";
+import FieldSourceLayer from "../FieldSourceLayer";
+import { NON_SOURCE_LAYERS } from "../../libs/non-source-layers";
 
 type ModalAddInternalProps = {
   layers: LayerSpecification[]
@@ -23,50 +23,50 @@ type ModalAddState = {
   type: LayerSpecification["type"]
   id: string
   source?: string
-  'source-layer'?: string
+  "source-layer"?: string
   error?: string | null
 };
 
 class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddState> {
   addLayer = () => {
     if (this.props.layers.some(l => l.id === this.state.id)) {
-      this.setState({ error: this.props.t('Layer ID already exists') })
-      return
+      this.setState({ error: this.props.t("Layer ID already exists") });
+      return;
     }
 
-    const changedLayers = this.props.layers.slice(0)
+    const changedLayers = this.props.layers.slice(0);
     const layer: ModalAddState = {
       id: this.state.id,
       type: this.state.type,
-    }
+    };
 
-    if(this.state.type !== 'background') {
-      layer.source = this.state.source
-      if(!NON_SOURCE_LAYERS.includes(this.state.type) && this.state['source-layer']) {
-        layer['source-layer'] = this.state['source-layer']
+    if(this.state.type !== "background") {
+      layer.source = this.state.source;
+      if(!NON_SOURCE_LAYERS.includes(this.state.type) && this.state["source-layer"]) {
+        layer["source-layer"] = this.state["source-layer"];
       }
     }
 
-    changedLayers.push(layer as LayerSpecification)
+    changedLayers.push(layer as LayerSpecification);
     this.setState({ error: null }, () => {
-      this.props.onLayersChange(changedLayers)
-      this.props.onOpenToggle(false)
-    })
-  }
+      this.props.onLayersChange(changedLayers);
+      this.props.onOpenToggle(false);
+    });
+  };
 
   constructor(props: ModalAddInternalProps) {
-    super(props)
+    super(props);
     const state: ModalAddState = {
-      type: 'fill',
-      id: '',
+      type: "fill",
+      id: "",
       error: null,
-    }
+    };
 
     if(Object.keys(props.sources).length > 0) {
       state.source = Object.keys(this.props.sources)[0];
-      const sourceLayers = this.props.sources[state.source].layers || []
+      const sourceLayers = this.props.sources[state.source].layers || [];
       if (sourceLayers.length > 0) {
-        state['source-layer'] = sourceLayers[0];
+        state["source-layer"] = sourceLayers[0];
       }
     }
     this.state = state;
@@ -104,22 +104,22 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
   getSources(type: LayerSpecification["type"]) {
 
     switch(type) {
-    case 'background':
-      return [];
-    case 'hillshade':
-    case 'color-relief':
-      return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'raster-dem').map(([k, _]) => k);
-    case 'raster':
-      return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'raster').map(([k, _]) => k);
-    case 'heatmap':
-    case 'circle':
-    case 'fill':
-    case 'fill-extrusion':
-    case 'line':
-    case 'symbol':
-      return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'vector' || v.type === 'geojson').map(([k, _]) => k);
-    default:
-      return [];
+      case "background":
+        return [];
+      case "hillshade":
+      case "color-relief":
+        return Object.entries(this.props.sources).filter(([_, v]) => v.type === "raster-dem").map(([k, _]) => k);
+      case "raster":
+        return Object.entries(this.props.sources).filter(([_, v]) => v.type === "raster").map(([k, _]) => k);
+      case "heatmap":
+      case "circle":
+      case "fill":
+      case "fill-extrusion":
+      case "line":
+      case "symbol":
+        return Object.entries(this.props.sources).filter(([_, v]) => v.type === "vector" || v.type === "geojson").map(([k, _]) => k);
+      default:
+        return [];
     }
   }
 
@@ -147,7 +147,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
     return <Modal
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={t('Add Layer')}
+      title={t("Add Layer")}
       data-wd-key="modal:add-layer"
       className="maputnik-add-modal"
     >
@@ -157,7 +157,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
           value={this.state.id}
           wdKey="add-layer.layer-id"
           onChange={(v: string) => {
-            this.setState({ id: v, error: null })
+            this.setState({ id: v, error: null });
           }}
         />
         <FieldType
@@ -165,7 +165,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
           wdKey="add-layer.layer-type"
           onChange={(v: LayerSpecification["type"]) => this.setState({ type: v })}
         />
-        {this.state.type !== 'background' &&
+        {this.state.type !== "background" &&
       <FieldSource
         sourceIds={sources}
         wdKey="add-layer.layer-source-block"
@@ -176,8 +176,8 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
         {!NON_SOURCE_LAYERS.includes(this.state.type) &&
       <FieldSourceLayer
         sourceLayerIds={layers}
-        value={this.state['source-layer']}
-        onChange={(v: string) => this.setState({ 'source-layer': v })}
+        value={this.state["source-layer"]}
+        onChange={(v: string) => this.setState({ "source-layer": v })}
       />
         }
         <InputButton
@@ -188,7 +188,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
           {t("Add Layer")}
         </InputButton>
       </div>
-    </Modal>
+    </Modal>;
   }
 }
 
diff --git a/src/components/modals/ModalDebug.tsx b/src/components/modals/ModalDebug.tsx
index 3f477af1..53db78f3 100644
--- a/src/components/modals/ModalDebug.tsx
+++ b/src/components/modals/ModalDebug.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
-import Modal from './Modal'
+import Modal from "./Modal";
 
 
 type ModalDebugInternalProps = {
@@ -34,29 +34,29 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
       data-wd-key="modal:debug"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={t('Debug')}
+      title={t("Debug")}
     >
       <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <h1>{t("Options")}</h1>
-        {this.props.renderer === 'mlgljs' &&
+        {this.props.renderer === "mlgljs" &&
           <ul>
             {Object.entries(this.props.maplibreGlDebugOptions!).map(([key, val]) => {
               return <li key={key}>
                 <label>
                   <input type="checkbox" checked={val} onChange={(e) => this.props.onChangeMaplibreGlDebug(key, e.target.checked)} /> {key}
                 </label>
-              </li>
+              </li>;
             })}
           </ul>
         }
-        {this.props.renderer === 'ol' &&
+        {this.props.renderer === "ol" &&
           <ul>
             {Object.entries(this.props.openlayersDebugOptions!).map(([key, val]) => {
               return <li key={key}>
                 <label>
                   <input type="checkbox" checked={val} onChange={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
                 </label>
-              </li>
+              </li>;
             })}
           </ul>
         }
@@ -75,7 +75,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
           </Trans>
         </p>
       </section>
-    </Modal>
+    </Modal>;
   }
 }
 
diff --git a/src/components/modals/ModalExport.tsx b/src/components/modals/ModalExport.tsx
index 87e8105b..becb89e1 100644
--- a/src/components/modals/ModalExport.tsx
+++ b/src/components/modals/ModalExport.tsx
@@ -1,17 +1,17 @@
-import React from 'react'
-import Slugify from 'slugify'
-import {saveAs} from 'file-saver'
-import {version} from 'maplibre-gl/package.json'
-import {format} from '@maplibre/maplibre-gl-style-spec'
-import {MdMap, MdSave} from 'react-icons/md'
-import {WithTranslation, withTranslation} from 'react-i18next';
+import React from "react";
+import Slugify from "slugify";
+import {saveAs} from "file-saver";
+import {version} from "maplibre-gl/package.json";
+import {format} from "@maplibre/maplibre-gl-style-spec";
+import {MdMap, MdSave} from "react-icons/md";
+import {type WithTranslation, withTranslation} from "react-i18next";
 
-import FieldString from '../FieldString'
-import InputButton from '../InputButton'
-import Modal from './Modal'
-import style from '../../libs/style'
-import fieldSpecAdditional from '../../libs/field-spec-additional'
-import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions'
+import FieldString from "../FieldString";
+import InputButton from "../InputButton";
+import Modal from "./Modal";
+import style from "../../libs/style";
+import fieldSpecAdditional from "../../libs/field-spec-additional";
+import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";
 
 
 const MAPLIBRE_GL_VERSION = version;
@@ -41,12 +41,12 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
   exportName() {
     if (this.props.mapStyle.name) {
       return Slugify(this.props.mapStyle.name, {
-        replacement: '_',
+        replacement: "_",
         remove: /[*\-+~.()'"!:]/g,
         lower: true
       });
     } else {
-      return this.props.mapStyle.id
+      return this.props.mapStyle.id;
     }
   }
 
@@ -99,7 +99,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
     let fileHandle = this.props.fileHandle;
     if (fileHandle == null) {
       fileHandle = await this.createFileHandle();
-      this.props.onSetFileHandle(fileHandle)
+      this.props.onSetFileHandle(fileHandle);
       if (fileHandle == null) return;
     }
 
@@ -113,7 +113,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
     const tokenStyle = this.tokenizedStyle();
 
     const fileHandle = await this.createFileHandle();
-    this.props.onSetFileHandle(fileHandle)
+    this.props.onSetFileHandle(fileHandle);
     if (fileHandle == null) return;
 
     const writable = await fileHandle.createWritable();
@@ -134,7 +134,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
     };
 
     const fileHandle = await window.showSaveFilePicker(pickerOpts) as FileSystemFileHandle;
-    this.props.onSetFileHandle(fileHandle)
+    this.props.onSetFileHandle(fileHandle);
     return fileHandle;
   }
 
@@ -145,8 +145,8 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
         ...this.props.mapStyle.metadata as any,
         [property]: value
       }
-    }
-    this.props.onStyleChanged(changedStyle)
+    };
+    this.props.onStyleChanged(changedStyle);
   }
 
 
@@ -157,7 +157,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
       data-wd-key="modal:export"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={t('Save Style')}
+      title={t("Save Style")}
       className="maputnik-export-modal"
     >
 
@@ -171,25 +171,25 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
           <FieldString
             label={fsa.maputnik.maptiler_access_token.label}
             fieldSpec={fsa.maputnik.maptiler_access_token}
-            value={(this.props.mapStyle.metadata || {} as any)['maputnik:openmaptiles_access_token']}
+            value={(this.props.mapStyle.metadata || {} as any)["maputnik:openmaptiles_access_token"]}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
           />
           <FieldString
             label={fsa.maputnik.thunderforest_access_token.label}
             fieldSpec={fsa.maputnik.thunderforest_access_token}
-            value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
+            value={(this.props.mapStyle.metadata || {} as any)["maputnik:thunderforest_access_token"]}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
           />
           <FieldString
             label={fsa.maputnik.stadia_access_token.label}
             fieldSpec={fsa.maputnik.stadia_access_token}
-            value={(this.props.mapStyle.metadata || {} as any)['maputnik:stadia_access_token']}
+            value={(this.props.mapStyle.metadata || {} as any)["maputnik:stadia_access_token"]}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
           />
           <FieldString
             label={fsa.maputnik.locationiq_access_token.label}
             fieldSpec={fsa.maputnik.locationiq_access_token}
-            value={(this.props.mapStyle.metadata || {} as any)['maputnik:locationiq_access_token']}
+            value={(this.props.mapStyle.metadata || {} as any)["maputnik:locationiq_access_token"]}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:locationiq_access_token")}
           />
         </div>
@@ -213,7 +213,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
         </div>
       </section>
 
-    </Modal>
+    </Modal>;
   }
 }
 
diff --git a/src/components/modals/ModalLoading.tsx b/src/components/modals/ModalLoading.tsx
index 8574e7a5..32e3ee25 100644
--- a/src/components/modals/ModalLoading.tsx
+++ b/src/components/modals/ModalLoading.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import InputButton from '../InputButton'
-import Modal from './Modal'
+import InputButton from "../InputButton";
+import Modal from "./Modal";
 
 
 type ModalLoadingInternalProps = {
@@ -31,7 +31,7 @@ class ModalLoadingInternal extends React.Component<ModalLoadingInternalProps> {
           {t("Cancel")}
         </InputButton>
       </p>
-    </Modal>
+    </Modal>;
   }
 }
 
diff --git a/src/components/modals/ModalOpen.tsx b/src/components/modals/ModalOpen.tsx
index 57e48246..f7e7cc4c 100644
--- a/src/components/modals/ModalOpen.tsx
+++ b/src/components/modals/ModalOpen.tsx
@@ -1,16 +1,16 @@
-import React, { FormEvent } from 'react'
-import {MdFileUpload} from 'react-icons/md'
-import {MdAddCircleOutline} from 'react-icons/md'
-import FileReaderInput, { Result } from 'react-file-reader-input'
-import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+import React, { type FormEvent } from "react";
+import {MdFileUpload} from "react-icons/md";
+import {MdAddCircleOutline} from "react-icons/md";
+import FileReaderInput, { type Result } from "react-file-reader-input";
+import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
-import ModalLoading from './ModalLoading'
-import Modal from './Modal'
-import InputButton from '../InputButton'
-import InputUrl from '../InputUrl'
+import ModalLoading from "./ModalLoading";
+import Modal from "./Modal";
+import InputButton from "../InputButton";
+import InputUrl from "../InputUrl";
 
-import style from '../../libs/style'
-import publicStyles from '../../config/styles.json'
+import style from "../../libs/style";
+import publicStyles from "../../config/styles.json";
 
 type PublicStyleProps = {
   url: string
@@ -39,7 +39,7 @@ class PublicStyle extends React.Component<PublicStyleProps> {
           }}
         ></div>
       </InputButton>
-    </div>
+    </div>;
   }
 }
 
@@ -68,7 +68,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
   clearError() {
     this.setState({
       error: null
-    })
+    });
   }
 
   onCancelActiveRequest(e: Event) {
@@ -90,7 +90,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
     let canceled: boolean = false;
 
     fetch(styleUrl, {
-      mode: 'cors',
+      mode: "cors",
       credentials: "same-origin"
     })
       .then(function(response) {
@@ -106,10 +106,10 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
           activeRequestUrl: null
         });
 
-        const mapStyle = style.ensureStyleValidity(body)
-        console.log('Loaded style ', mapStyle.id)
-        this.props.onStyleOpen(mapStyle)
-        this.onOpenToggle()
+        const mapStyle = style.ensureStyleValidity(body);
+        console.log("Loaded style ", mapStyle.id);
+        this.props.onStyleOpen(mapStyle);
+        this.onOpenToggle();
       })
       .catch((err) => {
         this.setState({
@@ -118,8 +118,8 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
           activeRequestUrl: null
         });
         console.error(err);
-        console.warn('Could not open the style URL', styleUrl)
-      })
+        console.warn("Could not open the style URL", styleUrl);
+      });
 
     this.setState({
       activeRequest: {
@@ -128,13 +128,13 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
         }
       },
       activeRequestUrl: styleUrl
-    })
-  }
+    });
+  };
 
   onSubmitUrl = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     this.onStyleSelect(this.state.styleUrl);
-  }
+  };
 
   onOpenFile = async () => {
     this.clearError();
@@ -155,19 +155,19 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
 
     let mapStyle;
     try {
-      mapStyle = JSON.parse(content)
+      mapStyle = JSON.parse(content);
     } catch (err) {
       this.setState({
         error: (err as Error).toString()
       });
       return;
     }
-    mapStyle = style.ensureStyleValidity(mapStyle)
+    mapStyle = style.ensureStyleValidity(mapStyle);
 
     this.props.onStyleOpen(mapStyle, fileHandle);
     this.onOpenToggle();
     return file;
-  }
+  };
 
   // it is not guaranteed that the File System Access API is available on all
   // browsers. If the function is not available, a fallback behavior is used.
@@ -180,7 +180,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
     reader.onload = e => {
       let mapStyle;
       try {
-        mapStyle = JSON.parse(e.target?.result as string)
+        mapStyle = JSON.parse(e.target?.result as string);
       }
       catch(err) {
         this.setState({
@@ -188,12 +188,12 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
         });
         return;
       }
-      mapStyle = style.ensureStyleValidity(mapStyle)
+      mapStyle = style.ensureStyleValidity(mapStyle);
       this.props.onStyleOpen(mapStyle);
       this.onOpenToggle();
-    }
+    };
     reader.onerror = e => console.log(e.target);
-  }
+  };
 
   onOpenToggle() {
     this.setState({
@@ -207,7 +207,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
     this.setState({
       styleUrl: url,
     });
-  }
+  };
 
   render() {
     const t = this.props.t;
@@ -218,8 +218,8 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
         title={style.title}
         thumbnailUrl={style.thumbnail}
         onSelect={this.onStyleSelect}
-      />
-    })
+      />;
+    });
 
     let errorElement;
     if(this.state.error) {
@@ -237,7 +237,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
           data-wd-key="modal:open"
           isOpen={this.props.isOpen}
           onOpenToggle={() => this.onOpenToggle()}
-          title={t('Open Style')}
+          title={t("Open Style")}
         >
           {errorElement}
           <section className="maputnik-modal-section">
@@ -299,12 +299,12 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
 
         <ModalLoading
           isOpen={!!this.state.activeRequest}
-          title={t('Loading style')}
+          title={t("Loading style")}
           onCancel={(e: Event) => this.onCancelActiveRequest(e)}
           message={t("Loading: {{requestUrl}}", { requestUrl: this.state.activeRequestUrl })}
         />
       </div>
-    )
+    );
   }
 }
 
diff --git a/src/components/modals/ModalSettings.tsx b/src/components/modals/ModalSettings.tsx
index 13c25249..cab6ec81 100644
--- a/src/components/modals/ModalSettings.tsx
+++ b/src/components/modals/ModalSettings.tsx
@@ -1,18 +1,18 @@
-import React from 'react'
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
-import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
+import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from "maplibre-gl";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import FieldArray from '../FieldArray'
-import FieldNumber from '../FieldNumber'
-import FieldString from '../FieldString'
-import FieldUrl from '../FieldUrl'
-import FieldSelect from '../FieldSelect'
-import FieldEnum from '../FieldEnum'
-import FieldColor from '../FieldColor'
-import Modal from './Modal'
-import fieldSpecAdditional from '../../libs/field-spec-additional'
-import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions';
+import FieldArray from "../FieldArray";
+import FieldNumber from "../FieldNumber";
+import FieldString from "../FieldString";
+import FieldUrl from "../FieldUrl";
+import FieldSelect from "../FieldSelect";
+import FieldEnum from "../FieldEnum";
+import FieldColor from "../FieldColor";
+import Modal from "./Modal";
+import fieldSpecAdditional from "../../libs/field-spec-additional";
+import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";
 
 type ModalSettingsInternalProps = {
   mapStyle: StyleSpecificationWithId
@@ -26,7 +26,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
   changeTransitionProperty(property: keyof TransitionSpecification, value: number | undefined) {
     const transition = {
       ...this.props.mapStyle.transition,
-    }
+    };
 
     if (value === undefined) {
       delete transition[property];
@@ -44,7 +44,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
   changeLightProperty(property: keyof LightSpecification, value: any) {
     const light = {
       ...this.props.mapStyle.light,
-    }
+    };
 
     if (value === undefined) {
       delete light[property];
@@ -108,7 +108,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
       data-wd-key="modal:settings"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={t('Style Settings')}
+      title={t("Style Settings")}
     >
       <div className="modal:settings">
         <FieldString
@@ -145,7 +145,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           label={fsa.maputnik.maptiler_access_token.label}
           fieldSpec={fsa.maputnik.maptiler_access_token}
           data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
-          value={metadata['maputnik:openmaptiles_access_token']}
+          value={metadata["maputnik:openmaptiles_access_token"]}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
 
@@ -153,7 +153,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           label={fsa.maputnik.thunderforest_access_token.label}
           fieldSpec={fsa.maputnik.thunderforest_access_token}
           data-wd-key="modal:settings.maputnik:thunderforest_access_token"
-          value={metadata['maputnik:thunderforest_access_token']}
+          value={metadata["maputnik:thunderforest_access_token"]}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
         />
 
@@ -161,7 +161,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           label={fsa.maputnik.stadia_access_token.label}
           fieldSpec={fsa.maputnik.stadia_access_token}
           data-wd-key="modal:settings.maputnik:stadia_access_token"
-          value={metadata['maputnik:stadia_access_token']}
+          value={metadata["maputnik:stadia_access_token"]}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
         />
 
@@ -169,7 +169,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           label={fsa.maputnik.locationiq_access_token.label}
           fieldSpec={fsa.maputnik.locationiq_access_token}
           data-wd-key="modal:settings.maputnik:locationiq_access_token"
-          value={metadata['maputnik:locationiq_access_token']}
+          value={metadata["maputnik:locationiq_access_token"]}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:locationiq_access_token")}
         />
 
@@ -280,16 +280,16 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           fieldSpec={fsa.maputnik.style_renderer}
           data-wd-key="modal:settings.maputnik:renderer"
           options={[
-            ['mlgljs', 'MapLibreGL JS'],
-            ['ol', t('Open Layers (experimental)')],
+            ["mlgljs", "MapLibreGL JS"],
+            ["ol", t("Open Layers (experimental)")],
           ]}
-          value={metadata['maputnik:renderer'] || 'mlgljs'}
-          onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
+          value={metadata["maputnik:renderer"] || "mlgljs"}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:renderer")}
         />
       </div>
-    </Modal>
+    </Modal>;
   }
 }
 
-const ModalSettings = withTranslation()(ModalSettingsInternal)
+const ModalSettings = withTranslation()(ModalSettingsInternal);
 export default ModalSettings;
diff --git a/src/components/modals/ModalShortcuts.tsx b/src/components/modals/ModalShortcuts.tsx
index 139b4e8a..16d3ab70 100644
--- a/src/components/modals/ModalShortcuts.tsx
+++ b/src/components/modals/ModalShortcuts.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
-import Modal from './Modal'
+import Modal from "./Modal";
 
 
 type ModalShortcutsInternalProps = {
@@ -46,7 +46,7 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
         key: <kbd>!</kbd>,
         text: t("Debug modal")
       },
-    ]
+    ];
 
 
     const mapShortcuts = [
@@ -98,14 +98,14 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
         key: <><kbd>Shift</kbd> + <kbd>Down</kbd></>,
         text: t("Decrease the pitch by 10 degrees.")
       },
-    ]
+    ];
 
 
     return <Modal
       data-wd-key="modal:shortcuts"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={t('Shortcuts')}
+      title={t("Shortcuts")}
     >
       <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <p>
@@ -118,7 +118,7 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
             return <div key={idx} className="maputnik-modal-shortcuts__shortcut">
               <dt key={"dt"+idx}>{item.key}</dt>
               <dd key={"dd"+idx}>{item.text}</dd>
-            </div>
+            </div>;
           })}
         </dl>
         <p>{t("If the Map is in focused you can use the following shortcuts")}</p>
@@ -126,11 +126,11 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
           {mapShortcuts.map((item, idx) => {
             return <li key={idx}>
               <span>{item.key}</span> {item.text}
-            </li>
+            </li>;
           })}
         </ul>
       </section>
-    </Modal>
+    </Modal>;
   }
 }
 
diff --git a/src/components/modals/ModalSources.tsx b/src/components/modals/ModalSources.tsx
index 6f398492..91a1e5a5 100644
--- a/src/components/modals/ModalSources.tsx
+++ b/src/components/modals/ModalSources.tsx
@@ -1,19 +1,19 @@
-import React from 'react'
-import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
-import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, VectorSourceSpecification} from 'maplibre-gl'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import React from "react";
+import {MdAddCircleOutline, MdDelete} from "react-icons/md";
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
+import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, VectorSourceSpecification} from "maplibre-gl";
+import { type WithTranslation, withTranslation } from "react-i18next";
 
-import Modal from './Modal'
-import InputButton from '../InputButton'
-import FieldString from '../FieldString'
-import FieldSelect from '../FieldSelect'
-import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
+import Modal from "./Modal";
+import InputButton from "../InputButton";
+import FieldString from "../FieldString";
+import FieldSelect from "../FieldSelect";
+import ModalSourcesTypeEditor, { type EditorMode } from "./ModalSourcesTypeEditor";
 
-import style from '../../libs/style'
-import { deleteSource, addSource, changeSource } from '../../libs/source'
-import publicSources from '../../config/tilesets.json'
-import { OnStyleChangedCallback, StyleSpecificationWithId } from '../../libs/definitions';
+import style from "../../libs/style";
+import { deleteSource, addSource, changeSource } from "../../libs/source";
+import publicSources from "../../config/tilesets.json";
+import { type OnStyleChangedCallback, type StyleSpecificationWithId } from "../../libs/definitions";
 
 
 type PublicSourceProps = {
@@ -37,39 +37,39 @@ class PublicSource extends React.Component<PublicSourceProps> {
         <span className="maputnik-space" />
         <MdAddCircleOutline />
       </InputButton>
-    </div>
+    </div>;
   }
 }
 
 function editorMode(source: SourceSpecification) {
-  if(source.type === 'raster') {
-    if(source.tiles) return 'tile_raster'
-    return 'tilejson_raster'
+  if(source.type === "raster") {
+    if(source.tiles) return "tile_raster";
+    return "tilejson_raster";
   }
-  if(source.type === 'raster-dem') {
-    if(source.tiles) return 'tilexyz_raster-dem'
-    return 'tilejson_raster-dem'
+  if(source.type === "raster-dem") {
+    if(source.tiles) return "tilexyz_raster-dem";
+    return "tilejson_raster-dem";
   }
-  if(source.type === 'vector') {
-    if(source.tiles) return 'tile_vector'
-    if(source.url && source.url.startsWith("pmtiles://")) return 'pmtiles_vector'
-    return 'tilejson_vector'
+  if(source.type === "vector") {
+    if(source.tiles) return "tile_vector";
+    if(source.url && source.url.startsWith("pmtiles://")) return "pmtiles_vector";
+    return "tilejson_vector";
   }
-  if(source.type === 'geojson') {
+  if(source.type === "geojson") {
     if (typeof(source.data) === "string") {
-      return 'geojson_url';
+      return "geojson_url";
     }
     else {
-      return 'geojson_json';
+      return "geojson_json";
     }
   }
-  if(source.type === 'image') {
-    return 'image';
+  if(source.type === "image") {
+    return "image";
   }
-  if(source.type === 'video') {
-    return 'video';
+  if(source.type === "video") {
+    return "video";
   }
-  return null
+  return null;
 }
 
 type ActiveModalSourcesTypeEditorProps = {
@@ -90,7 +90,7 @@ class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTyp
           aria-label={t("Remove '{{sourceId}}' source", {sourceId: this.props.sourceId})}
           className="maputnik-active-source-type-editor-header-delete"
           onClick={()=> this.props.onDelete(this.props.sourceId)}
-          style={{backgroundColor: 'transparent'}}
+          style={{backgroundColor: "transparent"}}
         >
           <MdDelete />
         </InputButton>
@@ -102,7 +102,7 @@ class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTyp
           source={this.props.source}
         />
       </div>
-    </div>
+    </div>;
   }
 }
 
@@ -118,100 +118,100 @@ type AddSourceState = {
 
 class AddSource extends React.Component<AddSourceProps, AddSourceState> {
   constructor(props: AddSourceProps) {
-    super(props)
+    super(props);
     this.state = {
-      mode: 'tilejson_vector',
+      mode: "tilejson_vector",
       sourceId: style.generateId(),
-      source: this.defaultSource('tilejson_vector'),
-    }
+      source: this.defaultSource("tilejson_vector"),
+    };
   }
 
   defaultSource(mode: EditorMode): SourceSpecification {
-    const source = (this.state || {}).source || {}
+    const source = (this.state || {}).source || {};
     const {protocol} = window.location;
 
     switch(mode) {
-    case 'pmtiles_vector': return {
-      type: 'vector',
-      url: `${protocol}//localhost:3000/file.pmtiles`
-    }
-    case 'geojson_url': return {
-      type: 'geojson',
-      data: `${protocol}//localhost:3000/geojson.json`
-    }
-    case 'geojson_json': return {
-      type: 'geojson',
-      cluster: (source as GeoJSONSourceSpecification).cluster || false,
-      data: ''
-    }
-    case 'tilejson_vector': return {
-      type: 'vector',
-      url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
-    }
-    case 'tile_vector': return {
-      type: 'vector',
-      tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
-      minzoom: (source as VectorSourceSpecification).minzoom || 0,
-      maxzoom: (source as VectorSourceSpecification).maxzoom || 14,
-      scheme: (source as VectorSourceSpecification).scheme || 'xyz'
-    }
-    case 'tilejson_raster': return {
-      type: 'raster',
-      url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
-    }
-    case 'tile_raster': return {
-      type: 'raster',
-      tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
-      minzoom: (source as RasterSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
-      scheme: (source as RasterSourceSpecification).scheme || 'xyz',
-      tileSize: (source as RasterSourceSpecification).tileSize || 512,
-    }
-    case 'tilejson_raster-dem': return {
-      type: 'raster-dem',
-      url: (source as RasterDEMSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
-    }
-    case 'tilexyz_raster-dem': return {
-      type: 'raster-dem',
-      tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
-      minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14,
-      tileSize: (source as RasterDEMSourceSpecification).tileSize || 512
-    }
-    case 'image': return {
-      type: 'image',
-      url: `${protocol}//localhost:3000/image.png`,
-      coordinates: [
-        [0,0],
-        [0,0],
-        [0,0],
-        [0,0],
-      ],
-    }
-    case 'video': return {
-      type: 'video',
-      urls: [
-        `${protocol}//localhost:3000/movie.mp4`
-      ],
-      coordinates: [
-        [0,0],
-        [0,0],
-        [0,0],
-        [0,0],
-      ],
-    }
-    default: return {} as any
+      case "pmtiles_vector": return {
+        type: "vector",
+        url: `${protocol}//localhost:3000/file.pmtiles`
+      };
+      case "geojson_url": return {
+        type: "geojson",
+        data: `${protocol}//localhost:3000/geojson.json`
+      };
+      case "geojson_json": return {
+        type: "geojson",
+        cluster: (source as GeoJSONSourceSpecification).cluster || false,
+        data: ""
+      };
+      case "tilejson_vector": return {
+        type: "vector",
+        url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
+      };
+      case "tile_vector": return {
+        type: "vector",
+        tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+        minzoom: (source as VectorSourceSpecification).minzoom || 0,
+        maxzoom: (source as VectorSourceSpecification).maxzoom || 14,
+        scheme: (source as VectorSourceSpecification).scheme || "xyz"
+      };
+      case "tilejson_raster": return {
+        type: "raster",
+        url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
+      };
+      case "tile_raster": return {
+        type: "raster",
+        tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
+        minzoom: (source as RasterSourceSpecification).minzoom || 0,
+        maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
+        scheme: (source as RasterSourceSpecification).scheme || "xyz",
+        tileSize: (source as RasterSourceSpecification).tileSize || 512,
+      };
+      case "tilejson_raster-dem": return {
+        type: "raster-dem",
+        url: (source as RasterDEMSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
+      };
+      case "tilexyz_raster-dem": return {
+        type: "raster-dem",
+        tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
+        minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
+        maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14,
+        tileSize: (source as RasterDEMSourceSpecification).tileSize || 512
+      };
+      case "image": return {
+        type: "image",
+        url: `${protocol}//localhost:3000/image.png`,
+        coordinates: [
+          [0,0],
+          [0,0],
+          [0,0],
+          [0,0],
+        ],
+      };
+      case "video": return {
+        type: "video",
+        urls: [
+          `${protocol}//localhost:3000/movie.mp4`
+        ],
+        coordinates: [
+          [0,0],
+          [0,0],
+          [0,0],
+          [0,0],
+        ],
+      };
+      default: return {} as any;
     }
   }
 
   onAdd = () => {
     const {source, sourceId} = this.state;
     this.props.onAdd(sourceId, source);
-  }
+  };
 
   onChangeSource = (source: SourceSpecification) => {
     this.setState({source});
-  }
+  };
 
   render() {
     const t = this.props.t;
@@ -238,17 +238,17 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
         label={t("Source Type")}
         fieldSpec={sourceTypeFieldSpec}
         options={[
-          ['geojson_json', t('GeoJSON (JSON)')],
-          ['geojson_url', t('GeoJSON (URL)')],
-          ['tilejson_vector', t('Vector (TileJSON URL)')],
-          ['tile_vector', t('Vector (Tile URLs)')],
-          ['tilejson_raster', t('Raster (TileJSON URL)')],
-          ['tile_raster', t('Raster (Tile URLs)')],
-          ['tilejson_raster-dem', t('Raster DEM (TileJSON URL)')],
-          ['tilexyz_raster-dem', t('Raster DEM (XYZ URLs)')],
-          ['pmtiles_vector', t('Vector (PMTiles)')],
-          ['image', t('Image')],
-          ['video', t('Video')],
+          ["geojson_json", t("GeoJSON (JSON)")],
+          ["geojson_url", t("GeoJSON (URL)")],
+          ["tilejson_vector", t("Vector (TileJSON URL)")],
+          ["tile_vector", t("Vector (Tile URLs)")],
+          ["tilejson_raster", t("Raster (TileJSON URL)")],
+          ["tile_raster", t("Raster (Tile URLs)")],
+          ["tilejson_raster-dem", t("Raster DEM (TileJSON URL)")],
+          ["tilexyz_raster-dem", t("Raster DEM (XYZ URLs)")],
+          ["pmtiles_vector", t("Vector (PMTiles)")],
+          ["image", t("Image")],
+          ["video", t("Video")],
         ]}
         onChange={mode => this.setState({mode: mode as EditorMode, source: this.defaultSource(mode as EditorMode)})}
         value={this.state.mode as string}
@@ -266,7 +266,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
       >
         {t("Add Source")}
       </InputButton>
-    </div>
+    </div>;
   }
 }
 
@@ -279,16 +279,16 @@ type ModalSourcesInternalProps = {
 
 class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
   stripTitle(source: SourceSpecification & {title?: string}): SourceSpecification {
-    const strippedSource = {...source}
-    delete strippedSource['title']
-    return strippedSource
+    const strippedSource = {...source};
+    delete strippedSource["title"];
+    return strippedSource;
   }
 
   render() {
     const {t, mapStyle} = this.props;
     const i18nProps = {t, i18n: this.props.i18n, tReady: this.props.tReady};
     const activeSources = Object.keys(mapStyle.sources).map(sourceId => {
-      const source = mapStyle.sources[sourceId]
+      const source = mapStyle.sources[sourceId];
       return <ActiveModalSourcesTypeEditor
         key={sourceId}
         sourceId={sourceId}
@@ -296,8 +296,8 @@ class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
         onChange={(src: SourceSpecification) => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
         onDelete={() => this.props.onStyleChanged(deleteSource(mapStyle, sourceId))}
         {...i18nProps}
-      />
-    })
+      />;
+    });
 
     const tilesetOptions = Object.keys(publicSources).filter((sourceId: string) => !(sourceId in mapStyle.sources)).map((sourceId: string) => {
       const source = publicSources[sourceId as keyof typeof publicSources] as SourceSpecification & {title: string};
@@ -307,14 +307,14 @@ class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
         type={source.type}
         title={source.title}
         onSelect={() => this.props.onStyleChanged(addSource(mapStyle, sourceId, this.stripTitle(source)))}
-      />
-    })
+      />;
+    });
 
     return <Modal
       data-wd-key="modal:sources"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={t('Sources')}
+      title={t("Sources")}
     >
       <section className="maputnik-modal-section">
         <h1>{t("Active Sources")}</h1>
@@ -339,7 +339,7 @@ class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
           {...i18nProps}
         />
       </section>
-    </Modal>
+    </Modal>;
   }
 }
 
diff --git a/src/components/modals/ModalSourcesTypeEditor.tsx b/src/components/modals/ModalSourcesTypeEditor.tsx
index d70a3eaf..075ab4f3 100644
--- a/src/components/modals/ModalSourcesTypeEditor.tsx
+++ b/src/components/modals/ModalSourcesTypeEditor.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import {latest} from '@maplibre/maplibre-gl-style-spec'
-import { WithTranslation, withTranslation } from 'react-i18next';
-import { TFunction } from 'i18next'
+import React from "react";
+import {latest} from "@maplibre/maplibre-gl-style-spec";
+import { type WithTranslation, withTranslation } from "react-i18next";
+import { type TFunction } from "i18next";
 
-import Block from '../Block'
-import FieldUrl from '../FieldUrl'
-import FieldNumber from '../FieldNumber'
-import FieldSelect from '../FieldSelect'
-import FieldDynamicArray from '../FieldDynamicArray'
-import FieldArray from '../FieldArray'
-import FieldJson from '../FieldJson'
-import FieldCheckbox from '../FieldCheckbox'
+import Block from "../Block";
+import FieldUrl from "../FieldUrl";
+import FieldNumber from "../FieldNumber";
+import FieldSelect from "../FieldSelect";
+import FieldDynamicArray from "../FieldDynamicArray";
+import FieldArray from "../FieldArray";
+import FieldJson from "../FieldJson";
+import FieldCheckbox from "../FieldCheckbox";
 
 
 export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
@@ -38,7 +38,7 @@ class TileJSONSourceEditor extends React.Component<TileJSONSourceEditorProps> {
         })}
       />
       {this.props.children}
-    </div>
+    </div>;
   }
 }
 
@@ -47,7 +47,7 @@ type TileURLSourceEditorProps = {
     tiles: string[]
     minzoom: number
     maxzoom: number
-    scheme: 'xyz' | 'tms'
+    scheme: "xyz" | "tms"
   }
   onChange(...args: unknown[]): unknown
   children?: React.ReactNode
@@ -58,7 +58,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
     this.props.onChange({
       ...this.props.source,
       tiles,
-    })
+    });
   }
 
   renderTileUrls() {
@@ -69,7 +69,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
       type="url"
       value={tiles}
       onChange={this.changeTileUrls.bind(this)}
-    />
+    />;
   }
 
   render() {
@@ -80,8 +80,8 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
         label={t("Scheme Type")}
         fieldSpec={latest.source_vector.scheme}
         options={[
-          ['xyz', 'xyz (Slippy map tilenames scheme)'],
-          ['tms', 'tms (OSGeo spec scheme)'],
+          ["xyz", "xyz (Slippy map tilenames scheme)"],
+          ["tms", "tms (OSGeo spec scheme)"],
         ]}
         onChange={scheme => this.props.onChange({
           ...this.props.source,
@@ -109,7 +109,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
         })}
       />
       {this.props.children}
-    </div>
+    </div>;
 
   }
 }
@@ -140,7 +140,7 @@ class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
         ...this.props.source,
         coordinates,
       });
-    }
+    };
 
     return <div>
       <FieldUrl
@@ -165,7 +165,7 @@ class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
           />
         );
       })}
-    </div>
+    </div>;
   }
 }
 
@@ -188,14 +188,14 @@ class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
         ...this.props.source,
         coordinates,
       });
-    }
+    };
 
     const changeUrls = (urls: string[]) => {
       this.props.onChange({
         ...this.props.source,
         urls,
       });
-    }
+    };
 
     return <div>
       <FieldDynamicArray
@@ -219,7 +219,7 @@ class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
           />
         );
       })}
-    </div>
+    </div>;
   }
 }
 
@@ -241,7 +241,7 @@ class GeoJSONSourceUrlEditor extends React.Component<GeoJSONSourceUrlEditorProps
         ...this.props.source,
         data: data
       })}
-    />
+    />;
   }
 }
 
@@ -270,21 +270,21 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
             this.props.onChange({
               ...this.props.source,
               data,
-            })
+            });
           }}
         />
       </Block>
       <FieldCheckbox
-        label={t('Cluster')}
+        label={t("Cluster")}
         value={this.props.source.cluster}
         onChange={cluster => {
           this.props.onChange({
             ...this.props.source,
             cluster: cluster,
-          })
+          });
         }}
       />
-    </div>
+    </div>;
   }
 }
 
@@ -311,7 +311,7 @@ class PMTilesSourceEditor extends React.Component<PMTilesSourceEditorProps> {
         })}
       />
       {this.props.children}
-    </div>
+    </div>;
   }
 }
 
@@ -332,50 +332,50 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
       tReady: this.props.tReady,
     };
     switch(this.props.mode) {
-    case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
-    case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...commonProps} />
-    case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
-    case 'tile_vector': return <TileURLSourceEditor {...commonProps} />
-    case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
-    case 'tile_raster': return <TileURLSourceEditor {...commonProps}>
-      <FieldNumber
-        label={t("Tile Size")}
-        fieldSpec={latest.source_raster.tileSize}
-        onChange={tileSize => this.props.onChange({
-          ...this.props.source,
-          tileSize: tileSize
-        })}
-        value={this.props.source.tileSize || latest.source_raster.tileSize.default}
-        data-wd-key="modal:sources.add.tile_size"
-      />
-    </TileURLSourceEditor>
-    case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
-    case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
-      <FieldNumber
-        label={t("Tile Size")}
-        fieldSpec={latest.source_raster_dem.tileSize}
-        onChange={tileSize => this.props.onChange({
-          ...this.props.source,
-          tileSize: tileSize
-        })}
-        value={this.props.source.tileSize || latest.source_raster_dem.tileSize.default}
-        data-wd-key="modal:sources.add.tile_size"
-      />
-      <FieldSelect
-        label={t("Encoding")}
-        fieldSpec={latest.source_raster_dem.encoding}
-        options={Object.keys(latest.source_raster_dem.encoding.values)}
-        onChange={encoding => this.props.onChange({
-          ...this.props.source,
-          encoding: encoding
-        })}
-        value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
-      />
-    </TileURLSourceEditor>
-    case 'pmtiles_vector': return <PMTilesSourceEditor {...commonProps} />
-    case 'image': return <ImageSourceEditor {...commonProps} />
-    case 'video': return <VideoSourceEditor {...commonProps} />
-    default: return null
+      case "geojson_url": return <GeoJSONSourceUrlEditor {...commonProps} />;
+      case "geojson_json": return <GeoJSONSourceFieldJsonEditor {...commonProps} />;
+      case "tilejson_vector": return <TileJSONSourceEditor {...commonProps} />;
+      case "tile_vector": return <TileURLSourceEditor {...commonProps} />;
+      case "tilejson_raster": return <TileJSONSourceEditor {...commonProps} />;
+      case "tile_raster": return <TileURLSourceEditor {...commonProps}>
+        <FieldNumber
+          label={t("Tile Size")}
+          fieldSpec={latest.source_raster.tileSize}
+          onChange={tileSize => this.props.onChange({
+            ...this.props.source,
+            tileSize: tileSize
+          })}
+          value={this.props.source.tileSize || latest.source_raster.tileSize.default}
+          data-wd-key="modal:sources.add.tile_size"
+        />
+      </TileURLSourceEditor>;
+      case "tilejson_raster-dem": return <TileJSONSourceEditor {...commonProps} />;
+      case "tilexyz_raster-dem": return <TileURLSourceEditor {...commonProps}>
+        <FieldNumber
+          label={t("Tile Size")}
+          fieldSpec={latest.source_raster_dem.tileSize}
+          onChange={tileSize => this.props.onChange({
+            ...this.props.source,
+            tileSize: tileSize
+          })}
+          value={this.props.source.tileSize || latest.source_raster_dem.tileSize.default}
+          data-wd-key="modal:sources.add.tile_size"
+        />
+        <FieldSelect
+          label={t("Encoding")}
+          fieldSpec={latest.source_raster_dem.encoding}
+          options={Object.keys(latest.source_raster_dem.encoding.values)}
+          onChange={encoding => this.props.onChange({
+            ...this.props.source,
+            encoding: encoding
+          })}
+          value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
+        />
+      </TileURLSourceEditor>;
+      case "pmtiles_vector": return <PMTilesSourceEditor {...commonProps} />;
+      case "image": return <ImageSourceEditor {...commonProps} />;
+      case "video": return <VideoSourceEditor {...commonProps} />;
+      default: return null;
     }
   }
 }
diff --git a/src/index.jsx b/src/index.jsx
index e479a46b..0555be43 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,14 +1,14 @@
 import { IconContext } from "react-icons";
-import { createRoot } from 'react-dom/client';
+import { createRoot } from "react-dom/client";
 
-import './favicon.ico'
-import './styles/index.scss'
-import './i18n';
-import App from './components/App';
+import "./favicon.ico";
+import "./styles/index.scss";
+import "./i18n";
+import App from "./components/App";
 
 const root = createRoot(document.querySelector("#app"));
 root.render(
-  <IconContext.Provider value={{className: 'react-icons'}}>
+  <IconContext.Provider value={{className: "react-icons"}}>
     <App/>
   </IconContext.Provider>
 );
diff --git a/src/libs/accessibility.ts b/src/libs/accessibility.ts
index 84091653..14eef302 100644
--- a/src/libs/accessibility.ts
+++ b/src/libs/accessibility.ts
@@ -1,8 +1,8 @@
-import throttle from 'lodash.throttle'
+import throttle from "lodash.throttle";
 
 // Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
 const reducedMotionEnabled = throttle(() => {
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-}, 3000)
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}, 3000);
 
-export { reducedMotionEnabled }
+export { reducedMotionEnabled };
diff --git a/src/libs/codemirror-mgl.ts b/src/libs/codemirror-mgl.ts
index f078e39b..242d3b6e 100644
--- a/src/libs/codemirror-mgl.ts
+++ b/src/libs/codemirror-mgl.ts
@@ -1,7 +1,7 @@
-import {parse} from '@prantlf/jsonlint';
-import CodeMirror, { MarkerRange } from 'codemirror';
-import jsonToAst from 'json-to-ast';
-import {expression, validateStyleMin} from '@maplibre/maplibre-gl-style-spec';
+import {parse} from "@prantlf/jsonlint";
+import CodeMirror, { type MarkerRange } from "codemirror";
+import jsonToAst from "json-to-ast";
+import {expression, validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
 
 type MarkerRangeWithMessage = MarkerRange & {message: string};
 
@@ -90,7 +90,7 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
           newNode = newNode.value;
         }
       }
-      return getArrayPositionalFromAst(newNode, path.slice(1))
+      return getArrayPositionalFromAst(newNode, path.slice(1));
     }
   }
 
@@ -121,12 +121,12 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
             // Remove the 'layers[0].' as we're validating the layer only here
             const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
             return {
-              name: '',
+              name: "",
               key: errMessageParts[0],
               message: errMessageParts[1],
             };
           })
-      }
+      };
     }
   }
   else if (context === "expression") {
@@ -147,11 +147,11 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
           from: CodeMirror.Pos(doc.firstLine(), 0),
           to: CodeMirror.Pos(doc.lastLine(), lastLineHandle.text.length),
           message: message,
-        }
+        };
         found.push(err);
       }
       else if (key) {
-        const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean)
+        const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
         const parsedError = getArrayPositionalFromAst(ast, path);
         if (!parsedError) {
           console.warn("Something went wrong parsing error:", error);
@@ -167,7 +167,7 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
           message: message,
         });
       }
-    })
+    });
   }
 
   return found;
diff --git a/src/libs/definitions.d.ts b/src/libs/definitions.d.ts
index b742e1de..00c2b58c 100644
--- a/src/libs/definitions.d.ts
+++ b/src/libs/definitions.d.ts
@@ -6,7 +6,7 @@ export type OnStyleChangedOpts = {
   save?: boolean;
   addRevision?: boolean;
   initialLoad?: boolean;
-}
+};
 
 export type OnStyleChangedCallback = (newStyle: StyleSpecificationWithId, opts: OnStyleChangedOpts={}) => void;
 
diff --git a/src/libs/diffmessage.ts b/src/libs/diffmessage.ts
index b2dcdce2..b3c31f3b 100644
--- a/src/libs/diffmessage.ts
+++ b/src/libs/diffmessage.ts
@@ -1,14 +1,14 @@
-import {diff} from '@maplibre/maplibre-gl-style-spec'
-import type {StyleSpecification} from 'maplibre-gl'
+import {diff} from "@maplibre/maplibre-gl-style-spec";
+import type {StyleSpecification} from "maplibre-gl";
 
 function diffMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
-  const changes = diff(beforeStyle, afterStyle)
-  return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' '))
+  const changes = diff(beforeStyle, afterStyle);
+  return changes.map(cmd => cmd.command + " " + cmd.args.join(" "));
 }
 
 export function undoMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
-  return diffMessages(beforeStyle, afterStyle).map(m => 'Undo ' + m)
+  return diffMessages(beforeStyle, afterStyle).map(m => "Undo " + m);
 }
 export function redoMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
-  return diffMessages(beforeStyle, afterStyle).map(m => 'Redo ' + m)
+  return diffMessages(beforeStyle, afterStyle).map(m => "Redo " + m);
 }
diff --git a/src/libs/field-spec-additional.ts b/src/libs/field-spec-additional.ts
index 97de17b5..982eb732 100644
--- a/src/libs/field-spec-additional.ts
+++ b/src/libs/field-spec-additional.ts
@@ -1,4 +1,4 @@
-import { TFunction } from "i18next";
+import { type TFunction } from "i18next";
 
 const spec = (t: TFunction) => ({
   maputnik: {
@@ -31,6 +31,6 @@ const spec = (t: TFunction) => ({
       doc: t("Choose the default Maputnik renderer for this style.")
     },
   }
-})
+});
 
 export default spec;
diff --git a/src/libs/filterops.ts b/src/libs/filterops.ts
index 49e4195d..42291f37 100644
--- a/src/libs/filterops.ts
+++ b/src/libs/filterops.ts
@@ -1,7 +1,7 @@
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
-export const combiningFilterOps = ['all', 'any', 'none'];
-export const setFilterOps = ['in', '!in'];
+export const combiningFilterOps = ["all", "any", "none"];
+export const setFilterOps = ["in", "!in"];
 export const otherFilterOps = Object
   .keys(latest.filter_operator.values)
   .filter(op => combiningFilterOps.indexOf(op) < 0);
diff --git a/src/libs/highlight.ts b/src/libs/highlight.ts
index 511e35e6..ea5d6991 100644
--- a/src/libs/highlight.ts
+++ b/src/libs/highlight.ts
@@ -1,42 +1,42 @@
-import stylegen from '@maplibre/maplibre-gl-inspect/lib/stylegen'
-import colors from '@maplibre/maplibre-gl-inspect/lib/colors'
-import type {FilterSpecification,LayerSpecification } from 'maplibre-gl'
+import stylegen from "@maplibre/maplibre-gl-inspect/lib/stylegen";
+import colors from "@maplibre/maplibre-gl-inspect/lib/colors";
+import type {FilterSpecification,LayerSpecification } from "maplibre-gl";
 
 export type HighlightedLayer = LayerSpecification & {filter?: FilterSpecification};
 
 function changeLayer(l: HighlightedLayer, layer: LayerSpecification) {
-  if(l.type === 'circle') {
-    l.paint!['circle-radius'] = 3
-  } else if(l.type === 'line') {
-    l.paint!['line-width'] = 2
+  if(l.type === "circle") {
+    l.paint!["circle-radius"] = 3;
+  } else if(l.type === "line") {
+    l.paint!["line-width"] = 2;
   }
 
   if("filter" in layer) {
-    l.filter = layer.filter
+    l.filter = layer.filter;
   } else {
-    delete l['filter']
+    delete l["filter"];
   }
-  l.id = l.id + '_highlight'
-  return l
+  l.id = l.id + "_highlight";
+  return l;
 }
 
 export function colorHighlightedLayer(layer?: LayerSpecification): HighlightedLayer | null {
-  if(!layer || layer.type === 'background' || layer.type === 'raster') return null
+  if(!layer || layer.type === "background" || layer.type === "raster") return null;
 
-  const sourceLayerId = layer['source-layer'] || ''
+  const sourceLayerId = layer["source-layer"] || "";
   const color = colors.brightColor(sourceLayerId, 1);
 
-  if(layer.type === "fill" || layer.type === 'fill-extrusion') {
-    return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer['source-layer']), layer)
+  if(layer.type === "fill" || layer.type === "fill-extrusion") {
+    return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer["source-layer"]), layer);
   }
 
-  if(layer.type === "symbol" || layer.type === 'circle') {
-    return changeLayer(stylegen.circleLayer(color, layer.source, layer['source-layer']), layer)
+  if(layer.type === "symbol" || layer.type === "circle") {
+    return changeLayer(stylegen.circleLayer(color, layer.source, layer["source-layer"]), layer);
   }
 
-  if(layer.type === 'line') {
-    return changeLayer(stylegen.lineLayer(color, layer.source, layer['source-layer']), layer)
+  if(layer.type === "line") {
+    return changeLayer(stylegen.lineLayer(color, layer.source, layer["source-layer"]), layer);
   }
 
-  return null
+  return null;
 }
diff --git a/src/libs/label-from-field-name.ts b/src/libs/label-from-field-name.ts
index d6e4a064..bc991240 100644
--- a/src/libs/label-from-field-name.ts
+++ b/src/libs/label-from-field-name.ts
@@ -1,10 +1,10 @@
-import capitalize from 'lodash.capitalize'
+import capitalize from "lodash.capitalize";
 
 export default function labelFromFieldName(fieldName: string) {
   let label;
-  const parts = fieldName.split('-');
+  const parts = fieldName.split("-");
   if (parts.length > 1) {
-    label = fieldName.split('-').slice(1).join(' ');
+    label = fieldName.split("-").slice(1).join(" ");
   }
   else {
     label = fieldName;
diff --git a/src/libs/layer.ts b/src/libs/layer.ts
index 263f311c..f364fcad 100644
--- a/src/libs/layer.ts
+++ b/src/libs/layer.ts
@@ -1,27 +1,27 @@
-import {latest} from '@maplibre/maplibre-gl-style-spec'
-import { LayerSpecification } from 'maplibre-gl'
+import {latest} from "@maplibre/maplibre-gl-style-spec";
+import { type LayerSpecification } from "maplibre-gl";
 
 export function changeType(layer: LayerSpecification, newType: string) {
-  const changedPaintProps: LayerSpecification["paint"] = { ...layer.paint }
+  const changedPaintProps: LayerSpecification["paint"] = { ...layer.paint };
   Object.keys(changedPaintProps).forEach(propertyName => {
-    if(!(propertyName in latest['paint_' + newType])) {
-      delete changedPaintProps[propertyName as keyof LayerSpecification["paint"]]
+    if(!(propertyName in latest["paint_" + newType])) {
+      delete changedPaintProps[propertyName as keyof LayerSpecification["paint"]];
     }
-  })
+  });
 
-  const changedLayoutProps: LayerSpecification["layout"] = { ...layer.layout }
+  const changedLayoutProps: LayerSpecification["layout"] = { ...layer.layout };
   Object.keys(changedLayoutProps).forEach(propertyName => {
-    if(!(propertyName in latest['layout_' + newType])) {
-      delete changedLayoutProps[propertyName as keyof LayerSpecification["layout"]]
+    if(!(propertyName in latest["layout_" + newType])) {
+      delete changedLayoutProps[propertyName as keyof LayerSpecification["layout"]];
     }
-  })
+  });
 
   return {
     ...layer,
     paint: changedPaintProps,
     layout: changedLayoutProps,
     type: newType,
-  }
+  };
 }
 
 /** A {@property} in either the paint our layout {@group} has changed
@@ -61,30 +61,30 @@ export function changeProperty(layer: LayerSpecification, group: keyof LayerSpec
           ...layer[group] as any,
           [property]: newValue
         }
-      }
+      };
     } else {
       return {
         ...layer,
         [property]: newValue
-      }
+      };
     }
   }
 }
 
 export function layerPrefix(name: string) {
-  return name.replace(' ', '-').replace('_', '-').split('-')[0]
+  return name.replace(" ", "-").replace("_", "-").split("-")[0];
 }
 
 export function findClosestCommonPrefix(layers: LayerSpecification[], idx: number) {
-  const currentLayerPrefix = layerPrefix(layers[idx].id)
-  let closestIdx = idx
+  const currentLayerPrefix = layerPrefix(layers[idx].id);
+  let closestIdx = idx;
   for (let i = idx; i > 0; i--) {
-    const previousLayerPrefix = layerPrefix(layers[i-1].id)
+    const previousLayerPrefix = layerPrefix(layers[i-1].id);
     if(previousLayerPrefix === currentLayerPrefix) {
-      closestIdx = i - 1
+      closestIdx = i - 1;
     } else {
-      return closestIdx
+      return closestIdx;
     }
   }
-  return closestIdx
+  return closestIdx;
 }
diff --git a/src/libs/layerwatcher.ts b/src/libs/layerwatcher.ts
index c0fb1f30..518411ae 100644
--- a/src/libs/layerwatcher.ts
+++ b/src/libs/layerwatcher.ts
@@ -1,11 +1,11 @@
-import throttle from 'lodash.throttle'
-import isEqual from 'lodash.isequal'
-import { Map } from 'maplibre-gl';
+import throttle from "lodash.throttle";
+import isEqual from "lodash.isequal";
+import { type Map } from "maplibre-gl";
 
 export type LayerWatcherOptions = {
   onSourcesChange?: (sources: { [sourceId: string]: string[] }) => void;
   onVectorLayersChange?: (vectorLayers: { [vectorLayerId: string]: { [propertyName: string]: { [propertyValue: string]: {} } } }) => void;
-}
+};
 
 /** Listens to map events to build up a store of available vector
  * layers contained in the tiles */
@@ -17,65 +17,65 @@ export default class LayerWatcher {
   _vectorLayers: { [vectorLayerId: string]: { [propertyName: string]: { [propertyValue: string]: {} } } };
 
   constructor(opts: LayerWatcherOptions = {}) {
-    this.onSourcesChange = opts.onSourcesChange || (() => {})
-    this.onVectorLayersChange = opts.onVectorLayersChange || (() => {})
+    this.onSourcesChange = opts.onSourcesChange || (() => {});
+    this.onVectorLayersChange = opts.onVectorLayersChange || (() => {});
 
-    this._sources = {}
-    this._vectorLayers = {}
+    this._sources = {};
+    this._vectorLayers = {};
 
     // Since we scan over all features we want to avoid this as much as
     // possible and only do it after a batch of data has loaded because
     // we only care eventuall about knowing the fields in the vector layers
-    this.throttledAnalyzeVectorLayerFields = throttle(this.analyzeVectorLayerFields, 5000)
+    this.throttledAnalyzeVectorLayerFields = throttle(this.analyzeVectorLayerFields, 5000);
   }
 
   analyzeMap(map: Map) {
-    const previousSources = { ...this._sources }
+    const previousSources = { ...this._sources };
 
     Object.keys(map.style.sourceCaches).forEach(sourceId => {
       //NOTE: This heavily depends on the internal API of Maplibre GL
       //so this breaks between Maplibre GL JS releases
       this._sources[sourceId] = map.style.sourceCaches[sourceId]._source.vectorLayerIds as string[];
-    })
+    });
 
     if(!isEqual(previousSources, this._sources)) {
-      this.onSourcesChange(this._sources)
+      this.onSourcesChange(this._sources);
     }
 
-    this.throttledAnalyzeVectorLayerFields(map)
+    this.throttledAnalyzeVectorLayerFields(map);
   }
 
   analyzeVectorLayerFields(map: Map) {
-    const previousVectorLayers = { ...this._vectorLayers }
+    const previousVectorLayers = { ...this._vectorLayers };
 
     Object.keys(this._sources).forEach(sourceId => {
       (this._sources[sourceId] || []).forEach(vectorLayerId => {
-        const knownProperties = this._vectorLayers[vectorLayerId] || {}
-        const params = { sourceLayer: vectorLayerId }
+        const knownProperties = this._vectorLayers[vectorLayerId] || {};
+        const params = { sourceLayer: vectorLayerId };
         map.querySourceFeatures(sourceId, params as any).forEach(feature => {
           Object.keys(feature.properties).forEach(propertyName => {
-            const knownPropertyValues = knownProperties[propertyName] || {}
-            knownPropertyValues[feature.properties[propertyName]] = {}
-            knownProperties[propertyName] = knownPropertyValues
-          })
-        })
+            const knownPropertyValues = knownProperties[propertyName] || {};
+            knownPropertyValues[feature.properties[propertyName]] = {};
+            knownProperties[propertyName] = knownPropertyValues;
+          });
+        });
 
-        this._vectorLayers[vectorLayerId] = knownProperties
-      })
-    })
+        this._vectorLayers[vectorLayerId] = knownProperties;
+      });
+    });
 
     if(!isEqual(previousVectorLayers, this._vectorLayers)) {
-      this.onVectorLayersChange(this._vectorLayers)
+      this.onVectorLayersChange(this._vectorLayers);
     }
 
   }
 
   /** Access all known sources and their vector tile ids */
   get sources() {
-    return this._sources
+    return this._sources;
   }
 
   get vectorLayers() {
-    return this._vectorLayers
+    return this._vectorLayers;
   }
 }
diff --git a/src/libs/maplibre-rtl.ts b/src/libs/maplibre-rtl.ts
index d1e4ca46..7c172159 100644
--- a/src/libs/maplibre-rtl.ts
+++ b/src/libs/maplibre-rtl.ts
@@ -1,3 +1,3 @@
-import MapLibreGl from "maplibre-gl"
+import MapLibreGl from "maplibre-gl";
 
-MapLibreGl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js', false);
+MapLibreGl.setRTLTextPlugin("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js", false);
diff --git a/src/libs/metadata.ts b/src/libs/metadata.ts
index dcc01243..fde41f74 100644
--- a/src/libs/metadata.ts
+++ b/src/libs/metadata.ts
@@ -1,44 +1,44 @@
-import npmurl from 'url'
+import npmurl from "url";
 
 function loadJSON(url: string, defaultValue: any, cb: (...args: any[]) => void) {
   fetch(url, {
-    mode: 'cors',
+    mode: "cors",
     credentials: "same-origin"
   })
     .then((response) => {
       if (!response.ok) {
-        throw new Error('Failed to load metadata for ' + url);
+        throw new Error("Failed to load metadata for " + url);
       }
       return response.json();
     })
     .then((body) => {
-      cb(body)
+      cb(body);
     })
     .catch(() => {
-      console.warn('Can not load metadata for ' + url + ', using default value ' + defaultValue);
-      cb(defaultValue)
-    })
+      console.warn("Can not load metadata for " + url + ", using default value " + defaultValue);
+      cb(defaultValue);
+    });
 }
 
 export function downloadGlyphsMetadata(urlTemplate: string, cb: (...args: any[]) => void) {
-  if(!urlTemplate) return cb([])
+  if(!urlTemplate) return cb([]);
 
   // Special handling because Tileserver GL serves the fontstacks metadata differently
   // https://github.com/klokantech/tileserver-gl/pull/104#issuecomment-274444087
   const urlObj = npmurl.parse(urlTemplate);
-  const normPathPart = '/%7Bfontstack%7D/%7Brange%7D.pbf';
+  const normPathPart = "/%7Bfontstack%7D/%7Brange%7D.pbf";
   if(urlObj.pathname === normPathPart) {
-    urlObj.pathname = '/fontstacks.json';
+    urlObj.pathname = "/fontstacks.json";
   } else {
-    urlObj.pathname = urlObj.pathname!.replace(normPathPart, '.json');
+    urlObj.pathname = urlObj.pathname!.replace(normPathPart, ".json");
   }
   const url = npmurl.format(urlObj);
 
-  loadJSON(url, [], cb)
+  loadJSON(url, [], cb);
 }
 
 export function downloadSpriteMetadata(baseUrl: string, cb: (...args: any[]) => void) {
-  if(!baseUrl) return cb([])
-  const url = baseUrl + '.json'
-  loadJSON(url, {}, glyphs => cb(Object.keys(glyphs)))
+  if(!baseUrl) return cb([]);
+  const url = baseUrl + ".json";
+  loadJSON(url, {}, glyphs => cb(Object.keys(glyphs)));
 }
diff --git a/src/libs/non-source-layers.ts b/src/libs/non-source-layers.ts
index fa75dcfc..13f61026 100644
--- a/src/libs/non-source-layers.ts
+++ b/src/libs/non-source-layers.ts
@@ -1 +1 @@
-export const NON_SOURCE_LAYERS = ['background', 'raster', 'hillshade', 'heatmap', 'color-relief']
+export const NON_SOURCE_LAYERS = ["background", "raster", "hillshade", "heatmap", "color-relief"];
diff --git a/src/libs/revisions.ts b/src/libs/revisions.ts
index c03b68ad..848432f2 100644
--- a/src/libs/revisions.ts
+++ b/src/libs/revisions.ts
@@ -1,4 +1,4 @@
-import { StyleSpecificationWithId } from "./definitions";
+import { type StyleSpecificationWithId } from "./definitions";
 
 export class RevisionStore {
   revisions: StyleSpecificationWithId[];
@@ -6,16 +6,16 @@ export class RevisionStore {
 
 
   constructor(initialRevisions=[]) {
-    this.revisions = initialRevisions
-    this.currentIdx = initialRevisions.length - 1
+    this.revisions = initialRevisions;
+    this.currentIdx = initialRevisions.length - 1;
   }
 
   get latest() {
-    return this.revisions[this.revisions.length - 1]
+    return this.revisions[this.revisions.length - 1];
   }
 
   get current() {
-    return this.revisions[this.currentIdx]
+    return this.revisions[this.currentIdx];
   }
 
   addRevision(revision: StyleSpecificationWithId) {
@@ -23,8 +23,8 @@ export class RevisionStore {
     // and ensure current index is at end of list
     this.revisions = this.revisions.slice(0, this.currentIdx + 1);
 
-    this.revisions.push(revision)
-    this.currentIdx++
+    this.revisions.push(revision);
+    this.currentIdx++;
     //}
   }
 
@@ -37,7 +37,7 @@ export class RevisionStore {
 
   redo() {
     if(this.currentIdx < this.revisions.length - 1) {
-      this.currentIdx++
+      this.currentIdx++;
     }
     return this.current;
   }
diff --git a/src/libs/sort-numerically.ts b/src/libs/sort-numerically.ts
index e19261bf..f94cdc6b 100644
--- a/src/libs/sort-numerically.ts
+++ b/src/libs/sort-numerically.ts
@@ -3,10 +3,10 @@ export default function(num1: string | number, num2: string| number) {
   const b = +num2;
 
   if(a < b) {
-    return -1
+    return -1;
   }
   else if(a > b) {
-    return 1
+    return 1;
   }
   else {
     return 0;
diff --git a/src/libs/source.ts b/src/libs/source.ts
index a9737c70..4c092d9f 100644
--- a/src/libs/source.ts
+++ b/src/libs/source.ts
@@ -2,26 +2,26 @@ import type {SourceSpecification} from "maplibre-gl";
 import type {StyleSpecificationWithId} from "./definitions";
 
 export function deleteSource(mapStyle: StyleSpecificationWithId, sourceId: string) {
-  const remainingSources = { ...mapStyle.sources}
-  delete remainingSources[sourceId]
+  const remainingSources = { ...mapStyle.sources};
+  delete remainingSources[sourceId];
   return {
     ...mapStyle,
     sources: remainingSources
-  }
+  };
 }
 
 
 export function addSource(mapStyle: StyleSpecificationWithId, sourceId: string, source: SourceSpecification) {
-  return changeSource(mapStyle, sourceId, source)
+  return changeSource(mapStyle, sourceId, source);
 }
 
 export function changeSource(mapStyle: StyleSpecificationWithId, sourceId: string, source: SourceSpecification) {
   const changedSources = {
     ...mapStyle.sources,
     [sourceId]: source
-  }
+  };
   return {
     ...mapStyle,
     sources: changedSources
-  }
+  };
 }
diff --git a/src/libs/spec-helper.ts b/src/libs/spec-helper.ts
index a9f78bbf..304372cc 100644
--- a/src/libs/spec-helper.ts
+++ b/src/libs/spec-helper.ts
@@ -1,18 +1,18 @@
 /**
  * If we don't have a default value just make one up
  */
-export function findDefaultFromSpec(spec: { type: 'string' | 'color' | 'boolean' | 'array', default?: any }) {
-  if (Object.prototype.hasOwnProperty.call(spec, 'default')) {
+export function findDefaultFromSpec(spec: { type: "string" | "color" | "boolean" | "array", default?: any }) {
+  if (Object.prototype.hasOwnProperty.call(spec, "default")) {
     return spec.default;
   }
 
   const defaults = {
-    'color': '#000000',
-    'string': '',
-    'boolean': false,
-    'number': 0,
-    'array': [],
-  }
+    "color": "#000000",
+    "string": "",
+    "boolean": false,
+    "number": 0,
+    "array": [],
+  };
 
-  return defaults[spec.type] || '';
+  return defaults[spec.type] || "";
 }
diff --git a/src/libs/store/apistore.ts b/src/libs/store/apistore.ts
index 5357a52b..8bd4045c 100644
--- a/src/libs/store/apistore.ts
+++ b/src/libs/store/apistore.ts
@@ -1,11 +1,11 @@
-import style from '../style'
-import {format} from '@maplibre/maplibre-gl-style-spec'
-import ReconnectingWebSocket from 'reconnecting-websocket'
-import type {IStyleStore, OnStyleChangedCallback, StyleSpecificationWithId} from '../definitions'
+import style from "../style";
+import {format} from "@maplibre/maplibre-gl-style-spec";
+import ReconnectingWebSocket from "reconnecting-websocket";
+import type {IStyleStore, OnStyleChangedCallback, StyleSpecificationWithId} from "../definitions";
 
 export type ApiStyleStoreOptions = {
   onLocalStyleChange?: OnStyleChangedCallback
-}
+};
 
 export class ApiStyleStore implements IStyleStore {
 
@@ -15,51 +15,51 @@ export class ApiStyleStore implements IStyleStore {
   onLocalStyleChange: OnStyleChangedCallback;
 
   constructor(opts: ApiStyleStoreOptions) {
-    this.onLocalStyleChange = opts.onLocalStyleChange || (() => {})
-    const port = window.location.port
-    const host = 'localhost'
-    this.localUrl = `http://${host}:${port}`
-    this.websocketUrl = `ws://${host}:${port}/ws`
-    this.init = this.init.bind(this)
+    this.onLocalStyleChange = opts.onLocalStyleChange || (() => {});
+    const port = window.location.port;
+    const host = "localhost";
+    this.localUrl = `http://${host}:${port}`;
+    this.websocketUrl = `ws://${host}:${port}/ws`;
+    this.init = this.init.bind(this);
   }
 
   async init(): Promise<void> {
     try {
-      const response = await fetch(this.localUrl + '/styles', {mode: 'cors'});
+      const response = await fetch(this.localUrl + "/styles", {mode: "cors"});
       const body = await response.json();
       const styleIds = body;
-      this.latestStyleId = styleIds[0]
+      this.latestStyleId = styleIds[0];
       this.notifyLocalChanges();
     } catch {
-      throw new Error('Can not connect to style API');
+      throw new Error("Can not connect to style API");
     }
   }
 
   notifyLocalChanges() {
-    const connection = new ReconnectingWebSocket(this.websocketUrl)
+    const connection = new ReconnectingWebSocket(this.websocketUrl);
     connection.onmessage = e => {
-      if(!e.data) return
-      console.log('Received style update from API')
-      let parsedStyle = style.emptyStyle
+      if(!e.data) return;
+      console.log("Received style update from API");
+      let parsedStyle = style.emptyStyle;
       try {
-        parsedStyle = JSON.parse(e.data)
+        parsedStyle = JSON.parse(e.data);
       } catch(err) {
-        console.error(err)
+        console.error(err);
       }
-      const updatedStyle = style.ensureStyleValidity(parsedStyle)
-      this.onLocalStyleChange(updatedStyle)
-    }
+      const updatedStyle = style.ensureStyleValidity(parsedStyle);
+      this.onLocalStyleChange(updatedStyle);
+    };
   }
 
   async getLatestStyle(): Promise<StyleSpecificationWithId> {
     if(this.latestStyleId) {
-      const response = await fetch(this.localUrl + '/styles/' + this.latestStyleId, {
-        mode: 'cors',
+      const response = await fetch(this.localUrl + "/styles/" + this.latestStyleId, {
+        mode: "cors",
       });
       const body = await response.json();
       return style.ensureStyleValidity(body);
     } else {
-      throw new Error('No latest style available. You need to init the api backend first.')
+      throw new Error("No latest style available. You need to init the api backend first.");
     }
   }
 
@@ -71,18 +71,18 @@ export class ApiStyleStore implements IStyleStore {
       )
     );
 
-    const id = mapStyle.id
-    fetch(this.localUrl + '/styles/' + id, {
+    const id = mapStyle.id;
+    fetch(this.localUrl + "/styles/" + id, {
       method: "PUT",
-      mode: 'cors',
+      mode: "cors",
       headers: {
         "Content-Type": "application/json; charset=utf-8",
       },
       body: styleJSON
     })
       .catch(function(error) {
-        if(error) console.error(error)
-      })
-    return mapStyle
+        if(error) console.error(error);
+      });
+    return mapStyle;
   }
 }
diff --git a/src/libs/store/style-store-factory.ts b/src/libs/store/style-store-factory.ts
index f20657d7..ee9c0811 100644
--- a/src/libs/store/style-store-factory.ts
+++ b/src/libs/store/style-store-factory.ts
@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-import { IStyleStore, OnStyleChangedCallback } from "../definitions";
+import { type IStyleStore, type OnStyleChangedCallback } from "../definitions";
 import { getStyleUrlFromAddressbarAndRemoveItIfNeeded, loadStyleUrl } from "../urlopen";
 import { ApiStyleStore } from "./apistore";
 import { StyleStore } from "./stylestore";
@@ -8,7 +8,7 @@ export async function createStyleStore(onStyleChanged: OnStyleChangedCallback):
   const styleUrl = getStyleUrlFromAddressbarAndRemoveItIfNeeded();
   const useStyleUrl = styleUrl && window.confirm("Load style from URL: " + styleUrl + " and discard current changes?");
   let styleStore: IStyleStore;
-  if (import.meta.env.MODE === 'desktop' && !useStyleUrl) {
+  if (import.meta.env.MODE === "desktop" && !useStyleUrl) {
     const apiStyleStore = new ApiStyleStore({
       onLocalStyleChange: mapStyle => onStyleChanged(mapStyle, {save: false}),
     });
diff --git a/src/libs/store/stylestore.ts b/src/libs/store/stylestore.ts
index 49f5e469..b7629803 100644
--- a/src/libs/store/stylestore.ts
+++ b/src/libs/store/stylestore.ts
@@ -1,16 +1,16 @@
-import style from '../style'
-import {loadStyleUrl} from '../urlopen'
-import publicSources from '../../config/styles.json'
-import type {IStyleStore, StyleSpecificationWithId} from '../definitions'
+import style from "../style";
+import {loadStyleUrl} from "../urlopen";
+import publicSources from "../../config/styles.json";
+import type {IStyleStore, StyleSpecificationWithId} from "../definitions";
 
-const storagePrefix = "maputnik"
-const stylePrefix = 'style'
+const storagePrefix = "maputnik";
+const stylePrefix = "style";
 const storageKeys = {
-  latest: [storagePrefix, 'latest_style'].join(':'),
-  accessToken: [storagePrefix, 'access_token'].join(':')
-}
+  latest: [storagePrefix, "latest_style"].join(":"),
+  accessToken: [storagePrefix, "access_token"].join(":")
+};
 
-const defaultStyleUrl = publicSources[0].url
+const defaultStyleUrl = publicSources[0].url;
 
 // Fetch a default style via URL and return it or a fallback style via callback
 export function loadDefaultStyle(): Promise<StyleSpecificationWithId> {
@@ -19,35 +19,35 @@ export function loadDefaultStyle(): Promise<StyleSpecificationWithId> {
 
 // Return style ids and dates of all styles stored in local storage
 function loadStoredStyles() {
-  const styles = []
+  const styles = [];
   for (let i = 0; i < window.localStorage.length; i++) {
-    const key = window.localStorage.key(i)
+    const key = window.localStorage.key(i);
     if(isStyleKey(key!)) {
-      styles.push(fromKey(key!))
+      styles.push(fromKey(key!));
     }
   }
-  return styles
+  return styles;
 }
 
 function isStyleKey(key: string) {
-  const parts = key.split(":")
-  return parts.length === 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
+  const parts = key.split(":");
+  return parts.length === 3 && parts[0] === storagePrefix && parts[1] === stylePrefix;
 }
 
 // Load style id from key
 function fromKey(key: string) {
   if(!isStyleKey(key)) {
-    throw "Key is not a valid style key"
+    throw "Key is not a valid style key";
   }
 
-  const parts = key.split(":")
-  const styleId = parts[2]
-  return styleId
+  const parts = key.split(":");
+  const styleId = parts[2];
+  return styleId;
 }
 
 // Calculate key that identifies the style with a version
 function styleKey(styleId: string) {
-  return [storagePrefix, stylePrefix, styleId].join(":")
+  return [storagePrefix, stylePrefix, styleId].join(":");
 }
 
 // Manages many possible styles that are stored in the local storage
@@ -68,7 +68,7 @@ export class StyleStore implements IStyleStore {
     for (let i = 0; i < window.localStorage.length; i++) {
       const key = window.localStorage.key(i) as string;
       if(key.startsWith(storagePrefix)) {
-        window.localStorage.removeItem(key)
+        window.localStorage.removeItem(key);
       }
     }
   }
@@ -79,7 +79,7 @@ export class StyleStore implements IStyleStore {
       return loadDefaultStyle();
     }
     const styleId = window.localStorage.getItem(storageKeys.latest) as string;
-    const styleItem = window.localStorage.getItem(styleKey(styleId))
+    const styleItem = window.localStorage.getItem(styleKey(styleId));
 
     if (styleItem) {
       return JSON.parse(styleItem) as StyleSpecificationWithId;
@@ -89,30 +89,30 @@ export class StyleStore implements IStyleStore {
 
   // Save current style replacing previous version
   save(mapStyle: StyleSpecificationWithId) {
-    mapStyle = style.ensureStyleValidity(mapStyle)
-    const key = styleKey(mapStyle.id)
+    mapStyle = style.ensureStyleValidity(mapStyle);
+    const key = styleKey(mapStyle.id);
 
     const saveFn = () => {
-      window.localStorage.setItem(key, JSON.stringify(mapStyle))
-      window.localStorage.setItem(storageKeys.latest, mapStyle.id)
-    }
+      window.localStorage.setItem(key, JSON.stringify(mapStyle));
+      window.localStorage.setItem(storageKeys.latest, mapStyle.id);
+    };
 
     try {
-      saveFn()
+      saveFn();
     } catch (e) {
       // Handle quota exceeded error
       if (e instanceof DOMException && (
         e.code === 22 || // Firefox
         e.code === 1014 || // Firefox
-        e.name === 'QuotaExceededError' ||
-        e.name === 'NS_ERROR_DOM_QUOTA_REACHED'
+        e.name === "QuotaExceededError" ||
+        e.name === "NS_ERROR_DOM_QUOTA_REACHED"
       )) {
-        this.purge()
-        saveFn() // Retry after clearing
+        this.purge();
+        saveFn(); // Retry after clearing
       } else {
-        throw e
+        throw e;
       }
     }
-    return mapStyle
+    return mapStyle;
   }
 }
diff --git a/src/libs/style.ts b/src/libs/style.ts
index 31f8cf52..dcb7f25e 100644
--- a/src/libs/style.ts
+++ b/src/libs/style.ts
@@ -1,21 +1,21 @@
-import {derefLayers} from '@maplibre/maplibre-gl-style-spec'
-import type {StyleSpecification, LayerSpecification} from 'maplibre-gl'
-import tokens from '../config/tokens.json'
-import type {StyleSpecificationWithId} from './definitions'
+import {derefLayers} from "@maplibre/maplibre-gl-style-spec";
+import type {StyleSpecification, LayerSpecification} from "maplibre-gl";
+import tokens from "../config/tokens.json";
+import type {StyleSpecificationWithId} from "./definitions";
 
 // Empty style is always used if no style could be restored or fetched
 const emptyStyle = ensureStyleValidity({
   version: 8,
   sources: {},
   layers: [],
-})
+});
 
 function generateId() {
-  return Math.random().toString(36).substring(2, 9)
+  return Math.random().toString(36).substring(2, 9);
 }
 
 function ensureHasId(style: StyleSpecification & { id?: string }): StyleSpecificationWithId {
-  if(!('id' in style) || !style.id) {
+  if(!("id" in style) || !style.id) {
     style.id = generateId();
   }
   return style as StyleSpecificationWithId;
@@ -23,81 +23,81 @@ function ensureHasId(style: StyleSpecification & { id?: string }): StyleSpecific
 
 function ensureHasNoInteractive(style: StyleSpecificationWithId) {
   const changedLayers = style.layers.map(layer => {
-    const changedLayer: LayerSpecification & { interactive?: any } = { ...layer }
-    delete changedLayer.interactive
-    return changedLayer
-  })
+    const changedLayer: LayerSpecification & { interactive?: any } = { ...layer };
+    delete changedLayer.interactive;
+    return changedLayer;
+  });
 
   return {
     ...style,
     layers: changedLayers
-  }
+  };
 }
 
 function ensureHasNoRefs(style: StyleSpecificationWithId) {
   return {
     ...style,
     layers: derefLayers(style.layers)
-  }
+  };
 }
 
 function ensureStyleValidity(style: StyleSpecification): StyleSpecificationWithId {
-  return ensureHasNoInteractive(ensureHasNoRefs(ensureHasId(style)))
+  return ensureHasNoInteractive(ensureHasNoRefs(ensureHasId(style)));
 }
 
 function indexOfLayer(layers: LayerSpecification[], layerId: string) {
   for (let i = 0; i < layers.length; i++) {
     if(layers[i].id === layerId) {
-      return i
+      return i;
     }
   }
-  return null
+  return null;
 }
 
 function getAccessToken(sourceName: string, mapStyle: StyleSpecification, opts: {allowFallback?: boolean}) {
   const metadata = mapStyle.metadata || {} as any;
-  let accessToken = metadata[`maputnik:${sourceName}_access_token`]
+  let accessToken = metadata[`maputnik:${sourceName}_access_token`];
 
   if(opts.allowFallback && !accessToken) {
-    accessToken = tokens[sourceName as keyof typeof tokens]
+    accessToken = tokens[sourceName as keyof typeof tokens];
   }
 
   return accessToken;
 }
 
 function replaceSourceAccessToken(mapStyle: StyleSpecification, sourceName: string, opts={}) {
-  const source = mapStyle.sources[sourceName]
-  if(!source) return mapStyle
-  if(!("url" in source) || !source.url) return mapStyle
+  const source = mapStyle.sources[sourceName];
+  if(!source) return mapStyle;
+  if(!("url" in source) || !source.url) return mapStyle;
 
-  let authSourceName = sourceName
+  let authSourceName = sourceName;
   if(sourceName === "thunderforest_transport" || sourceName === "thunderforest_outdoors") {
-    authSourceName = "thunderforest"
+    authSourceName = "thunderforest";
   }
   else if (("url" in source) && source.url?.match(/\.stadiamaps\.com/)) {
     // The code currently usually assumes openmaptiles == MapTiler,
     // so we need to check the source URL.
-    authSourceName = "stadia"
+    authSourceName = "stadia";
   }
   else if (("url" in source) && source.url?.match(/\.locationiq\.com/)) {
-    authSourceName = "locationiq"
+    authSourceName = "locationiq";
   }
 
-  const accessToken = getAccessToken(authSourceName, mapStyle, opts)
+  const accessToken = getAccessToken(authSourceName, mapStyle, opts);
 
   if(!accessToken) {
     // Early exit.
     return mapStyle;
   }
 
-  let sourceUrl: string
+  let sourceUrl: string;
   if (authSourceName == "stadia") {
     // Stadia Maps does not always require an API key,
     // so there is no placeholder in our styles.
     // We append it at the end of the URL when exporting if necessary.
-    sourceUrl = `${source.url}?api_key=${accessToken}`
+    sourceUrl = `${source.url}?api_key=${accessToken}`;
   } else {
-    sourceUrl = source.url.replace('{key}', accessToken)
+    sourceUrl = source.url.replace("{key}", accessToken);
   }
 
   const changedSources = {
@@ -106,42 +106,42 @@ function replaceSourceAccessToken(mapStyle: StyleSpecification, sourceName: stri
       ...source,
       url: sourceUrl
     }
-  }
+  };
   const changedStyle = {
     ...mapStyle,
     sources: changedSources
-  }
-  return changedStyle
+  };
+  return changedStyle;
 }
 
 function replaceAccessTokens(mapStyle: StyleSpecification, opts={}) {
-  let changedStyle = mapStyle
+  let changedStyle = mapStyle;
 
   Object.keys(mapStyle.sources).forEach((sourceName) => {
     changedStyle = replaceSourceAccessToken(changedStyle, sourceName, opts);
-  })
+  });
 
   if (mapStyle.glyphs && (mapStyle.glyphs.match(/\.tilehosting\.com/) || mapStyle.glyphs.match(/\.maptiler\.com/))) {
     const newAccessToken = getAccessToken("openmaptiles", mapStyle, opts);
     if (newAccessToken) {
       changedStyle = {
         ...changedStyle,
-        glyphs: mapStyle.glyphs.replace('{key}', newAccessToken)
-      }
+        glyphs: mapStyle.glyphs.replace("{key}", newAccessToken)
+      };
     }
   }
 
-  return changedStyle
+  return changedStyle;
 }
 
 function stripAccessTokens(mapStyle: StyleSpecification) {
   const changedMetadata = {
     ...mapStyle.metadata as any
   };
-  delete changedMetadata['maputnik:openmaptiles_access_token'];
-  delete changedMetadata['maputnik:thunderforest_access_token'];
-  delete changedMetadata['maputnik:stadia_access_token'];
-  delete changedMetadata['maputnik:locationiq_access_token'];
+  delete changedMetadata["maputnik:openmaptiles_access_token"];
+  delete changedMetadata["maputnik:thunderforest_access_token"];
+  delete changedMetadata["maputnik:stadia_access_token"];
+  delete changedMetadata["maputnik:locationiq_access_token"];
   return {
     ...mapStyle,
     metadata: changedMetadata
@@ -156,4 +156,4 @@ export default {
   getAccessToken,
   replaceAccessTokens,
   stripAccessTokens,
-}
+};
diff --git a/src/libs/urlopen.ts b/src/libs/urlopen.ts
index b7426227..a793f081 100644
--- a/src/libs/urlopen.ts
+++ b/src/libs/urlopen.ts
@@ -1,27 +1,27 @@
-import style from './style'
-import { StyleSpecificationWithId } from './definitions';
+import style from "./style";
+import { type StyleSpecificationWithId } from "./definitions";
 
 export function getStyleUrlFromAddressbarAndRemoveItIfNeeded(): string | null {
   const initialUrl = new URL(window.location.href);
-  const styleUrl = initialUrl.searchParams.get('style');
+  const styleUrl = initialUrl.searchParams.get("style");
   if (styleUrl) {
-    initialUrl.searchParams.delete('style');
-    window.history.replaceState({}, document.title, initialUrl.toString())
+    initialUrl.searchParams.delete("style");
+    window.history.replaceState({}, document.title, initialUrl.toString());
   }
   return styleUrl;
 }
 
 export async function loadStyleUrl(styleUrl: string): Promise<StyleSpecificationWithId> {
-  console.log('Loading style', styleUrl)
+  console.log("Loading style", styleUrl);
   try {
     const response = await fetch(styleUrl, {
-      mode: 'cors',
+      mode: "cors",
       credentials: "same-origin"
     });
     const body = await response.json();
     return style.ensureStyleValidity(body);
   } catch {
-    console.warn('Could not fetch default style: ' + styleUrl)
-    return style.emptyStyle
+    console.warn("Could not fetch default style: " + styleUrl);
+    return style.emptyStyle;
   }
 }
diff --git a/src/libs/zoomcontrol.ts b/src/libs/zoomcontrol.ts
index 94c7795e..ee4749c6 100644
--- a/src/libs/zoomcontrol.ts
+++ b/src/libs/zoomcontrol.ts
@@ -1,4 +1,4 @@
-import {Map} from 'maplibre-gl';
+import {type Map} from "maplibre-gl";
 
 export default class ZoomControl {
   _map: Map| undefined = undefined;
@@ -9,8 +9,8 @@ export default class ZoomControl {
 
   onAdd(map: Map) {
     this._map = map;
-    this._container = document.createElement('div');
-    this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom";
     this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
     this.setLabel("Zoom:");
     this.addEventListeners();
@@ -31,9 +31,9 @@ export default class ZoomControl {
   }
 
   addEventListeners (){
-    this._map!.on('render', () => this.updateZoomLevel());
-    this._map!.on('zoomIn', () => this.updateZoomLevel());
-    this._map!.on('zoomOut', () => this.updateZoomLevel());
+    this._map!.on("render", () => this.updateZoomLevel());
+    this._map!.on("zoomIn", () => this.updateZoomLevel());
+    this._map!.on("zoomOut", () => this.updateZoomLevel());
   }
 
   onRemove() {