Compass widget

The view can be rotated in a number of ways, including:

  • right-click + drag with the mouse
  • tapping the A and D keys
  • programmatic navigation by adjusting MapView.rotation

By clicking the Compass widget, the user can set the rotation to 0 (or north at the top of the view).

This sample demonstrates how to add a Compass to a 2D MapView. The Compass widget is added to a 3D SceneView by default. The widget renders inside its own DOM node nested within the view node. Once the container exists (usually as a <div> element), you can style the widget and position it anywhere in the view using CSS. Compass must reference its respective View through the view property of the widget constructor object. You can also use the MapView's UI for convenient placement of the compass in the view without CSS.

1
2
3
4
5
6
const compassWidget = new Compass({
  view: view
});

// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");

Compass contains a pointer that indicates the direction of north in relation to the current view point. The user can automatically reset the view so that north is at the top by simply clicking on the Compass.

For an example demonstrating how to disable rotation, see the Disable rotation on the view sample.

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

The developer dashboard has moved

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