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 = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';

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