diff --git a/debug/markers.html b/debug/markers.html
index 842352767e5..4de2565f26a 100644
--- a/debug/markers.html
+++ b/debug/markers.html
@@ -37,7 +37,13 @@
var lat = s + (n - s) * Math.random();
var popup = new mapboxgl.Popup().setText('hello hi');
- var marker = new mapboxgl.Marker()
+ var r = Math.round(Math.random() * 255);
+ var g = Math.round(Math.random() * 255);
+ var b = Math.round(Math.random() * 255);
+
+ var marker = new mapboxgl.Marker({
+ color: `rgb(${r}, ${g}, ${b})`
+ })
.setLngLat([lng, lat])
.setPopup(popup)
.addTo(map);
diff --git a/src/ui/marker.js b/src/ui/marker.js
index e09735bec3b..1f9110c52bc 100644
--- a/src/ui/marker.js
+++ b/src/ui/marker.js
@@ -16,7 +16,8 @@ import type {MapMouseEvent} from './events';
type Options = {
element?: HTMLElement,
offset?: PointLike,
- anchor?: Anchor
+ anchor?: Anchor,
+ color?: string
};
/**
@@ -27,6 +28,7 @@ type Options = {
* 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.
+ * @param options.color The color to use for the default marker if options.element is not provided. The default is light blue.
* @example
* var marker = new mapboxgl.Marker()
* .setLngLat([30.5, 50.5])
@@ -41,6 +43,7 @@ export default class Marker {
_popup: ?Popup;
_lngLat: LngLat;
_pos: ?Point;
+ _color: ?string;
constructor(options?: Options) {
// For backward compatibility -- the constructor used to accept the element as a
@@ -52,6 +55,7 @@ export default class Marker {
bindAll(['_update', '_onMapClick'], this);
this._anchor = options && options.anchor || 'center';
+ this._color = options && options.color || '#3FB1CE';
if (!options || !options.element) {
this._element = DOM.create('div');
@@ -97,7 +101,7 @@ export default class Marker {
}
const background = DOM.createNS('http://www.w3.org/2000/svg', 'g');
- background.setAttributeNS(null, 'fill', '#3FB1CE');
+ background.setAttributeNS(null, 'fill', this._color);
const bgPath = DOM.createNS('http://www.w3.org/2000/svg', 'path');
bgPath.setAttributeNS(null, 'd', 'M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z');
diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js
index e921f3beb6a..cae3d6500f9 100644
--- a/test/unit/ui/marker.test.js
+++ b/test/unit/ui/marker.test.js
@@ -20,6 +20,12 @@ test('Marker uses a default marker element with an appropriate offset', (t) => {
t.end();
});
+test('Marker uses a default marker element with custom color', (t) => {
+ const marker = new Marker({ color: '#123456' });
+ t.ok(marker.getElement().innerHTML.includes('#123456'));
+ t.end();
+});
+
test('Marker uses a default marker with custom offest', (t) => {
const marker = new Marker({ offset: [1, 2] });
t.ok(marker.getElement());