Leaflet will become even better if you add …

More responsive scrollwheel zoom

The current implementation relies upon a setTimeout that fires performZoom after 50ms of scrollwheel idle. Particularly on an Apple Magic Mouse, this feels very laggy in practice.

The cheap solution is just to get rid of the timeout and call performZoom directly on every scrollwheel event. This is a bad way to go and I'm trying to think of a better solution.

21 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Andrew CurrierAndrew Currier shared this idea  ·   ·  Admin →

    2 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • ValorumValorum commented  · 

        How about something like this:

        var toZoomLevel = 4, // initialize to current zoom level
        performingZoom = false;

        on( 'scrollwheelup', function() { prezoom( +1 ); });
        on( 'scrollwheeldown' ), function() { prezoom( -1 ); });

        function prezoom( zoomDelta ){
        if ( toZoomLevel > 1 && toZoomLevel < maxZoomLevel ) {
        toZoomLevel += zoomDelta;
        }
        if ( !performingZoom ) {
        performZoom();
        }
        )

        performZoom(){
        performingZoom = true;

        var zoomDelta = toZoomLevel - currentZoomLevel;

        ( zoom the map zoomDelta levels )

        toZoomLevel -= zoomDelta;

        ...

        if ( toZoomLevel != currentZoomLevel )
        performZoom()
        } else {
        performingZoom = false;
        }
        }

        This would start zooming as soon as you get a scrollwheel event. If more scrollwheel events fire while a zoom is in progress, they get batched up and then processed as soon as the current zoom action finishes. This method would get rid of any artificial time delay. On fast machines, zooming would be smooth, on slow machines, it jumps zoom levels as needed.

      • Andrew CurrierAndrew Currier commented  · 

        Here's a thought: Do the scaling CSS transform immediately on every mouseWheel event, but only load new tiles after 50 ms of idle.

      Feedback and Knowledge Base