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.