Lab 5: ArcGIS API for JavaScript 1
Introduction:
In this lab, four web mapping applications of differing complexity were made with the ArcGIS JavaScript API along with websites as homes for those maps. Each website built on the last website's complexity and performed a different function. The first website (Part 1) displayed a simple basemap. The second website (Part 2 Section 1) displayed a map with both a basemap and an operational point vector layer showing trees with data on them popping up in window with a click on an individual tree. The third map (Part 2 Section 2) displayed school data using a service that was locally created and stored. The final fourth map (Part 3) displayed a road map and routing functionality was built into this map.
Methods:
Part 1:
Part 1 was extremely simple. The HTML was written first. Because the styling was so simple, styling was included in the html document instead of a separate CSS document. Styling for the maps to be created with the JavaScript document were imported: Claro (a theme for the map) and ESRI (styling of map features) stylesheets. Next the JavaScript file that was to be written was referenced, and the JavaScript (JS from here on) API for ArcGIS version 3.22 was imported. Finally, a div with an id to be referenced in the JS file was included in the body for the inclusion of the map.
The JS file created for this website imported both the esri/map and the dojo/domReady modules. It then created a map and defined the center point, the zoom level, and the basemap type.
Part 2:
Section 1:
As always an html document was written first. This document used a meta viewport tag in order to increase compatibility on iOS devices. It next referenced the ESRI stylesheet for the display of map features. The InfoWindow.css file was also referenced for the display of the info windows that would be coded in for the display of attribute data on the trees layer. Next basic style was included in the html document as the styling of the document was again very simple. Next, the API JS file was referenced along with the JS written for the site, and a specifically identified div was included in the body for the inclusion of the map. This html document also included a configuration variable for the info window.
The JS file for the trees shows that more modules than Part 1 are imported, which allow functions for creating the info window, displaying a feature layer, and other areas of functionality. An InfoWindow object is created, a Map object is created, then an InfoTemplate is created for the display of the popup content, then the FeatureLayer object is created referencing the tree vector point feature service, and finally the infowindow is resized to our needs.
Section 2:
In Section 2 of Part 2, a copy of the html file was made and only one change was made to it, the reference to our new JS file. Because of this the new html document is not displayed in this report.
The changes to the JS file were first that this map referenced a vector point data feature service that was created for this lab. This service was symbolized in ArcMap before publishing, and the service was published without feature access in a very similar fashion to Lab 2. The JS file was also altered to position the center of the map over Eau Claire where our new data (schools) was located. The JS finally was changed in that data that the pop-up windows was configured for the new feature, the referenced service URL was changed, and a small dynamic scale bar was included and configured.
Part 3:
Part 3's html includes no major changes from the other parts of this lab other than in what it references and it's small styling changes. This html is shown below.
The JS is where this application gets interesting. This code imports many more modules for the increased functionality of the application. A map is created. The on functionality then allows the coding for a point to be created when a click is sensed. Next, a routeTask is created which references the ESRI routing sample service. From there, route parameters are set. Using the on module functionality again, and the status of the route task, showRoute or errorHandler functions are called. Routes are symbolized with stops set by using the SimpleMarkerSymbol module functionality and paths set using the SimpleLineSymbol module functionality. "addStop" adds stops using the graphic module and there is an if statement that draws a line between two points if two or more points exist. Other functions code for the adding of created graphics to the map, and the error messages shown if routeTask returns "error."
Results:
Part 1:
Part 1 coded for the display of a simple map. This basic imported claro map styling template includes zoom buttons and credits, and the streets map is displayed as is coded for in the JS file.
Part 2 Section 1:
As can be seen below, Part 2 Section 1 took the coding a little bit farther bringing into the map a feature layer showing tree data. With a click on a tree, data can be viewed including the address of the tree, the species of the tree, and a link to the Wikipedia entry for the tree.
Part 2 Section 2:
Part 2 Section 2 coded for the display of schools and their associated data. Similar to the result above, a pop-up window appears with a click on the school symbol, showing specifically in this instance the school name, an elevation of the school, and the address of the school. This map also was coded for the inclusion of a dynamic scale bar that changes with zoom.
Part 3:
Part 3 was coded for the creation of a simple routing application. As is shown, each click on the map results in a cross-hair type symbol, and when a new point is made, a line connecting that point with the last point is created. This map also uses an application appropriate street map as its basemap.
Sources:
Mueser, M (2012, October 1). U.S. Geographic Names Information System (GNIS) Shapefiles Based on USGS GNIS Data. Retrieved November 07, 2017, from http://www.mapcruzin.com/geographic-names-shapefiles/#School
Geog 455 (2013, November). [EC School Addresses]. Unpublished raw data.
ArcGIS for Developers. (2017). Retrived November 07, 2017, from https://developers.arcgis.com/
Wilson, C. (2017). Lab 5 ArcGIS API for JavaScript 1
In this lab, four web mapping applications of differing complexity were made with the ArcGIS JavaScript API along with websites as homes for those maps. Each website built on the last website's complexity and performed a different function. The first website (Part 1) displayed a simple basemap. The second website (Part 2 Section 1) displayed a map with both a basemap and an operational point vector layer showing trees with data on them popping up in window with a click on an individual tree. The third map (Part 2 Section 2) displayed school data using a service that was locally created and stored. The final fourth map (Part 3) displayed a road map and routing functionality was built into this map.
Methods:
Part 1:
 |
