title: Mapbox GL JS getBounds()/fitBounds()
body: <p>I'm using Mapbox GL JS v0.14.2 and I've searched high and low through the documentation and very little is clear about this. </p>
  
  <p>If you use the standard JS API, it's very clear to 'fit map to markers' using an example they have provided (<a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/" rel="noreferrer">https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/</a>); however the setup when using the GL api is quite different. The GL API has <code>getBounds()</code> (<a href="https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds" rel="noreferrer">https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds</a>) but because you don't have a named layer, like the standard JS API, so I'm struggling to work out how to use <code>getBounds()</code> at all.</p>
  
  <p>I've found this (<a href="https://stackoverflow.com/questions/34281106/mapbox-gl-js-api-set-bounds">Mapbox GL JS API Set Bounds</a>) but surely can't be the right answer?</p>
  
  <p>This is the bulk of my setup; excluding JSON setup and other options.</p>
  
  <pre><code>mapboxgl.accessToken = '&lt;myaccesstoken&gt;';
  
  var markers = &lt;?php echo $programme_json; ?&gt;;
  
  var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/richgc/cikyo5bse00nqb0lxebkfn2bm',
      center: [-1.470085, 53.381129],
      zoom: 15
  });
  
  map.on('style.load', function() {
      map.addSource('markers', {
          'type': 'geojson',
          'data': markers
      });
  
      map.addLayer({
          "id": "markers",
          "interactive": true,
          "type": "symbol",
          "source": "markers",
          "layout": {
              "icon-image": "venue-map-icon-blue",
              'icon-size': 0.5,
              "icon-allow-overlap": true
          }
      });
  
      map.scrollZoom.disable();
  
  });
  </code></pre>
  
  <p>I have tried the following:</p>
  
  <pre><code>alert(map.getBounds()); // LngLatBounds(LngLat(-1.4855345239256508, 53.37642500812015), LngLat(-1.4546354760740883, 53.38583247227842))
  var bounds = [[-1.4855345239256508, 53.37642500812015],[-1.4546354760740883, 53.38583247227842]]
  map.fitBounds(bounds);
  </code></pre>
  
  <p>So I know how to fitBounds, but I'm unsure how to get them <code>map.getBounds()</code> just seems to return the set centre position lng/lat.</p>
  
  <p>Markers JSON:</p>
  
  <pre><code>var markers = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"Site Gallery","url":"\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/","summary":"Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.","image":"\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg","marker-symbol":"venue-map-icon-blue","colour":"blue"},"geometry":{"type":"Point","coordinates":["-1.466439","53.376842"]}},{"type":"Feature","properties":{"title":"Moore Street Substation","url":"\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/","summary":"","image":null,"marker-symbol":"venue-map-icon-green","colour":"green"},"geometry":{"type":"Point","coordinates":["-1.477881","53.374798"]}},{"type":"Feature","properties":{"title":"S1 Artspace","url":"\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/","summary":"","image":null,"marker-symbol":"venue-map-icon-red","colour":"red"},"geometry":{"type":"Point","coordinates":["-1.459620","53.380562"]}}]};
  </code></pre>