Bad positionning when noHide with Leaflet.markerCluster

[Florian Burgevin]

Hello,

I have an issue with my labels when I use Leaflet.markercluster.

var geoJsonLayer = L.geoJson(geoJsonData, {
                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(latlng, self.markerStyle);
                },
                onEachFeature: function (feature, layer) {
                    layer.bindLabel(feature.properties.name, {
                        className: "labelMarker",
                        clickable: true,
                        offset: [12, -9],
                        noHide: true
                    });
                }
            });

This is my code for the label and a screen to show the bad positionning of my labels.

Any idea?

[Philippe]

i've got a similiar issue. I'm using geojson and 'nohide' label too. It seem's that only the first drawed label have a correct position. That's like all labels have a relative postion each others.

[Philippe]

Hi,
it's seems that Label use

like :

<div class="leaflet-label leaflet-zoom-animated leaflet-label-right" style="transform: translate3d(353px, 406px, 0px); opacity: 1;">E26</div>

Each div have 'static' position by default. When several are displayed (typically when you set noHide : true), each div is positionned relative to each other. I've resolved my issue by adding absolut position on the div in the CSS

new L.Label({className : 'needAbsolut', offset: [-8, -8], zoomAnimation : false})

and in the css :
.needAbsolut{ position : absolute; }

It's a workaround. I don't know if it have other side effect and if it resolve your issue. Perhaps someone can some light on that ?

[Florian Burgevin]

Thanks for your answer but the position absolute don't solve the problem for me :(

[Philippe]

Perhaps you can try to create a label without associate it to the marker.
I've managed this with :

` //Add static label on staticLabelGroup

staticLabel = new L.Label({className : 'needAbsolut',offset: [-8, -8], zoomAnimation : false})
staticLabel.setContent(shortLabel)
staticLabel.setLatLng(poly.getBounds().getCenter()) `

Instead of getBounds.getCenter you can try directly with your latlng
Just a workaround :/

[Florian Burgevin]

It works well thank you !

But a problem is still there. All the labels are shown even if markers are clustered.
Any idea how to hide some labels?

[Philippe]

I don't use Cluster feature. My problem is simplier. I just want to display or not information depending the zoom level. Perhaps you can combine the methods.

I want to have the labels only on high level zoom. I store this labels on a layergroup which is displayed only on this level

I've added this stuff on map.zoomend :

var staticLabelsLayer  = global.staticLabelsLayer = L.layerGroup();
map.on('zoomend', function() {
            if (map.getZoom() >= 20) {
                staticLabelsLayer.addTo(map)
            } else {
                map.removeLayer(staticLabelsLayer)
            }
        });

And just like previous message (only staticLabelsLayer change)

//Add static label on staticLabelGroup
staticLabel = new L.Label({className : 'needAbsolut',offset: [-8, -8], zoomAnimation : false})
staticLabel.setContent(shortLabel)
staticLabel.setLatLng(poly.getBounds().getCenter())
staticLabelsLayer.addLayer(staticLabel);

Hope this help