Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

custom colors for default markers #6416

Merged
merged 1 commit into from
Mar 29, 2018
Merged

custom colors for default markers #6416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion debug/markers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
8 changes: 6 additions & 2 deletions src/ui/marker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import type {MapMouseEvent} from './events';
type Options = {
element?: HTMLElement,
offset?: PointLike,
anchor?: Anchor
anchor?: Anchor,
color?: string
};

/**
Expand All @@ -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])
Expand All @@ -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
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand Down
6 changes: 6 additions & 0 deletions test/unit/ui/marker.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down