Skip To Content

Add a map and layers

In this topic

Version 3.7

The steps below will guide you through displaying a map with a basemap layer in your application. We assume that you have already created a blank project with the referenced API library as discussed in the Getting started section.

The primary way to display geographic information in your application is through a map. The Flex API provides a user interface (UI) Map component. This component lets you display content by either working with layers referencing various web services such as ArcGIS Server Map and image services, Open Street Map, Bing Maps, OGC WMS etc. or by referencing preconfigured web maps from ArcGIS Online (Esri's cloud), or your own on-premise ArcGIS portal(s).

Flex applications are developed using the MXML and ActionScript languages with the ActionScript class library. MXML can be compared to HTML, as it uses tags to lay out the page. Whereas Actionscript can be compared to Javascript, as this is where the code and logic usually reside.

We are going to work strictly in MXML for this tutorial by adding a map UI component to the project initially created in the Getting started topic.

Add an Esri namespace reference

The first step in displaying a map in your application is to reference the ArcGIS API for Flex library in the MXML. You will do this by adding the Esri namespace. This is added as a property of the application or component you are building.

Linear progression of working in the Flex API

  • In the Editor view, modify the MXML markup to read
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
       xmlns:esri="http://www.esri.com/2008/ags">
    </s:Application>

    Now that you added the namespace reference to your markup. You can begin writing code.

Add a map and data to the UI

The next step is to add a map component to your application's UI. This component will act as an empty canvas to which you will later add map content.

Layers of mapping in Flex API

  • Add the following markup in the Editor view underneath the namespace reference added above.
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application
       xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/halo"
       xmlns:esri="http://www.esri.com/2008/ags">
    
       <esri:Map level="3" wrapAround180="true">
          <esri:center>
             <esri:WebMercatorMapPoint lon="0" lat="0"/>
          </esri:center>
    </esri:Map>
    
    </s:Application>
  • Next, add the ArcGISTiledMapServiceLayer as the basemap layer to the map. Add the ArcGISDynamicMapServiceLayer displaying world population density onto the basemap layer.
    ....
    <esri:Map level="3" wrapAround180="true">
       <esri:center>
          <esri:WebMercatorMapPoint lon="0" lat="0"/>
       </esri:center>
       <esri:ArcGISTiledMapServiceLayer
        url="http://server.arcgisonline.com/ArcGIS/rest/services/
             World_Street_Map/MapServer"/>
       <esri:ArcGISDynamicMapServiceLayer
        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/
             Demographics/ESRI_Population_World/MapServer" 
             alpha=".70"/>
    </esri:Map>
  • Run the application

    Map with added layers

The MXML above adds the esri:Map component to the application with a set level and center. In addition to the Map container, you are also adding a tiled map service layer pointing to a REST URL hosting a cached map service and a dynamic map service layer. Upon launching the application, the map displays the tiled map service layer at the third level of detail centered on a latitude and longitude of zero with the dynamic map service layer layered on top.

Tip:

Remember when writing code, it should always contain at least a namespace and ActionScript code and/or MXML tags.