Add globe/mercator button

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: deploy
 
 on:
   push:
-    branches: [ main ]
+    branches: [ globe ]
 
 jobs:
   deploy-pages:
@@ -29,23 +29,25 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: dist
 
-  # publish docker to GitHub registry
-  deploy-docker:
-    name: deploy/docker
-    runs-on: ubuntu-latest
 
-    if: ${{ github.event_name == 'push' }}
 
-    strategy:
-      fail-fast: false
+  # # publish docker to GitHub registry
+  # deploy-docker:
+  #   name: deploy/docker
+  #   runs-on: ubuntu-latest
 
-    steps:
-    - name: Login to GitHub Container Registry
-      uses: docker/login-action@v3
-      with:
-        registry: ghcr.io
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-    - uses: actions/checkout@v4
-    - run: docker build -t ghcr.io/maplibre/maputnik:main .
-    - run: docker push ghcr.io/maplibre/maputnik:main
+  #   if: ${{ github.event_name == 'push' }}
+
+  #   strategy:
+  #     fail-fast: false
+
+  #   steps:
+  #   - name: Login to GitHub Container Registry
+  #     uses: docker/login-action@v3
+  #     with:
+  #       registry: ghcr.io
+  #       username: ${{ github.actor }}
+  #       password: ${{ secrets.GITHUB_TOKEN }}
+  #   - uses: actions/checkout@v4
+  #   - run: docker build -t ghcr.io/maplibre/maputnik:main .
+  #   - run: docker push ghcr.io/maplibre/maputnik:main

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",
     "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}