Update MapLibre dependencies, add terrain editing (#859)

This PR aims at updating MapLibre dependencies.

The main goal of this update is to allow adding terrain specification to
the editor.
This requires version 4 of maplibre so currently it will use the
pre-release.

cypress/e2e/modals.cy.ts

@@ -79,12 +79,12 @@ describe("modals", () => {
       when.click("nav:settings");
     });
 
-    describe("when click name", () => {
+    describe("when click name filed spec information", () => {
       beforeEach(() => {
         when.click("field-doc-button-Name");
       });
 
-      it("name", () => {
+      it("should show the spec information", () => {
         then(get.elementsText("spec-field-doc")).shouldInclude(
           "name for the style"
         );

package-lock.json

@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-        "@maplibre/maplibre-gl-style-spec": "^17.0.1",
+        "@maplibre/maplibre-gl-style-spec": "^20.1.0",
         "@mdi/js": "^6.6.96",
         "@mdi/react": "^1.5.0",
         "@typescript-eslint/eslint-plugin": "^6.16.0",
@@ -33,7 +33,7 @@
         "lodash.isequal": "^4.5.0",
         "lodash.throttle": "^4.1.1",
         "mapbox-gl-inspect": "^1.3.1",
-        "maplibre-gl": "^2.4.0",
+        "maplibre-gl": "^4.0.0-pre.4",
         "maputnik-design": "github:maputnik/design#172b06c",
         "ol": "^6.14.1",
         "ol-mapbox-style": "^7.1.1",
@@ -3306,28 +3306,64 @@
       }
     },
     "node_modules/@maplibre/maplibre-gl-style-spec": {
-      "version": "17.1.0",
+      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-17.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.1.0.tgz",
-      "integrity": "sha512-ie1GI7ceByOJ9u/xoqx9IMkFMo8FcvEzEQhx+GANviF7ARE4OhB8FBm17YYVPtMSRg3zE6J1Yxy3n97/d4HahA==",
+      "integrity": "sha512-iQLe6cAz6Nkw7GmTI3y0J5dq4WoA/FdobWibO0YR3LKk81cDx+6Z3TtoxKLIvn0Ss2c1leBpt6eHh/MalaZ/mg==",
       "dependencies": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-        "@mapbox/unitbezier": "^0.0.0",
+        "@mapbox/unitbezier": "^0.0.1",
-        "csscolorparser": "~1.0.2",
+        "json-stringify-pretty-compact": "^4.0.0",
-        "json-stringify-pretty-compact": "^2.0.0",
+        "minimist": "^1.2.8",
-        "minimist": "^1.2.5",
         "rw": "^1.3.3",
-        "sort-object": "^0.3.2"
+        "sort-object": "^3.0.3"
       },
       "bin": {
-        "gl-style-format": "bin/gl-style-format.js",
+        "gl-style-format": "dist/gl-style-format.mjs",
-        "gl-style-migrate": "bin/gl-style-migrate.js",
+        "gl-style-migrate": "dist/gl-style-migrate.mjs",
-        "gl-style-validate": "bin/gl-style-validate.js"
+        "gl-style-validate": "dist/gl-style-validate.mjs"
       }
     },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
     "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/json-stringify-pretty-compact": {
-      "version": "2.0.0",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
-      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
+      "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q=="
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/sort-asc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.2.0.tgz",
+      "integrity": "sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/sort-desc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.2.0.tgz",
+      "integrity": "sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/sort-object": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-3.0.3.tgz",
+      "integrity": "sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==",
+      "dependencies": {
+        "bytewise": "^1.1.0",
+        "get-value": "^2.0.2",
+        "is-extendable": "^0.1.1",
+        "sort-asc": "^0.2.0",
+        "sort-desc": "^0.2.0",
+        "union-value": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
     "node_modules/@mdi/js": {
       "version": "6.9.96",
@@ -5349,6 +5385,14 @@
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz",
       "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ=="
     },
+    "node_modules/@types/geojson-vt": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
+      "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -5684,6 +5728,14 @@
       "integrity": "sha512-p6skq756fJWiA59g2Uss+cMl6tpoDGuCBuxG0SI1t0NwJmYOU66LAMS6QiCgu7cUh3/hYCaMl5phcCW1JP5wOA==",
       "dev": true
     },
+    "node_modules/@types/supercluster": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
+      "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/tern": {
       "version": "0.23.9",
       "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
@@ -6521,6 +6573,14 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
@@ -6688,6 +6748,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ast-types": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
@@ -7277,6 +7345,23 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/bytewise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz",
+      "integrity": "sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==",
+      "dependencies": {
+        "bytewise-core": "^1.2.2",
+        "typewise": "^1.0.3"
+      }
+    },
+    "node_modules/bytewise-core": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bytewise-core/-/bytewise-core-1.2.3.tgz",
+      "integrity": "sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==",
+      "dependencies": {
+        "typewise-core": "^1.2"
+      }
+    },
     "node_modules/cachedir": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
@@ -9603,6 +9688,17 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "dev": true
     },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/extract-zip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -10303,6 +10399,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/getos": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
@@ -11106,6 +11210,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -11472,7 +11584,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12375,7 +12486,8 @@
     "node_modules/kdbush": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
-      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==",
+      "peer": true
     },
     "node_modules/keyv": {
       "version": "4.5.4",
@@ -12931,42 +13043,45 @@
       "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
     },
     "node_modules/maplibre-gl": {
-      "version": "2.4.0",
+      "version": "4.0.0-pre.4",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.0.0-pre.4.tgz",
-      "integrity": "sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==",
+      "integrity": "sha512-rY+8cqyFHEKrKPyxTSqBXb4B3VwEefKfyUPy9j6zUaG2dcvIWmDR/+YU8Y6FHv+Hq3GET1ubMnvyKlVwvRbsJg==",
-      "hasInstallScript": true,
       "dependencies": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
-        "@mapbox/mapbox-gl-supported": "^2.0.1",
         "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/tiny-sdf": "^2.0.5",
+        "@mapbox/tiny-sdf": "^2.0.6",
         "@mapbox/unitbezier": "^0.0.1",
         "@mapbox/vector-tile": "^1.3.1",
         "@mapbox/whoots-js": "^3.1.0",
-        "@types/geojson": "^7946.0.10",
+        "@maplibre/maplibre-gl-style-spec": "^20.0.0",
-        "@types/mapbox__point-geometry": "^0.1.2",
+        "@types/geojson": "^7946.0.13",
-        "@types/mapbox__vector-tile": "^1.3.0",
+        "@types/geojson-vt": "3.2.5",
-        "@types/pbf": "^3.0.2",
+        "@types/mapbox__point-geometry": "^0.1.4",
-        "csscolorparser": "~1.0.3",
+        "@types/mapbox__vector-tile": "^1.3.4",
+        "@types/pbf": "^3.0.5",
+        "@types/supercluster": "^7.1.3",
         "earcut": "^2.2.4",
         "geojson-vt": "^3.2.1",
         "gl-matrix": "^3.4.3",
         "global-prefix": "^3.0.0",
+        "kdbush": "^4.0.2",
         "murmurhash-js": "^1.0.0",
         "pbf": "^3.2.1",
-        "potpack": "^1.0.2",
+        "potpack": "^2.0.0",
         "quickselect": "^2.0.0",
-        "supercluster": "^7.1.5",
+        "supercluster": "^8.0.1",
         "tinyqueue": "^2.0.3",
         "vt-pbf": "^3.1.3"
+      },
+      "engines": {
+        "node": ">=16.14.0",
+        "npm": ">=8.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
       }
     },
-    "node_modules/maplibre-gl/node_modules/@mapbox/mapbox-gl-supported": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
-      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
-    },
     "node_modules/maplibre-gl/node_modules/@mapbox/tiny-sdf": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
@@ -12977,6 +13092,24 @@
       "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
       "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
     },
+    "node_modules/maplibre-gl/node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
+    "node_modules/maplibre-gl/node_modules/potpack": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+    },
+    "node_modules/maplibre-gl/node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/maputnik-design": {
       "version": "0.1.0",
       "resolved": "git+ssh://git@github.com/maputnik/design.git#172b06cb062a82f62bb7239474533a110915ef3e"
@@ -14863,7 +14996,8 @@
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
-      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "peer": true
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -16313,6 +16447,31 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/set-value/node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -16614,6 +16773,51 @@
       "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
       "dev": true
     },
