Consistency with icon-anchor

src/ui/anchor.js

@@ -1,7 +1,7 @@
 // @flow
 
 export type Anchor =
-    | 'middle'
+    | 'center'
     | 'top'
     | 'bottom'
     | 'left'
@@ -12,7 +12,7 @@ export type Anchor =
     | 'bottom-right';
 
 export const anchorTranslate: {[Anchor]: string} = {
-    'middle': 'translate(-50%,-50%)',
+    'center': 'translate(-50%,-50%)',
     'top': 'translate(-50%,0)',
     'top-left': 'translate(0,0)',
     'top-right': 'translate(-100%,0)',

src/ui/marker.js

@@ -22,9 +22,9 @@ type Options = {
  * Creates a marker component
  * @param element DOM element to use as a marker. If left unspecified a default SVG will be created as the DOM element to use.
  * @param options
- * @param options.anchor A string indicating the Marker's location relative to the coordinate set via {@link Marker#setLngLat}.
- *   Options are `'middle'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
- *   The default is `'middle'`.
+ * @param options.anchor A string indicating the part of the Marker that should be positioned closest to the coordinate set via {@link Marker#setLngLat}.
+ *   Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
+ *   The default is `'center'`.
  * @param options.offset The offset in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up.
  * @example
  * var marker = new mapboxgl.Marker()
@@ -44,7 +44,7 @@ export default class Marker {
     constructor(element: ?HTMLElement, options?: Options) {
         bindAll(['_update', '_onMapClick'], this);
 
-        this._anchor = options && options.anchor || 'middle';
+        this._anchor = options && options.anchor || 'center';
 
         if (!element) {
             element = DOM.create('div');

src/ui/popup.js

@@ -34,8 +34,8 @@ export type PopupOptions = {
  *   top right corner of the popup.
  * @param {boolean} [options.closeOnClick=true] If `true`, the popup will closed when the
  *   map is clicked.
- * @param {string} [options.anchor] - A string indicating the popup's location relative to
- *   the coordinate set via {@link Popup#setLngLat}.
+ * @param {string} [options.anchor] - A string indicating the part of the Popup that should
+ *   be positioned closest to the coordinate set via {@link Popup#setLngLat}.
  *   Options are `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`,
  *   `'top-right'`, `'bottom-left'`, and `'bottom-right'`. If unset the anchor will be
  *   dynamically set to ensure the popup falls within the map container with a preference
@@ -324,7 +324,7 @@ function normalizeOffset(offset: ?Offset) {
         // input specifies a radius from which to calculate offsets at all positions
         const cornerOffset = Math.round(Math.sqrt(0.5 * Math.pow(offset, 2)));
         return {
-            'middle': new Point(0, 0),
+            'center': new Point(0, 0),
             'top': new Point(0, offset),
             'top-left': new Point(cornerOffset, cornerOffset),
             'top-right': new Point(-cornerOffset, cornerOffset),
@@ -339,7 +339,7 @@ function normalizeOffset(offset: ?Offset) {
         // input specifies a single offset to be applied to all positions
         const convertedOffset = Point.convert(offset);
         return {
-            'middle': convertedOffset,
+            'center': convertedOffset,
             'top': convertedOffset,
             'top-left': convertedOffset,
             'top-right': convertedOffset,
@@ -353,7 +353,7 @@ function normalizeOffset(offset: ?Offset) {
     } else {
         // input specifies an offset per position
         return {
-            'middle': Point.convert(offset['middle'] || [0, 0]),
+            'center': Point.convert(offset['center'] || [0, 0]),
             'top': Point.convert(offset['top'] || [0, 0]),
             'top-left': Point.convert(offset['top-left'] || [0, 0]),
             'top-right': Point.convert(offset['top-right'] || [0, 0]),

test/unit/ui/marker.test.js

@@ -113,13 +113,13 @@ test('Marker#togglePopup closes a popup that was open', (t) => {
     t.end();
 });
 
-test('Marker anchor defaults to middle', (t) => {
+test('Marker anchor defaults to center', (t) => {
     const map = createMap();
     const marker = new Marker()
         .setLngLat([0, 0])
         .addTo(map);
 
-    t.ok(marker.getElement().classList.contains('mapboxgl-marker-anchor-middle'));
+    t.ok(marker.getElement().classList.contains('mapboxgl-marker-anchor-center'));
     t.match(marker.getElement().style.transform, /translate\(-50%,-50%\)/);
 
     map.remove();