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 wele.

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 wele.

• javascript
• jquery
• jquery-plugins
• geojson
• dc.leaflet.js

1 Answer 1

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.