label for circle marker in leaflet

Question

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 ?

Answer 1

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

Answer 2

Just wanted to add an update or correction to tbicr's great response (not sure if the API updated after his response).

You can do this like so:

 // First add your GeoJSON layer
 geojson = L.geoJson(myGeoJson,{
        onEachFeature: onEachFeature
    }).addTo(map);

 // onEachFeature is called every time a polygon is added
 var polys = [];
 function onEachFeature(layer){
     polys.push(layer); // Push the polygons into an array you can call later
 }

 // Now trigger them after they've been added
 $('a').click(function(){
      polys[0].fire('click') // clicks on the first polygon
      polys[1].fire('click') // clicks on the second polygon
 });