ArcGIS for Developers

Get map coordinates

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.

How to use the sample

Clone the sample repo and copy this widget's folder (within samples/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({ /* ... */ });
});