You are on page 1of 10

GEOG677 Internet GIS

University of Maryland at College Park

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. 1

GEOG677 Internet GIS

University of Maryland at College Park

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://<host>/<instance>/services/<folder> Where:

http://<host> is the ArcGIS Server host name. /<instance> 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

/services: This indicates the REST services endpoint. You will see a list of all services in the root directory along with any folders. /<folder>: 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://<resource-url>?<parameter1=value1>&<parameter2=value2> Where:

http://<resource-url> 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

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

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

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

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

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

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

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 ----10

You might also like