Giter Club home page Giter Club logo

leaflet-touch-helper's Introduction

Leaflet Touch Helper

Make it easy to touch things in Leaflet. See the demo.

This plugin makes an invisible touch surface around paths, like polygons or polylines, to make it easier to hit them with your clumsy fingers.

Technically, this plugin adds another, larger but transparent layer on top of the original layer, and forwards any events to the original layer. Depending on the number of layers and the complexity of your geometries, this might be expensive in terms of performance - you might want to use a more clever solution in those cases. For basics, this is easy and works well, though!

Usage

When adding a layer you want to make easy to touch, also create an instance of L.Path.TouchHelper and add to the map:

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

L.path.touchHelper(polygon).addTo(map);

To explicitly add even more touch margin, for extra fat fingers, you can specify the extraWeight option:

L.path.touchHelper(polygon, {extraWeight: 50}).addTo(map); // Super fat

(Default for extraWeight is 25 pixels.)

When the original layer is removed from the map, the touch helper layer will also be removed. Note however, that if you re-add the original layer, the touch helper layer will not be re-added, you will have to create a new. (Technically, this is because there is no way to know if the layer is permanently removed or just temporarily; assuming that layers are always just temporarily removed would keep around all created touch helper layers forever, which is rarely what you want.)

leaflet-touch-helper's People

Watchers

James Cloos avatar Isnaeni Hidayat avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.