GEOG677 – Internet GIS University of Maryland at College Park
1
Lab 6 – ArcGIS API for JavaScript and Mashups
Due Date: 02/03/2012
Overview
In Lab 4 and 5, you were able to use ArcGIS Server to publish GIS services and created Web
applications. If taking full advantage of the functionality and features provided by ArcGIS
Server, you can design powerful Web GIS tools.
However, the cost of ArcGIS Server can be prohibitive for many users. This has naturally led to
alternative solutions. Users are forced to create, share, and integrate free data and resources to
develop Web GIS applications. Besides using open source Web GIS programs, mashups have
become the most popular approach. Today there are more and more servers that provide a variety
of Web services for free or minimal costs. In addition, mashups can create Web GIS applications
that have excellent user interface and functional features. It is evident that mashups will be the
mainstream for developing Web GIS in the future. To some extent, the role of ArcGIS Server
(along with Desktop ArcGIS) will be reduced into software that is used to create and host Web
GIS services.
This exercise is intended to help you get a better understanding about how to create a mashup
with ArcGIS JavaScript APIs, which allows you to embed GIS services into any web sites.
Also you will practice how to create a Web mapping application using ArcGIS JavaScript
Extension for the Google Maps API. This will allow you to combine your own GIS services, the
services from other organizations (e.g. ESRI) on top of Google Maps base maps.
Part I: Getting to Know ArcGIS APIs and the Resources
API (application programming interface) is a source code based specification intended to be used
as an interface by software components to communicate with each other.
ESRI provides a variety of APIs for Web GIS development based on platforms:
ArcGIS API for JavaScript
ArcGIS API for Flex
ArcGIS API for Silverlight
ArcGIS API for .NET
ArcGIS API for Java
The details can be found here - http://resources.arcgis.com/content/arcgisserver/web-apis
Using either of these APIs, you can create mashups that dynamically combines contents or
functions from multiple Web servers.
GEOG677 – Internet GIS University of Maryland at College Park
2
A mashup usually has three components:
Basemaps
o Provides a geographic frame of reference; the typical sources include ESRI
ArcGIS Online, Google Maps, Miscrosoft Bing Maps, Yahoo Maps, and
MapQuest.
Operational layers
o These are the data layers of interest for the project; usually overlaid on top of
basemaps; Often from different GIS servers that host the basemaps; Usually
hosted on your own server; Respond to client requests.
Tools
o Execute certain business logic or analytical functions.
To search for basemaps, you can start by searching these ESRI servers:
ArcGIS Online - http://server.arcgisonline.com/arcgis/rest/services
Sample Server 1 - http://sampleserver1.arcgisonline.com/arcgis/rest/services
Sample Server 2 - http://sampleserver2.arcgisonline.com/arcgis/rest/services
Sample Server 3 - http://sampleserver3.arcgisonline.com/arcgis/rest/services
The ESRI ArcGIS Online server is particularly useful. There are many map services that are free
to use from this server. Right now it is free for the public to use. However, ESRI does not
guarantee that it will be available forever. In my understanding, these services should be
available in foreseeable future.
There are also many GIS servers on the Internet that provide free map services. You just need to
find them. For example, for the State of Maryland, there is a GIS server hosted in the Towson
University that provides a lot of GIS services: http://mdimap.towson.edu/ArcGIS/rest/services
In order to efficiently search for those GIS services and also to better use (consume) them, you
need to have a good understanding about ArcGIS Server REST (Representational State
Transfer).
For ArcGIS Server REST, all resources and operations exposed by the REST API are accessible
through a hierarchy of endpoints or Uniform Resource Locators (URLs) for each GIS service
published with ArcGIS Server.
When using the REST API, you must know the well-known endpoint, which represents a server
catalog.
For ArcGIS Server, the default endpoint is:
http:////services/
Where:
http:// is the ArcGIS Server host name.
/ is the instance name. This is the instance you set up when ArcGIS Server
was installed. The default value is "/arcgis/rest".
GEOG677 – Internet GIS University of Maryland at College Park
3
/services: This indicates the REST services endpoint. You will see a list of all services in
the root directory along with any folders.
/: When a folder is included in the URL, you will see a list of all services
included in this folder.
For example, the root directory of our server (Hyperion) is:
http://129.2.24.163/arcgis/rest/services
The URL for the specific folder in which we store services for this class is:
http://129.2.24.163/ArcGIS/rest/services/Geog677_W12
When you type in a URL endpoint in your browser, you will see Services Directory. Each
ArcGIS Server comes with a Services Directory, which provides a way for you to navigate
through the list of services, folders, and operations on a server.
When using the REST API, you need to construct URLs. Services Directory can help you
generate URLs that include both the reference to a resource and any parameters. A URL with
parameters will have the following syntax:
http://?&
Where:
http:// is the URL to a given resource.
? denotes the beginning of a parameter list.
parameter1=value1 is a name-value pair.
Almost all resources have an f parameter. This parameter determines the output format.
To build a mashup, here below are the general steps:
1. Identify the problem to solve and define the objectives to accomplish
2. Search for the Web resources
o Basemaps
o Operational layers
3. Publish your contents and functions when they are not available on the Web
4. Organize the contents and functions into basemaps, operational layers, and tools
5. Implement the application through configuration or programming
6. Test, enhance, and deploy the application.
GEOG677 – Internet GIS University of Maryland at College Park
4
Part II: ArcGIS API for JavaScript
The ArcGIS API for JavaScript is a lightweight way to embed maps and tasks in web
applications.
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm
Here below are two examples that may give you a general idea:
http://www.terpconnect.umd.edu/~jma3/GEOG677/ArcGIS_API/Demo.html
o This Web mapping application provides the users with a variety of drawing tools
to create graphics on the top of the maps.
http://www.terpconnect.umd.edu/~jma3/GEOG677/ArcGIS_API/Demo2.html
o This Web mapping application allows the users to click on any county in the US
and display the population by race in pie chart.
o This example seems to be working in Firefox but not in IE.
The procedures of creating an ArcGIS API for JavaScript is very similar to what you did in Lab
3 – Google Maps API because it is also in JavaScript.
There are many samples are available for the JavaScript API. Notice that you can view both the
code and the page displayed alive on the Web. These samples demonstrate how to use various
features in the ArcGIS API for JavaScript. Each sample page contains a live demo, a description
of what happens in the sample, and the source code.
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm
The samples are grouped into different categories depending on the functions or features.
Create a map
Geocode an address
Query a map service
Automatically symbolize data with a renderer
Create high performance apps
Edit data
Drawing tools
You will start from something very basic and then gradually add new functions/features/tools.
For example, you may want to start to build a bare-bone map based on this sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/map_dynamic.html This is
because the map services that you have published so far are all dynamic map services. If you
have cashed map services (tiled map services), you can also try other options.
A dynamic map is a map layer that will be drawn by the server each time the user zooms or pans.
So, it will be displayed slowly if there are many layers or each layer has a lot of features. This is
most significant if the layer is an image such as DOQQ.
GEOG677 – Internet GIS University of Maryland at College Park
5
In comparison, a tiled map service layer is a layer that has been cached. Map caching is a very
effective way to make your ArcGIS Server maps run faster. When you create a map cache, the
server draws the entire map at several different scales, and stores copies of the map images. The
server can then distribute these images whenever someone asks for a map. It's much quicker for
ArcGIS Server to hand out a cached image than to draw the map dynamically each time someone
requests it.
Following the instructions, you can copy/paste the codes and then save it as an HTML file. Now
you modify the code by using your own map service.
As the highlighted line of code shown, a map service is identified by a URL.
var dynamicMapServiceLayer = new
esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/
ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer",
{"opacity":0.5,"imageParameters":imageParameters});
This specific map service is hosted on the ESRI ArcGIS Online server. You can replace it with
any map service as long as the type matches.
All the map services that you have published so far in this class can be found here:
http://129.2.24.163/ArcGIS/rest/services/Geog677_W12
GEOG677 – Internet GIS University of Maryland at College Park
6
Now, find your map service and click on it to get the URL of this map service from the browser
address bar. You will use your own map service from Lab 5.
Replace the highlighted URL in the Web page you created earlier with this new URL.
Save the code. Now, you can open it in a web browser and view it locally.
Now that you have a basic Web GIS application, you can start to add more features, functions, or
tools to make it more user-friendly and powerful.
You may consider testing some of the following samples because those features/functions are
mostly common:
Toggle ArcGIS Online Services
o http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/map_agol.html
Toggle Layer Visibility
o http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/map_explicitlay
erlist.html
o Identify – Popup
o http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/find_popup.htm
l
o Drawing Toolbar
o http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/toolbar_draw.ht
ml
o Navigation Toolbar
o http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/toolbar_navigati
on.html
Your tasks:
You will create an ArcGIS Server API for JavaScript.
You will use at least one of your own map services.
o You can use the map services that you published in Lab 4 and 5.
o You can also publish new map services if necessary.
o If you need a tiled (cached) map service layer, since you have not created one,
you can “borrow” one from the ArcGIS Online, Sample1, Sample 2, or Sample3
server.
There must be at least two features/functions/tools besides the basic API.
Upload the web page to the TerpConnect server to add to your homepage. Make sure it
works on the Internet.
Be creative!
GEOG677 – Internet GIS University of Maryland at College Park
7
Part III: ArcGIS JavaScript Extension for the Google Maps API
In Lab 3, you once created two Google Maps API web applications similar to the ones below:
http://www.terpconnect.umd.edu/~jma3/GEOG677/Lab3/HTMLs/GoogleMap_API.html
http://www.geog.umd.edu/gis/UMD_Campus_Map.html
Now, you can improve it by using the ArcGIS JavaScript Extension for Google Maps which
allows you to extend the Google Maps API to use ArcGIS Server services. With this extension,
you can add your own data to a Google map and embed this map in your own page. The
JavaScript requests information from the ArcGIS Server and puts it together with information
requested from Google Maps.
For more details, you can read on this page -
http://help.arcgis.com/EN/webapi/javascript/gmaps/help/google_start.htm
Remember that you don't need to have ArcGIS Server installed on your machine in order to
program with this extension. You just need to have an ArcGIS Server available that you can
access through a URL.
The ArcGIS JavaScript Extension for the Google Maps API allows you to work with ArcGIS
Server and Google Maps together. For example, you can:
Display your own maps on top of a Google Maps base map.
Execute a GIS model and display the results in Google Maps.
Search for features in your GIS data and display the results on Google Maps.
Find addresses using your own address locator and display the result on Google Maps.
Display attributes from your GIS data on the map using the Google Chart API.
Allows others to add GIS functionality from your server as a Google Mapplet.
Here is an example that I have created. See the screen shot below.
http://www.terpconnect.umd.edu/~jma3/GEOG677/ArcGIS_API/ArcGIS_JSAPI_GoogleMap_
API.html
Notice that the base maps come from two different sources. The world map and satellite images
are from Google Map server. And the map on the top is based on the map service (using the
same data for Lab 5) that I published on our ArcGIS Server - http://129.2.24.163/.
GEOG677 – Internet GIS University of Maryland at College Park
8
Note:
You must NOT use the map services that you have published for Lab 4 and 5.
o See explanation below.
You can re-publish your Lab 4 or 5 map service or create a new map document/service
using different data. Then, you will use the new service for this exercise.
When I reinstalled and updated the Hyperion server with ArcGIS Server 10 last fall, I forgot to
define the Server Virtual Directory using URL. (see the screen shot below).
As the result, the map service hosted on Hyperion server will be displayed properly if you
browse the API using a computer on campus only because it can be accessed through Intranet.
However, it will not work if the users are trying to access from Internet.
GEOG677 – Internet GIS University of Maryland at College Park
9
Now that the Server Virtual Directory is defined using URL, the problem is resolved.
This is something you need to pay attention if you happen to be tasked to set up an ArcGIS
Server at your workplace.
For this exercise, you will do something similar to Part II or what you did in Lab 3.
First, you will need to read and understand some basic information about the ArcGIS Extension
for the Google Maps API:
http://help.arcgis.com/EN/webapi/javascript/gmaps/help/google_start.htm
Then, you will need to prepare for your map services to be used as operational layer(s).
GEOG677 – Internet GIS University of Maryland at College Park
10
The next step is to build a basic or bare-bone Web API by following this example – “Add
ArcGIS Server map”
http://help.arcgis.com/EN/webapi/javascript/gmaps/help/topics/samples/map_add.html
Now, you will need to modify the code by replacing the map service with your own.
The final steps will be adding more functions, features, or tools to make this application more
user-friendly and powerful.
You may consider testing some of the following samples because those features/functions are
mostly common and useful:
Query a polygon layer
o http://help.arcgis.com/EN/webapi/javascript/gmaps/help/topics/samples/query_po
lygon.html
Show results with a chart
o http://help.arcgis.com/EN/webapi/javascript/gmaps/help/topics/samples/query_ch
art.html
Find features in a map
o http://help.arcgis.com/EN/webapi/javascript/gmaps/help/topics/samples/find_map
.html
Identify features on the map
o http://help.arcgis.com/EN/webapi/javascript/gmaps/help/topics/samples/identify_f
eatures.html
Geocode an address
o http://help.arcgis.com/EN/webapi/javascript/gmaps/help/topics/samples/locator_a
ddress.html
Your tasks:
You will create a mashup using ArcGIS JavaScript Extension for the Google Maps API.
o You may refer to this example:
http://www.terpconnect.umd.edu/~jma3/GEOG677/ArcGIS_API/ArcGIS_JSAPI
_GoogleMap_API.html
o Your work can be very different from this example in terms of data used,
functions, or user interface.
You will use at least one of your own map services.
There must be at least two features/functions/tools besides the basic API.
Upload the web pages to the TerpConnect server to add to your homepage. Make sure it
works on the Internet.
Lastly, you need to create a Word document in which you should write down the URLs
of the web page and then a few screen shots for Part II and III.
Be creative!
----- THE END -----
