touchZoomRotate only disable rotation toggle

[omattman]

From MapBox documentation it is possible to disable rotation when users zoom on mobile through:

map.touchZoomRotate.disableRotation()

But in react-mapbox-gl there's no option to only disable rotation when zooming on mobile. When touchZoomRotate is set to false it disables both zoom and rotate, which makes the option quite redundant.

This is my current factory parameters:

const ReactMap = Mapbox({
    accessToken: process.env.MAPBOX_ACCESS_TOKEN,
    minZoom: 5.75,
    maxZoom: 16.25,
    dragRotate: false,
    doubleClickZoom: false,
    pitchWithRotate: false,
    touchZoomRotate: false
});

[pkwanseraitrade]

bumping this as I'm also looking for a solution to the same problem

[chinnaxs]

Me too. I would like to have an option where I can prevent rotation on a mobile device, but still allow zooming.

[gregholst]

I solved this by directly referring to the map:

import React, { useState, useEffect, useRef, useCallback } from "react";

const mapRef = useRef(null);

const onMapLoad = useCallback(()  => {
      const map = mapRef.current.getMap()
      //turn off option to rotate map with SHIFT+Cursor
      map.keyboard.disableRotation()
      map.touchZoomRotate.disableRotation()
  }, []);

...

            <Map mapboxAccessToken={XXXXXXX}
                ref={mapRef}
                initialViewState={{
                  longitude: 13,
                  latitude: 47,
                  zoom: 9.5,
                }}
                onClick={onClick}
                onMouseEnter={onMouseEnter}
                onMouseLeave={onMouseLeave}
                onLoad={onMapLoad}
                mapStyle="mapbox://styles/mapbox/streets-v12"
                touchZoomRotate={true}
                touchPitch={false}
                dragRotate={false}
            >

[omattman]

Thanks @gregholst I just recently came back to an issue similar to this and can indeed confirm it works as intended 👍

[omattman]

However, a prop integrated with the package would still be appreciated!

[anjaliD-syn]

Hey @omattman @gregholst can we prevent rotation but still allow zoom in and zoom out in map? I tried setting up touchZoomRotate as false but it prevents both rotation and zooming in map. I want to disable the rotation only.

[gregholst]

@anjaliD-syn try these properties, they work for me:

touchZoomRotate={true}
touchPitch={false}
dragRotate={false}

[anjaliD-syn]

@gregholst Thanks for your reply. I tried your suggestion but no luck :(. With above config it still allows to rotate on mobile screens.

[gregholst]

@anjaliD-syn that is strange, for me rotation with fingers is not possible on my mobile phone (Android / Firefox). However, I can't see any other property that seems related. What version of react-map-gl do you use, just trying to find the difference...my package.json says: "react-map-gl": "^7.0.25"