Goal and Background
The purpose of this lab is to learn how to use the ArcGIS
JavaScript API to embed GIS services into a website. GIS services will be
embedded to display and interact with web maps. GIS applications will also be
modified and applied to different study areas and methods. After this lab,
students should become familiar with the structure of an html file, embedding
JavaScript into html and their associated cascading style sheets, and the use
of JavaScript API to create web applications.
Methods
The introduction of this lab demonstrates the creation of a
basic application. The first step is to set up a basic HTML document. The block
of code below contains the basic structure.
Next, we wish to reference the ArcGIS API for JavaScript and
include a CSS style sheet from esri. The CSS link is a Dojo Dijit theme which is
a style sheet for the display of the web application. Once the desired style is
chosen, Dojo modules can be loaded into the code. Now it is possible to add
scripts that contain the basemap, zoom level, map center, and the dojo
function. After all the necessary components are added, the final block of code
appears as it does below.
By running the completed code, the application below will
appear in a web browser.
The next portion of the lab demonstrates how to build a
sample application that uses the ArcGIS API for JavaScript to display a web map
from ArcGIS.com. We will use a similar code to the previous section but this
code will contain other components that will draw the map elements from
ArcGIS.com. One important component is the web map ID which can be found within
the url of the web service. The code for this application can be found below.
After running the code, the
following application will open in a web browser.
After examining the
application, it becomes apparent that the map lacks a legend. After a
few code installations, a legend is an easy fix to a boring map application. The
improved code and application can be seen below.
The final portion of this lab
demonstrates how to develop a full-page web GIS application. For this lab, we
will be constructing a web map application that displays locations of schools
in the Eau Claire area. The schools and their addresses have been joined into a
shapefile that can be viewed below. This shapefile was then published as a
service to ArcGIS server.
Instead of creating this
application from the beginning, we will be modifying an existing application
that displays tree species in San Francisco. The first step is to modify the
basemap so that the application opens over Eau Claire. The service for Eau
Claire Schools needs to be referenced by using the map ID found in the service’s
url. Then, modifications to the code are needed in order to see attribute
information such as address, school name, and elevation for the service. Map
components such as scale bars were also added to the application.
Sources
No comments:
Post a Comment