Lab 4: ArcGIS for FLEX API

Introduction:

The lab assignment for this week will use the Adobe Flash (née Flex) Builder which uses Apache (formerly Adobe) Flex to build web applications in this IDE.  Adobe Flash Builder is an integrated development environment (IDE), which is a rich development environment that can be used to develop programs. IDE's build and edit source code for applications and essentially serve as programs which make development easier and more efficient.  Flash Builder, like other IDE's, contains debuggers, compilers, source code editors, syntax highlighting and other useful tools which make programming much much easier.  Flash Builder (fig 1) is an extremely common way to build applications which use ActionScript, which is Adobe's object-oriented language from which Flash is built.  We will be using XML to serve existing data.
Thus, this week’s work will comprise a good deal of coding.  Upon completion, I will have learned how to create Flex projects in Flash Builder, set an SWC library, and write then run code that uses data served by ESRI to create interactive web maps utilizing the event handler graphic listener for additional functionality.

fig 1: the original fb: Flex Builder. Now Flash Builder.

Methods:

This part of the lab introduces the Flash Builder IDE by teaching how to create projects, set libraries, write, save and run code.  The final product will be XML code which opens a tiled map service.

First, a project is created that will house all of the work relating to this effort.  In the FB 4.7, this is accomplished through a dialogue opened from FileàNewàFlex Project.  A project name and file location is set, then the app type (Adobe Flash or AIR, i.e. web or desktop), and finally SDK version.  SDK’s are Software Development Kits: sets of tools for software development such as APIs and debuggers that in this case are presented in the format of the IDE.  The SDK required for the most recent ArcGIS Flex API is Flex 4, this is the default in Flash Builder.

The open project dialogue also guides users through server type, compiler filepath, library component settings, and web output URL which were left at their default settings before initializing the project.

Next, the API library was set in the properties menu accessed by right-clicking the project in the “Package Explorer” navigation bar.  In order for the code that will be written to work (as I discovered the difficult way), the project API needs to know what to do with the specialized code being implemented.  So, the library needed to be set in the project properties. This was the first goal of the lab.

fig 2: Completed Wisconsin Transportation Web Map

             The second goal is to import a previously designed web map, hosted on ArcGIS Online, to the script and display it. This was done by using the .createMapById method on the webMapUtil class, imported from the API, along with the map ID provided by ArcGIS Online.

fig 3:  the STATE_NAME variable above was originally South Carolina, and had to be set to Wisconsin for the window to work properly

Third, and most interestingly, we were tasked with applying an existing mouse-over action to the Wisconsin webmap.  This action was handled by a graphic listener built by ESRI and provided by Professor Wilson.  The only editing that had to be done for this markup to work was some changes of references to "South Carolina" to "Wisconsin" where the extent of the viewer is defined (see fig 2).

Conclusions:
          Ultimately, this lab was pretty short and straightforward. It familiarized the students with the use of Flex builder for web mapping, and allowed us to play around with a few of its capabilities.

Lab 3: ArcGIS Flex Viewer

Introduction:

This week’s work is designed to provide an overview of and introduction to the ArcGIS Application Builder for Adobe(now Apache) Flex.  Flex is a software development kit for rich web applications; it creates extensively cross-platform services (including Android and iOS) and since donation to the Apache Foundation it is open-source.  The ArcGIS App Builder uses Flex for an application programming interface that facilitates a variety of web mapping services.  By the time the lab is complete, I will have developed a web application with the Flex App Builder and manipulated an application and some widgets with XML config files. 

fig 1: ESRI does many things, one of which is maintain the ArcGIS Viewer for FLEX, which will be used in this project. 

Methods:

Parts 1 and 2: “ArcGIS Flex Application Builder Interface”

This half of the lab consists of working in the ArcGIS for Flex API.  First, we are guided through production of a web application and then we are set loose to create our own, including pop-ups and widgets.

             Sections 1 and 2: Adding basemaps, operational layers, and configuring pop-ups

After completing laying the groundwork for this project by connecting the computer to the department’s virtual server, the first task is to set up the API’s web server base folder, which in this instance will not coincidentally be the department server.  After accomplishing this task, the API was used to develop two mapping applications.

The order for building the application is not necessary, but the first step taken in this assignment was to assign basemaps and operational layers.  The operational layers that were used were found in the ArcGIS Online “sample” servers, although the data could have been hosted anywhere in the web; after adding operational layers, pop-ups were configured for readability and functionality (in the “configure layer” window , see fig. 2).  Next the map extent was set with the viewer provided in the interface.

figue 2: this edit button opens the "configure layer" window, in which pop-ups can be modified.

In the “Widget” tab of the viewer, “Draw”, “Location”, “Print”, “Query”, and “Search” widgets were added across the two applications developed.  Some of these widgets will be configured later in the exercise.  The “Layout” tab was left with all of its defaults for the time being, so long as they produce an aesthetically pleasing interface.  In the “Design” tab, a title and subtitle were finally applied to the maps and some of the colors for the app were modified because let’s face it: cartographers like to play with colors.

