npm install maplibre-gl maplibre-grid

<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/maplibre-grid.js"></script>

import Maplibre from 'maplibre-gl';
import * as MaplibreGrid from 'maplibre-grid';

export interface GridConfig {
  gridWidth: number;
  gridHeight: number;
  units: Units;
  minZoom?: number;
  maxZoom?: number;
  paint?: maplibregl.LinePaint;
}

const grid = new MaplibreGrid.Grid(config: GridConfig);

const grid = new MaplibreGrid.Grid({
  gridWidth: 10,
  gridHeight: 10,
  units: 'degrees',
  paint: {
    'line-opacity': 0.2
  }
});
map.addControl(grid);

const grid1 = new MaplibreGrid.Grid({
  gridWidth: 10,
  gridHeight: 10,
  units: 'degrees',
  paint: {
    'line-opacity': 0.2
  }
});
map.addControl(grid1);

const grid2 = new MaplibreGrid.Grid({
  gridWidth: 5,
  gridHeight: 5,
  units: 'degrees',
  paint: {
    'line-opacity': 0.2
  }
});
map.addControl(grid2);

map.on(MaplibreGrid.GRID_CLICK_EVENT, event => {
  console.log(event.bbox);
});

map.removeControl(grid);