Add scale to Marker options

debug/markers.html

@@ -45,8 +45,11 @@
         var g = Math.round(Math.random() * 255);
         var b = Math.round(Math.random() * 255);
 
+        var sc = Math.random(0, 25);
+
         var marker = new mapboxgl.Marker({
             color: `rgb(${r}, ${g}, ${b})`,
+            scale: sc,
             draggable: true,
             rotationAlignment,
             pitchAlignment

src/ui/marker.js

@@ -19,6 +19,7 @@ type Options = {
     offset?: PointLike,
     anchor?: Anchor,
     color?: string,
+    scale?: number,
     draggable?: boolean,
     rotation?: number,
     rotationAlignment?: string,
@@ -33,6 +34,7 @@ type Options = {
  *   Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
  * @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 {number} [options.scale=1] The scale to use for the default marker if options.element is not provided. The default is 1.
  * @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 in degrees, relative to its respective `rotationAlignment` setting. A positive value will rotate the marker clockwise.
  * @param {string} [options.pitchAlignment='auto'] `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`.
@@ -53,6 +55,7 @@ export default class Marker extends Evented {
     _lngLat: LngLat;
     _pos: ?Point;
     _color: ?string;
+    _scale: number;
     _defaultMarker: boolean;
     _draggable: boolean;
     _state: 'inactive' | 'pending' | 'active'; // used for handling drag events
@@ -81,6 +84,7 @@ export default class Marker extends Evented {
 
         this._anchor = options && options.anchor || 'center';
         this._color = options && options.color || '#3FB1CE';
+        this._scale = options && options.scale || 1;
         this._draggable = options && options.draggable || false;
         this._state = 'inactive';
         this._rotation = options && options.rotation || 0;
@@ -180,6 +184,7 @@ export default class Marker extends Evented {
             page1.appendChild(circleContainer);
 
             svg.appendChild(page1);
+            svg.setAttributeNS(null, 'transform', `scale(${this._scale})`);
 
             this._element.appendChild(svg);
 

test/unit/ui/marker.test.js

@@ -27,6 +27,12 @@ test('Marker uses a default marker element with custom color', (t) => {
     t.end();
 });
 
+test('Marker uses a default marker element with custom scale', (t) => {
+    const marker = new Marker({scale: 0.8});
+    t.ok(marker.getElement().innerHTML.includes('0.8'));
+    t.end();
+});
+
 test('Marker uses a default marker with custom offset', (t) => {
     const marker = new Marker({offset: [1, 2]});
     t.ok(marker.getElement());