leaflet-almostover

Leaflet.AlmostOver ==================

Usage no npm install needed!

<script type="module">
  import leafletAlmostover from 'https://cdn.skypack.dev/leaflet-almostover';
</script>

README

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.

Build Status

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

Makina Corpus