ArcGIS API for JavaScript allows for the creation of high-performing web mapping applications that includes information such as terrain, basemaps, imagery, and features. The API makes it simple for end users to access the full range of capabilities available in the ArcGIS platform. The apps can be used on both mobile devices or desktops.
The goal of this lab is for students to how to use the ArcGIS JavaScript API to incorporate GIS services into a website. At the end of the lab, students will be more familiar with writing JavaScript codes in developing applications, especially using the JavaScript API for creating Web GIS applications.
In this lab, students will complete the following:
- Create a basic Web GIS mapping app
- Build a Web GIS app with operational layer functionality
- Fine tune an application popup window and add a scale bar
Part 1: Create a Basic Web GIS Mapping App
In this part, students will:
> Set up a basic HTML and JavaScript document
> Reference the ArcGIS API for JavaScript in the HTML document
> Use a streets basemap from ArcGIS Online
> Specify the map scale and center point
> Display the map full screen
Students must create a Lab5 folder in their personal folders in the development server where all work will be saved. Using Notepad++, both an HTML document and a JavaScript document will be created.
In the HTML document, an external CSS style sheet (claro) and ESRI's style sheet for web maps is referenced. The claro theme is a style sheet for the display of web GIS applications while ESRI's style sheet is used to style feature on a web map. The latest 2D version of ArcGIS API for JavaScript is also referenced.
After the code is entered into the HTML document, the JavaScript code will now be written which will implement the Web GIS app. Connection to the Dojo library must be made first to import and access modules for the map. Next, the center coordinate, zoom level, and streets basemap map type is setup for a new map object.
Once the JavaScript document is created and saved, it must be referenced in the HTML document. The code for both documents can be viewed below (Figures 1 and 2).
 |
| Figure 1: Part 1 HTML code |
 |
| Figure 2: Part 1 JavaScript code |
Part 2: Build a Web GIS App with Operational Layer Functionality
Section 1: Develop JavaScript Methods to Display Tree Species and Attributes
Students will create an app that displays tree species and their attributes for the city of San Francisco. To create this app, an HTML document will host the app, JavaScript methods will be developed to display the feature service attributes, and an internal CSS and JavaScript file will be used.
Using Notepad++, an HTML document is created to define the web page of the app. An external stylesheet from ArcGIS and the InfoWindow.css file (provided to students) are both linked. After this, enter the code to link the CSS styling sheets. Next, the styling properties for the map are coded.
After the HTML document, a new Notepad++ document is used to write the JavaScript code. Enter the 'require' command to access modules for dojo DOMs, dojo string, myModules, and some ESRI utilities. A new Map object is created with various properties, and a new InfoTemplate is coded to display the popup content of a feature in the app. Declare a 'featureLayer' variable that will reference a feature service of streets in San Francisco.
After the JavaScript file is written and saved, it must be referenced in the HTML document that was just created. The ArcGIS API for JavaScript must also be referenced. The code for both of these documents can be viewed below (Figures 3 and 4).
 |
| Figure 3: Part 2 Section 1 HTML code |
 |
| Figure 4: Part 2 Section 1 JavaScript code |
Section 2: Feature Service Creation and Development of a Web App for Eau Claire Schools
A feature service must be created from schools in Eau Claire and published to the UWEC ArcGIS Server REST. Also, add a predefined ESRI basemap and configure a pop up window for the service.
Copies must be made and renamed of the HTML and JavaScript files created in the previous section. A feature class containing the name, address, and elevation of the Eau Claire schools is created in ArcMap and saved to the UWEC enterprise geodatabase. Then it can be published to the server.
The copied and renamed JS file can now be edited with the following tasks:
> Reposition the basemap to Eau Claire County using correct coordinates
> Replace streets trees service with the EC_Schools feature service that was just published
> Configure the popup so that the desired attributes in the popup info window is displayed when each school is clicked in the app
The JavaScript code for this section can be viewed below (Figure 5).
 |
