How set wheelZoomRate in ReactMapGL

Question

In mapbox gl wheelZoomRate can be set with the setWheelZoomRate method. How can achieve same effect if ReactMapGL Map.

map.scrollZoom.setWheelZoomRate(1 / 600);

I have tried with set the wheelZoomRate with scrollZoom prop of React Map GL Map.

scrollZoom={{
              wheelZoomRate: 1/300,
              enable: { 
               around: 'center',
               wheelZoomRate: 1/300
              }
           }}

But it seems no effect on wheelZoomRate of the map while scrolling.

Answer 1

It seems that zoomRate and wheelZoomRate are not available as options that can be passed to scrollZoom directly.
What is indeed available in the API is: setter methods.

In my case, The solution I found here is to call the setWheelZoomRate (or setZoomRate, depending on what you need) method using the onLoad prop of the Map component.

I'm using the react-map-gl wrapper but the principle should be the same for vanilla MapBox:

<Map
    mapboxAccessToken={mapboxAccessToken}
    onLoad={(e) => e.target.scrollZoom.setWheelZoomRate(1 / 300)}
    mapStyle="mapbox://styles/mapbox/streets-v11"
/>

Without the React wrapper, I think you need to define the callback method of the load event of the Map. From what I've read in the docs, this should work:

map.on('load', (e) => e.target.scrollZoom.setWheelZoomRate(1 / 300));

Default values are respectively 1/100 for zoomRate and 1/450 for wheelZoomRate.