leaflet / leaflet.label Goto Github PK

Hi there,

first of all thanks for this plugin is great and very useful! Good job.

What i want to do is to show the labels all time, not only on rollover state. I'm testing a whole of possibilities, but only one works, in the marker case, an example of my code:

var marker = new L.Marker([41.38792,2.169919]);
marker.bindLabel('Barcelona', {noHide: true});
marker.bindPopup('My Popup');
self.marker_layer.addLayer(marker);
marker.showLabel();`

This works, but i want to use circleMarker as below:

var circle = new L.CircleMarker([41.38792,2.169919], self.path_options);
circle.bindLabel('Barcelona', {noHide: true});
circle.bindPopup('My Popup');
self.marker_layer.addLayer(circle);
circle.showLabel();`

After doing that, console shows an error: something like showLabel() doesn't exists in circle instance

Any idea how can i solve that?
Thanks for your time.
C.

As soon as I include the js & css files, I get the range error, and my working map stops working.

I have a several markers that I want to add labels to and I want them all to be apart of a Layer Group so I can turn them on/off whenever I want.

How does this work with Leaflet.label? You can't use .showLabel() until after a marker has been added to the map. But when using Layer Groups, you never actually add the marker itself to the map. You add it to a Layer Group and then add the Layer Group to the map. So after adding the layer group to the map do you have to iterate through the markers and showLabel() on each one?

var markers = [
  L.marker([1,1]).bindLabel('my label', {noHide: true}),
  L.marker([2,2]).bindLabel('another marker', {noHide: true})
];
var layer = L.layerGroup(markers).addTo(map);

for( i in layer._layers)
  layer._layers[i].showLabel();

Is that how you do it? It really seems showing/hiding the label should be more automatic. Is there any way to bind the label to the marker such that when the marker is added/removed from the map the label is also automatically shown/hidden?

For example, continuing from above, if I do map.removeLayer(layer) then the markers and labels disappear as expected. But then if I do layer.addTo(map), then I have to again, iterate through the markers and manually showLabel().

Am I missing something or is this the only way to do it?

I've made a jsfiddle to illustrate this issue here http://jsfiddle.net/removed/ , in the jsfiddle you will notice what i mean if you start to zoom in and out quickly you will notice it quicker when using mouse wheel but it happens during zooming in and out process period. Basically the leaflet labels just float around map for a second and label is not connected to marker during this.

Thank you very much if you can help and if you cant help thank you for trying.

Hi. When I have a popup open, and I hover any of the markers that are on the map, the icon gets removed. Once you put the pointer off the marker the icon will appear again. The Label part is working ok. This happened since I started using Marker.Label

Thanks.

The label binds and adds to map properly, but showLabel is undefined.

As per subject: a second call to showLabel() throws an error: showLabel() is not a function.
While this works:

var layerForti = L.geoJson( jsonForti, {
    pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: iconForti});
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.Name);
        layer.bindLabel(feature.properties.Name).showLabel();     //first call! is needed indeed!
    }
});


var layerFuneRiva = L.geoJson( jsonImpiantiFuneRiva, {
    pointToLayer: function (feature, latlng) {
            return L.marker(latlng);
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.Name + '<br />' + feature.properties.Description);
        layer.bindLabel(feature.properties.Name).addTo(lmap);    //<---note this
    }
});

This don't:

var layerForti = L.geoJson( jsonForti, {
    pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: iconForti});
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.Name);
        layer.bindLabel(feature.properties.Name).showLabel();    
    }
});


var layerFuneRiva = L.geoJson( jsonImpiantiFuneRiva, {
    pointToLayer: function (feature, latlng) {
            return L.marker(latlng);
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.Name + '<br />' + feature.properties.Description);
        layer.bindLabel(feature.properties.Name).showLabel(); //nor this does: layer.bindLabel(feature.properties.Name).addTo(lmap).showLabel(); 
    }
});
[...]
var overlayMaps = { 'Forti Alto Garda': layerForti, 'Impianti a Fune Riva': layerFuneRiva, 'Vie Patrioti Riva-Arco': layerViePatrioti, 'Mandrone': layerMandron };

L.control.layers(null,overlayMaps, {collapsed: false}).addTo(lmap);

May be I miss something?

For example:

var m1 = L.marker([-37.7772, 175.2606]).bindLabel('Look revealing label!');     
var m2 = L.marker([-37.785, 175.263], {draggable:true}).bindLabel('A sweet static label!', { noHide: true }).showLabel();
var g = L.featureGroup([m1,m2]).addTo(map);

Try typing in the console

map.setZoom(14, {animate:false})

