Add a web mapArcGIS API for Flex | ArcGIS for Developers

https://developers.arcgis.com/flex/guide/tutorial-add-a-web-map-to-the-application.htm

Version 3.7

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 ArcGIS.com Help section.

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 ArcGIS.com 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.

1 of 6

10/06/2015 0:26

Add a web mapArcGIS API for Flex | ArcGIS for Developers

https://developers.arcgis.com/flex/guide/tutorial-add-a-web-map-to-the-application.htm

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 ArcGIS.com or, if applicable, Portal for ArcGIS, and notice that the URL includes the unique map
identifer. An example of this is displayed below.

2 of 6

10/06/2015 0:26

Add a web mapArcGIS API for Flex | ArcGIS for Developers

https://developers.arcgis.com/flex/guide/tutorial-add-a-web-map-to-the-application.htm

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.
In Flash Builder, create a new project and make certain to add the Flex API library.
In the Editor View add the following code. Also make certain to reference the esri namespace.
<?xmlversion="1.0"encoding="utf8"?>
<s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags"
initialize="application_initializeHandler(event)">

<fx:Script>
<![CDATA[

3 of 6

10/06/2015 0:26

Add a web mapArcGIS API for Flex | ArcGIS for Developers

https://developers.arcgis.com/flex/guide/tutorial-add-a-web-map-to-the-application.htm

importcom.esri.ags.events.WebMapEvent;
importmx.controls.Alert;
importmx.events.FlexEvent;

protectedfunctionapplication_initializeHandler(event:FlexEvent):void
{
webMapUtil.createMapById("4778fee6371d4e83a22786029f30c7e1");
}

protectedfunctionwebMapUtil_createMapByIdCompleteHandler(event:WebMapEvent):void
{
addElementAt(event.map,0);
}
]]>
</fx:Script>

<fx:Declarations>
<esri:WebMapUtilid="webMapUtil"
createMapByIdComplete="webMapUtil_createMapByIdCompleteHandler(event)"
fault="Alert.show(event.fault.faultString);"/>
</fx:Declarations>

<s:Labeltop="10"
fontSize="24"
horizontalCenter="0"
text="ArcGIS com Web Map"/>

Run the application

4 of 6

10/06/2015 0:26

Add a web mapArcGIS API for Flex | ArcGIS for Developers

https://developers.arcgis.com/flex/guide/tutorial-add-a-web-map-to-the-application.htm

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.

5 of 6

10/06/2015 0:26

Add a web mapArcGIS API for Flex | ArcGIS for Developers

6 of 6

https://developers.arcgis.com/flex/guide/tutorial-add-a-web-map-to-the-application.htm

10/06/2015 0:26