Leaflet.label
Leaflet.label copied to clipboard
top and bottom labels
For circlemarkers and other cases, would be nice to have top and bottom label options. Most other javascript label libs have something like this, for example http://getbootstrap.com/javascript/#tooltips
Possible enhancement?
Thank you! Ryan
This would certainly be possible. You are welcome to submit a pull request if you like.
This would be a very important enhancement. With a large number of markers label is lost behind them(. Thank you.
+1
+1, this would be great.
I use this slight adjustment to add top/bottom support. The paddings are a bit a tweaked to our needs and might need better handling in the real integration.
/**
* This is override adds bottom and top direction support for leaflet labels
*/
L.Marker.include({
bindLabel: function (content, options) {
L.BaseMarkerMethods.bindLabel.call(this, content, options);
// change positioning operation
this.label._setPosition = function (pos) {
var map = this._map,
container = this._container,
centerPoint = map.latLngToContainerPoint(map.getCenter()),
labelPoint = map.layerPointToContainerPoint(pos),
direction = this.options.direction,
labelWidth = this._labelWidth,
labelHeight = this._container.offsetHeight,
offset = L.point(this.options.offset);
// position to the right (right or auto & needs to)
L.DomUtil.removeClass(container, 'leaflet-label-top');
L.DomUtil.removeClass(container, 'leaflet-label-right');
L.DomUtil.removeClass(container, 'leaflet-label-left');
L.DomUtil.removeClass(container, 'leaflet-label-bottom');
if (direction === 'auto' && labelPoint.x < centerPoint.x) {
direction = 'right';
}
switch (direction) {
case 'top':
L.DomUtil.addClass(container, 'leaflet-label-top');
// note that we use here the x-offset as "inner padding" via an y-offset
pos = pos.add(L.point(-labelWidth / 2, offset.y - labelHeight));
break;
case 'bottom':
L.DomUtil.addClass(container, 'leaflet-label-bottom');
pos = pos.add(L.point(-labelWidth / 2, 0));
break;
case 'left':
L.DomUtil.addClass(container, 'leaflet-label-left');
pos = pos.add(L.point(-offset.x - labelWidth, offset.y));
break;
case 'right':
default:
L.DomUtil.addClass(container, 'leaflet-label-right');
pos = pos.add(offset);
break;
}
L.DomUtil.setPosition(container, pos);
};
return this;
}
});
I think the options.offset option should be reworked to be 0/0 by default. Labels should then always be placed at the outer border of the marker and centered horizontal or vertical based on the direction
. A new option padding
might control the inner offset between marker and label. The current offset
should really only be used for custom tweaking of a position in case you do not want it centered.
Currently the x/y offsets are not suitable for aligning the labels on all edges properly.