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).
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.
- 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.
- 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
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.
Remember when writing code, it should always contain at least a namespace and ActionScript code and/or MXML tags.