How to access the map.flyTo method and use it dynamically ?

@alex3165 I’m currently using the map.flyTo inside the onStyleLoad={map => { }}

It’s working fine but, the flyTo happens at the initial render

my goal is to update the map.flyTo options dynamically on button Click?

how can I achieve that? is the map.flyTo provided as a prop?

here’s my current code:

constructor(props) {
  super(props);
    this.state = {
      flyTo: { center: [-118.4107187, 33.9415889], zoom: 11, speed: 0.4 }
    }
      ...
      ...
    
    handleClickFlyDestinationAirport = () => {
      this.setState({ flyTo: { center: [-122.404357, 37.791246], zoom: 11, speed: 0.4 } })
    }

    <Map
       style="mapbox://styles/myAccount/vfvjiej45de7k"
       center={this.state.start}
       zoom={[9.8]}
       movingMethod="flyTo"
       containerStyle={{
         height: '100vh',
         width: '100vw'
       }}
       onStyleLoad={map => {
          map.addLayer({
             id: 'routes',
             type: 'line',
             source: {
               type: 'geojson',
                  data: {
                    type: 'FeatureCollection',
                    'features': [{
                        type: 'Feature',
                        properties: {
                          'color': 'blue',
                        },
                        geometry: this.state.geoJsonData1
                    }, {
                        type: 'Feature',
                        properties: {
                          'color': '#FF793F',
                        },
                        geometry: {
                            "type": "LineString",
                            "coordinates": [
                              this.state.start2,
                              this.state.destination2
                            ]
                        }
                    }, {
                        type: 'Feature',
                        properties: {
                          'color': 'green',
                        },
                        geometry: this.state.geoJsonData2
                    }]
                  }
                },
                paint: {
                  'line-width': 3,
                  'line-color': {
                    'type': 'identity',
                    'property': 'color'
                  }
                }
              }),
              map.flyTo(this.state.flyTo);
          }}
        />

<button className={css(styles.flyToButtonMap)} onClick={this.handleClickFlyDestinationAirport}>Fly to the dest Airport</button>

[aderaaij]

@aziz-boudi4 The actual map object is not this.map, the ref you get is a ref to the React component, not to the map itself. You can find the map in this.map.state.map. Just console.log this.map and you’ll see what’s available!

[khollund]

I think the “mistake” here is the way you look at flyto. You should think of flyTo not as a method of changing the center point or other properties of the map, but an animation method to move the camera. As soon as you need to use interactions to move the map it’s important to grasp the concept of the camera being your view into the map.

So if you want to fly somewhere, in reality what you essentially want is to update position, bearing, zoom etc and move from current state to next state with a flyto animation type. And there’s many ways to do that. Fit bounds is one, depends a bit what you are trying to do. Looks like you can get away with just updating position though.