Label for circle mark in leaflet

Question

I can add a shortcut to a circlemarker like this

L.circleMarker(points[i],{title: 'unselected'}).bindLabel('Destination').addTo(map); 

This adds a label that appears on the mouse cursor on the circle marker.

But I want to add a static label that will be displayed regardless of whether the mouse is on this circle mark or not.

I refer to this demo http://leaflet.github.com/Leaflet.label/ for adding a static shortcut to the circle marker, but some of how I cannot do this. It works great with markers, but with the static markers markers label it doesn't work.

Also, is there any other way to add a mark to the circle marker?

Answer 1

L.CircleMarker extended with 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 may find that Path has no parameters, and you must implement this logic 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 fix for tbicr's excellent answer (not sure if the API was updated after its response).

You can do it like this:

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