The widgets were finally modified in Section 2 of the lab by navigating the API’s “Widgets” tab in more detail.  In the “locator” widget, which finds addresses or lat/long coordinates from a click, the match score was altered and then returned to the default settings, in order to explore the potential variance in results given different match scores.  The “Draw” widget was then modified to show end users distances along features that they may form on the map in the application.  For practice, the icon for “Draw” was also modified.

 

Part 3: “Configuring ArcGIS Flex Application Builder XML Config Files”

This, the final part of the lab, configures some files of the App Builder and customizes widgets using magic eXtensible markup language (MXML) config files.  This will include customizing a widgets and testing the work to ensure end-user functionality.

 

Section 1: Adding and configuring a custom widget through the config XML file

In this section, the “Chart” widget will be given a new icon and the types of charts provided will be manipulated through the XML configurations.  First, the widget was built in notepad++ using MXML (fig 3).  It is designed to use the draw tool to select data displayed in a map viewer, and then parse that data in a chart or graph to the end user in the map viewer itself. Changing the icon was simple: the .png image file was provided in the department server as when the app’s config files were modified to add the custom widget, the image was linked in the configuration file.

figure 3: chart widget code

 

Section2: Adding and configuring a custom widget directly in the application builder

This week’s work is designed to provide an overview of and introduction to the ArcGIS Application Builder for Adobe (now Apache) Flex.  Flex is a software development kit for rich web applications; it creates extensively cross-platform services (including Android and iOS) and since donation to the Apache Foundation is open-source.  By the time the lab is complete, I will have developed a web application with the Flex App Builder and manipulated an application and some widgets with XML config files.

           

Results:
           

figure 4: Part 1, Building Apps in the API

           Fig 4 is the end product of the first section of the lab.  The basemap is a topographic service provided by ESRI and the operational layers (also ESRI) are for Kansas petroleum development.  Open are a pop-up and the draw widget.  Notice the artful use of Trajan font, my personal favorite in serif.



figure 5: Customizing a Widget

           Fig 5 displays the use of the new widget: several blocks were selected with the draw tool and then used to create a chart, in this case showing population and parced by age.

figure 6: Customizing the Custom Widget

          Figure 6  shows how a bar graph might appear in place of the pie chart displayed in fig 5. A line and a column chart widget were also used.  It is more functional to use the GUI than the XML config files to decide on what an end user wants, however.

Sources:

