Leaflet.js: Use ctrl + scroll to zoom the map & Move map with two fingers on mobile

Question

I'm using http://leafletjs.com/ ... is it possible to only:

1. Use ctrl + scroll to zoom the map

2. Move map with two fingers on mobile/tablet

... so similar what google maps does? With the comments ...

So far thats my setup:

// Leaflet Maps
var contactmap = L.map('contact-map', {
        center: [41.3947688, 2.0787279], 
        zoom: 15,
        scrollWheelZoom: false
    });

Answer 1

There is an amazing library that does exactly that. Leaflet.GestureHandling

It is an add on to leaflet that works right of the box, it's also modular and can be installed using npm.

Here's a working example using leaflet and GestureHandling. You can try it also on mobile.

P.S. It has multiple languages baked in:)

// Attach it as a handler to the map

const map = L.map('map', {
  gestureHandling: true
}).setView([51.505, -0.09], 13);

// Add tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

    #map {
      height: 400px;
      width: 400px;
    }

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>
  <link rel="stylesheet" href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css"
        type="text/css">
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
          integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
          crossorigin=""></script>
  <script src="//unpkg.com/leaflet-gesture-handling"></script>
  
  
  
  <div id="map"></div>

Answer 2

zoom map using ctrl + zoom. I did in custom way . html code is below

<div id="map"></div>

css

.map-scroll:before {
content: 'Use ctrl + scroll to zoom the map';
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
font-size: 34px;
 }
 .map-scroll:after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
background: #00000061;
z-index: 999;
}

jQuery

  //disable default scroll 
  map.scrollWheelZoom.disable();

  $("#map").bind('mousewheel DOMMouseScroll', function (event) {
    event.stopPropagation();
     if (event.ctrlKey == true) {
             event.preventDefault();
         map.scrollWheelZoom.enable();
           $('#map').removeClass('map-scroll');
         setTimeout(function(){
             map.scrollWheelZoom.disable();
         }, 1000);
     } else {
         map.scrollWheelZoom.disable();
         $('#map').addClass('map-scroll');
     }

 });

  $(window).bind('mousewheel DOMMouseScroll', function (event) {
       $('#map').removeClass('map-scroll');
  })

In simple way when user scroll on map then detect ctrl button is pressed or not then just I add one class that will showing message on map. and prevent screen zoom-in and zoom-out outside of map.

Answer 3

I managed to solve your second problem.

I used css for displaying the message using a ::after pseudo selector.

#map { 
  &.swiping::after {
    content: 'Use two fingers to move the map';
  }
}

And javascript to capture the touch events.

mapEl.addEventListener("touchstart", onTwoFingerDrag);
mapEl.addEventListener("touchend", onTwoFingerDrag);

function onTwoFingerDrag (e) {
  if (e.type === 'touchstart' && e.touches.length === 1) {
    e.currentTarget.classList.add('swiping')
  } else {
    e.currentTarget.classList.remove('swiping')
  }
}

It checks if the type is a touchevent and if you are using 1 finger, if so it adds the class to the map with the message. If you use more than one finger it removes the class.

Working demo I suggest you using a mobile device.

Code pen from the demo