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 1 commit
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
16 changes: 14 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,22 @@ class Marker {
svg.appendChild(page1);

element.appendChild(svg);

// if no element and no offset option given apply an offset for the default marker
const defaultMarkerOffset = [0, -14];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did you determine the -14 through trial and error or some other way? seeing that the SVG is 41px tall makes this number non-obvious to me, although it looks great when I tested the branch. it would be nice to avoid hardcoding this constant and get the offset from some of the SVG properties.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually opened the SVG in Inkscape and measured the distance from the image center to where the tip is, but you could calculate it based on the center of the shadow ellipse, from the SVG, but it would add a fair bit more code and not sure how useful that would be. I've added some comments on where the -14 magic number came from.

What do you think, should be leave it as is with the comment or go ahead and calculate it on the fly from the SVG?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gotcha – I think we can leave it hardcoded for now with the comment.

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