-2

I am curious how to recreate the way pinch zoom works on map tools like google maps and leaflet.js

On any other site, when you pinch zoom the entire browser windows gets magnified on whatever you are pinch zooming on.

On Google Maps or Leaflet.js, when you pinch zoom on the map it seems to override that functionality and makes the map zoom in and out in the exact same way as it would if you were scrolling with your fingers or a mouse wheel.

How might they go about doing that?

To clarify - I don't want to disable zoom in the viewport either. I just want a specific section of a page to ignore the standard pinch zoom (with track pad or mobile) and instead interpret the pinch zoom as a standard scroll wheel event only

Organnoise
  • 331
  • 1
  • 7
  • if you're using a framework you're gonna want to use a combination of an animation library and a gesture library. also I believe that for divs with a certain css property you can disable default touch behavior but unfortunately i don't remember off the top of my head. the last time i remember reading about it was on the react-use-gesture documentation. hope this helps – Brandon Piña Dec 02 '21 at 22:16

1 Answers1

0

This seems to be working - but if anyone has a better suggestion let me know.

element.addEventListener('wheel', event => {
    const { ctrlKey } = event
    if (ctrlKey) {
         event.preventDefault();
         return
        }
      }, { passive: false })

I specify the div and now pinch zoom works everywhere else but that element

Organnoise
  • 331
  • 1
  • 7