WIP: added support for anchor option on Marker

src/ui/marker.js

@@ -11,26 +11,54 @@ import type Popup from './popup';
 import type {LngLatLike} from "../geo/lng_lat";
 import type {MapMouseEvent} from './events';
 
+export type Anchor = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type Offset = number | PointLike | {[Anchor]: PointLike};
+
+export type MarkerOptions = {
+    anchor: Anchor,
+    offset: Offset
+}
+
 /**
  * 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.offset The offset in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up.
+ * @param {Object} [element] DOM element to use as a marker. If left unspecified a default SVG will be created as the DOM element to use.
+ * @param {Object} [options]
+ * @param {string} [options.anchor] - A string indicating the markers's location relative to
+ *   the coordinate set via {@link Marker#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 marker falls within the map container with a preference
+ *   for `'bottom'`.
+ * @param {number|PointLike|Object} [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 markerHeight = 50, markerRadius = 10, linearOffset = 25;
+ * var markerOffsets = {
+ *  'top': [0, 0],
+ *  'top-left': [0,0],
+ *  'top-right': [0,0],
+ *  'bottom': [0, -markerHeight],
+ *  'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
+ *  'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
+ *  'left': [markerRadius, (markerHeight - markerRadius) * -1],
+ *  'right': [-markerRadius, (markerHeight - markerRadius) * -1]
+ *  };
  * var marker = new mapboxgl.Marker()
  *   .setLngLat([30.5, 50.5])
  *   .addTo(map);
  * @see [Add custom icons with Markers](https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/)
  */
 class Marker {
     _map: Map;
+    options: MarkerOptions;
+    _anchor: Anchor;
     _offset: Point;
     _element: HTMLElement;
     _popup: ?Popup;
     _lngLat: LngLat;
     _pos: ?Point;
 
-    constructor(element: ?HTMLElement, options?: {offset: PointLike}) {
+    constructor(element: ?HTMLElement, options?: {anchor: Anchor, offset: PointLike}) {
+        this._anchor = Point.convert(options && options.anchor || [0, 0]);
         this._offset = Point.convert(options && options.offset || [0, 0]);
 
         bindAll(['_update', '_onMapClick'], this);
@@ -268,16 +296,82 @@ class Marker {
             this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform);
         }
 
-        this._pos = this._map.project(this._lngLat)._add(this._offset);
+        const pos = this._pos = this._map.project(this._lngLat);
+
+        let anchor = this.options.anchor;
+        const offset = normalizeOffset(this.options.offset);
+
+        if (!anchor) {
+            const width = this._element.offsetWidth,
+                height = this._element.offsetHeight;
+
+            if (pos.y + offset.bottom.y < height) {
+                anchor = ['top'];
+            } else if (pos.y > this._map.transform.height - height) {
+                anchor = ['bottom'];
+            } else {
+                anchor = [];
+            }
+
+            if (pos.x < width / 2) {
+                anchor.push('left');
+            } else if (pos.x > this._map.transform.width - width / 2) {
+                anchor.push('right');
+            }
+
+            if (anchor.length === 0) {
+                anchor = 'bottom';
+            } else {
+                anchor = anchor.join('-');
+            }
+        }
+
+        const offsetedPos = pos.add(offset[anchor]);
 
         // because rounding the coordinates at every `move` event causes stuttered zooming
         // we only round them when _update is called with `moveend` or when its called with
         // no arguments (when the Marker is initialized or Marker#setLngLat is invoked).
         if (!e || e.type === "moveend") {
-            this._pos = this._pos.round();
+            this._pos = offsetedPos.round();
+        }
+
+        const anchorTranslate = {
+            'top': 'translate(-50%,0)',
+            'top-left': 'translate(0,0)',
+            'top-right': 'translate(-100%,0)',
+            'bottom': 'translate(-50%,-100%)',
+            'bottom-left': 'translate(0,-100%)',
+            'bottom-right': 'translate(-100%,-100%)',
+            'left': 'translate(0,-50%)',
+            'right': 'translate(-100%,-50%)'
+        };
+
+        const classList = this._element.classList;
+        for (const key in anchorTranslate) {
+            classList.remove(`mapboxgl-marker-anchor-${key}`);
         }
+        classList.add(`mapboxgl-marker-anchor-${anchor}`);
 
-        DOM.setTransform(this._element, `translate(-50%, -50%) translate(${this._pos.x}px, ${this._pos.y}px)`);
+        DOM.setTransform(this._element, `${anchorTranslate[anchor]} translate(${offsetedPos.x}px,${offsetedPos.y}px)`);
+    }
+
+    /**
+     * Get the marker's anchor.
+     * @returns {Point}
+     */
+    getAnchor() {
+        return this._anchor;
+    }
+
+    /**
+     * Sets the anchor of the marker
+     * @param {PointLike} [anchor] The anchor in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up.
+     * @returns {Marker} `this`
+     */
+    setAnchor(anchor: PointLike) {
+        this._anchor = Point.convert(anchor);
+        this._update();
+        return this;
     }
 
     /**
@@ -300,4 +394,51 @@ class Marker {
     }
 }
 
+function normalizeOffset(offset: ?Offset) {
+    if (!offset) {
+        return normalizeOffset(new Point(0, 0));
+
+    } else if (typeof offset === 'number') {
+        // 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 {
+            'top': new Point(0, offset),
+            'top-left': new Point(cornerOffset, cornerOffset),
+            'top-right': new Point(-cornerOffset, cornerOffset),
+            'bottom': new Point(0, -offset),
+            'bottom-left': new Point(cornerOffset, -cornerOffset),
+            'bottom-right': new Point(-cornerOffset, -cornerOffset),
+            'left': new Point(offset, 0),
+            'right': new Point(-offset, 0)
+        };
+
+    } else if (offset instanceof Point || Array.isArray(offset)) {
+        // input specifies a single offset to be applied to all positions
+        const convertedOffset = Point.convert(offset);
+        return {
+            'top': convertedOffset,
+            'top-left': convertedOffset,
+            'top-right': convertedOffset,
+            'bottom': convertedOffset,
+            'bottom-left': convertedOffset,
+            'bottom-right': convertedOffset,
+            'left': convertedOffset,
+            'right': convertedOffset
+        };
+
+    } else {
+        // input specifies an offset per position
+        return {
+            '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]),
+            'bottom': Point.convert(offset['bottom'] || [0, 0]),
+            'bottom-left': Point.convert(offset['bottom-left'] || [0, 0]),
+            'bottom-right': Point.convert(offset['bottom-right'] || [0, 0]),
+            'left': Point.convert(offset['left'] || [0, 0]),
+            'right': Point.convert(offset['right'] || [0, 0])
+        };
+    }
+}
+
 module.exports = Marker;

test/unit/ui/marker.test.js

@@ -80,7 +80,7 @@ test('Marker', (t) => {
         const element = window.document.createElement('div');
         const marker = new Marker(element).setLngLat([0, 0]).addTo(map);
         const translate = Math.round(map.getContainer().offsetWidth / 2);
-        t.equal(marker.getElement().style.transform, `translate(-50%, -50%) translate(${translate}px, ${translate}px)`, 'Marker centered');
+        t.equal(marker.getElement().style.transform, `translate(-50%, -50%), translate(${translate}px, ${translate}px)`, 'Marker centered');
         t.end();
     });