Class MGRSGrid

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);
  map.layerTree.addChild(mgrsGridLayer);
Copy

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);
  map.layerTree.addChild(mgrsGridLayer);
Copy

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);
  map.layerTree.addChild(mgrsGridLayer);
Copy

Limitations

• MGRS grid visualization is only supported on a WebGLMap