My requirement is to divide whole world map into square grid using mapbox and turf.js. User will always view visible part of grid in his/her map viewport/bounds. The concept of drawing grid on world map is there because I thought that we will draw whole grid at once and user will see in map viewport by using mask option in turf square grid. But problem is that the grid is not visible when I am trying to draw it on world map using :

grid = turf.squareGrid([-179.99, -89.99, 179.99, 89.99], 100, {units: 'meters'})

and when I am drawing the grid only on the user's map viewport then on map drag/move, using following code

const bounds = map.getBounds();
        
const NE = bounds.getNorthEast();
const SW = bounds.getSouthWest();
var options = {units: 'meters'};
var grid = turf.squareGrid([SW.lng, SW.lat, NE.lng, NE.lat], 10, options);

I redrawn the grid again and places of grid cells and their id's have been changed.