# @raruto/leaflet-gesture-handling

> A Leaflet plugin that allows to prevent default map scroll/touch behaviours

Latest version **1.4.4** (published 2023-03-01) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @raruto/leaflet-gesture-handling
pnpm add @raruto/leaflet-gesture-handling
yarn add @raruto/leaflet-gesture-handling
bun add @raruto/leaflet-gesture-handling
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.4 |
| Published | 2023-03-01 |
| First published | 2019-06-20 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 164.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | A Marquis |
| Maintainers | raruto |
| Keywords | Leaflet, Maps, Gesture, Handling, two, fingers, mobile, scroll |

## Links

- npm: https://www.npmjs.com/package/@raruto/leaflet-gesture-handling
- Repository: https://github.com/Raruto/leaflet-gesture-handling
- Homepage: https://github.com/Raruto/leaflet-gesture-handling#readme
- Issues: https://github.com/Raruto/leaflet-gesture-handling/issues
- npm.io page: https://npm.io/package/@raruto/leaflet-gesture-handling

## Recent versions

- 1.4.4 (latest) — 2023-03-01
- 1.4.3 — 2022-06-06
- 1.4.2 — 2022-05-28
- 1.4.1 — 2022-04-12
- 1.4.0 — 2022-04-06
- 1.3.6 — 2022-04-06
- 1.3.5 — 2021-06-30
- 1.3.4 — 2021-02-19
- 1.3.3 — 2021-02-18
- 1.3.2 — 2020-11-30
- 1.3.1 — 2020-11-29
- 1.3.0 — 2020-07-03
- 1.2.9 — 2020-07-03
- 1.2.8 — 2020-07-03
- 1.2.7 — 2020-07-03
- … 8 more at https://npm.io/package/@raruto/leaflet-gesture-handling/versions

## README

# leaflet-gesture-handling.js

A Leaflet plugin that allows to prevent default map scroll/touch behaviours.


_For a working example see [demo](https://raruto.github.io/leaflet-gesture-handling/examples/leaflet-gesture-handling.html)_


<p align="center">
    <a href="https://raruto.github.io/leaflet-gesture-handling/examples/leaflet-gesture-handling.html"><img src="https://raruto.github.io/img/leaflet-gesture-handling.png" alt="Ctrl + scroll to zoom the map" /></a>
</p>


---

<blockquote>
    <p align="center">
        <em>Initially based on the <a href="https://github.com/elmarquis/Leaflet.GestureHandling">work</a> of <strong>elmarquis</strong></em>
    </p>
</blockquote>

---

## How to use

1. **include CSS & JavaScript**
    ```html
    <head>
    ...
    <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style>
    <!-- Leaflet (JS/CSS) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <!-- leaflet-gesture-handling -->
    <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-gesture-handling@latest/dist/leaflet-gesture-handling.min.css" type="text/css">
    <script src="https://unpkg.com/@raruto/leaflet-gesture-handling@latest/dist/leaflet-gesture-handling.min.js"></script>
    ...
    </head>
    ```
2. **choose the div container used for the slippy map**
    ```html
    <body>
    ...
    <div id="map"></div>
    ...
    </body>
    ```
3. **create your first simple “leaflet-gesture-handling” slippy map**
    ```html
    <script>
      ...
      var map = new L.Map('map', {
        center: [41.4583, 12.7059],
        zoom: 5,
        gestureHandling: true,
        gestureHandlingOptions: { // OPTIONAL
          // text: {
          //   touch: "Hey bro, use two fingers to move the map",
          //   scroll: "Hey bro, use ctrl + scroll to zoom the map",
          //   scrollMac: "Hey bro, use \u2318 + scroll to zoom the map"
          // },
          // locale: 'en', // set language of the warning message.
          // duration: 5000 // set time in ms before the message should disappear.
        }
      });
      ...
    </script>
    ```
_Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui)_

---

**Compatibile with:** leaflet@1.3.4

---

**Contributors:** [Elmarquis](https://github.com/elmarquis/Leaflet.GestureHandling), [Raruto](https://github.com/Raruto/leaflet-gesture-handling)

---
_Source: https://npm.io/package/@raruto/leaflet-gesture-handling · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
