ArcGIS API for JavaScript: Making a Map of the Schools in Eau Claire County

Introduction: 

In the previous lab we used ArcGIS Flex API to display a map with a basemap and interactive web maps. This was done using ArcGIS for Flex library and other miscellaneous steps. This lab was done to teach how to use the ArcGIS JavaScript API to embed GIS services into any website. The first component of the lab is to embed GIS services to display and interact with a web map, then to modify a web GIS application created by another person and apply it to a different study area. Then add features to the new study area and include additional map elements. By the end of the exercise the goal is to be familiar with the structure of an HTML file, embedding JavaScript into HTML, adding CSS style sheets, and being able to use JavaScript APT to create web applications. 

Methods: 

The first part of this lab was to create the basic web application that will be used to form the final product. The data and services for this lab were provided by the instructor and obtained from the cloud. The first step was opening and coding the initial portion of the web application in Notepad++. Some important portions of starting an ArcGIS JavaScript application is calling the proper style-sheets. This is done by referencing the CSS styles provided by ArcGIS.com inside the head of the HTML document. With a CSS style referenced in the header of the document, it will apply to the rest of the web application whenever a style is referenced within a portion of code.

After having esri’s CSS styles referenced, the JavaScript needed to be added into the application. To be loaded in it is necessary to call upon the scripting, this is done within a script tag while referencing arcgis.com.

The next step in creating the initial HTML file for the web application is adding in the Dojo modules. Dojo is an open source toolkit that can enable the writer to write efficient JavaScript code. The script added loads specific modules from the API, a basemap, zoom level and the map center.

After creating the initial map application the next part of the lab required to build a sample application that uses the ArcGIS API to display a web map from ArcGIS.com. To display the map there needed to be a createMap module that would do as it says for creating the application’s map. To reference the map for creation in the application the map ID needed to be added to the code. The ID would reference the proper map and display it within the application.

After completing the code the application was ready to run, however as it was displayed there was a key aspect of the map missing, its legend. Adding the missing component (legend) of the application was the goal of the second section of the lab. To add the legend to the application the HTML file had to be opened up once again. A legend can be added using a dojo from the ArcGIS API library

The requirements for adding a legend to the map were added, and tested for success.

Part 1 Final Code

The third, and final part of the lab was to develop a full-page web GIS application. This web application would have a map of all the schools in Eau Claire County. The application would have a mouse-over pop-up that would display the name of the school along with its address. It began with creating a new feature service that would display the locations and addresses of the Schools in Eau Claire County. The created feature class would be published to the UWEC ArcGIS Server Rest, where the published feature services from the UWEC Geography Department are located. The schools to find and locate were spread amongst the class for easy and efficient completion of locating 60 schools. Once all the schools had their addresses logged in a Microsoft Excel file, it was brought into ArcMap 10 and joined to the already located point feature class. This was done so the schools had a spatial location along with an address. Once the feature class was finished and checked for accuracy and published to the UWEC Geography online server.

With the schools feature class published to the cloud, the next step in creation of the web application was to create the application itself. It began with repositioning the basemap of the provided code to Eau Claire County. After reposition of the basemap, the code needed to be modified so that it calls the EC_School feature service that was published. Finally the pop-up was configured so it would display the desired attributes in the pop-up window. With those portions of the application completed it was time to go back into the HTML file and add in the proper reference URL so the application could pull up the published feature class of Eau Claire Schools. That required the URL of the feature class, with that gathered from the UWEC server it was simple enough just adding it into the code block.

With that code finished and added in, the new application map showed all the components that were initially required, but soon there was a realization that the application needed a scale bar. This scale bar was added using a dojo dijit.

Part 2 Final Code

Results:  
This is the first map from the lab. It was a helpful first step in ArcGIS API for JavaScript due to the editing of the code for changing the origin point on load, the features on the map, and the initial zoom level.

The second map produced a graduated symbol map of the income in each country in the world. This was the map that started without a legend so there was no way of interpreting the data accurately. I went in after the initial creation and added the legend.

The next part of the lab was the creation of the Eau Claire Schools feature class in ArcMap, then publishing it to the UWEC server. Here is an image of the schools in ArcMap with their attributes:

After publication of the feature service, the web application looks like this:

ArcGIS Flex API With Adobe Flash Builder

Introduction:

ArcGIS Flex API is very useful in creating a web map application, and with such a useful program it is important to learn to use the best way to create applications. To utilize the ArcGIS Flex API most effectively this lab will teach how to make use of Adobe Flash Builder. With Adobe Flash one can import the tools and maps available for use in ArcGIS Flex API and create the entire application with a block of computer programming code. In this lab there will be multiple maps made using Adobe Flash, the programming code will be written and run to create the maps.

