Add globe option

package-lock.json

@@ -12,7 +12,7 @@
         "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
         "@maplibre/maplibre-gl-geocoder": "^1.6.0",
         "@maplibre/maplibre-gl-inspect": "^1.6.3",
-        "@maplibre/maplibre-gl-style-spec": "^20.1.1",
+        "@maplibre/maplibre-gl-style-spec": "^20.3.1",
         "@mdi/js": "^7.4.47",
         "@mdi/react": "^1.6.1",
         "@typescript-eslint/eslint-plugin": "^7.3.1",
@@ -39,7 +39,7 @@
         "lodash.get": "^4.4.2",
         "lodash.isequal": "^4.5.0",
         "lodash.throttle": "^4.1.1",
-        "maplibre-gl": "^4.1.2",
+        "maplibre-gl": "^5.0.0-pre.1",
         "maputnik-design": "github:maputnik/design#172b06c",
         "ol": "^6.14.1",
         "ol-mapbox-style": "^7.1.1",
@@ -1656,16 +1656,18 @@
       }
     },
     "node_modules/@maplibre/maplibre-gl-style-spec": {
-      "version": "20.1.1",
+      "version": "20.3.1",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.3.1.tgz",
-      "integrity": "sha512-z85ARNPCBI2Cs5cPOS3DSbraTN+ue8zrcYVoSWBuNrD/mA+2SKAJ+hIzI22uN7gac6jBMnCdpPKRxS/V0KSZVQ==",
+      "integrity": "sha512-5ueL4UDitzVtceQ8J4kY+Px3WK+eZTsmGwha3MBKHKqiHvKrjWWwBCIl1K8BuJSc5OFh83uI8IFNoFvQxX2uUw==",
       "dependencies": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
         "@mapbox/unitbezier": "^0.0.1",
         "json-stringify-pretty-compact": "^4.0.0",
         "minimist": "^1.2.8",
+        "quickselect": "^2.0.0",
         "rw": "^1.3.3",
-        "sort-object": "^3.0.3"
+        "sort-object": "^3.0.3",
+        "tinyqueue": "^3.0.0"
       },
       "bin": {
         "gl-style-format": "dist/gl-style-format.mjs",
@@ -4285,9 +4287,9 @@
       }
     },
     "node_modules/earcut": {
-      "version": "2.2.4",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz",
-      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+      "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg=="
     },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
@@ -5536,9 +5538,9 @@
       }
     },
     "node_modules/geojson-vt": {
-      "version": "3.2.1",
+      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
-      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+      "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A=="
     },
     "node_modules/geotiff": {
       "version": "2.0.4",
@@ -5783,6 +5785,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
       "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
       "dependencies": {
         "ini": "^1.3.5",
         "kind-of": "^6.0.2",
@@ -5795,12 +5798,14 @@
     "node_modules/global-prefix/node_modules/ini": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
     },
     "node_modules/global-prefix/node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
       "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -6866,7 +6871,8 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
     },
     "node_modules/isobject": {
       "version": "3.0.1",
@@ -7647,9 +7653,9 @@
       "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ=="
     },
     "node_modules/maplibre-gl": {
-      "version": "4.1.2",
+      "version": "5.0.0-pre.1",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.0.0-pre.1.tgz",
-      "integrity": "sha512-98T+3BesL4w/N39q/rgs9q6HzHLG6pgbS9UaTqg6fMISfzy2WGKokjK205ENFDDmEljj54/LTfdXgqg2XfYU4A==",
+      "integrity": "sha512-+J6W3RKQJiqGUmOsO42mS3ZyYxwhMwRaqh/DPfdhHcFXH49pZ16kZg0sBy4yvtJruasQA22WOZcRY/38ZUPihA==",
       "dependencies": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -7658,24 +7664,24 @@
         "@mapbox/unitbezier": "^0.0.1",
         "@mapbox/vector-tile": "^1.3.1",
         "@mapbox/whoots-js": "^3.1.0",
-        "@maplibre/maplibre-gl-style-spec": "^20.1.1",
+        "@maplibre/maplibre-gl-style-spec": "^20.3.1",
         "@types/geojson": "^7946.0.14",
         "@types/geojson-vt": "3.2.5",
         "@types/mapbox__point-geometry": "^0.1.4",
         "@types/mapbox__vector-tile": "^1.3.4",
         "@types/pbf": "^3.0.5",
         "@types/supercluster": "^7.1.3",
-        "earcut": "^2.2.4",
+        "earcut": "^3.0.0",
-        "geojson-vt": "^3.2.1",
+        "geojson-vt": "^4.0.2",
         "gl-matrix": "^3.4.3",
-        "global-prefix": "^3.0.0",
+        "global-prefix": "^4.0.0",
         "kdbush": "^4.0.2",
         "murmurhash-js": "^1.0.0",
-        "pbf": "^3.2.1",
+        "pbf": "^3.3.0",
         "potpack": "^2.0.0",
-        "quickselect": "^2.0.0",
+        "quickselect": "^3.0.0",
         "supercluster": "^8.0.1",
-        "tinyqueue": "^2.0.3",
+        "tinyqueue": "^3.0.0",
         "vt-pbf": "^3.1.3"
       },
       "engines": {
@@ -7686,6 +7692,66 @@
         "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
       }
     },
