Lab 6 ArcGIS API for JavaScript and Mashups - UMD

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 -

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 - Sample Server 1 - Sample Server 2 - Sample Server 3 -

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:

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:

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

2

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.

/: 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:



The URL for the specific folder in which we store services for this class is:



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:



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.

3

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.



Here below are two examples that may give you a general idea: o This Web mapping application provides the users with a variety of drawing tools to create graphics on the top of the maps. 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.



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

4

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(" 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:

5

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download