title: How to zoom to bounds of arcs with deck.gl?
body: <p>I've created some arcs using deck.gl. When you click on different points/polygons, different arcs appear between countries. When doing this, I want the map to zoom to the bounds of those arcs.</p>
  <p>For clarity, here is an example: When clicking on Glasgow, I'd want to zoom to the arc shown (as tightly as possible):
  <a href="https://i.stack.imgur.com/rGT1d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rGT1d.png" alt="map zoomed to arc originating from glasgow" /></a></p>
  <p>It appears that with WebMercatorViewport, you can call fitBounds
  (see: <a href="https://deck.gl/docs/api-reference/core/web-mercator-viewport#webmercatorviewport" rel="nofollow noreferrer">https://deck.gl/docs/api-reference/core/web-mercator-viewport#webmercatorviewport</a>)</p>
  <p>It's not clear to me how this gets used, though. I've tried to find examples, but have come up short. How can I add this to what I have?</p>
  <p>Here is the code for the arcs:</p>
  <pre><code>    fetch('countries.json')
      .then(res =&gt; res.json())
      .then(data =&gt; {
  
        console.log('data',data)
  
        const inFlowColors = [
          [0, 55, 255]
        ];
  
        const outFlowColors = [
          [255, 200, 0]
        ];
  
        const countyLayer = new deck.GeoJsonLayer({
          id: 'geojson',
          data: data,
          stroked: true,
          filled: true,
          autoHighlight: true,
          lineWidthScale: 20,
          lineWidthMinPixels: 1,
          pointRadiusMinPixels: 10,
          opacity:.5,
          getFillColor: () =&gt; [0, 0, 0],
          getLineColor: () =&gt; [0,0,0],
          getLineWidth: 1,
          onClick: info =&gt; updateLayers(info.object),
          pickable: true
        });
  
        const deckgl = new deck.DeckGL({
          mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',
          mapStyle: 'mapbox://styles/mapbox/light-v9',
          initialViewState: {
            longitude: -19.903283,
            latitude: 36.371449,
            zoom: 1.5,
            maxZoom: 15,
            pitch: 0,
            bearing: 0
          },
          controller: true,
          layers: []
        });
  
        updateLayers(
          data.features.find(f =&gt; f.properties.name == 'United States' )
        );
  
        function updateLayers(selectedFeature) {
          const {exports, centroid, top_exports, export_value} = selectedFeature.properties;
  
          const arcs = Object.keys(exports).map(toId =&gt; {
            const f = data.features[toId];
            return {
              source: centroid,
              target: f.properties.centroid,
              value: exports[toId],
              top_exports: top_exports[toId],
              export_value: export_value[toId]
            };
          });
  
          arcs.forEach(a =&gt; {
            a.vol = a.value;
          });
  
          const arcLayer = new deck.ArcLayer({
            id: 'arc',
            data: arcs,
            getSourcePosition: d =&gt; d.source,
            getTargetPosition: d =&gt; d.target,
            getSourceColor: d =&gt; [0, 55, 255],
            getTargetColor: d =&gt; [255, 200, 0],
            getHeight: 0,
            getWidth: d =&gt; d.vol
          });
  
          deckgl.setProps({
            layers: [countyLayer, arcLayer]
          });
  
        }
  
      });
  </code></pre>
  <p>Here it is as a Plunker:
  <a href="https://plnkr.co/edit/4L7HUYuQFM19m9rI" rel="nofollow noreferrer">https://plnkr.co/edit/4L7HUYuQFM19m9rI</a></p>