• Public
  • Public/Protected
  • All

An MGRS grid. This class contains specific information about the grid and various options for styling and labeling. To paint this grid on a map, create a new GridLayer with an object of this class as input.

You can define different styles for all (MGRSType, MGRSLevel) combinations. For every combination, it is also possible to define different scale intervals, in which different styles are used. This can be used to make lines or labels more prominent when zooming in.

Example usages:

Default styling: Create a default MGRS grid with predefined scale ranges and styling.
  const mgrsGrid = createDefaultMGRSGrid();
  const mgrsGridLayer = new GridLayer(mgrsGrid);

Default styling with tweaks: Create a default MGRS grid, with some tweaks to the default styling and scale ranges.

  const primaryColor = "rgb(255, 0, 0)";
  const secondaryColor = "rgb(0, 255, 0)";
  const tertiaryColor = "rgb(0, 0, 255)";
  const mgrsGrid = createDefaultMGRSGrid({
    scaleMultiplier: 1.5, // make the grid more coarse
    primaryLineStyle: {color: primaryColor, width: 1},
    primaryLabelStyle: {font: "12px monospace", fill: primaryColor},
    secondaryLineStyle: {color: secondaryColor, width: 2},
    secondaryLabelStyle: {font: "14px monospace", fill: secondaryColor},
    tertiaryLineStyle: {color: tertiaryColor, width: 3},
    tertiaryLabelStyle: {font: "16px monospace", fill: tertiaryColor}
  const mgrsGridLayer = new GridLayer(mgrsGrid);

Custom styling: Start from an empty MGRS grid and add custom scale ranges and styling for a few MGRS levels.

  // styling with completely custom scale ranges and styles

  // always show GRID_ZONES with thick red lines, regardless of the zoom level
  const gridZoneColor = "rgb(255, 0, 0)";
  const gridZoneSetting = ({
    scaleRange: {min: 0, max: Number.POSITIVE_INFINITY},
    level: MGRSLevel.GRID_ZONES,
    lineStyle: {color: "rgb(255, 0, 0)", width: 5},
    labelStyle: {font: "20px monospace", fill: gridZoneColor}

  // When zoomed in far enough, show 100KM grid squares in yellow.
  // Hide them when zoomed in beyond the 10KM grid square scale range start
  const startScale100Km = 1.0 / 3_000_000.0
  const startScale10Km = 1.0 / 750_000.0;
  const square100KmSetting = {
    scaleRange: {min: startScale100Km, max: startScale10Km},
    level: MGRSLevel.SQUARES_100KM,
    lineStyle: {color: "rgb(255,255,0)", width: 5},
    labelStyle: {font: "20px monospace", fill: gridZoneColor}

  // when zoomed in beyond the 100km squares, show 10Km squares in green
  const square10KmSetting = {
    scaleRange: {min: startScale10Km, max: Number.POSITIVE_INFINITY},
    level: MGRSLevel.SQUARES_10KM,
    lineStyle: {color: "rgb(0, 255, 0)", width: 2},
    labelStyle: {font: "20px monospace", fill: gridZoneColor}

  // don't show any lower MGRS levels (SQUARES_1KM, SQUARES_100M, SQUARES_10M and SQUARES_1M)

  const mgrsGrid = new MGRSGrid([gridZoneSetting, square100KmSetting, square10KmSetting]);
  const mgrsGridLayer = new GridLayer(mgrsGrid);


  • MGRS grid visualization is only supported on a WebGLMap











  • (event: "SettingsChanged", callback: () => void, context?: any): Handle
  • Fired when the style settings of this grid change. See getSettings.




    • event: "SettingsChanged"

      the "SettingsChanged" event

    • callback: () => void

      the callback to be invoked when the style settings of the grid change. The callback is invoked without arguments.

        • (): void
        • Returns void

    • Optional context: any

      value to use as this when executing callback.

    Returns Handle



  • Returns the style settings currently configured on this MGRSGrid. Note that these settings are normalized. All fields of the settings are defined, even if they were omitted in setSettings

    Returns NormalizedMGRSGridSetting[]


  • Set styling configuration for this grid. The style settings in the grid may not overlap. Overlap occurs when the new style setting has the same type, same level and an overlapping scale range with an existing style setting.


    • settings: MGRSGridSetting[]

      describes the styling, per scale range and grid line type.

    Returns void


  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method