Best method to label polygon in leaflet?

Question

I am labeling 6 polygons in a GeoJson file. I am using the circleMarker on the each polygon centroid then calling .bindLabel, but I get this error: "circleMarker.bindLabel is not a function". Leaflet.label.js is called.

The map.

Code for GeoJSON:

var districts = L.geoJson(null, {
  style: function (feature) {
    return {
        weight: 1,
        opacity: 1,
        color: 'blueviolet',
        fillColor: 'plum',
        fillOpacity: 0.5
    };
  },


onEachFeature: function (feature, layer) {
    layer.on('mouseover', function () {
      this.setStyle({
        'fillColor': '#0000ff'
      });
    });
    layer.on('mouseout', function () {
      this.setStyle({
        'fillColor': 'plum'
      });
    });
    layer.on('click', function () {
    window.location = feature.properties.URL;
    });

var circleMarker = L.circleMarker(layer.getBounds().getCenter());
// e.g. using Leaflet.label plugin
circleMarker.bindLabel(feature.properties['NAME'], { noHide: true })
    .circleMarker.addTo(map);
}

});

$.getJSON("data/districts.geojson", function (data) {
  districts.addData(data);
});

Answer 1

You're calling a circleMarker method on your circleMarker object instance. That will never work. L.CircleMarker doesn't have a circleMarker method. This won't work:

circleMarker.bindLabel(feature.properties['NAME'], { noHide: true }).circleMarker.addTo(map);

This will:

circleMarker.bindLabel(feature.properties['NAME'], { noHide: true }).addTo(map);

And this will too:

circleMarker.bindLabel(feature.properties['NAME'], { noHide: true });
circleMarker.addTo(map);

But if you want to add a label without using L.CircleMarker you can simply do:

onEachFeature: function (feature, layer) {
    layer.bindLabel(feature.properties['NAME'], { 'noHide': true });
}

You're also loading your scripts in the incorrect order:

<script src="assets/leaflet-label/leaflet.label.js"></script>
<script src="assets/leaflet-0.7.2/leaflet.js"></script>

Leaflet.label wants to extend classes from Leaflet, but it can't because Leaflet itself isn't loaded yet. So yes, you've loaded Leaflet.label, just not at the correct time. You could see this in your console, because Leaflet.label should throw an error when it doesn't find Leaflet. The correct way:

<script src="assets/leaflet-0.7.2/leaflet.js"></script>
<script src="assets/leaflet-label/leaflet.label.js"></script>