+    "node_modules/split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dependencies": {
+        "extend-shallow": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -16982,6 +17186,7 @@
       "version": "7.1.5",
       "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
       "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
+      "peer": true,
       "dependencies": {
         "kdbush": "^3.0.0"
       }
@@ -17850,6 +18055,19 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typewise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typewise/-/typewise-1.0.3.tgz",
+      "integrity": "sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==",
+      "dependencies": {
+        "typewise-core": "^1.2.0"
+      }
+    },
+    "node_modules/typewise-core": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/typewise-core/-/typewise-core-1.2.0.tgz",
+      "integrity": "sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg=="
+    },
     "node_modules/ufo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",
@@ -17935,6 +18153,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",

package.json

@@ -23,7 +23,7 @@
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "@maplibre/maplibre-gl-style-spec": "^17.0.1",
+    "@maplibre/maplibre-gl-style-spec": "^20.1.0",
     "@mdi/js": "^6.6.96",
     "@mdi/react": "^1.5.0",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
@@ -46,7 +46,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "mapbox-gl-inspect": "^1.3.1",
-    "maplibre-gl": "^2.4.0",
+    "maplibre-gl": "^4.0.0-pre.4",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
     "ol-mapbox-style": "^7.1.1",

src/components/App.tsx

@@ -9,7 +9,7 @@ import {unset} from 'lodash'
 import {arrayMoveMutable} from 'array-move'
 import hash from "string-hash";
 import {Map, LayerSpecification, StyleSpecification, ValidationError, SourceSpecification} from 'maplibre-gl'