ArcGIS Sample servers 1,2, and 6 (http://sampleserver1.arcgisonline.com/ArcGIS/rest/services) 2013.

Processed by Dr. C. Wilson. 2012.

Titles, fig 3 and organisation were pulled directly from the lab assignment posted by the miraculous Prof. Wilson.

Lab 2: Geospatial Web Services

Introduction:

Integral to understanding Web GIS is the role of a web service in distributing data.  This lab was designed to familiarize the students with geospatial web servers by guiding us through the creation and hosting of services with ArcGIS Online and ArcGIS server.  First, ArcGIS online will be used to host feature services and create web-based maps in the cloud.  Then, the ArcGIS server hosted by the UW-EC ClaireDepartment of Geography and Anthropology will be used to publish a tiled map service through the University.  By the completion of these exercizes, I will demonstrate proficiency (or at least competency) in distributing GIS across web platforms.

Methods:
       Part 1: “Publishing Feature Hosted Services through ArcGIS Online”
            Having publisher rights to their website provided by the university for this course, ArcGIS Online is used to publish a large package of feature classes, make a map of them, then publish feature services using a comma delimited value file (.csv) and finally again by using ArcMap.


   Sections 1 and 2: Publishing a feature hosted service using a Shapefile, and creating a web-based Map
            As the data being published in this section of the lab is larger than 5 GB, the first step in this process is to compress the data.  ArcGIS Online will not accept files larger than this and it is best practice to compress large files before transfer in any case.  After compressing four features (representing Wisconsin counties, cities, interstates and highways) in a .zip file, the data was uploaded to ArcGIS Online.  Uploading data to AGO is a simple process: one merely signs into their account (with publishers permissions) and under “My Content” click “Add Item”.  After selection of the compressed files, tags were added to the content for search optimization (fig 1) along with a description and summary of what was uploaded.

figure 1: adding tags to the transportation features.

            After the data was successfully uploaded, it was used to create a web-based map.  The data was added to a new map document on ArcGIS Online, which already had a topographic basemap layer present.  Symbology and Pop-Ups were toyed with here, in order to make a user-friendly and cartographically pleasing layout.  Finally, the product was shared with the class.

  Section 3: Publishing a feature hosted service using a CSV file
            The procedure for this section of the exercise is similar to the previous one, in fact it is identical after the data is uploaded.  The major difference here is that instead of uploading shapefiles, data from a Microsoft Excel file is being uploaded (Wisconsin Fire Occurrence 2004).  In order to accomplish this, first the workbook (.xls) is converted into a comma delinieated file format (.csv); in Excel this is an easy task accomplished by “Saving As” and then where naming a file selecting “.csv” in the dropdown menu where “.xlsx” is selected by default.
            Having completed the task of converting the desired table to .csv, the data is uploaded to the cloud in the same fashion as the earlier data (sign in, “My Content” à “Add Item”).  A description, a summary, and tags were added to the metadata for this content as before.  Once published, the pop-up attributes were edited (fig 2) because they showed superfluous data to the user: feature ID, longitude and latitude were removed from the pop-up data leaving potential end users with only the date of the fire as information accessible by click.

figure 2: the pop-up editor

  Section 4: Publishing a feature hosted service using an ArcMap document
            This task is slightly different from the others in that this data will be distributed to ArcGIS Online directly from ArcMap, fully employing ESRI integration to easily serve local data worldwide.  This process will host all vector data present in a map document.
            Step one is to open the features to be uploaded in ArcMap: our features are Wisconsin Rivers_and_Streams as well as WI Lakes.  The map then was saved locally.  Next ArcMap can be used to sign in to ArcGIS Online: “File” à “Sign In”.  Then, to place the data on the web, navigate “File” à “Share As” à “Service”.  Following the dialogue, my data was hosted as a service from my (re: UWEC Geography and Anthropology) hosted services.  Deletion permissions were disallowed in the “Capabilities” tab, and a description, summary, credit, and access constraints were added to the service in “Item Description”.  Of course, tags were also added here. The map was next shared with the class with the “Sharing” tab.  Lastly, the analyze tab was run to check the data for any potential errors in online publishing.  It may be a good idea to preview the feature service here as well before publishing.

Not all symbology accessible in ArcMap is available online, as many browsers do not support ESRI’s more advanced cartography, therefore it is important to assess the data after uploading it by viewing it using AGO’s mapping services.  Most other errors should be found by running the analyze tool before publishing.  The Wisconsin Water service was at last published after modifing the data for cartography.

            Part 2: “Publishing a Tiled Map Service using ArcGIS Server”
            In this part of the lab, data will be published using the Department’s own ArcGIS Server rather than ArcGIS Online.  Each student has their own personal database on the server, and will be uploading a tiled landuse/landcover raster of the Lower Chippewa Valley region.  Then we shall attempt to access and manipulate the data using arcgis.com

  Section 1: Publishing a tiled map service using ArcGIS Server
            First, the local workspace must be connected to the database which houses the data, which in this case for students was located on a University SQL server.  After practicing with our local distributed GIS by connecting and authenticating ourselves, the .tif landuse/landcover file was loaded into ArcMap.  This file is a classified Landsat image of the area provided by the professor, and some of the classes needed trimming from the symbology of the map in order to clean the legend.  Then the data was shared: “File” à “Share As” à “Service”.  Following the dialogue, this service was shared using ArcGIS server as a GIS service.
            In order to improve performance in serving large datasets online, cached tiling is often used as a way of accelerating mapping services by distributing processor workload from a server into a client’s browser cache.  Uploading data with ArcGIS Server provides for this capability in its “Caching” tab of the service editor.  For our purposes, Tile Format was switched to “mixed” from “PNG” and the default tiling scheme and levels were left.  Finally, the data is analyzed for errors much as before, and then published.
 
  Section 2: Consuming the map service in a web application
            Finally, the served landuse/landcover data was accessed on the University’s server and after navigating to it there it can be viewed directly in AGO, overlain by default on a topographic basemap.

Results:
            These are the final mapped results taken from the lab.


figure 3: Part 1 Section 2

 

This map (fig. 3) is the final representation of the data from parts 1 and 2 of the lab.  It displays Wisconsin Interstates, major Highways, cities and counties over a topographic base.  The counties were made transparent to convey more information to the viewer.



figure 4: Part 1 Section 3

 

The map above (fig 4) displays locations of fires in Wisconsin during 2004.  A pop-up is displayed, notice that no superfluous locational or database object data is displayed; only information that is useful to the audience is included in the pop-up.



figure 6: Part 1 Section 4

 

This map (fig 5) displays wisconsin waterways.  The viewer is centered on the majestic Green Bay.

The final map (fig 6) is landuse-landcover data, viewed here in ArcGID Online but hosted by the University of Wisconsin - Eau Claire Department of Geography and Anthropology.


Sources:

Part 1, Section 1

Environmental Science Research Institute, ArcMap USA geodatabase.

Part 1, Section 3

Wisconsin Department of Natural Resources.

Part 1, Section 4

Lakes- Created by Dr. C. Wilson, 2013.
Rivers and streams- United States Geological Surveys (USGS), 2008.

Part 2, Section 1

Earth Resources Observation and Science Center (EROS). 2011.
Processed by Dr. C. Wilson. 2012.

Figures 1 and 2 were pulled directly from the lab assignment posted by Prof. Wilson.