Weird map rotation behavior im version 5

[Fabioni]

I figured out that in v5 the behavior of rotating the map using the mouse is weird / seems broken.
I direkt compared it to v4 which feels way more natural.

It's hard to create a nice bug report for that because I can't really describe the new behavior yet. Sometimes it just doesn't do what I'd expect.

Here are some comparison videos. Left side is v5, right side is v4.

Btw: it happens in pure maplibre and in maplibre+react-map-gl.

GitHub_Maplibre_Rotate_Bug.mp4

GitHub_Maplibre_Rotate_Bug_2.mp4

GitHub_Maplibre_Rotate_Bug_3.mp4

[HarelM]

I don't think we changed the behavior as part of version 5.
A video comparing the two would be helpful though...

[Fabioni]

Just added some videos. @HarelM let me know if you want specific interactions in videos.

[HarelM]

Your video is not showing a two finger touch behavior as far as I can tell,
As to the change of behavior, this was a feature that was introduced as part of version 5:
#5074

[Fabioni]

ok, so maybe it is called differently. What I am doing is on macbook either control+click or two-finger-click and then move the mouse. Sorry for the confusion.

[axekan]

@Fabioni

You can patch this behavior away using patch-package to get closer to the old behavior.

This is the line where the default value of aroundCenter needs to be changed to false:

maplibre-gl-js/src/ui/handler/mouse.ts

Line 55 in 11b34aa

export function generateMouseRotationHandler({enable, clickTolerance, aroundCenter = true, minPixelCenterThreshold = 100, rotateDegreesPerPixelMoved = 0.8}: {

Steps:

1. Find the line to modify in node_modules/maplibre-gl/dist/maplibre-gl.js. It's all minified but should look something like this (search for "aroundCenter":

d=function({enable:e,clickTolerance:i,aroundCenter:r=!0 // <--- change this

2. Change !0 to false
3. Run npx patch-package maplibre-gl
4. Add "postinstall": "patch-package" to scripts in package.json.

Tested on maplibre 5.0.1

[johannkor]

Thanks, this worked. This option also comes from the Map options themselves, so you can just set

new Map({
  aroundCenter: false
})

without patching and in TS cast it to the correct type or something.

[johannkor]

I found that you can disable this new behaviour by passing aroundCenter: false in the Map constructor options, i.e.

const map = new maplibregl.Map({
  // ...
  aroundCenter: false
})

or with react-map-gl:

<Map
  {...{aroundCenter: false}
  {/* ... other props ... */}
/>

This option is not in the typings, so you will need to cast in TypeScript, but the same options object gets passed down all the way to new HandlerManager(...) which trickles down to generateMouseRotationHandler().

[larsmaxfield]

Thank you! I was experiencing the exact same issue. Glad to see it can be so easily disabled.

[Fabioni]

That was too easy :D Thank you so much! @johannkor