Leaflet/Leaflet.label

Labels don't disappear on mobile platforms.

dwkns opened this issue · 4 comments

There is no hover in mobile Safari. Labels appear when a marker is clicked.

They disappear if you tap on a map, however if you directly tap on another marker a new label opens and the existing one doesn't close.

Is there any way of closing existing labels when a new one opens?

Did you find any solution to this ?
I have been experiencing the same problem with touch devices.The label does not destroy when a new polygon is touched.

No, as I understand it, each marker and therefore label doesn't have a reference to all the other markers on your map.

For desktop this doesn't matter because there is a mouseout event, which causes the current label to close. I don't believe there is an equivalent for touch.

In your app, if you maintain an array of all your markers you should be able to call the .hideLabel method on them before you open a new one. It would mean hacking

src/BaseMarkerMethods.js

to contain something like :

_addLabelRevealHandlers: function () {
        this
            .on('mouseover', this.showLabel, this)
            .on('mouseout', this.hideLabel, this);

        if (L.Browser.touch) {

            // loop through all the markers and close their labels.
            yourMarkerArray.forEach(function(marker) {
               marker.hideLabel;
            });

            this.on('click', this.showLabel, this);
        }
    }

That said I've not tested it, so good luck.

I'd probably settle for being able to turn off labels for touch.

+1 for this issue, I am going to have to create a similar workaround for our mobile users. It would be great if Leaflet.label had some kind of built-in functionality for touchscreen interactions.

In lieu of a fix to this library, one possible solution is to use L.Browser.touch to test for touch device support, and then bind a Leaflet popup for touch browsers and labels for non-touch browsers.