Open topic with navigation

Using Extent

Version 1.3

Tutorial overview

NOTE: The following discussion assumes that you are familiar with the basic concepts of Flex.

This tutorial describes several ways to set a map's extent as well as how to retrieve the extent for use in other operations.

If you do not include extent information when you initialize a map, the default extent is used, which is the extent of the map as it was last saved in the map document. If you use multiple layers, or services, the default extent is the initial extent of the basemap or first layer added.

How to set an extent

To set an initial extent that is different from the default extent, use the extent property or Extent class.

• Set the map extent using the extent property.

1. Add your map.
2. Insert the <esri:Extent> tag and specify the ID and coordinates.
3. Add the <esri:ArcGISDynamicMapServiceLayer> tag.

Your code should look similar to below.

<esri:SpatialReference id="wgs" wkid="4326"/>
<esri:Extent id="extentOfKansas" xmin="-103" ymin="36" xmax="-94" ymax="41" spatialReference="{wgs}"/>
<esri:Map id="myMap" extent="{extentOfKansas}">
    <esri:ArcGISTiledMapServiceLayer
        url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
    <esri:ArcGISDynamicMapServiceLayer
        id="myLayer"
        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer" />
</esri:Map>

View another sample map extent set using the extent property.

• Set the initial map extent using the Extent class.

1. Add your map.
2. Add the <esri:SpatialReference> tag and specify the desired projection and well-known ID.
3. Insert the <esri:extent> tag and specify the ID and coordinates.
4. Add the <ArcGISTiledMapServiceLayer> tag.

Your code should look similar to below.

<esri:SpatialReference id="wgs" wkid="4326"/>
<esri:Map id="myMap">
    <esri:extent>
        <esri:Extent xmin="-103" ymin="36" xmax="-94" ymax="41" spatialReference="{wgs}"/>
    </esri:extent>
    <esri:ArcGISTiledMapServiceLayer
        url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
    <esri:ArcGISDynamicMapServiceLayer
        id="myLayer"
        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer" />
</esri:Map>

View another sample map extent set using the Extent class.

How to set an extent when using multiple services

In some cases, you may want to use the extent of a layer that is not the initial layer or basemap. To do this, set the map extent to the extent of the desired layer.

In the following example, two layers are used: the base layer—ArcGIS Online world extent—and a second layer—the state of Kansas.

To set Kansas as the extent, add a load property that sets the extent of the map.

load="{myMap.extent=myKansasLayer.fullExtent}"

The load property creates the map and, when loaded, sets the full extent to the Kansas layer.

The code below sets the map extent to myKansasLayer using fullExtent.

<esri:Map id="myMap">
    <esri:ArcGISTiledMapServiceLayer
        url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
    <esri:ArcGISDynamicMapServiceLayer
        load="{myMap.extent=myKansasLayer.fullExtent}"
        id="myKansasLayer"
        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer" />
</esri:Map>

NOTE: If you want to set the initial extent instead of the full extent, use myKansasLayer.initialExtent.

How to get the current extent

Retrieve the current map extent using the extent property.

How to listen to extent changes

The map will fire off an ExtentEvent every time the user pan or zooms the map. You can add an event listener using either mxml or ActionScript to be notified of extent changes. See for example the Event sample

<esri:Map id="myMap" extentChange="displayExtent()">
    <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />
</esri:Map>

myMap.addEventListener(ExtentEvent.EXTENT_CHANGE, extentChangeHandler);