🐞 [BUG]: Awkward to conduct zooming on Kepler maps with trackpad

[alexbfree]

Is there an existing issue for this?

• I have searched the existing issues.

Current Behavior

Yann/Paul report there have been issues with zooming map when using a trackpad. Yann suggests +/- buttons would help.

Expected Behavior

Ability to press +/- buttons to zoom?

Images

No response

Steps to Reproduce

1. Use a trackpad
2. Try and scroll and zoom.
3. Awkwardness occurs? (this might need refining! not sure if issue is accidental zoom, or inability to zoom)

Data Sources

No response

Web Sites

digipower.academy

Browser

brave

Operating System

macOS

Log Output and Error Messages

No response

Anything else?

No response

[alexbfree]

@Shalf are you able to add a bit more detail here? Was the issue that when you use trackpad to scroll, you accidentally hit zoom?

Or was there some difficulty in actually executing a zoom?

Bit more detail would help

[Shalf]

Near to impossible to zoom, and slow/laggy zoom, without a mouse. While demoing, it is often without ^^If not easily fixable via software, mice are must-have demo tools in mobility then :)

[alexbfree]

Additional context from Paul (extracts from Signal chats):

• "It's just really hard to zoom with track pad and to pan. "
• "One element I suspect was that this was happening because he was screen projecting onto a screen with non mirror displays (which is the correct one to have at the moment)"...
• "Makes additional trackpad swipes confusing."....
• "To panning. Charles was trying to get out of the bug situation you found by panning the page and the computer thought he wanted to pan across screens."
• "Thinking about it zooming less relevant for Uber drivers. They don't airdrop their cars around the world."
• "If you find functional workarounds that would be sufficient for me for this week. Keybindings for instance. Technically I will be on scrollmoused desktop. Firefox. Windows."
• "But of course not sustainable for GMaps and laptop demos." (???)

[alexbfree]

How to add zoom controls > https://docs.mapbox.com/mapbox-gl-js/example/navigation/

How to disable scroll zoom > https://docs.mapbox.com/mapbox-gl-js/example/disable-scroll-zoom/
(this should be a toggle, as scroll zoom is preferable than buttons in most cases)

[alexbfree]

I have been exploring options for this this afternoon.

The examples I linked above seem to be available in MapboxGL but not the KeplerGL version of Mapbox

• Zoom in/out buttons in map keplergl/kepler.gl#1078
• https://github.com/keplergl/kepler.gl/blob/master/docs/keplergl-jupyter/README.md#keplergl

However, we can implement custom changes to the map. Continuing to look at this tomorrow.

Notes to self

I have figured out the stages:

1. Add new methods such as zoomIn/zoomOut to the kepler-iframe/index.js code (these can interact with KeplerGl object directly and update its lat/long/zoom in the config.
2. Call that method from within the UnitKepler.vue component (after hooking it up to some appropriate links or visual component on page

Still to figure out:

• exact zooming commands/amounts/syntax
• how to get around the fact that kepler-iframe is imported as a versioned component from CDN.

[alexbfree]

(deleting accidental duplicate comment)

[alexbfree]

stepping off this temporarily as it's getting complex, in order for some hopefully quick wins on #1094 and #1095 before returning

[alexbfree]

This is now on hold pending resolution of #1104

[alexbfree]

Given #1104 has no way forward, we have to find a work around for developing this (such as use of a local/test CDN URL, or using the Kepler standalone project).

[alexbfree]

I can probably take this and pick up where I was at, but am unassigning myself for now in case it needs progressing later this week while I am on leave.

[alexbfree]

putting this down to work on other things. Other people could pick it up if needed. ask me if any questions.