Add a web map

Version 3.7

Quick overview

An ArcGIS web map is a basemap and a related set of layers that users can interact with to perform some meaningful task. These maps are available to a wide audience and include multiscale basemaps, operations layers targeted to a specific audience, and pop-up windows that allow users to focus on specific features of interest, as well as other data formats (text files, shapefiles, KML, etc). These web maps are viewable on a wide variety of clients including mobile devices, desktop applicaitons, and web browsers. For more information regarding working with ArcGIS Online web maps, see the Help section.

Access web map identifer

There are two methods of adding data to the map component. The first method is described in the Add a map with layers tutorial. The other method is to author a web map using either the Viewer or, if applicable, Portal for ArcGIS. Once authored, the web map can then be shared as a resource and accessed via its unique item ID.

Adding data to your map


This tutorial assumes that you are familiar with creating web maps. If you are not, see the Create a web map tutorial.

After creating the web map, copy the web map ID to use within this tutorial. To find the ID, view your web map in either or, if applicable, Portal for ArcGIS, and notice that the URL includes the unique map identifer. An example of this is displayed below.

Web map ID

Add the web map to the application

The WebMapUtilclass is used to create a map by reading item information from the web map based on a given ID. This class works with web maps from ArcGIS Online, and can also use Portal for ArcGIS by setting the arcgisSharingURL property. This tutorial uses a web map hosted from ArcGIS Online.

The following steps assume you have completed the steps necessary to create a new project and add the Flex API library as discussed in the Getting started topic.

  1. In Flash Builder, create a new project and make certain to add the Flex API library.
  2. In the Editor View add the following code. Also make certain to reference the esri namespace.
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx=""
        import mx.controls.Alert;
        protected function application_initializeHandler(event:FlexEvent):void
        protected function webMapUtil_createMapByIdCompleteHandler(event:WebMapEvent):void
         addElementAt(, 0);
       <esri:WebMapUtil id="webMapUtil"
    <s:Label top="10"
       text=" Web Map"/>
  3. Run the application

    Web map in Flex API web application

You should now have a web application displayed similarly to the screen capture above. Conceptually, this is how the code breaks down:

  • The initializeHandler is fired when the application initializes and the map is created using the provided web map ID, e.g. 4778fee6371d4e83a22786029f30c7e1.
  • Once the map is created and complete, the createMapByIdCompleteHandler is fired. This event calls the Spark container's addElement function passing in the map.

The ID is provided as an example, you can swap this out for one of your own.