How do I show the bounding box of a mapboxgl object with 4 corner coordinates?

Question

I want to show a physical bounding box on my map. Suppose I have four examples points as follows:

var southWest = new mapboxgl.LngLat(-73.9876, 40.7661);
var northWest = new mapboxgl.LngLat(-73.9397, 41.8002);
var northEast = new mapboxgl.LngLat(-73.9397, 40.8002);
var southEast = new mapboxgl.LngLat(-73.9876, 39.8002);

I know there is a method similar to the following:

var boundingBox = new mapboxgl.LngLatBounds(southWest, northEast);

However, I want a box to account for all 4 coordinates. Are there good methods for this? I want the box to show up over my existing map that is apart of a React/JS application.

score 1 · Accepted Answer · answered Jul 27 '21 at 12:25

Figured it out!

      var northEast = [131.308594, 46.195042];
      var southEast = [117.597656, 8.233237];
      var southWest = [79.101563, 32.842674];
      var northWest = [86.847656, 44.715514];

      map.addSource('route', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'LineString',
                'coordinates': [
                    northEast, southEast, southWest, northWest, northEast
                ]
            }
        }
      });
      map.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'route',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#ff0000',
            'line-width': 5
        }
    });

How do I show the bounding box of a mapboxgl object with 4 corner coordinates?

1 Answers1