Methods:

Creating a new Flex project within Adobe Flash Builder was the first step of the lab. The Flex project was created to include the Flex API library, this is done to have the program and application recognize esri’s JavaScript codes that enable the Flex project to run their scripts and produce the specified outcome. The next step, after adding the Flex API library, was to write the computer programming code that was provided by the professor. When the programming code was completed it was run in order to check for errors.

For part two of the lab the goal was to add a previously created Web Map from ArcGIS Online. To begin a new Flex project was created with the Flex API library included, after creation the programming code writing began. For this Flex project there was script code included that can call upon a previously made public map from ArcGIS Online that was outlined by our professor.

The second section of the lab was there to teach how to add and display the Web Map that I created in a previous lab. To do so it was necessary to open the previously created map in ArcGIS Online and copy and paste the ID from the URL. This ID is used as a reference for the script to call upon that specific map for displaying. Here is the code updated from the previous part of the lab.

In the last part of the lab we were instructed to customize a mouse-over application that was developed for South Carolina and apply it to Wisconsin. The code was provided for use from the professor once again and placed into another new Adobe Flex project. The code was copied from its Notepad++ folder into the new Flex project and edited to display a map of Wisconsin with the mouse-over pop-ups. It was important to take note of the changes that needed to be made to the original code, first the zoom to code block was changed from the spatial boundaries of South Carolina to Wisconsin. Next the data called upon was focused to Wisconsin from the previous state, and after that the map was made to load immediately to the state of Wisconsin.

Results:

There were a handful of maps created and adjusted in this lab, the first being the basic population density map created from the first Flex project.

This map was made with a tiled, usually raster, service, as a result there are no pop-ups or clickable information. But still, it is very interesting to see the final result of the population density across the globe.

Secondly there was a map made using an old ArcGIS Online map ID as a reference. This was easy once the code was working for the first step, we then replaced the original reference map ID with the map we created in an earlier lab.

Lastly, I made the Wisconsin map with the mouse-over widget added on. To do so each reference within the script to South Carolina had to be changed to Wisconsin. After one try I was able to catch all the issues and have the entire Flex project focus on the state of Wisconsin for the map.

To say that writing computer programming code is easy is a blatant understatement. Working with programming code is a very meticulous task, every piece of code has to be specific and perfectly written, or else you will get errors. At times I would get constant errors that I wouldn’t be seeing, and as a result I would need to start my entire code over again. But this helps the programmer recognize the importance of clean code, and once the code is complete, how satisfying it is to see the final product of the work put in.

ArcGIS Flex Viewer

Introduction: 

                With ArcGIS Online a familiar tool, complements to the previous lab, there was a new lab created and finished to further accommodate the user with the concept of Web GIS. The second lab consisted of an exercise to introduce an extensive platform for creating Web GIS applications, ArcGIS Flex Viewer. The main goal of the lab was to teach how to configure ArcGIS Flex Application Builder to create web applications, and to also help find a GIS service and use data for analytical services in creating that Web GIS application. The structure of Flex XML (extensible markup language) was also introduced for the creation and editing of configuration files within the ArcGIS Flex Application Builder. By the end of the lab the user should be familiar with, and able to customize ArcGIS for Flex Application Builder and also be able to configure custom widgets using programming code.

