Class MGRSGridOverlayTextProvider

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);
  }

since

2022.0