Constructs a new MGRSOverlayTextProvider
The grid layer to provide overlay text for
Specifies what format string to use at what scale range. The supported formats are the same as MGRSGridSetting.labelFormat.
Options for this OverlayTextProvider.
This event fires whenever OverlayTextProvider.text changes.
This event fires whenever OverlayTextProvider.visible changes.
Returns the current overlay text. This changes whenever coordinate specified by OverlayTextProviderConstructorOptions.coordinate changes. Ie. the map is moved (or the mouse moves if OverlayTextProviderConstructorOptions.coordinate is OverlayTextCoordinateType.MOUSE_CURSOR.
Returns the current state of visibility. Visible is true when:
Destroy this OverlayTextProvider. This cleans up all map / layer listeners it has set up.
Call this to update text. For example, this is called when the map is moved.
A utility class for MGRS grid overlay text.
You can use this to implement a UI component that shows MGRS location info. For example, show in which MGRS zone / square the map is zoomed in on.
The supported formats are the same as MGRSGridSetting.labelFormat. The format is ignored when using COMMON_MAP_COORDINATE.
Example usage:
// create a default MGRS grid layer const mgrsGrid = createDefaultMGRSGrid(); const mgrsGridLayer = new GridLayer(mgrsGrid); map.layerTree.addChild(mgrsGridLayer); // create an overlay div element, centered at the top of the map const overlayDiv = document.createElement("div"); overlayDiv.id = "mgrs-overlay-div"; overlayDiv.style.zIndex = "10"; overlayDiv.style.position = "absolute"; overlayDiv.style.top = "15px"; overlayDiv.style.left = "50%"; overlayDiv.style.transform = "translate(-50%, 0)"; overlayDiv.style.color = "yellow"; overlayDiv.style.fontSize = "3em"; overlayDiv.style.pointerEvents = "none"; map.domNode.appendChild(overlayDiv); // create a MGRS overlay text provider const overlaySettings = createDefaultMGRSOverlayTextSettings(mgrsGrid); const overlayTextProvider = new MGRSGridOverlayTextProvider(mgrsGridLayer, overlaySettings,{coordinate: OverlayTextCoordinateType.COMMON_MAP_COORDINATE}); overlayDiv.style.display = "none" const visibilityChangedHandle = overlayTextProvider.on("VisibilityChanged", () => { overlayDiv.style.display = "block"; }); overlayDiv.innerText = overlayTextProvider.text; const textChangedHandle = overlayTextProvider.on("TextChanged", () => { overlayDiv.innerText = overlayTextProvider.text; }); function destroyUI() { visibilityChangedHandle.remove(); textChangedHandle.remove(); overlayTextProvider.destroy(); map.domNode.removeChild(overlayDiv); }
2022.0