View on GitHub

leaflet-gesture-handling

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

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,
     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

Compatibile with: leaflet@1.3.4

Contributors: Elmarquis, Raruto