Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Avoid mousewheel/finger trap in the map #4768

Closed
wants to merge 5 commits into from
Closed

Avoid mousewheel/finger trap in the map #4768

wants to merge 5 commits into from

Commits on Jan 12, 2022

  1. Fix map scrolling usability issue 

    Solve a usability issue when a user's scrolls on pages
with a map and additional content below. When the user
is scrolling, and the mouse goes over the map, the
window stops scrolling, and the map starts moving; this
behaviour annoys the users as they expect to keep
scrolling the page to the bottom. A similar problem
occurs when browsing the page on touchable devices
like phones or tablets.

We are disabling the mouse wheel map listener to keep
scrolling to the page bottom on desktop devices. We are
disabling the dragging and the tap features for mobile
devices, although as the user can not move the map, we
need arrow controls to allow users to change the map pan.

Credits for the mobile solution are for SimonEast [1].

[1] Check Github Leaflet/leaflet project issue 5425#issuecomment-342055520.
    @Senen
    Senen committed Jan 12, 2022
    Configuration menu
    Copy the full SHA
    1de8ded View commit details
    Browse the repository at this point in the history

  2. Add controls to move map pan 

    Code extracted from:
https://github.com/kartena/Leaflet.Pancontrol
    @Senen
    Senen committed Jan 12, 2022
    Configuration menu
    Copy the full SHA
    f669ed6 View commit details
    Browse the repository at this point in the history

  3. Load L.Control.Pan into application asset pipeline 

    We needed to adapt the original code so it works with
the Rails asset pipeline.
    @Senen
    Senen committed Jan 12, 2022
    Configuration menu
    Copy the full SHA
    cd2d6d1 View commit details
    Browse the repository at this point in the history

  4. Enable L.Control.Pan for all application maps 

    We only need the new controls for the mobile
version as it is impossible to move map panes after
disabling `dragging` and `tap` options. In contrast,
desktop users can drag the map by clicking and
dragging the mouse. However, I finally decided to
show the pan controls for desktop and mobile
devices to keep consistency and considering that
some users can browse the website through both
kind on devices.
    @Senen
    Senen committed Jan 12, 2022
    Configuration menu
    Copy the full SHA
    d0b2f01 View commit details
    Browse the repository at this point in the history

  5. Calculate the pan controls offset from map dimensions 

    Using a fixed offset for all screen sizes does not
work nice. For example, when using mobile devices
(usually small), the default offset value (500px by
default) moves the map pan to a too far pan and
makes the user lose the reference point from the
previous pan.

Using the same offset for the vertical and horizontal
pan controls does not work nicely when the map does not
have an square shape.

To better control the vertical and horizontal offsets
and considering we show maps with all the shapes,
we will use different offsets for vertical and
horizontal panning calculated from the map
dimensions, so we can move the pan as much as
possible without losing the reference point.
    @Senen
    Senen committed Jan 12, 2022
    Configuration menu
    Copy the full SHA
    195479b View commit details
    Browse the repository at this point in the history