fix(marker): add new Marker props (#289)

`anchor`, `rotation`, `pitchAlignment`, and `rotationAlignment`

src/components/Marker/index.js

@@ -14,6 +14,21 @@ type Props = {
   /** Marker content */
   children: React$Node,
 
+  /**
+   * A string indicating the part of the Marker
+   * that should be positioned closest to the coordinate
+   */
+  anchor:
+    | 'center'
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right',
+
   /** The longitude of the center of the marker. */
   longitude: number,
 
@@ -32,6 +47,28 @@ type Props = {
    */
   draggable?: boolean,
 
+  /**
+   * The rotation angle of the marker in degrees, relative to its
+   * respective `rotationAlignment` setting. A positive value will
+   * rotate the marker clockwise.
+   */
+  rotation: number,
+
+  /**
+   * map aligns the `Marker` to the plane of the map. `viewport`
+   * aligns the  Marker to the plane of the viewport. `auto` automatically
+   * matches the value of `rotationAlignment`.
+   */
+  pitchAlignment: string,
+
+  /**
+   * map aligns the `Marker`'s rotation relative to the map, maintaining
+   * a bearing as the map rotates. `viewport` aligns the `Marker`'s rotation
+   * relative to the viewport, agnostic to map rotations.
+   * `auto` is equivalent to `viewport`.
+   */
+  rotationAlignment: string,
+
   /** Fired when the marker is finished being dragged */
   onDragEnd?: (lngLat: LngLat) => any,
 
@@ -52,8 +89,12 @@ class Marker extends PureComponent<Props> {
   static displayName = 'Marker';
 
   static defaultProps = {
+    anchor: 'center',
     offset: null,
-    draggable: false
+    draggable: false,
+    rotation: 0,
+    pitchAlignment: 'auto',
+    rotationAlignment: 'auto'
   };
 
   constructor(props: Props) {
@@ -62,19 +103,16 @@ class Marker extends PureComponent<Props> {
   }
 
   componentDidMount() {
-    const {
-      longitude,
-      latitude,
-      offset,
-      draggable,
-      onDragEnd,
-      onDragStart,
-      onDrag
-    } = this.props;
-
-    this._marker = new mapboxgl.Marker(this._el, {
-      draggable,
-      offset
+    const { longitude, latitude, onDragEnd, onDragStart, onDrag } = this.props;
+
+    this._marker = new mapboxgl.Marker({
+      element: this._el,
+      anchor: this.props.anchor,
+      draggable: this.props.draggable,
+      offset: this.props.offset,
+      rotation: this.props.rotation,
+      pitchAlignment: this.props.pitchAlignment,
+      rotationAlignment: this.props.rotationAlignment
     });
 
     this._marker.setLngLat([longitude, latitude]).addTo(this._map);