Leaflet.js geoJson labels

Question

I'm using a geoJson layer with Leaflet.js, showing countries here.

I'm adding country labels with the following:

L.marker(layer.getBounds().getCenter(), {
     icon: L.divIcon({
         className: 'countryLabel',
         html: feature.properties.name,
         iconSize: [0, 0]
     })
}).addTo(map);

The problem is, the markup this applies obstructs the mouseover in the area of each country, causing issues with the mouseover color change and clickable area.

Is there a better solution in leaflet 1.0.3 to supply labels that will not obstruct the countries clickable area?

I've tried code that uses the Leaflet.Label extension like this:

var label = new L.Label();
label.setContent(feature.properties.name);
label.setLatLng(center);
map.showLabel(label);

or

L.marker(center)
  .bindLabel('test', { noHide: true })
  .addTo(map);

But these cause errors; I understand that functionality from this plugin was incorporated into Leaflet.js itself after v1.

This does work, but I'd rather have straightforward labels instead of tooltips:

var marker = new L.marker(center, { opacity: 0.00 }); //opacity may be set to zero
marker.bindTooltip(feature.properties.name, { permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

Any ideas would be welcome.

Julien V · Accepted Answer · 2017-03-21T15:05:17.913

I don't understand why you want it done by a labelled marker.

You can bind a tooltip directly to the features. In your function onEachFeature, instead of var label..., you could do :

layer.bindTooltip(
    feature.properties.name,
    {
        permanent:true,
        direction:'center',
        className: 'countryLabel'
    }
);

with this css :

.countryLabel{
  background: rgba(255, 255, 255, 0);
  border:0;
  border-radius:0px;
  box-shadow: 0 0px 0px;
}

Here is the fiddle .

EDIT

Ok I understand, you want to use a marker to be able to set the position by hand if necessary. Here is a working solution :

You define an hashtable with a latLng for all the exception countries, those for which the feature center is not the center you want :

var exceptions = {
    'France': [45.87471, 2.65],
    'Spain': [40.39676, -4.04397]
}

To display the label, you put an invisible marker at the correct position a bind a tooltip to it :

var label = L.marker(
    exceptions[feature.properties.name] || layer.getBounds().getCenter(),
    {
        icon: L.divIcon({
            html: '',
            iconSize: [0, 0]
        })
    }
).addTo(map);

label.bindTooltip(
    feature.properties.name,
    {
        permanent:true,
        direction:'center',
        className: 'countryLabel'
    }
);

Here is the other fiddle.

Unfortunately, I need to specify where the label goes as the centre of the feature doesn't always point to where I want it, e.g. France has other territory so the label appears out in the ocean. Can I specify it's location? — Alex, Mar 21 '17 at 08:43
Thank you, I guess I could also use the offset: [0, 0] option and pass that to the geoJson data. Appreciate your help. — Alex, Mar 27 '17 at 12:46

Leaflet.js geoJson labels

1 Answers1