Leaflet Label noHide no pointer event

Question

I have to add custom cities name with a circleMarker en my map. But I want to clic throu the label because a have polygone under it There is my JS code thats add the circleMarker

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

In CSS I have disable the pointer event

.leaflet-ville-label {
    pointer-events: none;
}

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

Somebody have a solution to disable pointer events on the static Label ?

score 3 · Answer 1 · answered Dec 02 '13 at 08:58

3

Forwarding Mouse Events Through Layers might help you solve this issue. It is kinda workaround for the lack of the pointer-event in ie. Here is a nice blog entry on this issue:

Forwarding Mouse Events Through Layers

answered Dec 02 '13 at 08:58

Igle

4,332
3
27
55

Yes I have already test that but `document.elementFromPoint` cant return a map kml element. – Yoann Dec 02 '13 at 09:02
I have missed a point to hide the curretn element. But i now have a `path` or a `g` element. Can you get the polygone from this ? – Yoann Dec 02 '13 at 09:48
Here is kinda function i found for converting a path: http://whaticode.com/2012/02/01/converting-svg-paths-to-polygons/ – Igle Dec 03 '13 at 07:32
I mean the leaflet polygon. I can see the generate svg code by leaflet but a have no event attache to it. – Yoann Dec 03 '13 at 08:27
This method does not seem to work with my layer data. – Alex Mar 25 '14 at 15:36

score 1 · Answer 2 · edited May 23 '17 at 10:31

1

You don't need to do more than this.

As explained in Click through a DIV to underlying elements , IE 9 and 10 will forward events as long as the background of the label is transparent. IE 11 and other browsers adhere to

.leaflet-ville-label {
    pointer-events:none;
}

See http://jsfiddle.net/LHL82/7/

edited May 23 '17 at 10:31

Community

1
1

answered Dec 02 '13 at 22:49

flup

26,385
7
48
70

Edit: I just read that IE 11 adheres to `pointer-events:none`, too. This means I cannot check the transparancy for IE on my home PC. Will check for IE<11 tomorrow. – flup Dec 02 '13 at 23:03
I need this site to be compatible IE 8+ This solution doesn't work on it. Or I did it wrong. – Yoann Dec 03 '13 at 08:26
Looks like it's IE9 and up. – flup Dec 03 '13 at 13:55
I can confirm this soloution will not work with IE, especially if you need the background or borders non-transparent. – Alex Mar 25 '14 at 15:32

score 0 · Accepted Answer · answered Dec 16 '13 at 08:58

I have found a solution but not like I think first.

I use a mapbox lib call leaflet-pip

The procedure in detail :

check click event on all my labels
do not triger click after map drag (i already had noclick on drag start)
get the mouse Lat Lng with mouseEventToLatLng(e)
get the polygon with this lat lng
and finaly trigger click on the result polygon

There is my code to accomplish this :

$(".leaflet-ville-label").off("click").on("click", function(e) {
    if ($(this).hasClass("noclick")) {
        $(".leaflet-ville-label").removeClass("noclick");
        return;
    }
    for (layer_id in kml_layer._layers) {
        var under_layer = leafletPip.pointInLayer(france.mouseEventToLatLng(e), kml_layer._layers[layer_id]);
        if (under_layer.length > 0) {
            under_layer[0].fire("click");
        }
    }
});

Leaflet Label noHide no pointer event

3 Answers3