Change viewpoint

View in

Android

Forms

UWP

WPF

WinUI

iOS

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

Create a new Map object and set it to the MapView object.
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

Sample Code

ChangeViewpoint.xaml

ChangeViewpoint.xaml.cs

Use dark colors for code blocksCopy
﻿<UserControl x:Class="ArcGISRuntime.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>