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: