mapbox · ryanhamley · Oct 29, 2019 · Oct 4, 2019 · Oct 4, 2019 · Oct 4, 2019
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<title>Display a map</title>
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+<script src='dist/mapbox-gl.js'></script>
+<link href='dist/mapbox-gl.css' rel='stylesheet' />
+<style>
+body { margin:0; padding:0; }
+#map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+</head>
+<body>
+
+<div id='map'></div>
+<script>
+	mapboxgl.accessToken = 'pk.eyJ1IjoiZGJ1cm5zaWkiLCJhIjoiY2p4Nm5uand6MDFraDNubm5vaThkdGdnbyJ9.TOwUFMiTxFwuAhChYmN0rw';
+	var map = new mapboxgl.Map({
+		container: 'map', // container id
+		style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
+		center: [-74.50, 40], // starting position [lng, lat]
+		zoom: 9, // starting zoom
+		pitch: 50
+	});
+
+	var marker = new mapboxgl.Marker({rotation: 45, rotationAlignment: "map", pitchAlignment: "map", anchor: "top"}).setLngLat([-74.50, 40]).addTo(map);
+	new mapboxgl.Marker().setLngLat([-74.60, 40]).addTo(map);
+
+	//window.setInterval(function(){
+	//	marker.setBearing(marker.getBearing() + 5);		
+	//}, 50);
+
+</script>
+
+</body>
+</html>
diff --git a/src/ui/marker.js b/src/ui/marker.js
@@ -19,7 +19,10 @@ type Options = {
     offset?: PointLike,
     anchor?: Anchor,
     color?: string,
-    draggable?: boolean
+    draggable?: boolean,
+    rotation?: number,
+    rotationAlignment?: string,
+    pitchAlignment?: string
 };
 
 /**
@@ -31,6 +34,9 @@ type Options = {
  * @param {PointLike} [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 {string} [options.color='#3FB1CE'] The color to use for the default marker if options.element is not provided. The default is light blue.
  * @param {boolean} [options.draggable=false] A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
+ * @param {number} [options.rotation=0] The rotation angle of the marker (clockwise, in degrees), relative to its respective {@link Marker#rotationAlignment} setting.
+ * @param {string} [options.pitchAlignment='auto'] `map` aligns the `Marker`'s pitch relative to the map, `viewport` aligns the `Marker`'s pitch relative to the viewport.
+ * @param {string} [options.rotationAlignment='auto'] `map` aligns the `Marker`'s rotation relative to the map, `viewport` aligns the `Marker`'s rotation relative to the viewport.
  * @example
  * var marker = new mapboxgl.Marker()
  *   .setLngLat([30.5, 50.5])
@@ -51,6 +57,9 @@ export default class Marker extends Evented {
     _draggable: boolean;
     _state: 'inactive' | 'pending' | 'active'; // used for handling drag events
     _positionDelta: ?number;
+    _rotation: number;
+    _pitchAlignment: string;
+    _rotationAlignment: string;
 
     constructor(options?: Options, legacyOptions?: Options) {
         super();
@@ -72,6 +81,9 @@ export default class Marker extends Evented {
         this._color = options && options.color || '#3FB1CE';
         this._draggable = options && options.draggable || false;
         this._state = 'inactive';
+        this._rotation = options && options.rotation || 0;
+        this._pitchAlignment = options && options.pitchAlignment || 'auto';
+        this._rotationAlignment = options && options.rotationAlignment || 'auto';
 
         if (!options || !options.element) {
             this._defaultMarker = true;
@@ -344,14 +356,28 @@ export default class Marker extends Evented {
 
         this._pos = this._map.project(this._lngLat)._add(this._offset);
 
+        let rotation = "";
+        if (this._rotationAlignment === "viewport" || this._rotationAlignment === "auto") {
+            rotation = `rotateZ(${this._rotation}deg)`;
+        } else if (this._rotationAlignment === "map") {
+            rotation = `rotateZ(${this._rotation - this._map.getBearing()}deg)`;
+        }
+
+        let pitch = "";
+        if (this._pitchAlignment === "viewport" || this._pitchAlignment === "auto") {
+            pitch = "rotateX(0deg)";
+        } else if (this._pitchAlignment === "map") {
+            pitch = `rotateX(${this._map.getPitch()}deg)`;
+        }
+
         // 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();
         }
 
-        DOM.setTransform(this._element, `${anchorTranslate[this._anchor]} translate(${this._pos.x}px, ${this._pos.y}px)`);
+        DOM.setTransform(this._element, `${anchorTranslate[this._anchor]} translate(${this._pos.x}px, ${this._pos.y}px) ${pitch} ${rotation}`);
     }
 
     /**
@@ -484,4 +510,61 @@ export default class Marker extends Evented {
     isDraggable() {
         return this._draggable;
     }
+
+    /**
+     * Sets the `rotation` property for pointing the marker in a particular direction
+     * @param {number} [rotation=0] Sets the direction the marker is pointing
+     * @returns {Marker} `this`
+     */
+    setRotation(rotation: number) {
+        this._rotation = rotation || 0;
+        this._update();
+        return this;
+    }
+
+    /**
+     * Returns the current rotation angle
+     * @returns {number}
+     */
+    getRotation() {
+        return this._rotation;
+    }
+
+    /**
+     * Sets the `rotateAlignment` property for pointing the marker in a particular direction
+     * @param {string} [alignment='auto'] Sets the reference for marker rotations
+     * @returns {Marker} `this`
+     */
+    setRotationAlignment(alignment: string) {
+        this._rotationAlignment = alignment || 'auto';
+        this._update();
+        return this;
+    }
+
+    /**
+     * Returns the current rotation alignment
+     * @returns {string}
+     */
+    getRotationAlignment() {
+        return this._rotationAlignment;
+    }
+
+    /**
+     * Sets the `pitchAlignment` property for aligning the pitch of a marker with the viewport or the map
+     * @param {string} [alignment='auto'] Sets the pitch alignment property
+     * @returns {Marker} `this`
+     */
+    setPitchAlignment(alignment: string) {
+        this._pitchAlignment = alignment || 'auto';
+        this._update();
+        return this;
+    }
+
+    /**
+     * Returns the current pitch alignment
+     * @returns {string}
+     */
+    getPitchAlignment() {
+        return this._pitchAlignment;
+    }
 }
diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js
@@ -465,3 +465,69 @@ test('Marker with draggable:true does not error if removed on mousedown', (t) =>
     t.ok(map.fire('mouseup'));
     t.end();
 });
+
+test('Marker can set rotationAlignment and pitchAlignment', (t) => {
+    const map = createMap(t);
+    const marker = new Marker({rotationAlignment: 'map', pitchAlignment: 'map'})
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    t.equal(marker.getRotationAlignment(), 'map');
+    t.equal(marker.getPitchAlignment(), 'map');
+
+    map.remove();
+    t.end();
+});
+
+test('Marker can set and update rotation', (t) => {
+    const map = createMap(t);
+    const marker = new Marker({rotation: 45})
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    t.equal(marker.getRotation(), 45);
+
+    marker.setRotation(90);
+    t.equal(marker.getRotation(), 90);
+
+    map.remove();
+    t.end();
+});
+
+test('Marker transforms rotation with the map', (t) => {
+    const map = createMap(t);
+    const marker = new Marker({rotationAlignment: 'map'})
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    const rotationRegex = /rotateZ\(-?([0-9]+)deg\)/;
+    const initialRotation = marker.getElement().style.transform.match(rotationRegex)[1];
+
+    map.setBearing(map.getBearing() + 180);
+
+    const finalRotation = marker.getElement().style.transform.match(rotationRegex)[1];
+    t.notEqual(initialRotation, finalRotation);
+
+    map.remove();
+    t.end();
+});
+
+test('Marker transforms pitch with the map', (t) => {
+    const map = createMap(t);
+    const marker = new Marker({pitchAlignment: 'map'})
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    map.setPitch(0);
+
+    const rotationRegex = /rotateX\(-?([0-9]+)deg\)/;
+    const initialPitch = marker.getElement().style.transform.match(rotationRegex)[1];
+
+    map.setPitch(45);
+
+    const finalPitch = marker.getElement().style.transform.match(rotationRegex)[1];
+    t.notEqual(initialPitch, finalPitch);
+
+    map.remove();
+    t.end();
+});