Add roll angle to stylesheet (#858)

* Add roll angle to stylesheet

* add test for setting roll to undefined

* add SDK support to roll

* retry roll -> undefined

* restore roll undefined test to the way it was

* fix js version string and add wontfix for android and iOS

* update roll angle android/ios version to reference newly created issue.

Author: NathanMOlson

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### ✨ Features and improvements
 
+* Added `roll` property to stylesheet ([#850](https://github.com/maplibre/maplibre-style-spec/issues/850))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

src/diff.test.ts

@@ -302,6 +302,25 @@ describe('diff', () => {
         ]);
     });
 
+    test('set roll to undefined', () => {
+        expect(diffStyles({
+            roll: 1
+        } as StyleSpecification, {
+        } as StyleSpecification)).toEqual([
+            {command: 'setRoll', args: [undefined]}
+        ]);
+    });
+
+    test('set roll', () => {
+        expect(diffStyles({
+            roll: 0
+        } as StyleSpecification, {
+            roll: 1
+        } as StyleSpecification)).toEqual([
+            {command: 'setRoll', args: [1]}
+        ]);
+    });
+
     test('no changes in light', () => {
         expect(diffStyles({
             light: {

src/diff.ts

@@ -22,6 +22,7 @@ export type DiffOperationsMap = {
     'setZoom': [number];
     'setBearing': [number];
     'setPitch': [number];
+    'setRoll': [number];
     'setSprite': [SpriteSpecification];
     'setGlyphs': [string];
     'setTransition': [TransitionSpecification];
@@ -287,6 +288,9 @@ function diffStyles(before: StyleSpecification, after: StyleSpecification): Diff
         if (!isEqual(before.pitch, after.pitch)) {
             commands.push({command: 'setPitch', args: [after.pitch]});
         }
+        if (!isEqual(before.roll, after.roll)) {
+            commands.push({command: 'setRoll', args: [after.roll]});
+        }
         if (!isEqual(before.sprite, after.sprite)) {
             commands.push({command: 'setSprite', args: [after.sprite]});
         }

src/reference/v8.json

@@ -54,6 +54,20 @@
       "doc": "Default pitch, in degrees. Zero is perpendicular to the surface, for a look straight down at the map, while a greater value like 60 looks ahead towards the horizon. The style pitch will be used only if the map has not been positioned by other means (e.g. map options or user interaction).",
       "example": 50
     },
+    "roll": {
+      "type": "number",
+      "default": 0,
+      "units": "degrees",
+      "doc": "Default roll, in degrees. The roll angle is measured counterclockwise about the camera boresight. The style roll will be used only if the map has not been positioned by other means (e.g. map options or user interaction).",
+      "example": 45,
+      "sdk-support": {
+        "basic functionality": {
+          "js": "5.0.0",
+          "android": "https://github.com/maplibre/maplibre-native/issues/2941",
+          "ios": "https://github.com/maplibre/maplibre-native/issues/2941"
+        }
+      }
+    },
     "light": {
       "type": "light",
       "doc": "The global light source.",

test/integration/style-spec/tests/roll.input.json

@@ -0,0 +1,6 @@
+{
+  "version": 8,
+  "roll": "45",
+  "sources": {},
+  "layers": []
+}

test/integration/style-spec/tests/roll.output-api-supported.json

@@ -0,0 +1,6 @@
+[
+  {
+    "message": "roll: number expected, string found",
+    "line": 3
+  }
+]

test/integration/style-spec/tests/roll.output.json

@@ -0,0 +1,6 @@
+[
+  {
+    "message": "roll: number expected, string found",
+    "line": 3
+  }
+]