Setting Initial zoom extent of map?

02-22-2016 02:17 PM
Occasional Contributor

I am new to App Studio and am having issues trying to set the initial zoom extend of the app that I am viewing in Player. I assumed that the web map extent used in app would set initial extent similar to a web app but my app starts at the world view. Is there a setting or something wrong with my data make the extent show as planned?

0 Kudos
4 Replies
Esri Regular Contributor

The initial extent needs to be defined in the qml code of your app. To see an example you can download the Add and edit features sample in AppStudio Desktop Edition. Either use the search panel to browse to Groups > Sample Apps, or click New App and choose to create a new app from the Add and edit features sample (or almost any of the samples).

To demonstrate the use of extent in a much less complex simpler, follow these steps:

1. Click New App

2. Select Hello World (Runtime), enter a title and click OK.

3. Run the app (double click on it) to see that the app displays a world basemap at full extent.

3. Open the new app in Qt Creator.

4. Immediately above the line

      Map {

  add the following

      Envelope {

          id: myextent

         xMax: -13630000

         yMax: 4554300

         xMin: -13640000

         yMin: 4535200


5. After the line

       id: map

  add the following line

      extent: myextent

  Your code should look like this


6. Save and run your app. Now you should see that the app displays the map at the extent of San Francisco.

New Contributor

Hi Marika, 

Thank you so much for the information about how to define the map extent; it was really helpful.  How did you figure out the x and y values?  Are those pixel values?

Thank you, 


0 Kudos
Esri Regular Contributor

The values are map coordinates.

I have found the easiest way to get the scale and coordinates of my maps right is to have an app that shows the top right and bottom left coordinates. This screenshot shows this app:

App that shows envelope coordinates

I then zoom in and out and pan to the extent that I want, and then round off the coordinates that are displayed to something that suits my other app. The following code is what is used to display the coordinates on the map in the above app.

    Text {
       id: bottomLeft
       anchors.left: parent.left
       anchors.bottom: parent.bottom
       text: "xMin: " + map.extent.xMin.valueOf() + "<br/> " + " yMin: " + map.extent.yMin.valueOf();
    Text {
       id: topright
       anchors.right: parent.right
       text: "xMax: " + map.extent.xMax.valueOf() + "<br/> " + " yMax: " + map.extent.yMax.valueOf();
New Contributor

Awesome, Marika!  Thanks; that worked perfectly!  Using the text to call out the coordinates was a great idea!


0 Kudos