Using Map
Version 1.3

Tutorial overview

This tutorial shows you how to create an application with a map zoomed in to a specific location, illustrating how the ArcGIS API for Flex is used in an MXML page.

The following is the sample MXML code in its entirety:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:esri="http://www.esri.com/2008/ags"
    pageTitle="Tutorial - adding a map"
    >
    <esri:Map>
        <esri:ArcGISTiledMapServiceLayer
    url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />
        <esri:extent>
            <esri:Extent xmin="-17.3" ymin="-34.6" xmax="51.1" ymax="38.2"/>
        </esri:extent>
    </esri:Map>
</mx:Application>

View a sample.

Your code should always contain the same two parts:

How to create a map

  1. If desired, add a page title inside the <mx:Application> tag. This name will appear in your Web browser title bar.
  2. Add the map to your application by inserting the following code:
<esri:Map>

When you first use the esri namespace, Flex Builder automatically adds the namespace to the application tag. When you add <esri:Map>, Flex Builder automatically creates its matching end tag </esri:Map>.

  1. Add a layer from ArcGIS Online. For instance, add the following inside the Map tag:
<esri:ArcGISTiledMapServiceLayer
    url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />

The StreetMap service, a tiled MapService layer, is initialized using the ArcGISTiledMapServiceLayer constructor. The URL is the endpoint for this service. This endpoint is a reference to a service that you can find out using Services Directory.

  1. Set an extent. In this instance, you will add an extent with a specific bounding box to zoom in to Africa.
<esri:extent>
    <esri:Extent xmin="-17.3" ymin="-34.6" xmax="51.1" ymax="38.2"/>
</esri:extent>
  1. Compile your complete application. You should see a map centered on Africa.