When zooming in or out on the map it doesn't keep map center in the center of the map.

[mglind]

The API allows passing scrollZoom as an object. This object allows the map to zoom around center.

https://www.mapbox.com/mapbox-gl-js/api#scrollzoomhandler#enable

This wrapper allows a passing a boolean to scrollZoom.

It would be nice to both enable zooming and allow it to zoom around the map center.

[goldpbear]

@mglind I agree this would be a nice add.

If you're looking for a workaround to simulate the "zoom around center" behavior in the meantime, I recently had some success with this approach: simply don't update the latitude and longitude props in state if the zoom prop also changed in the same update.

One gotcha with this approach is if your map transitions using a transition method that changes zoom as well as position (like the FlyTo transition), then you'll need an extra check to allow simultaneous latitude/longitude and zoom updating when the map is transitioning. Otherwise your flyTo transition will sort of short-circuit. To do this I maintain an extra piece of state, isMapTransitioning, which is set and unset using the onTransitionStart and onTransitionEnd callbacks.

Hope that makes sense...

[Khalidalansi]

@goldpbear please can you add example ?

[Pessimistress]

This is being addressed in v7.0. Please follow #1646

[NameFILIP]

@goldpbear thanks for the suggestion. I've implemented it as follows:

onViewStateChange={({ viewState, oldViewState, interactionState }) => {
  if (interactionState.isZooming) {
    setViewState({
      ...viewState,
      // Keep the old lat/lng to zoom around the center of the map
      longitude: oldViewState.longitude,
      latitude: oldViewState.latitude,
    });
  } else {
    setViewState(viewState);
  }
}}