label for circle marker in leaflet

javascript, leaflet

Solution

`L.CircleMarker` extended from `L.Path` not `L.Marker`, so if you compare https://github.com/Leaflet/Leaflet.label/blob/master/src/Path.Label.js and https://github.com/Leaflet/Leaflet.label/blob/master/src/Marker.Label.js you can find that `Path` doesn't have any options and this logic you must implement yourself. For example:

L.CircleMarker.include({
    bindLabel: function (content, options) {
        if (!this._label || this._label.options !== options) {
            this._label = new L.Label(options, this);
        }

        this._label.setContent(content);
        this._labelNoHide = options && options.noHide;

        if (!this._showLabelAdded) {
            if (this._labelNoHide) {
                this
                    .on('remove', this.hideLabel, this)
                    .on('move', this._moveLabel, this);
                this._showLabel({latlng: this.getLatLng()});
            } else {
                this
                    .on('mouseover', this._showLabel, this)
                    .on('mousemove', this._moveLabel, this)
                    .on('mouseout remove', this._hideLabel, this);
                if (L.Browser.touch) {
                    this.on('click', this._showLabel, this);
                }
            }
            this._showLabelAdded = true;
        }

        return this;
    },

    unbindLabel: function () {
        if (this._label) {
            this._hideLabel();
            this._label = null;
            this._showLabelAdded = false;
            if (this._labelNoHide) {
                this
                    .off('remove', this._hideLabel, this)
                    .off('move', this._moveLabel, this);
            } else {
                this
                    .off('mouseover', this._showLabel, this)
                    .off('mousemove', this._moveLabel, this)
                    .off('mouseout remove', this._hideLabel, this);
            }
        }
        return this;
    }
});

L.circleMarker([53.902257, 27.541640] ,{title: 'unselected'}).addTo(map).bindLabel('Destination', { noHide: true });

Problem

I am able to add label to circlemarker like this ``` L.circleMarker(points[i],{title: 'unselected'}).bindLabel('Destination').addTo(map); ``` This adds label which appears on mouse hover on circle marker. But I want to add static label which will appear regardless of mouse is on that circle marker or not. I am referring this demo http://leaflet.github.com/Leaflet.label/ for adding static label to circle marker but some how I am not able to do it. It is working fine with markers but with circle Markers static label is not working. Also is there any other method to add label on circle marker ?

Original source