How to initial map padding?

by amay077

HTML

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="5">

  <base href="./">
  <link rel="stylesheet" href="index.css">

  <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
  
</head>

<body>
<div id="map" style="width:100%; height: 100vh;"></div>
<script src="index.js"></script>
</body>
</html>

CSS

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

JavaScript

const areaPolygon = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [ 137.796, 34.940 ],
        [ 137.748, 34.882 ],
        [ 137.887, 34.888 ],
        [ 137.796, 34.940 ]
      ],
    ]
  }
};

const bounds = turf.bbox(areaPolygon);

const map = new mapboxgl.Map({
  container: 'map',
  bounds: bounds,
  fitBoundsOptions: { padding: { bottom: 150, top: 150, right: 150, left: 150 } },
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [ "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" ],
        tileSize: 256,
        attribution: "OpenStreetMap",
      },
      route: {
        'type': 'geojson',
        'data': {
          "type": "FeatureCollection",
          "features": [ areaPolygon ]
        }
      }      
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
    }, {
      'id': 'route',
      'type': 'fill',
      'source': 'route',
      'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.8      
      }
    }],
  },      
});

map.on('moveend', e => {
  console.log('moveend', map.getZoom());
});