+    "node_modules/maplibre-gl/node_modules/global-prefix": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz",
+      "integrity": "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==",
+      "dependencies": {
+        "ini": "^4.1.3",
+        "kind-of": "^6.0.3",
+        "which": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/maplibre-gl/node_modules/ini": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
+      "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/maplibre-gl/node_modules/isexe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/maplibre-gl/node_modules/pbf": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+      "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
+    "node_modules/maplibre-gl/node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
+    },
+    "node_modules/maplibre-gl/node_modules/which": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/maputnik-design": {
       "version": "0.1.0",
       "resolved": "git+ssh://git@github.com/maputnik/design.git#172b06cb062a82f62bb7239474533a110915ef3e"
@@ -10864,9 +10930,9 @@
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
     },
     "node_modules/tinyqueue": {
-      "version": "2.0.3",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
-      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
     },
     "node_modules/tmp": {
       "version": "0.2.3",

package.json

@@ -26,7 +26,7 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@maplibre/maplibre-gl-geocoder": "^1.6.0",
     "@maplibre/maplibre-gl-inspect": "^1.6.3",
-    "@maplibre/maplibre-gl-style-spec": "^20.1.1",
+    "@maplibre/maplibre-gl-style-spec": "^20.3.1",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
@@ -53,7 +53,7 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^4.1.2",
+    "maplibre-gl": "^5.0.0-pre.1",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
     "ol-mapbox-style": "^7.1.1",

src/components/ModalSettings.tsx

@@ -1,6 +1,6 @@
 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 {LightSpecification, ProjectionSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'
 import { WithTranslation, withTranslation } from 'react-i18next';
 
 import FieldArray from './FieldArray'
@@ -59,6 +59,25 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
     });
   }
 
+  changeProjectionProperty(property: keyof ProjectionSpecification, value: any) {
+    const projection = {
+      ...this.props.mapStyle.projection,
+    }
+
+    if (value === undefined) {
+      delete projection[property];
+    }
+    else {
+      // @ts-ignore
+      projection[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      projection,
+    });
+  }
+
   changeTerrainProperty(property: keyof TerrainSpecification, value: any) {
     const terrain = {
       ...this.props.mapStyle.terrain,
@@ -102,6 +121,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
     const light = this.props.mapStyle.light || {};
     const transition = this.props.mapStyle.transition || {};
     const terrain = this.props.mapStyle.terrain || {} as TerrainSpecification;
+    const projection = this.props.mapStyle.projection || {} as ProjectionSpecification;
 
     return <Modal
       data-wd-key="modal:settings"
@@ -208,6 +228,16 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           onChange={this.changeLightProperty.bind(this, "anchor")}
         />
 
+        <FieldEnum
+          label={"projection type"}
+          fieldSpec={latest.projection.type}
+          name="projection type"
+          value={projection.type as string}
+          options={Object.keys(latest.projection.type.values)}
+          default={latest.projection.type.default}
+          onChange={this.changeProjectionProperty.bind(this, "type")}
+        />
+
         <FieldColor
           label={t("Light color")}
           fieldSpec={latest.light.color}