Mapbox GL JS API Set Bounds

Question

I've been trying to get my map (JS below) to be able to auto zoom to the extent of one of the JSON files used for display (there will be a number of separate ones), but I can't seem to figure out how I would achieve that.

    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-79.376828,43.635570], // starting position
        zoom: 12,
        pitch: 07, // pitch in degrees
        bearing: -16.1// bearing in degrees 
     });


 map.on('style.load', function () {

    map.batch(function (batch) {

        ////////////////////////////
        //ADDSOURCE for 0
        map.addSource("0", {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [[-79.378821,43.645557],[-79.378862,43.645594],[-79.378909,43.645616],[-79.418429,43.635570],[-79.413358,43.636944]]

                }
            }
        });

        //ADDLAYER for 0
        map.addLayer({
            "id": "0",
            "type": "line",
            "source": "0",
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "#0324a7",
                "line-width": 3
            }
        });
        ////////////////////////////
        //ADDSOURCE for 1
        map.addSource("1", {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [[-79.418429,43.635570],[-79.413358,43.636944],[-79.413197,43.636982],[-79.378821,43.645557],[-79.378862,43.645594]]

                }
            }
        });

        //ADDLAYER for 1
        map.addLayer({
            "id": "1",
            "type": "line",
            "source": "1",
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "#0324a7",
                "line-width": 3
            }
        });

    });//BATCH



});
map.fitBounds(map.getBounds());

map.addControl(new mapboxgl.Navigation());
map.scrollZoom.disable();

I have tried using various combinations of map.fitBounds(map.getBounds()), but I just can't seem how to figure out how to have the map launch to the extents of the first JSON. Any help would be greatly appreciated.

Also, should I be doing the map a different way (other than using map.batch(function (batch)) to load a number of different JSON files?

Answer 1

As far as i know (and could search) there is currently no way to derive bounds from a mapboxgl.GeoJSONSource object. You'll need to calculate those yourself. After that you can use mapboxgl's fitBounds method:

map.fitBounds([
    [-79.418429, 43.63557],
    [-79.378821, 43.645616]
]);