| Figure 5: Part 2 Section 2 JavaScript code |
Section 3: Fine Tune an Application Popup Window and Include a Scale Bar
A scale bar will be added to the map application and the popup window will be widened so that the text of each attribute is displayed on one line.
In the JavaScript file that was just created, the required dojo dijit module for a scalebar must be added. The function definition parameter that will call the scale bar must be included as well. A new Scalebar object with property values for 'map' and 'scalebarUnit' is added as well.
To change the size of the info window, the very last block of code is changed from 180, 75 to 250, 75.
Part 3: Develop a Simple Routing Application
A simple app is developed that finds routes between two or more points. The app will have the following features:
> Click on the map to add stops to the route
> When two stops are added, a route will be calculated
> Adding subsequent stops on the map will extend the route
Using Notepad++, an HTML document is created and references are made to 'ESRI' and 'claro' external style sheets. The ArcGIS API for JavaScript is also referenced for access.
Using a new Notepad++ document, a JavaScript file is also written and connected to the Dojo library. A Dojo command is entered to access the modules for map, graphic, route task, and route parameters. Several other modules are also accessed. After this, JavaScript statements are written to declare variables, develop functions, and create objects. A new Map object is created with Eau Claire coordinates.
After all of the JavaScript code is written, the file can be saved and referenced in the HTML document that was just created. The code for both of these documents can be viewed below (Figures 6 and 7).
 |
| Figure 6: Part 3 HTML code |
 |
| Figure 7: Part 3 JavaScript code |
Results
Part 1: Basic Web GIS Mapping App
The resulting app from part 1 can be viewed below (Figure 8). It is a simple map that features a streets basemap and allows user to pan and zoom in and out.
 |
| Figure 8: Result from Part 1 |
Part 2: Web GIS App with Operational Layer Functionality
Section 1: Tree Species and Attributes in San Francisco
The resulting app from part 2 section 1 can be viewed below (Figure 9). The map features a streets basemap and displays trees located in San Francisco. When the map is initially launched, it is located directly over the city. Users can then pan and zoom in and out and click on any tree. The tree address and species is then displayed in a popup info window.
 |
| Figure 9: Result from Part 2 Section 1 |
Sections 2 & 3: Web App for Eau Claire Schools with Scale Bar
The result of part 2 sections 2 and 3 can be viewed below (Figure 10). The app features a streets basemap and displays school locations in Eau Claire. The map is located over Eau Claire when it is initially launched, and end users can pan and zoom and out of the map. When a school is clicked on, a popup info window is displayed that features the school name, address, and elevation. A dynamic scale bar is also featured in the lower left corner that has adjustable units based on the scale of the map.
 |
| Figure 10: Result from Part 2 Sections 2 and 3 |
Part 3: Simple Routing App
The result from part 3 can be viewed below (Figure 11). The map features a streets basemap that is located directly over Eau Claire when launched. End users can click on multiple destinations where routes are then automatically displayed between each selected location. Users can also zoom in and out and pan around the map.
 |
| Figure 11: Result from Part 3 |
Sources
ArcGIS API for JavaScript information:
ArcGIS API for JavaScript. (n.d.). Retrieved November 08, 2017, from https://developers.arcgis.com/javascript/3/
EC_Schools feature class:
MapCruzin [Advertisement]. (2012, October 1). Retrieved November 8, 2017, from http://www.mapcruzin.com/geographic-names-shapefiles/#School
Custom shapefiles and GIS projects, free GIS software, shapefiles, maps, and tutorials
EC_Schools_Address:
G. (2013). [Eau Claire School Addresses]. Unpublished raw data.Table of Eau Claire, WI school addresses
Widget_infowindow files:
ArcGIS API for JavaScript 3.22. (n.d.). Retrieved November 08, 2017, from https://developers.arcgis.com/javascript/3/jssamples/
No comments:
Post a Comment