Add icon-pitch-alignment property

src/render/draw_symbol.js

@@ -38,9 +38,7 @@ function drawSymbols(painter, sourceCache, layer, coords) {
         layer.paint['icon-translate'],
         layer.paint['icon-translate-anchor'],
         layer.layout['icon-rotation-alignment'],
-        // icon-pitch-alignment is not yet implemented
-        // and we simply inherit the rotation alignment
-        layer.layout['icon-rotation-alignment'],
+        layer.layout['icon-pitch-alignment'],
         layer.layout['icon-keep-upright']
     );
 

src/style-spec/reference/v8.json

@@ -1019,6 +1019,36 @@
         }
       }
     },
+    "icon-pitch-alignment": {
+      "type": "enum",
+      "function": "piecewise-constant",
+      "zoom-function": true,
+      "values": {
+        "map": {
+            "doc": "The icon is aligned to the plane of the map."
+        },
+        "viewport": {
+            "doc": "The icon is aligned to the plane of the viewport."
+        },
+        "auto": {
+            "doc": "Automatically matches the value of `icon-rotation-alignment`."
+        }
+      },
+      "default": "auto",
+      "doc": "Orientation of icon when map is pitched.",
+      "requires": [
+        "icon-image"
+      ],
+      "sdk-support": {
+        "basic functionality": {
+          "js": "0.39.0",
+          "android": null,
+          "ios": null,
+          "macos": null
+        },
+        "data-driven styling": {}
+      }
+    },
     "text-pitch-alignment": {
       "type": "enum",
       "function": "piecewise-constant",

src/style/style_layer/symbol_style_layer.js

@@ -17,6 +17,8 @@ class SymbolStyleLayer extends StyleLayer {
             return this.getLayoutValue('symbol-placement', globalProperties, featureProperties) === 'line' ? 'map' : 'viewport';
         case 'text-pitch-alignment':
             return this.getLayoutValue('text-rotation-alignment', globalProperties, featureProperties);
+        case 'icon-pitch-alignment':
+            return this.getLayoutValue('icon-rotation-alignment', globalProperties, featureProperties);
         default:
             return value;
         }

test/integration/render-tests/icon-pitch-alignment/auto-rotation-alignment-map/style.json

@@ -0,0 +1,39 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "ignored": {
+                "native": "https://github.com/mapbox/mapbox-gl-native/issues/9345"
+            },
+            "width": 64,
+            "height": 64
+        }
+    },
+    "bearing": 45,
+    "pitch": 45,
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "Point",
+                "coordinates": [
+                    0,
+                    0
+                ]
+            }
+        }
+    },
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "symbol",
+            "type": "symbol",
+            "source": "geojson",
+            "layout": {
+                "symbol-placement": "point",
+                "icon-rotation-alignment": "map",
+                "icon-image": "oneway"
+            }
+        }
+    ]
+}

test/integration/render-tests/icon-pitch-alignment/auto-rotation-alignment-viewport/style.json

@@ -0,0 +1,38 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "ignored": {
+                "native": "https://github.com/mapbox/mapbox-gl-native/issues/9345"
+            },
+            "width": 64,
+            "height": 64
+        }
+    },
+    "bearing": 45,
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "Point",
+                "coordinates": [
+                    0,
+                    0
+                ]
+            }
+        }
+    },
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "symbol",
+            "type": "symbol",
+            "source": "geojson",
+            "layout": {
+                "symbol-placement": "point",
+                "icon-rotation-alignment": "auto",
+                "icon-image": "oneway"
+            }
+        }
+    ]
+}

test/integration/render-tests/icon-pitch-alignment/map-rotation-alignment-viewport/style.json

@@ -0,0 +1,40 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "ignored": {
+                "native": "https://github.com/mapbox/mapbox-gl-native/issues/9345"
+            },
+            "width": 64,
+            "height": 64
+        }
+    },
+    "bearing": 45,
+    "pitch": 45,
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "Point",
+                "coordinates": [
+                    0,
+                    0
+                ]
+            }
+        }
+    },
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "symbol",
+            "type": "symbol",
+            "source": "geojson",
+            "layout": {
+                "symbol-placement": "point",
+                "icon-rotation-alignment": "viewport",
+                "icon-pitch-alignment": "map",
+                "icon-image": "oneway"
+            }
+        }
+    ]
+}

test/integration/render-tests/icon-pitch-alignment/viewport-rotation-alignment-map/style.json

@@ -0,0 +1,40 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "ignored": {
+                "native": "https://github.com/mapbox/mapbox-gl-native/issues/9345"
+            },
+            "width": 64,
+            "height": 64
+        }
+    },
+    "bearing": 45,
+    "pitch": 45,
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "Point",
+                "coordinates": [
+                    0,
+                    0
+                ]
+            }
+        }
+    },
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "symbol",
+            "type": "symbol",
+            "source": "geojson",
+            "layout": {
+                "symbol-placement": "point",
+                "icon-rotation-alignment": "map",
+                "icon-pitch-alignment": "viewport",
+                "icon-image": "oneway"
+            }
+        }
+    ]
+}