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