GeoGrid

Graticule with degree labels

Maintained by Zbigniew Matysek

A MapLibre GL JS plugin that draws a customizable geographic grid (graticule) with degree labels along the map edges, redrawn as the map moves.

Live demo

GeoGrid running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { GeoGrid } from "geogrid-maplibre-gl";
import "geogrid-maplibre-gl/dist/geogrid.css";
import type { PluginDemo } from "../types";

export default {
  center: [10, 50], // Europe
  zoom: 3.5,
  run({ map }) {
    // A graticule with degree labels along the edges; it redraws as you pan and zoom.
    const grid = new GeoGrid({
      map,
      beforeLayerId: "boundary_3",
      gridStyle: { color: "rgba(40, 60, 120, 0.5)", width: 1, dasharray: [4, 4] },
      labelStyle: { color: "rgb(40, 60, 120)", fontSize: "12px" },
    });

    // The grid draws itself on the map's "load" event, which has already fired here.
    grid.add();
  },
} satisfies PluginDemo;