| Part 1 HTML |
Part 1 was extremely simple. The HTML was written first. Because the styling was so simple, styling was included in the html document instead of a separate CSS document. Styling for the maps to be created with the JavaScript document were imported: Claro (a theme for the map) and ESRI (styling of map features) stylesheets. Next the JavaScript file that was to be written was referenced, and the JavaScript (JS from here on) API for ArcGIS version 3.22 was imported. Finally, a div with an id to be referenced in the JS file was included in the body for the inclusion of the map.
 |
| Part 1 JavaScript |
The JS file created for this website imported both the esri/map and the dojo/domReady modules. It then created a map and defined the center point, the zoom level, and the basemap type.
Part 2:
Section 1:
 |
| Part 2 Section 1 HTML |
As always an html document was written first. This document used a meta viewport tag in order to increase compatibility on iOS devices. It next referenced the ESRI stylesheet for the display of map features. The InfoWindow.css file was also referenced for the display of the info windows that would be coded in for the display of attribute data on the trees layer. Next basic style was included in the html document as the styling of the document was again very simple. Next, the API JS file was referenced along with the JS written for the site, and a specifically identified div was included in the body for the inclusion of the map. This html document also included a configuration variable for the info window.
 |
| Part 2 Section 1 JavaScript |
The JS file for the trees shows that more modules than Part 1 are imported, which allow functions for creating the info window, displaying a feature layer, and other areas of functionality. An InfoWindow object is created, a Map object is created, then an InfoTemplate is created for the display of the popup content, then the FeatureLayer object is created referencing the tree vector point feature service, and finally the infowindow is resized to our needs.
Section 2:
In Section 2 of Part 2, a copy of the html file was made and only one change was made to it, the reference to our new JS file. Because of this the new html document is not displayed in this report.
 |
| Part 2 Section 2 JavaScript |
The changes to the JS file were first that this map referenced a vector point data feature service that was created for this lab. This service was symbolized in ArcMap before publishing, and the service was published without feature access in a very similar fashion to Lab 2. The JS file was also altered to position the center of the map over Eau Claire where our new data (schools) was located. The JS finally was changed in that data that the pop-up windows was configured for the new feature, the referenced service URL was changed, and a small dynamic scale bar was included and configured.
Part 3:
Part 3's html includes no major changes from the other parts of this lab other than in what it references and it's small styling changes. This html is shown below.
 |
| Part 3 HTML |
The JS is where this application gets interesting. This code imports many more modules for the increased functionality of the application. A map is created. The on functionality then allows the coding for a point to be created when a click is sensed. Next, a routeTask is created which references the ESRI routing sample service. From there, route parameters are set. Using the on module functionality again, and the status of the route task, showRoute or errorHandler functions are called. Routes are symbolized with stops set by using the SimpleMarkerSymbol module functionality and paths set using the SimpleLineSymbol module functionality. "addStop" adds stops using the graphic module and there is an if statement that draws a line between two points if two or more points exist. Other functions code for the adding of created graphics to the map, and the error messages shown if routeTask returns "error."
 |
| Part 3 JavaScript |
Part 1:
Part 1 coded for the display of a simple map. This basic imported claro map styling template includes zoom buttons and credits, and the streets map is displayed as is coded for in the JS file.
 |
| Part 1 Result |
Part 2 Section 1:
As can be seen below, Part 2 Section 1 took the coding a little bit farther bringing into the map a feature layer showing tree data. With a click on a tree, data can be viewed including the address of the tree, the species of the tree, and a link to the Wikipedia entry for the tree.
 |
| Part 2 Section 1 Result |
Part 2 Section 2:
Part 2 Section 2 coded for the display of schools and their associated data. Similar to the result above, a pop-up window appears with a click on the school symbol, showing specifically in this instance the school name, an elevation of the school, and the address of the school. This map also was coded for the inclusion of a dynamic scale bar that changes with zoom.
 |
| Part 2 Section 2 Result |
Part 3:
Part 3 was coded for the creation of a simple routing application. As is shown, each click on the map results in a cross-hair type symbol, and when a new point is made, a line connecting that point with the last point is created. This map also uses an application appropriate street map as its basemap.
 |
| Part 3 Result |
ArcGIS for Developers. (2017). Retrived November 07, 2017, from https://developers.arcgis.com/
Wilson, C. (2017). Lab 5 ArcGIS API for JavaScript 1
Comments
Post a Comment