Change viewpoint

View inQMLC++
View on GitHub
Sample viewer app

Set the map view to a new viewpoint.

screenshot

Use case

Programmatically 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 Map object and set it to the MapView object.
  2. Change the map's Viewpoint using one of the available methods:
  3. Use MapView.setViewpointWithAnimationCurve(viewPoint, duration, Enums.AnimationCurve) to pan to a viewpoint over the specified length of time.
  4. Use MapView.setViewpointCenter() to center the viewpoint on a Point and set a distance from the ground using a scale.
  5. Use MapView.setViewpointGeometry() to set the viewpoint to a given Geometry.

Relevant API

  • Enums.AnimationCurve
  • Map
  • Geometry
  • MapView
  • Point
  • Viewpoint

Additional information

Below are some other ways to set a viewpoint:

  • setViewpoint
  • setViewpointCenter
  • setViewpointGeometry
  • setViewpointRotation
  • setViewpointScale

Tags

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

Sample Code

ChangeViewpoint.qml
                                                                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
// [WriteFile Name=ChangeViewpoint, Category=Maps]
// [Legal]
// Copyright 2016 Esri.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// [Legal]

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.11

Rectangle {
    width: 800
    height: 600

    property real   rotationValue: 0.0
    property int    scaleIndex: -1

    PointBuilder {
        id: ptBuilder
        spatialReference: SpatialReference { wkid: 4326 }
    }

    EnvelopeBuilder {
        id: envBuilder
        spatialReference: SpatialReference { wkid: 4326 }
    }

    ViewpointExtent {
        id: springViewpoint
        extent: Envelope {
            xMin: -12338668.348591767
            xMax: -12338247.594362013
            yMin: 5546908.424239618
            yMax: 5547223.989911933
            spatialReference: SpatialReference { wkid: 102100 }
        }
    }

    MapView {
        id: mv
        anchors.fill: parent

        Map {
            Basemap {
                initStyle: Enums.BasemapStyleArcGISImagery
            }
        }
    }

    ComboBox {
        id: comboBoxViewpoint
        anchors {
            left: parent.left
            top: parent.top
            margins: 5
        }

        property int modelWidth: 0
        width: modelWidth + leftPadding + rightPadding + indicator.width

        model: ["Center","Center and scale","Geometry","Geometry and padding","Rotation","Scale 1:5,000,000","Scale 1:10,000,000","Animation"]
        onCurrentTextChanged: {
            changeCurrentViewpoint(currentText);
        }

        Component.onCompleted: {
            for (let i = 0; i < model.length; ++i) {
                metrics.text = model[i];
                modelWidth = Math.max(modelWidth, metrics.width)
            }
        }

        TextMetrics {
            id: metrics
            font: comboBoxViewpoint.font
        }

        function changeCurrentViewpoint(text) {
            switch (text) {
            case "Center":
                ptBuilder.setXY(-117.195681, 34.056218); // Esri Headquarters
                mv.setViewpointCenter(ptBuilder.geometry);
                break;
            case "Center and scale":
                ptBuilder.setXY(-157.564, 20.677); // Hawai'i
                mv.setViewpointCenterAndScale(ptBuilder.geometry, 4000000.0);
                break;
            case "Geometry":
                envBuilder.setXY(116.380, 39.920, 116.400, 39.940); // Beijing
                mv.setViewpointGeometry(envBuilder.geometry);
                break;
            case "Geometry and padding":
                envBuilder.setXY(116.380, 39.920, 116.400, 39.940); // Beijing
                mv.setViewpointGeometryAndPadding(envBuilder.geometry, 200 * screenRatio());
                break;
            case "Rotation":
                rotationValue = (rotationValue + 45.0) % 360.0;
                mv.setViewpointRotation(rotationValue);
                break;
            case "Scale 1:5,000,000":
                mv.setViewpointScale(5000000.0);
                break;
            case "Scale 1:10,000,000":
                mv.setViewpointScale(10000000.0);
                break;
            case "Animation":
                mv.setViewpointWithAnimationCurve(springViewpoint, 4.0, Enums.AnimationCurveEaseInOutCubic);
                break;
            }
        }
    }

    function screenRatio() {
        const width = mv.mapWidth;
        const height = mv.mapHeight;
        return height > width ? width / height : height / width;
    }
}

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