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

default marker offset #6012

Merged
merged 2 commits into from
Jan 25, 2018
Merged

default marker offset #6012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1761b2
default marker offset
andrewharvey Jan 18, 2018
e49ca66
include details on where the default marker offset number came from
andrewharvey Jan 24, 2018
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
22 changes: 20 additions & 2 deletions src/ui/marker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ class Marker {
_pos: ?Point;

constructor(element: ?HTMLElement, options?: {offset: PointLike}) {
this._offset = Point.convert(options && options.offset || [0, 0]);

bindAll(['_update', '_onMapClick'], this);

if (!element) {
Expand Down Expand Up @@ -127,8 +125,28 @@ class Marker {
svg.appendChild(page1);

element.appendChild(svg);

// if no element and no offset option given apply an offset for the default marker
// the -14 as the y value of the default marker offset was determined as follows
//
// the marker tip is at the center of the shadow ellipse from the default svg
// the y value of the center of the shadow ellipse relative to the svg top left is "shadow transform translate-y (29.0) + ellipse cy (5.80029008)"
// offset to the svg center "height (41 / 2)" gives (29.0 + 5.80029008) - (41 / 2) and rounded for an integer pixel offset gives 14
// negative is used to move the marker up from the center so the tip is at the Marker lngLat
const defaultMarkerOffset = [0, -14];
if (!(options && options.offset)) {
if (!options) {
options = {
offset: defaultMarkerOffset
};
} else {
options.offset = defaultMarkerOffset;
}
}
}

this._offset = Point.convert(options && options.offset || [0, 0]);

element.classList.add('mapboxgl-marker');
this._element = element;

Expand Down
16 changes: 16 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 @@ -6,6 +6,7 @@ const Map = require('../../../src/ui/map');
const Marker = require('../../../src/ui/marker');
const Popup = require('../../../src/ui/popup');
const LngLat = require('../../../src/geo/lng_lat');
const Point = require('@mapbox/point-geometry');

function createMap() {
const container = window.document.createElement('div');
Expand All @@ -25,6 +26,21 @@ test('Marker', (t) => {
t.test('default marker', (t) => {
const marker = new Marker();
t.ok(marker.getElement(), 'default marker is created');
t.ok(marker.getOffset().equals(new Point(0, -14)), 'default marker with no offset uses default marker offset');
t.end();
});

t.test('default marker with some options', (t) => {
const marker = new Marker(null, { foo: 'bar' });
t.ok(marker.getElement(), 'default marker is created');
t.ok(marker.getOffset().equals(new Point(0, -14)), 'default marker with no offset uses default marker offset');
t.end();
});

t.test('default marker with custom offest', (t) => {
const marker = new Marker(null, { offset: [1, 2] });
t.ok(marker.getElement(), 'default marker is created');
t.ok(marker.getOffset().equals(new Point(1, 2)), 'default marker with supplied offset');
t.end();
});

Expand Down