VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-08-15 22:36:58 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Add support for "center" Label position

Browse Source
This commit is contained in:
Yohan Boniface
2016-07-02 10:52:04 +02:00
parent 25fd9dfbd9
commit 2f4b97de19
3 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
debug/map/label.html
View File

@ -41,6 +41,8 @@
L.marker([41.206, 9.44]).addTo(map).bindLabel('click me, I have a popup', {permanent: true, interactive: true}).bindPopup('See?');
L.circleMarker([41.206, 9.48], {color: 'Chocolate', radius: 12}).addTo(map).bindLabel('Hello Left World', {direction: 'left'});
L.circleMarker([41.20, 9.50], {color: 'Chocolate', radius: 12}).addTo(map).bindLabel('Hello top World', {direction: 'top', permanent: true});
L.circleMarker([41.20, 9.47], {color: 'Tomato', radius: 10}).addTo(map).bindLabel('Seems I am centered', {direction: 'center', permanent: true, interactive: true}).bindPopup('Yeah');
L.circleMarker([41.195, 9.47], {color: 'Tomato', radius: 10}).addTo(map).bindLabel('Me too', {direction: 'center'}).bindPopup('Yeah');
var icon = L.divIcon({
className: 'my-div-icon',
html: '<p>A div icon</p>',
@ -49,7 +51,7 @@
L.marker([41.22, 9.48], {icon: icon}).addTo(map).bindLabel('A div icon label following mouse', {sticky: true, direction: 'auto'});
L.marker([41.23, 9.47], {icon: icon}).addTo(map).bindLabel('A div icon label');
L.marker([41.23, 9.42], {draggable: true}).addTo(map).bindLabel('Draggable marker label', {permanent: true, direction: 'auto'});
L.marker([41.19, 9.45]).addTo(map).bindLabel('Clickable marker label', {permanent: true, interactive: true}).on('click', function () { alert('clicked!'); });
L.marker([41.19, 9.43]).addTo(map).bindLabel('Clickable marker label', {permanent: true, interactive: true}).on('click', function () { alert('clicked!'); });
var marker1 = L.marker([41.18, 9.45], {description: 'Marker 1'});
var marker2 = L.marker([41.18, 9.46], {description: 'Marker 2'});

13
spec/suites/layer/LabelSpec.js
View File

@ -52,7 +52,7 @@ describe('Label', function () {
expect(map.hasLayer(layer._label)).to.be(false);
});
it("can be make interactive", function () {
it("can be made interactive", function () {
var layer = new L.Marker(center).addTo(map);
var spy = sinon.spy();
layer.on('click', spy);
@ -74,6 +74,17 @@ describe('Label', function () {
expect(spy.calledOnce).to.be(true);
});
it("can be forced on center", function () {
var layer = new L.Marker(center).addTo(map);
var spy = sinon.spy();
layer.on('click', spy);
layer.bindLabel('A label that should be displayed on the center', {permanent: true, direction: 'center', interactive: true});
expect(map.hasLayer(layer._label)).to.be(true);
happen.at('click', 150, 180); // Marker is on the map center, which is 400px large.
expect(spy.calledOnce).to.be(true);
});
it("honours opacity option", function () {
var layer = new L.Marker(center).addTo(map);
layer.bindLabel('Label', {permanent: true, opacity: 0.57});

4
src/layer/Label.js
View File

@ -36,7 +36,7 @@ L.Label = L.PopupBase.extend({
// @option direction: String = 'right'
// Direction where to open the label. Possible values are: `right`, `left`,
// `top`, `bottom`, `auto`.
// `top`, `bottom`, `center`, `auto`.
// `auto` will dynamicaly switch between `right` and `left` according to the label
// position on the map.
direction: 'right',
@ -128,6 +128,8 @@ L.Label = L.PopupBase.extend({
pos = pos.add(L.point(-labelWidth / 2, -labelHeight + offset.y + anchor.y));
} else if (direction === 'bottom') {
pos = pos.subtract(L.point(labelWidth / 2, offset.y));
} else if (direction === 'center') {
pos = pos.subtract(L.point(labelWidth / 2, labelHeight / 2 - anchor.y));
} else if (direction === 'right' || direction === 'auto' && labelPoint.x < centerPoint.x) {
direction = 'right';
pos = pos.add([offset.x + anchor.x, anchor.y - labelHeight / 2]);