Lab 4: ArcGIS Flex API

Goal and Background
The purpose of this lab was is to familiarize us with ArcGIS Flex API with the goal of developing a Web GIS application. To build the application, Adobe Flash Builder was used. Although Flash Builder 4.6 works with ArcGIS Flex API, the version 4.7 was used in this lab.

**Data for this lab was served to us in a compressed format by Dr. C. Wilson and was downloaded online.

Methods & Results

After downloading the data for this lab, the first thing that needed to be done was to create a new project in Flash Builder. Flash builder is a program within the Adobe CS6 software package. Next, we created a new Flex project and adjusted the version of Flex SDK to version Flex 4.6 which is the minimum requirement for ArcGIS Flex API. After setting the output folder to ‘bin-debug’, we were ready to import the Flex API library (agslib-3.4-2013-06-30.swc) that would be referenced when coding within Flex API. After connecting to our folders on the M-drive and then navigating through the Flex Build Path tutorial, we were able to add the library.

With our project created and saved with the reference API library, we were able to begin coding. First, the map UI component created in the first section was brought in by adding the ESRI namespace. The next step was to add a map component to our Flex application’s UI to serve as blank slate to allow for map content to be added later. The specific layers added were the ArcGISTiledMapServiceLayer that functioned as a baselayer, and the ArcGISDynamicMapServiceLayer that would show world population density. The specific code entered can be seen in Fig. 1.

Fig. 1: Code entered to add the map component to the application's UI

After running the code in Flash Builder to check for any errors present, the application opened in the web browser and displayed the map below. Although attribute data for the map was included, pop-ups did not display when you clicked on the map due to the fact that they were not configured within the code to show.

Map 1: Map created after running our application with the new code added.

After closing out of the previous project, we created another within Flash Builder. The same steps outlined above were followed to add the Flex API library. Next, a map hosted in ArcGIS Online was added to the project by referencing its identification number using the ActionScript block of code shown below in Fig. 2. Lastly, code needed to stylize and add a title to the map was added. The final code block for this section is shown below in Fig. 3. The map below is the application that was created from that code. Interactive pop-ups show on this map due to the fact that they were configured within the code we used for this application.

Fig. 2: Block of ActionScript code added to identify the ArcGIS Online map.
 

Fig. 3: Final block of code that includes the stylistic elements needed to add style and a title to the map. 

The final section of this lab taught us how to add our own map to display within a Flex application. We used the Wisconsin Web Map we created in Lab 2 to replace the Map ID to display our own map. Next, we customized an event handler graphic listener to create a mouse over function to be applied to our application. The mouse over code provided to us would be used, but needed to be modified to display information on Wisconsin counties instead of the counties in South Carolina which it was originally configured for. By editing the code in Notepad++ we were able to modify it to fit the extent of our application. Edited within the code were the functions of zoom, extent, map id, and definition expression to switch all mouse over controls from South Carolina to Wisconsin. Shown Below in Fig. 4 is a snapshot of what is displayed when you hold the mouse icon over Dane County.

Fig. 4: Snapshot of the mouse over function added to the application showing attribute data on Dane County, WI.

Sources
1. Lab4data.zip (Provided by Dr. C. Wilson)

2. Wilson. C. (2013). Lab 4:ArcGIS Flex API. GEOG 455: Web GIS, UW- Eau Claire.