Get map coordinates (class)

This widget demonstrates how to display the latitude/longitude, scale, and zoom level of the map. Step-by-step instructions for building this widget can be found in the ArcGIS for Developers Tutorials.

This widget is written as a Class-based component. The equivalent widget written as a React functional Component can be found here.

How to use the sample

Clone the sample repo and copy this widget's folder (within widgets) to the client/your-extensions/widgets folder of your Experience Builder installation.

How it works

Within widget.tsx, a reference to the Map object is acquired using the JimuMapViewComponent module. That reference is used in the activeViewChangeHandler function to create two watchers: one on when the extent changes, and one on when the pointer moves within the view:

// When the extent moves, update the state with all the updated values.
jmv.view.watch("extent", evt => {
  this.setState({ /* ... */ });
});

// When the pointer moves, take the pointer location and create a Point
// geometry out of it (`view.toMap(...)`), then update the state.
jmv.view.on("pointer-move", evt => {
  const point: Point = this.state.jimuMapView.view.toMap({
    x: evt.x,
    y: evt.y
  });
  this.setState({ /* ... */ });
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close