-import {latest, validate} from '@maplibre/maplibre-gl-style-spec'
+import {latest, validateStyleMin} from '@maplibre/maplibre-gl-style-spec'
 
 import MapMaplibreGl from './MapMaplibreGl'
 import MapOpenLayers from './MapOpenLayers'
@@ -379,8 +379,7 @@ export default class App extends React.Component<any, AppState> {
       this.getInitialStateFromUrl(newStyle);
     }
 
-    // This "any" can be removed in latest version of maplibre where maplibre re-exported types from style-spec
+    const errors: ValidationError[] = validateStyleMin(newStyle) || [];
-    const errors = validate(newStyle as any, latest) || [];
 
     // The validate function doesn't give us errors for duplicate error with
     // empty string for layer.id, manually deal with that here.

src/components/FieldId.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputString from './InputString'
 

src/components/FieldMaxZoom.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputNumber from './InputNumber'
 

src/components/FieldMinZoom.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputNumber from './InputNumber'
 

src/components/FieldSource.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
 

src/components/FieldType.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputSelect from './InputSelect'
 import InputString from './InputString'

src/components/FilterEditor.tsx

@@ -47,7 +47,7 @@ function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpe
     "sources": {
       "tmp": {
         "type": "geojson",
-        "data": {}
+        "data": ''
       }
     },
     "sprite": "",

src/components/MapMaplibreGl.tsx

@@ -14,9 +14,6 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 import '../maplibregl.css'
 import '../libs/maplibre-rtl'
 
-
-const IS_SUPPORTED = MapLibreGl.supported();
-
 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container) {
   ReactDOM.render(popup, mountNode);
   return mountNode;
@@ -92,8 +89,6 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
   }
 
   updateMapFromProps(props: MapMaplibreGlProps) {
-    if(!IS_SUPPORTED) return;
-
     if(!this.state.map) return
 
     //Maplibre GL now does diffing natively so we don't need to calculate
@@ -115,8 +110,6 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
   }
 
   componentDidUpdate() {
-    if(!IS_SUPPORTED) return;
-
     const map = this.state.map;
 
     this.updateMapFromProps(this.props);
@@ -146,8 +139,6 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
   }
 
   componentDidMount() {
-    if(!IS_SUPPORTED) return;
-
     const mapOpts = {
       ...this.props.options,
       container: this.container!,
@@ -235,24 +226,13 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
   }
 
   render() {
-    if(IS_SUPPORTED) {
+    return <div
-      return <div
+      className="maputnik-map__map"
-        className="maputnik-map__map"
+      role="region"
-        role="region"
+      aria-label="Map view"
-        aria-label="Map view"
+      ref={x => this.container = x}
-        ref={x => this.container = x}
+      data-wd-key="maplibre:map"
-        data-wd-key="maplibre:map"
+    ></div>
-      ></div>
-    }
-    else {
-      return <div
-        className="maputnik-map maputnik-map--error"
-      >
-        <div className="maputnik-map__error-message">
-          Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
-        </div>
-      </div>
-    }
   }
 }
 

