Skip To Content

Create a map

In this topic

Version 3.7

Map overview

There are a couple of different ways to work with maps in the Flex API. The first is to add various layers (services) to the map. These layers can originate from ArcGIS for Server, Bing Maps, graphics layers, etc. The other option is to work with web maps shared from a portal such as ArcGIS.com or one hosted on-premise. Web maps provide similar functionality as they can contain various layer types, tasks, and data from an external source, (e.g. .csv files and .gpx files to name a couple). The main difference is that all of this is bundled up within the web map itself. We will discuss these two options in a bit more detail below.

Create a map and set its extent and spatial reference

The map component acts as a container onto which one or more map layers are drawn. Establishing the map is usually a preliminary step in building a functional application. A developer can write code to create a map and then add basemap and operational layers to it. For additional information regarding the various basemap and operational layer types, please refer to the 'Types of layers' section within this guide.

Extent

After the map is set, you can also apply an extent and spatial reference to it. The extent of all the layers in a map service is what is used to determine the map extent provided by this service. This is important when determining the initial extent displayed in a web application. By default, the initial extent is determined by the first layer in the map's layer collection, generally referred to as the basemap. If you do not wish to use this initial default extent, you can modify it by setting it using Extent.

Set the map and extent

...
<fx:Declarations>
   <esri:Extent id="initialExtent"
    xmin="-17731" ymin="6710077" xmax="-12495" ymax="6712279">
   </esri:Extent>
</fx:Declarations>

<esri:Map extent="{initialExtent}">
</esri:Map>

Note:

More information regarding working with extent can be found at Using Extent.

Spatial reference

Every map service has a spatial reference. This spatial reference can be either set as unprojected (Geographic) or projected (e.g. UTM, Web Mercator, etc.). There are many coordinate systems used throughout the world today, depending on which part of the earth being mapped. A very common one used throughout web mapping applications is Web Mercator (Auxillary Sphere). This coordinate system is used by Bing Maps, Google Maps, and Esri's ArcGIS Online. A listing of of WKIDs and their corresponding coordinate system is provided at Coordinate system IDs. Similar to how the extent gets set by the first layer in the map's layer collection, the spatial reference of the map is set by the first layer in the layer collection. Alternatively, you could change this by setting the spatial reference using SpatialReference.

Set the map, its extent and spatial reference, and add a tiled layer.

...
<fx:Declarations>
   <esri:Extent id="initialExtent"
    xmin="-17731" ymin="6710077" xmax="-12495" ymax="6712279">
      <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
</fx:Declarations>

<esri:Map extent="{initialExtent}">
    <esri:ArcGISTiledMapServiceLayer 
     url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
</esri:Map>
...

Note:

Tiled layers such as ArcGISTiledMapServiceLayers, must support the spatial reference of the map. They cannot be reprojected to another spatial reference like dynamic map service layers, ArcGISDynamicMapServiceLayers.

This snippet of code would display a tiled layer in your map with its initial extent centered on London as seen below.

Map displaying London extent

Level and center of map

Similar to setting the extent of the map, you can also zoom to a specified level and center on a given lat/lon point. The level refers to the level of detail (LOD) ID for the map. This is only valid if the map has LODs. For example, the cached World Street map service, http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer, has 20 LODs. You can reference this by browsing to its service directory and taking note of the Tile Info provided. The following code snippet references this service and zooms to level 15. It also centers the map on the provided point specified via its lat/lon coordinates.

<esri:Map level="15" wrapAround180="true">
   <esri:center>
      <esri:WebMercatorMapPoint lon="-0.13" lat="51.51"/>
   </esri:center>
   <esri:ArcGISTiledMapServiceLayer 
    url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
</esri:Map>

The code snippet above would display similar as the snippet using Extent. Each of these displaying a map centered on London.

Work with a web map

An ArcGIS web map is a basemap and a related set of layers that users can interact with to perform a meaningful task. These maps are available to a wide audience and include multiscale basemaps, operational layers targeted to a specific audience, and information pop-up windows that let users drill into specific features they are interested in. They are the basis of web mapping applications and can be viewed on a wide variety of clients including web applications created using the Flex API.

The Flex API makes it easy to add web maps into your web application. The web maps are referenced via their item ID value. The ID is what you use to access and create your web map within your Flex application. In order to determine the item ID of the web map, you will want to view it using your portal's viewer, e.g. ArcGIS.com Viewer. After the web map loads, take note of the browser's URL address. The last portion of the address is denoted by ...webmap=<unique string value> as seen below.

In the screen capture above, the URL address for the web map is . The item ID is the web map value, e.g. 2f1d4a31078d460aa4a7aa46f5b882e5.

Snippet showing how to add a web map to a Flex API application

protected function application_initializeHandler(event:FlexEvent):void
{
   webMapUtil.createMapById("2f1d4a31078d460aa4a7aa46f5b882e5");
}

Additional references

Learn more about the web map format

Learn more about working with web maps

Tutorial: Adding a map with layers

Tutorial: Add a web map to the application