View in MAUI WPF WinUI View on GitHub

Set the map view to a new viewpoint.

Image of change viewpoint

Use case

Programatically navigate to a specified location in the map or scene. Use this to focus on a particular point or area of interest.

How to use the sample

The map view has several methods for setting its current viewpoint. Select a viewpoint from the UI to see the viewpoint changed using that method.

How it works

  1. Create a new Map object and set it to the MapView object.
  2. Change the map’s Viewpoint using one of the available methods:
  • Use MapView.SetViewpointAsync() to pan to a viewpoint.
  • Use MapView.SetViewpointCenterAsync() to center the viewpoint on a Point.
  • Use MyMapView.SetViewpointScaleAsync() to set a distance from the ground using a scale.
  • Use MapView.SetViewpointGeometryAsync() to set the viewpoint to a given Geometry.

Relevant API

  • Geometry
  • Map
  • MapView
  • Point
  • Viewpoint

Additional information

Below are some other ways to set a viewpoint:

  • SetViewpoint
  • SetViewpointAsync
  • SetViewpointCenterAsync
  • SetViewpointGeometryAsync
  • SetViewpointRotationAsync
  • SetViewpointScaleAsync

Tags

animate, extent, pan, rotate, scale, view, zoom

Sample Code

ChangeViewpoint.xaml ChangeViewpoint.xaml ChangeViewpoint.xaml.cs
<UserControl x:Class="ArcGIS.WinUI.Samples.ChangeViewpoint.ChangeViewpoint"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
<Grid>
<esriUI:MapView x:Name="MyMapView" />
<Border Width="375"
Margin="30"
Padding="20"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Background="White"
BorderBrush="Black"
BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
Margin="0,0,0,5"
FontWeight="SemiBold"
Text="Use the buttons to compare the various ways of setting the viewpoint."
TextWrapping="Wrap" />
<Button Grid.Row="1"
Grid.Column="0"
Margin="0,10,0,0"
HorizontalAlignment="Stretch"
Click="OnButtonClick"
Content="Geometry" />
<Button Grid.Row="1"
Grid.Column="1"
Margin="5,10,0,0"
HorizontalAlignment="Stretch"
Click="OnButtonClick"
Content="Center and Scale"
RelativePanel.RightOf="GeomButton" />
<Button Grid.Row="1"
Grid.Column="2"
Margin="5,10,0,0"
HorizontalAlignment="Stretch"
Click="OnButtonClick"
Content="Animate"
RelativePanel.RightOf="ScaleButton" />
</Grid>
</Border>
</Grid>
</UserControl>