How to add Turf.js squareGrid layer to mapbox gl?

Question

I am new to this and trying to add a grid layer, using Mapbox GL. Would appreciate some help.

var bbox = [-95, 30 ,-85, 40];
var cellSide = 50;
var options = {units: 'miles'};

var squareGrid = turf.squareGrid(bbox, cellSide, options);

Answer 1

What you have so far gives you a GeoJSON object that you can add to your map. Assuming you have a created a map (follow the getting started example), you now need to add a GeoJSON source, then a layer that renders it.

Something like

map.on('load', function() {
    map.addSource('grid', {
        'type': "geojson",
        'data': squareGrid
    });
    map.addLayer({
        'id': 'grid',
        'type': 'line',
        'source': 'grid',
        'paint': {
            'line-color': 'red',
        }
    });
});