Leaflet.js: use ctrl + scroll to enlarge the map and move the map with two fingers on the mobile

Question

I am using http://leafletjs.com/ ... only possible:

• Use Ctrl + to select a map to enlarge the map.

• Move the card with two fingers to your mobile / tablet

... so it looks like Google maps do? With comments ...

So far my setup is:

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

Answer 1

I managed to solve your second problem.

I used css to display the message using the ::after pseudo ::after .

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

And javascript to capture 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 touchhevent, and if you use 1 finger, if it adds a class to the card with the message. If you use more than one finger, it deletes the class.

Working demo I suggest you use a mobile device.

Demo Code Pen