Fit to the bounds of a LineString

Get the bounds of a LineString by passing its first coordinates to LngLatBounds and chaining extend to include the last coordinates. See the example: https://docs.mapbox.com//mapbox-gl-js/example/zoomto-linestring/

by jscastro76

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">


<div id="map"></div>
<button id="zoomto" class="btn-control">Zoom to bounds</button>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    .btn-control {
        font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        background-color: #3386c0;
        color: #fff;
        position: absolute;
        top: 20px;
        left: 50%;
        z-index: 1;
        border: none;
        width: 200px;
        margin-left: -100px;
        display: block;
        cursor: pointer;
        padding: 10px 20px;
        border-radius: 3px;
    }

    .btn-control:hover {
        background-color: #4ea0da;
    }

JavaScript

mapboxgl.accessToken = 'PASTE HERE YOUR TOKEN';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/satellite-v9',
  center: [-96, 37.8],
  zoom: 2,
  interactive: true
});

// A GeoJSON object with a LineString route from the White House to Capitol Hill
var geojson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-77.03238901390978, 38.913188059745586]
      },
      "properties": {
        "id": 1,
        "color": "#007cbf",
        "text": "1"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-78.03238901390978, 39.913188059745586]
      },
      "properties": {
        "id": 2,
        "color": "red",
        "text": "2"
      }
    }
  ]
}
var coords = [];
map.on('style.load', function(e) {
  map.addSource('markers', {
    "type": "geojson",
    "data": geojson
  });
  geojson.features.forEach(function(marker) {
  	coords.push(marker.geometry.coordinates);
    map.addLayer({
      "id": String(marker.properties.id) + '-circle',
      "source": "markers",
      "type": "circle",
      "paint": {
        "circle-radius": 20,
        "circle-color": marker.properties.color,
        "circle-opacity": 0.8,
        "circle-stroke-width": 0,
      },
      "filter": ["==", "id", marker.properties.id],
    });
    map.addLayer({
      "id": String(marker.properties.id) + '-text',
      "source": "markers",
      "type": "symbol",
      "layout": {
        'text-field': marker.properties.text,
        'text-size': 20
      },
      "filter": ["==", "id", marker.properties.id]
    })
  });

  document.getElementById('zoomto').addEventListener('click', function() {
    // Geographic coordinates of the LineString
    var coordinates = coords;

    // Pass the first coordinates in the LineString to `lngLatBounds` &
    // wrap each coordinate pair in `extend` to include them in...