Animation speed settings

[sos0]

Hi @SamSamskies,
I just integrated this into my project and noticed that the animation is very slow when updating location. Is there a way to change the settings to update this? Thanks for your hard work!

[SamSamskies]

Hi @sos0 ,
Currently, it's not possible to change the speed of the animation. I can work on adding that this weekend. For now you could disable the animation by passing in options with flyTo set to false.

<Geocoder options={{ flyTo: false }} mapRef={this.mapRef} onViewportChange={this._onViewportChange} mapboxApiAccessToken={MAPBOX_TOKEN} />

I haven't documented it, but any options you pass to the component are used to instantiate the mapbox-gl-geocoder instance. I'll work on adding this information to the docs as well.

mapbox-gl-geocoder API:
https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md

Thanks for filing the issues 😄

[SamSamskies]

I looked into this more and the map is the one that should be dictating the speed of the animation by setting the transitionDuration prop on the React MapGL element. I will be removing the default animation in the next release. For now, you can work around my mistake by setting the transitionInterpolator and transitionDuration AFTER spreading this.state.viewport as in the example below. Once I remove the default animation that I forced by passing the transitionInterpolator and transitionDuration to onViewportChange, the order of the of the transitionInterpolator and transitionDuration props on MapGL won't matter.

<MapGL
  ref={this.mapRef}
  {...this.state.viewport}
  transitionInterpolator={new FlyToInterpolator()}
  transitionDuration={3000}
  onViewportChange={this._onViewportChange}
  mapboxApiAccessToken={MAPBOX_TOKEN}>
  <Geocoder mapRef={this.mapRef} onViewportChange={this._onViewportChange} mapboxApiAccessToken={MAPBOX_TOKEN} />
</MapGL>

The FlyToInterpolator can be imported from react-map-gl.

import MapGL, { FlyToInterpolator } from 'react-map-gl'

---

UPDATE: Don't do this. I realized that this changes the duration of panning and zooming the map even with just the mouse.

[SamSamskies]

Actually, I'm going to leave the default animation in as long as flyTo option is not set to false. I'll update the example in the README with a better way to override the transitionDuration.

[SamSamskies]

<Geocoder options={{ flyTo: false }} mapRef={this.mapRef} onViewportChange={this._onViewportChange} mapboxApiAccessToken={MAPBOX_TOKEN} />

I haven't documented it, but any options you pass to the component are used to instantiate the mapbox-gl-geocoder instance. I'll work on adding this information to the docs as well.

mapbox-gl-geocoder API:
https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md

I think I'm going to change this. I was just being lazy. Probably going to make each option a prop instead of passing down a whole options object.

[SamSamskies]

Updated my example to show how to override the default animation speed. https://codesandbox.io/s/vv29y730q3

[sos0]

Thanks! I'll look into this now and ask any follow up questions if I have any.

[sos0]

I followed your example and it worked great! Thank you.