Methods:

                This lab began with creating a new application on ArcGIS Viewer for Flex to help the user understand how to add basemaps, operational layers, and how to configure pop-ups. When the application was created the first step was to add the basemap, the basemaps can be selected from ArcGIS Online, ArcGIS Server, or from the web. After selecting the streets basemap from ArcGIS online the operational layer was added to the application. It was obtained from one of the ArcGIS REST Servers which is an open web interface to host GIS services published on ArcGIS Server, they can be accessed by using the specific URL for each server type. We used services from Sample Server 1 (http://sampleserver1.arcgisonline.com/ArcGIS/rest/services) to access this server it was entered in the search bar under the ArcGIS Server tab in the Operational Layers window. The URL for Sample Server 1 was entered in the search bar and the Census Block Points feature layer was selected for addition to the application. When a feature layer is added to the application the user can edit its configuration, this was done to the Census Block Points layer so it would reveal a pop-up containing attribute data specific to the census block when clicked on. The attributes of POP2000 (population), HOUSEHOLDs, and HSE_UNITS (housing units) were chosen to be displayed within the pop-up on the map.

                After setting the pop-up configuration for the census block data, ArcGIS Flex Application Builder allows the user to set the map extent so when the map is opened in a browser it is set immediately to that resolution. When the map extent is set the user can then move to the design section of the application where a logo can be added and title, fonts, and colors can be changed. With the final design touches finished up the map application can be previewed and then saved for online use.

                The second section of the lab was directed at exploring the functionality of some of the widgets available for use on the application.  The exploration began with the Draw and Locator widgets from the predefined widgets menu bar within the ArcGIS Flex Application Builder window. The widget known as Draw gives the opportunity to draw various items on the map screen, such as lines, rectangles or various polygons. A handy aspect of the Draw widget is that once a figure is drawn, the widget can show the area or distance that figure covers, so a user could measure the length of a road segment. The Locator widget is rather similar to searching for addresses on Google Maps, as the user types in an address it responds with a number of addresses that match the search along with a matching score out of 100. This widget can give the user a very accurate estimate of where the address is that they searched for.

                The final part of the lab was to configure ArcGIS Flex Application Builder XML files for the creation of a new widget. Flex is built around MXML and ActionScript languages these languages give a computer programmer the ability to develop rich internet applications with select programs. They are mainly used in coalition to lay out the interface of applications and create application behaviors on the internet. This section of the lab demonstrated how to reference services through a Flex Application configuration file and how to add custom widgets to an application.

                The widget to be configured to work within ArcGIS Flex Application Builder was called ChartM, this widget would give the user the capability to draw a shape, using the basics of the draw tool, to select multiple items on the map application and return a chart of the selected items attributes. The widget need an XML file that would call upon its capabilities when activated within the map application, that XML file can be written using Notepad++. The XML code was provided by the Professor and re-typed into a new file created by the user, this file was then referenced to within the universal widget configuration file. Once written and implemented, the widget was available for use within ArcGIS Flex Application Builder.

                The final part of the lab was to add and configure a provided widget to a new map application. This widget was capable of showing thematic layers on a map. To add the widget into ArcGIS Flex Application Builder it needed to be imported through the settings tab. When the settings are shown the advanced settings were clicked and opened and then the ability to manage custom widgets is available. Within the Manage Custom Widgets window the user can add a new widget available for use within an application. Configuring the new Thematic widget is rather simple, the settings need to be available to edit, and once there the user can edit the classifications as they wish. This was done for the demographic dataset found through a provided ArcGIS Server.

Results: (Links to webmaps are unavailable for non-users until further notice)

                The first part of the lab resulted in a map of Eau Claire Block populations.

Figure 2-1. This screen shot shows the pop-up window with the dot map in Eau Claire, WI.

http://gistest/STUDENTS/GEOG455Fall13/womeldzh/Womeldorf_Eau_ClaireApp1/

                This map application was a good way to introduce the functionalities of ArcGIS Flex Application Builder. The steps in creating a map application make the opportunities for the final product close to unlimited.

In part two of the lab it was required to build a custom web mapping application. I built a web application showing the Atlantic Hurricanes of 2000.

Figure 2-2. Screen shot of the hurricane tracks in the Atlantic Ocean in 2000.

http://gistest/STUDENTS/GEOG455Fall13/womeldzh/Womeldorf_Explore/

                This data was obtained from http://sampleserver6.arcgisonline.com/ArcGIS/rest/services it was relatively easy to work with, the only necessary steps were to edit the pop-up windows and give it two widgets that were not previously used. I decide to use the legend widget so a viewer can see what the items are that they are looking at while viewing the map application.

For part three of the lab we added in the provided widget to the Eau Claire Block Populations map. 

Figure 2-3. Notice the bar chart on the left side showing data from the selection.

                The XML coding was difficult to grasp at first, but our professor provided us with a preview of what the code should look like, so was simpler to find the errors I made and correct them to have a working widget. The final product gave a good bar graph of the selected block groups, within the XML file the user can also configure the result of the selection to return a pie chart.

                The last part of the lab consisted of adding in the Thematic widget to ArcGIS Flex Application Builder and then creating a demographic map to display the population in western Wisconsin counties. 

Figure 2-4. Screenshot of the Thematic widget in action, see the different classification schemes available in the dialog box.

http://gistest/STUDENTS/GEOG455Fall13/womeldzh/Womeldorf_Thematic1/

                The widget configuration was a bit painstaking, however the final product was very fascinating to interact with. Within the Thematic widget settings it was necessary to change the <classificationlayerName>, <classificationlayerID>, <classificationFieldTypeDesc>,<classificationFieldType> all to the proper values and descriptions for the widget to work properly. They started as details for the states when we were assigned to use it for counties. Our professor gave us the required changes to make and once done the widget worked properly to our requests.

Sources:

ArcGIS Server Online

Provided and Processed by Dr. C. Wilson. 2012.