@raruto/leaflet-gesture-handling

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

Usage no npm install needed!

<script type="module">
  import rarutoLeafletGestureHandling from 'https://cdn.skypack.dev/@raruto/leaflet-gesture-handling';
</script>

README

leaflet-gesture-handling.js

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

For a working example see demo

Ctrl + scroll to zoom the map

Initially based on the work of elmarquis

How to use

  1. include CSS & JavaScript
    <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
    <body>
...
<div id="map"></div>
...
</body>
  3. create your first simple “leaflet-gesture-handling” slippy map
    <script>
  ...
  var map = new L.Map('map', {
    center: [41.4583, 12.7059],
    zoom: 5,
    gestureHandling: true,
  });
  ...
</script>

Related: Leaflet-UI presets

Compatibile with: leaflet@1.3.4

Contributors: Elmarquis, Raruto