MapBox zoom to bounding box

App Building
,
1

I am using a custom component with mapbox draw a basic polygon for editing. The map draws correctly, but the map should automatically zoom or fly to the bounding box of the polygon when the map initially loads.
I've scoured Google but have yet to find a way to auto zoom to a drawn polygon. Can anyone provide an example of how to do this?

Example code that doesn't work:

var draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
            polygon: true,
            trash: true
        }
    });
  
var geojson = {
  "type": "Polygon",
  "coordinates": [
    [
      [
        -118.4124705,
        34.2363116
      ],
      [
        -118.4097024,
        34.2335619
      ],
      [
        -118.4072777,
        34.2352827
      ],
      [
        -118.4101101,
        34.2379081
      ],
      [
        -118.4124705,
        34.2363116
      ]
    ]
  ]
};

  
    map.addControl(draw);  

    map.on('draw.create', updateData);
    map.on('draw.delete', updateData);
    map.on('draw.update', updateData);
  
var territory = draw.add(geojson);
 
var bbox = turf.bbox(geojson);
map.fitBounds(bbox);
1 Like
2

Hi @finedesignz

map.fitBounds should do the job.
Don't know how bbox is formatted because I don't know what turf is though.

3

Thanks for the reply... is anyone able to get map.fitBounds() to work at all? I can't get it to work at all.

Here's my full custom component:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Extract drawn polygon area</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.1/mapbox-gl-draw.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.1/mapbox-gl-draw.css" type="text/css">
<style>
body { margin: 0; padding: 0; }
  #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
  
<body>

<div id="map"></div>



<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoiZXN0b3JudWRhbWUiLCJhIjoiY2s4YXd3aXNkMDJvNDNkb3diMmJqb3FkYiJ9.bDVBManMcJ7p1zPFQFEw9w';



window.Retool.subscribe(function(model) {

  let points = model.points;
  let lat = parseFloat(model.lat);
  let lng = parseFloat(model.lng); 
  let bndry = JSON.parse(model.bndry);
  let coordinates = model.coordinates;

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v10', //hosted style id
  center: [lat,lng], // starting position
  zoom: 12 // starting zoom
});
  
  
var draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
            polygon: true,
            trash: true
        }
    });
  
var geojson = {
  "type": "Polygon",
  "coordinates": [
    [
      [
        -118.4124705,
        34.2363116
      ],
      [
        -118.4097024,
        34.2335619
      ],
      [
        -118.4072777,
        34.2352827
      ],
      [
        -118.4101101,
        34.2379081
      ],
      [
        -118.4124705,
        34.2363116
      ]
    ]
  ]
};

  
    map.addControl(draw);  

    map.on('draw.create', updateData);
    map.on('draw.delete', updateData);
    map.on('draw.update', updateData);
  
var territory = draw.add(geojson);
  
/*-----------------------------------*/

var bbox = turf.bbox(geojson);


map.on('load', function () {
  map.fitBounds([
      [
        -118.4124705,
        34.2363116
      ],
      [
        -118.4097024,
        34.2335619
      ]
  ]);
});

/*-----------------------------------*/


  
function updateData(e) {
  var data = draw.getAll();      
  window.Retool.modelUpdate({ data });
    }

  
});





</script>

</body>
</html>
4

The Mapbox script part works just fine:

5

Thanks. Can you get it to work in a custom component in Retool as well?

6

Hey @finedesignz!

This seemed to work for me after commenting out var bbox = turf.bbox(geojson); in the code you posted above. For full context, the custom component's model was set to

{
coordinates: [],
bndry: "{}",
points: [],
lat: 0,
lng: 0,
}

I've attached the JSON here!
mapbox_fly.json