src/components/ModalSettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
-import type {LightSpecification, StyleSpecification, TransitionSpecification} from 'maplibre-gl'
+import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'
 
 import FieldArray from './FieldArray'
 import FieldNumber from './FieldNumber'
@@ -58,6 +58,25 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
     });
   }
 
+  changeTerrainProperty(property: keyof TerrainSpecification, value: any) {
+    const terrain = {
+      ...this.props.mapStyle.terrain,
+    }
+
+    if (value === undefined) {
+      delete terrain[property];
+    }
+    else {
+      // @ts-ignore
+      terrain[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      terrain,
+    });
+  }
+
   changeStyleProperty(property: keyof StyleSpecification | "owner", value: any) {
     const changedStyle = {
       ...this.props.mapStyle,
@@ -77,10 +96,12 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
   render() {
     const metadata = this.props.mapStyle.metadata || {} as any;
     const {onChangeMetadataProperty, mapStyle} = this.props;
-    const inputProps = { }
 
     const light = this.props.mapStyle.light || {};
     const transition = this.props.mapStyle.transition || {};
+    const terrain = this.props.mapStyle.terrain || {} as TerrainSpecification;
+
+    console.log(latest);
 
     return <Modal
       data-wd-key="modal:settings"
@@ -89,21 +110,21 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
       title={'Style Settings'}
     >
       <div className="modal:settings">
-        <FieldString {...inputProps}
+        <FieldString
           label={"Name"}
           fieldSpec={latest.$root.name}
           data-wd-key="modal:settings.name"
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
-        <FieldString {...inputProps}
+        <FieldString
           label={"Owner"}
           fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}
           data-wd-key="modal:settings.owner"
           value={(this.props.mapStyle as any).owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
-        <FieldUrl {...inputProps}
+        <FieldUrl
           fieldSpec={latest.$root.sprite}
           label="Sprite URL"
           data-wd-key="modal:settings.sprite"
@@ -111,7 +132,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
 
-        <FieldUrl {...inputProps}
+        <FieldUrl
           label="Glyphs URL"
           fieldSpec={latest.$root.glyphs}
           data-wd-key="modal:settings.glyphs"
@@ -119,7 +140,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
 
-        <FieldString {...inputProps}
+        <FieldString
           label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
           fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
           data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
@@ -127,7 +148,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
           onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
 
-        <FieldString {...inputProps}
+        <FieldString
           label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
           fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
           data-wd-key="modal:settings.maputnik:thunderforest_access_token"
@@ -141,21 +162,19 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
           length={2}
           type="number"
           value={mapStyle.center || []}
-          default={latest.$root.center.default || [0, 0]}
+          default={[0, 0]}
           onChange={this.changeStyleProperty.bind(this, "center")}
         />
 
         <FieldNumber
-          {...inputProps}
           label={"Zoom"}
           fieldSpec={latest.$root.zoom}
           value={mapStyle.zoom}
-          default={latest.$root.zoom.default || 0}
+          default={0}
           onChange={this.changeStyleProperty.bind(this, "zoom")}
         />
 
         <FieldNumber
-          {...inputProps}
           label={"Bearing"}
           fieldSpec={latest.$root.bearing}
           value={mapStyle.bearing}
@@ -164,7 +183,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldNumber
-          {...inputProps}
           label={"Pitch"}
           fieldSpec={latest.$root.pitch}
           value={mapStyle.pitch}
@@ -173,7 +191,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldEnum
-          {...inputProps}
           label={"Light anchor"}
           fieldSpec={latest.light.anchor}
           name="light-anchor"
@@ -184,7 +201,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldColor
-          {...inputProps}
           label={"Light color"}
           fieldSpec={latest.light.color}
           value={light.color as string}
@@ -193,7 +209,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldNumber
-          {...inputProps}
           label={"Light intensity"}
           fieldSpec={latest.light.intensity}
           value={light.intensity as number}
@@ -202,7 +217,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldArray
-          {...inputProps}
           label={"Light position"}
           fieldSpec={latest.light.position}
           type="number"
@@ -212,8 +226,23 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
           onChange={this.changeLightProperty.bind(this, "position")}
         />
 
+        <FieldString
+          label={"Terrain source"}
+          fieldSpec={latest.terrain.source}
+          data-wd-key="modal:settings.maputnik:terrain_source"
+          value={terrain.source}
+          onChange={this.changeTerrainProperty.bind(this, "source")}
+        />
+
+        <FieldNumber
+          label={"Terrain exaggeration"}
+          fieldSpec={latest.terrain.exaggeration}
+          value={terrain.exaggeration}
+          default={latest.terrain.exaggeration.default}
+          onChange={this.changeTerrainProperty.bind(this, "exaggeration")}
+        />
+
         <FieldNumber
-          {...inputProps}
           label={"Transition delay"}
           fieldSpec={latest.transition.delay}
           value={transition.delay}
@@ -222,7 +251,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
         />
 
         <FieldNumber
-          {...inputProps}
           label={"Transition duration"}
           fieldSpec={latest.transition.duration}
           value={transition.duration}
@@ -230,7 +258,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
           onChange={this.changeTransitionProperty.bind(this, "duration")}
         />
 
-        <FieldSelect {...inputProps}
+        <FieldSelect
           label={fieldSpecAdditional.maputnik.style_renderer.label}
           fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
           data-wd-key="modal:settings.maputnik:renderer"

src/components/ModalSources.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, StyleSpecification, VectorSourceSpecification} from 'maplibre-gl'
 
 import Modal from './Modal'
@@ -134,7 +134,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
     case 'geojson_json': return {
       type: 'geojson',
       cluster: (source as GeoJSONSourceSpecification).cluster || false,
-      data: {}
+      data: ''
     }
     case 'tilejson_vector': return {
       type: 'vector',

src/components/_DataProperty.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'
@@ -302,7 +302,7 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
               <div className="maputnik-data-spec-property-input">
                 <InputSpec
                   fieldName={"base"}
-                  fieldSpec={latest.function.base}
+                  fieldSpec={latest.function.base as typeof latest.function.base & { type: "number" }}
                   value={this.props.value?.base}
                   onChange={(_, newValue) => this.changeBase(newValue as number)}
                 />

src/components/_ZoomProperty.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'
@@ -207,7 +207,7 @@ export default class ZoomProperty extends React.Component<ZoomPropertyProps, Zoo
             <div className="maputnik-data-spec-property-input">
               <InputSpec
                 fieldName={"base"}
-                fieldSpec={latest.function.base}
+                fieldSpec={latest.function.base as typeof latest.function.base & { type: "number" }}
                 value={this.props.value?.base}
                 onChange={(_, newValue) => this.changeBase(newValue as number | undefined)}
               />

src/config/tokens.json

@@ -1,4 +1,4 @@
 {
-  "openmaptiles": "KDhMfHvorAFkFe64wlZb",
+  "openmaptiles": "get_your_own_OpIi9ZULNHzrESv6T2vL",
   "thunderforest": "b71f7f0ba4064f5eb9e903859a9cf5c6"
 }

src/libs/codemirror-mgl.ts

@@ -2,7 +2,7 @@
 import jsonlint from 'jsonlint';
 import CodeMirror, { MarkerRange } from 'codemirror';
 import jsonToAst from 'json-to-ast';
-import {expression, validate} from '@maplibre/maplibre-gl-style-spec';
+import {expression, validateStyleMin} from '@maplibre/maplibre-gl-style-spec';
 
 type MarkerRangeWithMessage = MarkerRange & {message: string};
 
@@ -102,7 +102,7 @@ CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) =>
   let out: ReturnType<typeof expression.createExpression> | null = null;
   if (context === "layer") {
     // Just an empty style so we can validate a layer.
-    const errors = validate({
+    const errors = validateStyleMin({
       "version": 8,
       "name": "Empty Style",
       "metadata": {},

src/libs/filterops.ts

@@ -1,4 +1,4 @@
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 
 export const combiningFilterOps = ['all', 'any', 'none'];
 export const setFilterOps = ['in', '!in'];

src/libs/maplibre-rtl.ts

@@ -1,3 +1,3 @@
 import MapLibreGl from "maplibre-gl"
 
-MapLibreGl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js', () => {});
+MapLibreGl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js', false);

stories/FieldFunction.stories.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import FieldFunction from '../src/components/FieldFunction';
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
-
 
 export default {
   title: 'FieldFunction',