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

Provide default element for Marker class per #3557 #5661

Merged
merged 5 commits into from
Nov 16, 2017
Merged

Provide default element for Marker class per #3557 #5661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19e8b06
Add default marker icon for Marker class
Syntaf Nov 12, 2017
4e5aa13
Add createNS function in dom.js for namespace URI elements
Syntaf Nov 12, 2017
dd3ef97
Refactor marker.js code to follow mapbox conventions
Syntaf Nov 12, 2017
817c303
Modify default marker SVG in Marker.js
Syntaf Nov 14, 2017
47f8f28
Write unit test and JSDoc for default map marker
Syntaf Nov 16, 2017
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
97 changes: 95 additions & 2 deletions src/ui/marker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import type {MapMouseEvent} from './events';

/**
* Creates a marker component
* @param element DOM element to use as a marker (creates a div element by default)
* @param element DOM element to use as a marker. If left unspecified a default SVG will be created as the DOM element to use.
* @param options
* @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.
* @example
Expand All @@ -35,7 +35,100 @@ class Marker {

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

if (!element) element = DOM.create('div');
if (!element) {
element = DOM.create('div');

// create default map marker SVG
const svg = DOM.createNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttributeNS(null, 'height', '41px');
svg.setAttributeNS(null, 'width', '27px');
svg.setAttributeNS(null, 'viewBox', '0 0 27 41');

const markerLarge = DOM.createNS('http://www.w3.org/2000/svg', 'g');
markerLarge.setAttributeNS(null, 'stroke', 'none');
markerLarge.setAttributeNS(null, 'stroke-width', '1');
markerLarge.setAttributeNS(null, 'fill', 'none');
markerLarge.setAttributeNS(null, 'fill-rule', 'evenodd');

const page1 = DOM.createNS('http://www.w3.org/2000/svg', 'g');
page1.setAttributeNS(null, 'fill-rule', 'nonzero');

const shadow = DOM.createNS('http://www.w3.org/2000/svg', 'g');
shadow.setAttributeNS(null, 'transform', 'translate(3.0, 29.0)');
shadow.setAttributeNS(null, 'fill', '#000000');

const ellipses = [
{'rx': '10.5', 'ry': '5.25002273'},
{'rx': '10.5', 'ry': '5.25002273'},
{'rx': '9.5', 'ry': '4.77275007'},
{'rx': '8.5', 'ry': '4.29549936'},
{'rx': '7.5', 'ry': '3.81822308'},
{'rx': '6.5', 'ry': '3.34094679'},
{'rx': '5.5', 'ry': '2.86367051'},
{'rx': '4.5', 'ry': '2.38636864'}
];

for (const data of ellipses) {
const ellipse = DOM.createNS('http://www.w3.org/2000/svg', 'ellipse');
ellipse.setAttributeNS(null, 'opacity', '0.04');
ellipse.setAttributeNS(null, 'cx', '10.5');
ellipse.setAttributeNS(null, 'cy', '5.80029008');
ellipse.setAttributeNS(null, 'rx', data['rx']);
ellipse.setAttributeNS(null, 'ry', data['ry']);
shadow.appendChild(ellipse);
}

const background = DOM.createNS('http://www.w3.org/2000/svg', 'g');
background.setAttributeNS(null, 'fill', '#3FB1CE');

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');

background.appendChild(bgPath);

const border = DOM.createNS('http://www.w3.org/2000/svg', 'g');
border.setAttributeNS(null, 'opacity', '0.25');
border.setAttributeNS(null, 'fill', '#000000');

const borderPath = DOM.createNS('http://www.w3.org/2000/svg', 'path');
borderPath.setAttributeNS(null, 'd', 'M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z');

border.appendChild(borderPath);

const maki = DOM.createNS('http://www.w3.org/2000/svg', 'g');
maki.setAttributeNS(null, 'transform', 'translate(6.0, 7.0)');
maki.setAttributeNS(null, 'fill', '#FFFFFF');

const circleContainer = DOM.createNS('http://www.w3.org/2000/svg', 'g');
circleContainer.setAttributeNS(null, 'transform', 'translate(8.0, 8.0)');

const circle1 = DOM.createNS('http://www.w3.org/2000/svg', 'circle');
circle1.setAttributeNS(null, 'fill', '#000000');
circle1.setAttributeNS(null, 'opacity', '0.25');
circle1.setAttributeNS(null, 'cx', '5.5');
circle1.setAttributeNS(null, 'cy', '5.5');
circle1.setAttributeNS(null, 'r', '5.4999962');

const circle2 = DOM.createNS('http://www.w3.org/2000/svg', 'circle');
circle2.setAttributeNS(null, 'fill', '#FFFFFF');
circle2.setAttributeNS(null, 'cx', '5.5');
circle2.setAttributeNS(null, 'cy', '5.5');
circle2.setAttributeNS(null, 'r', '5.4999962');

circleContainer.appendChild(circle1);
circleContainer.appendChild(circle2);

page1.appendChild(shadow);
page1.appendChild(background);
page1.appendChild(border);
page1.appendChild(maki);
page1.appendChild(circleContainer);

svg.appendChild(page1);

element.appendChild(svg);
}

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

Expand Down
5 changes: 5 additions & 0 deletions src/util/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ exports.create = function (tagName: *, className?: string, container?: HTMLEleme
return el;
};

exports.createNS = function (namespaceURI: string, tagName: string) {
const el = window.document.createElementNS(namespaceURI, tagName);
return el;
};

const docStyle = (window.document.documentElement: any).style;

function testProp(props) {
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 @@ -21,6 +21,12 @@ test('Marker', (t) => {
t.end();
});

t.test('default marker', (t) => {
const marker = new Marker();
t.ok(marker.getElement(), 'default marker is created');
t.end();
});

t.test('marker is added to map', (t) => {
const map = createMap();
const marker = new Marker(window.document.createElement('div')).setLngLat([-77.01866, 38.888]);
Expand Down