top and bottom labels

[ryansit]

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

[jacobtoye]

This would certainly be possible. You are welcome to submit a pull request if you like.

[astetik]

This would be a very important enhancement. With a large number of markers label is lost behind them(. Thank you.

[heyheyjp]

+1

[davidjb]

+1, this would be great.

[Danielku15]

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.