Proposal: add icon-anchor property

src/data/bucket/symbol_bucket.js

@@ -543,7 +543,8 @@ class SymbolBucket implements Bucket {
                 const image = icons[feature.icon];
                 if (image) {
                     shapedIcon = shapeIcon(image,
-                        this.layers[0].getLayoutValue('icon-offset', {zoom: this.zoom}, feature.properties));
+                        this.layers[0].getLayoutValue('icon-offset', {zoom: this.zoom}, feature.properties),
+                        this.layers[0].getLayoutValue('icon-anchor', {zoom: this.zoom}, feature.properties));
                     if (this.sdfIcons === undefined) {
                         this.sdfIcons = image.sdf;
                     } else if (this.sdfIcons !== image.sdf) {

src/style-spec/reference/v8.json

@@ -1034,6 +1034,54 @@
         }
       }
     },
+    "icon-anchor": {
+      "type": "enum",
+      "function": "piecewise-constant",
+      "zoom-function": true,
+      "property-function": true,
+      "values": {
+        "center": {
+            "doc": "The center of the icon is placed closest to the anchor."
+        },
+        "left": {
+            "doc": "The left side of the icon is placed closest to the anchor."
+        },
+        "right": {
+            "doc": "The right side of the icon is placed closest to the anchor."
+        },
+        "top": {
+            "doc": "The top of the icon is placed closest to the anchor."
+        },
+        "bottom": {
+            "doc": "The bottom of the icon is placed closest to the anchor."
+        },
+        "top-left": {
+            "doc": "The top left corner of the icon is placed closest to the anchor."
+        },
+        "top-right": {
+            "doc": "The top right corner of the icon is placed closest to the anchor."
+        },
+        "bottom-left": {
+            "doc": "The bottom left corner of the icon is placed closest to the anchor."
+        },
+        "bottom-right": {
+            "doc": "The bottom right corner of the icon is placed closest to the anchor."
+        }
+      },
+      "default": "center",
+      "doc": "Part of the icon placed closest to the anchor.",
+      "requires": [
+        "icon-image"
+      ],
+      "sdk-support": {
+        "basic functionality": {
+          "js": "0.40.0"
+        },
+        "data-driven styling": {
+          "js": "0.40.0"
+        }
+      }
+    },
     "icon-pitch-alignment": {
       "type": "enum",
       "function": "piecewise-constant",

src/symbol/shaping.js

@@ -38,7 +38,7 @@ export type Shaping = {
     writingMode: 1 | 2
 };
 
-type TextAnchor = 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type SymbolAnchor = 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 type TextJustify = 'left' | 'center' | 'right';
 
 function breakLines(text: string, lineBreakPoints: Array<number>) {
@@ -59,7 +59,7 @@ function shapeText(text: string,
                    glyphs: {[number]: SimpleGlyph},
                    maxWidth: number,
                    lineHeight: number,
-                   textAnchor: TextAnchor,
+                   textAnchor: SymbolAnchor,
                    textJustify: TextJustify,
                    spacing: number,
                    translate: [number, number],
@@ -274,10 +274,10 @@ function determineLineBreaks(logicalInput: string,
             true));
 }
 
-function getAnchorAlignment(textAnchor: TextAnchor) {
+function getAnchorAlignment(anchor: SymbolAnchor) {
     let horizontalAlign = 0.5, verticalAlign = 0.5;
 
-    switch (textAnchor) {
+    switch (anchor) {
     case 'right':
     case 'top-right':
     case 'bottom-right':
@@ -290,7 +290,7 @@ function getAnchorAlignment(textAnchor: TextAnchor) {
         break;
     }
 
-    switch (textAnchor) {
+    switch (anchor) {
     case 'bottom':
     case 'bottom-right':
     case 'bottom-left':
@@ -310,7 +310,7 @@ function shapeLines(shaping: Shaping,
                     glyphs: {[number]: SimpleGlyph},
                     lines: Array<string>,
                     lineHeight: number,
-                    textAnchor: TextAnchor,
+                    textAnchor: SymbolAnchor,
                     textJustify: TextJustify,
                     writingMode: 1 | 2,
                     spacing: number,
@@ -417,12 +417,13 @@ export type PositionedIcon = {
     right: number
 };
 
-function shapeIcon(image: SpriteAtlasElement, iconOffset: [number, number]): PositionedIcon {
+function shapeIcon(image: SpriteAtlasElement, iconOffset: [number, number], iconAnchor: SymbolAnchor): PositionedIcon {
+    const {horizontalAlign, verticalAlign} = getAnchorAlignment(iconAnchor);
     const dx = iconOffset[0];
     const dy = iconOffset[1];
-    const x1 = dx - image.displaySize[0] / 2;
+    const x1 = dx - image.displaySize[0] * horizontalAlign;
     const x2 = x1 + image.displaySize[0];
-    const y1 = dy - image.displaySize[1] / 2;
+    const y1 = dy - image.displaySize[1] * verticalAlign;
     const y2 = y1 + image.displaySize[1];
     return {image, top: y1, bottom: y2, left: x1, right: x2};
 }

test/integration/render-tests/icon-anchor/bottom-left/style.json

@@ -0,0 +1,33 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [
+          0,
+          0
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "symbol",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": "dot.sdf",
+        "icon-anchor": "bottom-left"
+      }
+    }
+  ]
+}

test/integration/render-tests/icon-anchor/bottom-right/style.json

@@ -0,0 +1,33 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [
+          0,
+          0
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "symbol",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": "dot.sdf",
+        "icon-anchor": "bottom-right"
+      }
+    }
+  ]
+}

test/integration/render-tests/icon-anchor/bottom/style.json

@@ -0,0 +1,33 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [
+          0,
+          0
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "symbol",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": "dot.sdf",
+        "icon-anchor": "bottom"
+      }
+    }
+  ]
+}

test/integration/render-tests/icon-anchor/center/style.json

@@ -0,0 +1,33 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [
+          0,
+          0
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "symbol",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": "dot.sdf",
+        "icon-anchor": "center"
+      }
+    }
+  ]
+}

test/integration/render-tests/icon-anchor/default/style.json

@@ -0,0 +1,32 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [
+          0,
+          0
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "symbol",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": "dot.sdf"
+      }
+    }
+  ]
+}

test/integration/render-tests/icon-anchor/left/style.json

@@ -0,0 +1,33 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [
+          0,
+          0
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "symbol",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": "dot.sdf",
+        "icon-anchor": "left"
+      }
+    }
+  ]
+}