Mapbox rectangle line from bounds from two points

Question

I use Mapbox and my goal is to create a rectangle from my bounds. I also center my map into the bounds.

While Mapbox can figure out all my four coordinates for fitBounds, it does not do the same thing for the line. Instead it draws the line as a line between the two points.

How can I...

1. ...draw a rectangle instead?
2. ...calculate the other two coordinates needed?

A part of the code

const bounds = [
  [17.76069212, 59.22761885],
  [18.20001876, 59.44007814],
];

var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
});

map.fitBounds(bounds, {
  padding: 16,
});

map.on("load", () => {
  map.addSource("route", {
    type: "geojson",
    data: {
      type: "Feature",
      properties: {},
      geometry: {
        type: "LineString",
        coordinates: bounds,
      },
    },
  });
  map.addLayer({
    id: "route",
    type: "line",
    source: "route",
    layout: {
      "line-join": "round",
      "line-cap": "round",
    },
    paint: {
      "line-color": "#888",
      "line-width": 8,
    },
  });
});

• I saw turf.js and it seems possible with it, but it's a large library to just draw a rectangle.
• I will accept a library as an answer if it's small.
• If the solution is a math formula, I need a code example to get the hang of it.

Answer 1

With your pair of bounds coords you always can create a rectangle in mapbox without any library... it's a matter of creating the 4 corners using your data of bottom-left/top-right.

Mapbox requires to create a fifth point that is the same as the initial one.

Using yours you can create a feature to add to your line layer, and it will paint a rectangle... it would be like this:

{
  "geometry": {
    "coordinates": [
      [
        [
          17.76069212, 
          59.22761885
        ],
        [
          17.76069212,
          59.44007814
        ],
        [
          18.20001876,
          59.44007814
        ],
        [
          18.20001876,
          59.22761885
        ],
        [
          17.76069212, 
          59.22761885
        ]
      ]
    ],
    "type": "Polygon"
  },
  "type": "Feature",
  "properties": {}
}