Animation speed settings about react-map-gl-geocoder HOT 7 CLOSED

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.

from react-map-gl-geocoder.

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

from react-map-gl-geocoder.

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 😄

from react-map-gl-geocoder.

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.

from react-map-gl-geocoder.

<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.

from react-map-gl-geocoder.

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

from react-map-gl-geocoder.

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

from react-map-gl-geocoder.