makinacorpus / leaflet.almostover Goto Github PK

View Code? Open in Web Editor NEW

73.0 34.0 31.0 56 KB

Trigger mouse events when cursor is "almost" over a layer

Home Page: http://makinacorpus.github.io/Leaflet.AlmostOver

License: MIT License

JavaScript 75.66% HTML 24.34%

leaflet.almostover's Introduction

Leaflet.AlmostOver

This plugin allows to detect mouse click and overing events on lines, with a tolerance distance.

It is useful if paths are drawn with a very small weight, or for clicks detection on mobile devices, for which finger precision can be a problem.

Play with online demo.

It requires Leaflet.GeometryUtil.

Usage

    var map = L.map('map');
    ...
    var lines = L.geoJson(...);
    ...
    map.almostOver.addLayer(lines);

    map.on('almost:over', function (e) {
        alert('Almost clicked !');
    });

Events

Events triggered when mouse is almost over a layer :

almost:over (latlng, layer)
almost:move (latlng, layer)
almost:out (layer)
almost:click (latlng, layer)
almost:dblclick (latlng, layer)

Caveats

If the layer has many features, this plugin can slow down 'panning' performance, as, by default, it process 'mousemove' events. If only 'almost:click' or 'almost:dblclick' are needed, and 'almost' events related to 'mousemove' events are not needed, they can be disabled with almostOnMouseMove map option.

    var map = L.map('map', {
      almostOnMouseMove: false,
    });
    ...
    var lines = L.geoJson(...);
    ...
    map.almostOver.addLayer(lines);

    map.on('almost:click', function (e) {
        alert('Almost clicked !');
    });

Authors

leaflet.almostover's People

Contributors

Stargazers

Watchers

leaflet.almostover's Issues

L.Mixin.Events Deprecated

Please change L.Mixin.Events to L.Evented as L.Mixin.Events will be removed from future versions.

Stop click event propagation

Hi,

I would like to stop click event propagation, I try that:

map.on('almost:click', function (e) {
    console.log('ALMOST CLICKED');
    L.DomEvent.stop(e);
});
 map.on('click', function () {
    console.log('MAP CLICKED');
})

Two logs have been displayed
You can try it here: https://stackblitz.com/edit/js-tdrbmg

Have you an idea about how I can stop event propagation?

Edit: I have found a temporary solution: https://stackblitz.com/edit/js-52zctn?file=index.js

almost:out not fired when user move mouse along one line and then switch to another line

add else if something like:

_onMouseMove: function (e) {
        var closest = this.getClosest(e.latlng);
        if (closest) {
            if (!this._previous) {
                this._map.fire('almost:over', {layer: closest.layer,
                                               latlng: closest.latlng});
            } else if(this._previous.layer._leaflet_id != closest.layer._leaflet_id){

                  this._map.fire('almost:out', {layer: this._previous.layer});
                  this._map.fire('almost:over', {layer: closest.layer,
                                               latlng: closest.latlng}); 

            }
            this._map.fire('almost:move', {layer: closest.layer,
                                           latlng: closest.latlng});
        }
        else {
            if (this._previous) {
                this._map.fire('almost:out', {layer: this._previous.layer});
            }
        }
        this._previous = closest;
    },

cursor style

Hi,

Thanks for creating this fantastic plugin!

I am facing a tiny issue. I think the cursor style is a bit confusing when the cursor hovers over the layer. It is in grabbing mode when the user is over the almost overlayer and in Pointer Mode when the cursor is exactly over the line.

I am not sure if it is possible, but I think it would be better if the cursor style was changed to pointer when the cursor is almost over.

Best,

Plugin does not work with Leaflet 1.3.1

Hi there,

the following code snippet works fine when using leaflet-src.js version 1.0.2 but not using the newest leaflet version 1.3.1:

map.almostOver.addLayer(myPolyline]);

map.on('almost:over', function (e) {
                console.log('almost over line');
        });

With the new version I do not get any console.log statement when the mouse goes over the line.

Changing to the old leaflet file with no other changes it works perfect.

Any idea what is going wrong?

Thanks for your help,

Andrea

Maintaining references to original layer

I set a custom object property on the layer before adding it to the almostOver layer group. When almost:click is triggered that property is no longer present.

map.cableLayer = new L.featureGroup();

L.geoJson(data, {
    onEachFeature: function(feature, layer) {

        // layer.cableId set in the layer
        layer.cableId = layer.feature.properties.cable_id;

        map.cableLayer.addLayer(layer);

        layer.on('click', function(e) {

            sidebar.focusCable(e.target, e.latlng);
        });
    }
});

map.m.almostOver.addLayer(map.cableLayer);
map.cableLayer.addTo(map.m);

 map.m.on('almost:click', function(e) {

    console.log(e); // layer.cableId not present in e.layer or e.target
    sidebar.focusCable(e.target, e.latlng);
});