on the demo page (http://leaflet.github.io/Leaflet.label/)

Or, without disabling animation

map.setZoom(5)

Are there any workarounds?

Hi -- and thanks for this nice plugin. I am trying to attach it to a multipolygon and I am getting an issue

Uncaught TypeError: Object # has no method bindLabel

    function onEachFeature(feature, layer) {

      .....  removed code for other functions

        layer.bindLabel('Even polylines can have labels.');
    }

Hi,

first of all thanks for the plugin, in particular for static labels and the ability to have several labels display at the same time.

However, when using your plugin together with markercluster, static labels do not show up again when a marker is unclustered. Furthermore, once the zoom level changes, a static label of a marker, that was unclustered before and is still unclustered, disappears.

Best regards,
ugh-bough

I use leaflet label with hover events of markers to display information only on mouseover.

If the label is visible when hovering and in that specific moment the underlying latlng of the marker is changed, the label will remain stuck on visible and not disappear on mouseout as it should do.

This happens in some cases when 2 markers are next to each other, close enough so that the label from the 1st marker will overlap the 2nd marker.

1. When the markers are on the same latitude:
   • If the label for the 1st marker is set to display on hover, the label from the 1st marker will correctly cover the 2nd marker.
   • If the label for the 1st marker is set to always show (noHide:true), the label from the 1st marker will be displayed behind the 2nd marker.
2. When the 2nd marker is on a latitude slightly more north than the first marker, the label from the 1st marker will be correctly cover the 2nd marker.
3. When the 2nd marker is on a latitude slightly more south than the first marker, the label from the 1st marker will be displayed behind the 2nd marker.

See http://jsfiddle.net/Valorum/J8w6c/ for a demonstration of the problem.

The main problem is example 3a in the demonstration. It should behave like 1a and 2a.

The not-so-clear area is when you have 2 markers with labels which are both shown statically, as shown in examples 1b, 2b and 3b in the demonstration linked to above. 1b and 3b seem more correct than 2b in how the labels overlap each other.

However, in 1b and 3b, the label from the marker on the left is displayed behind the marker on the right, which I think is incorrect / unexpected. Example 2b seems more correct in that case.

Obviously this creates a weird situation where the label from the marker on the left would cover the marker on the right, but not the label from the marker on the right. This may be unfeasible to do?

I think that the rules that are clear are:

1. Labels should always overlap markers. (If not when they're static, then certainly when they are shown dynamically on hover.)
2. Labels that are shown dynamically on hover should overlap labels that are shown statically.

Hi Jacob,

thanks for your previous response (and also Mourner) on the multipolygon. To be honest, I wish that the label behaviour would be standard in leaflet (next to the popin), along with the marker cluster plugin. Really great work.
I do have one issue still, my map removes and adds layers on the fly (triggered by the moveend in Leaflet). However, if a label is opened while zooming or moving the map, the underlying layer gets removed but the label div is not and ends up permanently in the map.
Any ideas on how to solve this?
Thanks for your help!

Kind regards,

Carst

Labels are the topmost layer of the map, thus they are overlapped by markers when shown. Changing z-index value in CSS does not seem to have impact on this.

The label flickers or messes up on circlemarkers since it doesn't follow and the label starts inside. When label is triggered on hover, and you mouseover and the mouse crosses the label, it mouseouts, then it mouseins again when you move, so it just toggles back and forth when you are running around over the label area

Thank you for the great leaflet!

After adding labels to the map, I call map.setView(latlng, z);

If the difference in current z and next z value is too much, leaflet map will not animate the zoom, but will reset the map directly to the new zoom-level.

The labels, however does not seem to update on this event.

Reproduce: http://jsfiddle.net/jZv7W/37/

the _updatePosition() function is not called because of this check:
(I have set direction to be 'left' or 'right', and so the check fails)

    if (!this._animated || this.options.direction === 'auto') {
        this._updatePosition();
    }

Suggestion:
listen for 'map.zoomend', or a smarter check in the _onMoveEnd

I tried to combine it with https://github.com/danzel/Leaflet.markercluster but labels won't show when markers are shown separately.

when add markers http://absemetov.koding.com/maps/index.html
previous marker hide label

Hi, thank you for this great plugin! The plugin is awesome but I have an issue when using labels for circlemakers. Labesl for CircleMarkers seem to be too far away from the CircleMarkers themselves as shown in the following link https://dl.dropboxusercontent.com/u/9073574/Screen%20Shot%202013-12-06%20at%2010.42.11%20PM.png . For example, the "CDG" label should be next to the circlemaker in France, but it's all the way in Africa. Does anyone know how to fix this? Thanks!

If i use the plugin, the label shows only once. When i hover other markers the label doesnt show.
When i zoom in or out, the label plugin shows only one label en then again no other labels.
I'm using leaflet 0.7
(also happens on the demo page)

There is a bug in Path.Label.js line 29-32:

The events are not removed by Leaflet unless you add the context (this):

        this
            .off('mouseover', this._showLabel, this)
            .off('mousemove', this._moveLabel, this)
            .off('mouseout remove', this._hideLabel, this);

Hi

if you use the cluster plugin and you have marker in the cluster and you zoom into the cluster. You don't see the label again, this will not restored in this case.

kind regards

Hello!
I try to get a label on the map for marker from feature of geojson data.
Unfortunatly, displays titles only, and only when I delete code for label :(
Can anybody check my code what is wrong?

var Callsign = new L.geoJson(null, {
                pointToLayer: function (feature, latlng) {
                        var iconUrl = feature.properties.image;
                        return L.marker(latlng,{icon:L.icon({iconUrl:iconUrl}),title:feature.properties.name},{draggable:true}).bindLabel(feature.properties.name,{noHide: true})
                        },
                        onEachFeature: function (feature, layer) {
                          if (feature.properties) {
                            var content =
                                '' + ' '+ ' ' +
                                '' + '' + feature.properties.name + ''+ '' +
                                '
' + ''+ 'Comment:' + '' + ' '+ ' '+ feature.properties.comment +
                                '
' + ''+ 'Status:' + '' + ' '+ ' '+ feature.properties.status +
                                '
' + ''+ 'Speed:' + '' + ' '+ ' '+ feature.properties.speed +
                                '
' + ''+ 'Time:' + '' + ' '+ ' '+ feature.properties.time;
                        layer.bindPopup(content)
                        }
                        }
                });

I have to add custom cities name with a circleMarker on my map. But I want to click throu the label because a have KML polygone under it that can be selected.

var ville_label = new L.CircleMarker(
    [lat, lng],
    {
        clickable: false,
        pointerEvents: "none",
        radius: (1/zoom)*12
    }
).bindLabel(lib, { noHide: true })
.addTo(ville_layer);

IE doesn't supprot pointer-events and the Label is a div element and not a SVG.

Is it possible to call showLabel() oneachfeature when using L.geoJson Layer because as of now setting noHide doesn't show label.

Hi

if you remove a marker from the map and add it again (this is needed if you move a marker, that stay in a cluster), then the label will not showen again.

kind regards

Hello,

on my map I need to show static Labels on my markers. These markers are moving every 20 seconds by the L.Marker.setLatLng(LatLng) method, but the static label stays in place.

In addition to that, if I remove that marker from the map (removeLayer(myMarker)), the label is still there.

I have found a workaround which seems to be very complicated:

                        myMarker.hideLabel();
                        myMarker.unbindLabel();
                        myMarker.setLatLng(new L.LatLng(myNewLatLog));
                        myMarker.bindLabel(myLabeLText,{noHide: true});
                        myMarker.showLabel();

Setup: Leaflet >= 0.6

For some MultiPolygons there’s a problem with labels. Sometimes they don’t go away and remain on the canvas.

Reproduction: I just added Leaflet.label to the standard Interactive Choropleth Map tutorial. Go here http://jsfiddle.net/jZv7W/1/ and hover over "Washington" (upper left) a few times.

The crucial line is

layer.bindLabel("str").addTo(map);

in the highlightFeature function.

Any help or a fix would be highly appreciated.

Labels seem to fail to respect .setOpacity(1) when running Leaflet 0.7-dev (commit: 64b0e340c05a10621d371bf35528433f9897f9ba) with the current leaflet.label master (commit: c057781).

var marker =  L.marker([51.4775,-0.461389], {riseOnHover: true});
marker.bindLabel('Heathrow (LHR)', { direction: 'auto' });
marker.setOpacity(1);

Expected result: Marker and label are both solid (i.e. no other map elements are visible beneath them)

Actual result: Marker is solid but label is not (map elements are faintly visible beneath the label)

UPDATE: Bogus issue (sorry). Should have realised that most of the label's opacity is controlled via the CSS ;)

Hello,

I am showing a lot of static labels on my map. My current problem is, that if I open a Leaflet popup, I cant read all information because the labels are on top of that.

Is there any way to bring that popup to front or the labels to back?

Regards

For circlemarkers and other cases, would be nice to have top and bottom label options. Most other javascript label libs have something like this, for example
http://getbootstrap.com/javascript/#tooltips

Possible enhancement?

Thank you!
Ryan

Labels don't work well with popups. My goal here is:

• When mouse over a layer show a label
• When clicking on a layer hide the label and show the popup
• While a popup is open don't show a label.

This can be one with the following changes:

• Make sure Leaflet/Leaflet#1641 is applied
• Don't show a label when a popup is visible

L.Map

  showLabel: function (label) {
    if (this._popup)
      return;

    this._label = label;

    return this.addLayer(label);
  }
});

• In the L.Label onAdd method change:

    if (L.Browser.touch && !this.options.noHide) {
      L.DomEvent.on(this._container, 'click', this.close, this);
    }*/

To:

    if (!this.options.noHide) {
      L.DomEvent.on(this._source, 'click', this.close, this);
    }

This supports desktop browsers (a main place where labels are needed) and detects clicks on the actual layer versus the label container (which doesn't work when using a mouse).

Happy to put together a pull request if desired.

Thanks - Charlie

For some reason Chrome 32 doesn't want to repaint the labels when we show them. See https://github.com/Leaflet/Leaflet.label/blob/master/src/BaseMarkerMethods.js#L6.

When I add a breakpoint in the Chrome dev tools the label will show, I suspect this is because of the semi-transparent overlay the the dev tools places over the window will cause a repaint.

Forcing a reflow doesn't fix the issue.

It would be really nice to be able to specify a timeout on labels, so they don't close immediately after mousing away. This can be done with a setTimeout, and a clearTimeout for the case when there shouldn't be any delay (such as mousing directly over another marker).

Example:

marker.bindLabel("Test marker!", {
    closeDelay: 500  // 500 millisecond delay after mousing away before label closes
}).addTo(map);

It would be convenient if leaflet.label was available to install via bower: http://bower.io/#defining-a-package

is there a way to hide a label in case it overlaps with another one?

ideally each marker should have a thing like a label priority. among the overlapping labels the one which has the highest priority is the only visible.

also it would be nice to change the orientation of a label in case it overlaps

See the example.html static draggable marker.

I would prefer to not use master for my npm install tarball url.

This is a question and perhaps even a feature request, if such are alllowed here.

I am trying to make Leaflet.labels draggable to be able to read overlapping labels (see attached image). I have, of course, tried adding { draggable: true } to the bindLabel call. It does not seem to be supported. Neither does { direction : auto } help me here, because my map has so many labels.

With a very limited Javascript knowledge I am unable to solve this by myself, and therefore any help is much appreciated.

Clarification: I only want to drag the label, not the related marker.

Right now labels are always display on the right side of an object. Hence they are partially hidden when the object is dragged to the right edge of a map. There should be an option to display them at the opposite side of where they are displayed. For example, to the left of an object.

had to make this change to get it to work with leaflet 0.8, is there a dev branch?

Calling L.noConflict() method and using Label plugin raises TypeError: L is undefined.
Possible simple fix is to define local (to plugin module) variable L and assign it global variable L:

(function (window, document, undefined) {
var L = window.L;
...
}(this, document));

Hello!
When I build Leaflet.label-0.1.4 with Leaflet-0.6.4, I get the error (1 of 75 files):
"ERROR - Cannot read: src\dom\DomEvent.Pointer.js
1 error(s), 0 warning(s)"

Is it critical for work with Leaflet.label?
Sergey.

This happens because of this line which attaches the label to the marker pane:

this._pane = this._source instanceof L.Marker ? map._panes.markerPane : map._panes.popupPane;

https://github.com/Leaflet/Leaflet.label/blob/master/src/Label.js#L26

Always attaching the label to the popupPane resolves the issue:

this._pane = map._panes.popupPane;

Hi!

The label works great for markers and polygons, but not for multi polygons. It creates a "leaflet Object [object Object] has no method 'bindLabel' " error (which i can catch, but then i end up without labels for some of my layers...)
As it's really similar to polygons, is there any way to solve this?

Best regards,

Carst

I can't delete a Leaflet.label after beeing added. And I didn't find any documentation or exemple about this.

The css animation -webkit-transform: translate3d causes blurry text on labels when zooming the map.

And working with clusters this effect grows, because new labels from clusters hasn't blur but old labels on the map yes.

Hi,

I haven't had a huge amount of time to do any more testing, but I seem to have an issue showing labels on GeoJSON objects (specifically, Polygons and Multipolygons). The plugin works great for GeoJSON-sourced Points though.

The label itself displays fine when I hover over a path, but I can't seem to invoke showLabel() on a non-Point.

(This might be related to Issue #10 ... I guess)
The following snippet create a layer with some polygon data from region, but fails with a "has no method 'showLabel'" error. The same code works fine for geojson point source data.

var layer = L.geoJson(region,{
                                onEachFeature: function (feature, layer) {
                                  layer.bindLabel(feature.properties.name, {noHide:true});
                                }
                              }
                            }).addTo(map);
layer.eachLayer(function(l) { l.showLabel();});

I also tried getting the demo to show the path label on load, but no dice. Am I being thick, or isn't showLabel() supported in this manner?