Navigate the map

The MapView control provides built-in navigation capabilities that allow you to interact with the map using mouse, touch, and keyboard. You can also navigate by manipulating the map view programmatically to display the map at different scales, extents, or orientations.

User navigation

The following table summarizes the built-in navigation capabilities of the MapView control. See the Scene navigation topic for the interaction capabilities built into SceneView.



  • Press and hold left button and drag
  • Drag
    Drag gesture
  • Flick
    Flick gesture
  • Arrow keys

Zoom in

  • Scroll wheel forward
  • Left double-click
  • Press and hold left button and drag + Shift key
  • Spread
    Spread gesture
  • Double tap
    Double tap gesture
  • + key

Zoom out

  • Scroll wheel backward
  • Left double-click + Ctrl key
  • Press and hold left button and drag + Shift and Ctrl key
  • Pinch
    Pinch gesture
  • Two finger double tap
    Two finger double tap gesture
  • - key


  • Two finger hold and twist
    Twist gesture


  • Touch and hold
    Touch and hold gesture


Rotation is disabled by default. Use InteractionOptions to enable rotation in the map view, as described in the following section.

Define navigation options

The navigation capabilities provided by the MapView can be modified or disabled using the InteractionOptions object associated with the control. You can disable all built-in navigation for the control by setting the IsEnabled property to false. To control specific navigation operations, use properties of PanOptions, RotationOptions, and ZoomOptions as described below. These options have no effect on the ability to manipulate the map display programmatically.

  • PanOptions properties
    • IsDragEnabled—Enable or disable pan operations using mouse or touch.
    • IsEnabled—Enable or disable all built-in pan operations.
    • IsFlickEnabled—Enable or disable panning in the direction of a flick gesture (touch).
    • IsKeyboardEnabled—Enable or disable panning with the arrow keys.
  • RotationOptions properties
    • IsEnabled—Enable or disable rotation for the map view. Rotation is disabled by default, you must provide code such as the following if you want to allow the user to rotate the map using touch gestures:
      MyMapView.InteractionOptions.RotationOptions.IsEnabled = true;
  • ZoomOptions properties
    • IsDoubleTappedEnabled—Enable or disable zoom in with a double-click of the mouse (and zoom out with a double-click while pressing the Shift key).
    • IsEnabled—Enable or disable all built-in zoom operations.
    • IsKeyboardEnabled—Enable or disable zooming in or out with keyboard shortcuts (+, - keys).
    • IsMouseWheelEnabled—Enable or disable using the mouse wheel to zoom in or out.
    • IsPinchEnabled—Enable or disable using pinch or spread (touch) gestures to zoom in or out.
    • IsTwoFingerTapEnabled—Enable or disable the ability to zoom out with a two fingered tap gesture (touch).
    • IsZoomBoxEnabled—Enable or disable the ability to press the shift key to draw an envelope to zoom in to (or out from).
    • MouseWheelZoomInDirection—Direction of mouse wheel scrolling to zoom in to the map. Available options are Forward (away from the user) and Backward (toward the user). The opposite direction will zoom out.

The following example sets the mouse wheel to zoom in when scrolled backward, disables keyboard zoom keys, and disables all panning:

MyMapView.InteractionOptions.ZoomOptions.MouseWheelZoomInDirection = MouseWheelDirection.Backward;
MyMapView.InteractionOptions.ZoomOptions.IsKeyboardEnabled = false;
MyMapView.InteractionOptions.PanOptions.IsEnabled = false;


Limiting navigation for secondary maps, such as an overview map, is a good idea when using multiple maps in your app. See the Multiple Maps topic for more information.

Navigate programmatically

You can programmatically manipulate the map display (extent, scale, rotation) regardless of the settings for InteractionOptions. This gives you the ability to limit the navigation options available in the control while providing your own tools for interacting with the map.

Change the map extent

To define the extent at which the map is first displayed, you can provide the Map class with a value for the InitialViewPoint property, using a Viewpoint object. The MapView provides three methods (with several overloads) that also allow you to define a new extent (to zoom in, for example) while your app is running. These are: SetViewAsync, ZoomAsync, and ZoomToScaleAsync.

The following example gets geometry from the user (a rectangle drawn on the display), then displays the map at the extent of that shape by passing the geometry to SetViewAsync:

private async void ZoomToEnvelopeButton_Click(object sender, RoutedEventArgs e)
    // use the MapView's Editor to request geometry (Envelope) from the user and await the result
    var newExtent = await MyMapView.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Rectangle);

    // set the map view extent with the Envelope
    await MyMapView.SetViewAsync(newExtent);

Drawing an envelope to define a new map extent

The SetViewAsync method has several overloads to provide a variety of ways for you to define a new area of the map to display. In addition to using a specified geometry, an envelope, or a center point and scale value, you can pass a Viewpoint to the method.

The Viewpoint class is used by both map view and scene view controls to display a specified geographic location. If you need to synchronize the area displayed between a scene view and map view in your app, you can pass Viewpoint objects between these controls. You can also get the current view point for a scene or map view using the ViewBase.GetCurrentViewpoint method.

See Set camera position programmatically for more information about working with view points for a scene and for synchronizing the areas displayed in a map and scene view.

Rotate the map

The map view can be rotated synchronously with the SetRotation method, or asynchronously with SetRotationAsync. Provide a TimeSpan value to animate the rotation.

The following code rotates the map view using an angle provided by the user:

private void RotateButton_Click(object sender, RoutedEventArgs e)
    // get the rotation angle (in degrees) from the user; parse to double
    var angle = 0.0;
    double.TryParse(this.RotationAngleTextBox.Text, out angle);

    // apply the rotation to the map

The MapView.Rotation property is read-only. You can use it to get the current rotation applied to the map view but not to set a new value.

Navigation events

The MapView control raises ExtentChanged and NavigationCompleted events. In general, NavigationCompleted is the best event to handle if you want to respond each time the user navigates the map. The ExtentChanged event is much more granular and may fire several times for a single navigation operation.

The following code handles the NavigationCompleted event to query features inside the new extent:

private async void MyMapView_NavigationCompleted(object sender, EventArgs e)
    // get a feature layer from the map; get the data (table) behind it
    var featureLayer = MyMapView.Map.Layers["MyFeatureLayer"] as FeatureLayer;
    var table = featureLayer.FeatureTable;

    // create a spatial filter using the current map extent
    var filter = new SpatialQueryFilter();
    filter.Geometry = MyMapView.Extent;

    // query the table using the extent
    var results = await table.QueryAsync(filter);

    // ... code here to process the results ...


Related topics