Constructs a new MGRSGrid.
the styling configuration for this grid. See setSettings. Defaults to an empty array.
Fired when the style settings of this grid change. See getSettings.
the "SettingsChanged" event
the callback to be invoked when the style settings of the grid change. The callback is invoked without arguments.
value to use as this when executing callback.
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
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.
describes the styling, per scale range and grid line type.
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);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);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);Limitations
2022.0