Archive for August, 2008

Today I’ll continue my series of posts on the new ArcGIS Server JavaScript API with a post that describes how you can integrate the Google Maps API geocoder with ArcGIS Server. I expect this to be a long running series so we’ve created a new page (“ArcGIS Server JavaScript API Posts”) at the top of the blog that provides a handy reference to previous posts. In this post I’m going to use the Portland_ESRI_Landbase_AGO map service from ESRI’s Sample Server 1 ArcGIS Server instance as a base layer, and we’ll show how you can geocode an address using the Google Maps API. This address will then be represented as a point graphic created from the ArcGIS Server JavaScript API. You could certainly use an ESRI locator service to do the geocoding, but it’s a fun exercise and useful if you don’t have access to a geocoding service. This is a very simple example with a hard-coded address meant only to show the potential for integration.

Click here to see the example and then we’ll discuss the code used to create this simple application. As I mentioned above the data for this application was pulled from an ArcGIS Server map service provided by ESRI, and the graphic point was generated based on an address that was geocoded by the Google Maps API. If you’d like to see the code simply right click the page and then select View Page Source.

In a previous post I covered the basic ArcGIS Server JavaScript API code you use to reference the API, create a map, and add layers so I’m not going to cover any of those details in this post. Instead, I’d like to focus on how you can use the Google Maps API to geocode addresses, and add them to your ArcGIS Server generated map as graphic objects.

Step 1: Reference the Google Maps API
Before creating an instance of the Google Maps API geocoding object (GClientGeocoder) you must provide a reference to the API. This is accomplished as follows:

Step 2: Create an Instance of GClientGeocoder
The GClientGeocoder class from the Google Maps API can be used to geocode addresses, and an instance of this class is created as follows:

Step 3: Call the getLatLng( ) method on GClientGeocoder

The getLatLng( ) method on GClientGeocoder accepts an address as the first parameter, and the second parameter is a callback function that will be run when data is returned from the method. A point object will be passed into the callback function. If the geocode of an address was successful this point will have geometry (x,y coordinates), and in the event that the object was not geocoded the point object will be null. Notice that in this case we’ve hard-coded an address that will be input into the getLatLng( ) method. This of course wouldn’t be acceptable in a real application, but the point here is simply to show how the objects work.

Step 4: Create ESRI Point, Symbol, and Graphic Objects
As I mentioned in the last step, the getLatLng( ) method returns data in the form of a point object to the callback function which is then run. If the address was successfully geocoded, the point object will contain longitude and latitude coordinates which can be accessed through the lng( ) and lat( ) methods seen below. These coordinates are stored in the ‘theX’ and ‘theY’ variables. Next, we use the JavaScript alert function to display the coordinates of the geocoded address. At this point we’re done with the Google Maps API, and simply need to transfer the coordinates into an ESRI point object and display the point as a graphic on the display. We use the latitude, longitude coordinates as input to the constructor for an esri.geometry.Point object. To create the graphic for the point we need to create a symbol and a graphic. In this case, since we’re working with a point, we use the SimpleMarkerSymbol object. After creating an instance of the symbol the setStyle( ), setColor( ) and setSize( ) methods are used to define the characteristics of our symbol. In this case, we create a red circle set to a size of 12. Finally, we create a graphic object, passing in our point and symbol.

Step 5: Add the Graphic to the Display
In the code sample above, the map.graphics.add(pointGraphic) method adds our newly created graphic to the graphic list for the application. Any number of graphics of various types can be placed into this graphic list and each object is drawn on the display.

If you’d like more information on how to create ArcGIS Server and Google Maps applications with their respective APIs you might want to consider our upcoming course which still has 4 seats available. Contact eric at geospatialtraining.com for more information.

GeoSpatial Training Services is pleased to announce the availability of a new instructor guided, Internet based Virtual GIS Classroom course entitled “Building Web 2.0 Mapping Applications with ArcGIS Server and Google Maps“. How fast can you learn to build Web 2.0 mapping applications with ESRI’s ArcGIS Server and Google Maps? With our unique combination of hands-on exercises, Flash based lecture materials containing audio, video, code samples, and demonstrations you will be creating next generation web-based GIS applications in a matter of days using the new ArcGIS Server JavaScript API and Google Maps.

The first session of this course will be delivered via the web starting October 20th and ending November 21st.Save 15% ($100) on this course when you register before September 5th.

This is an instructor guided course taught in a Virtual GIS Classroom using the same technologies implemented by colleges and universities around the world to deliver Internet based courses. Our new Virtual GIS Classroom blends the best of instructor led and e-learning formats into a new instructor led web based format that allows for more interactivity between the instructor and student, and between students.

This is an Internet delivered course that allows you to proceed through the materials at your own pace. There is NOT any particular time when you must be logged into the course. However, you will have access to the course instructor via chat sessions, discussion boards, and by phone.

In this course you will learn how to use the new ArcGIS Server JavaScript API, Google Maps API, and the ArcGIS JavaScript Extension for Google Maps to create Rich Internet GIS Applications (RIAs). Course participants will be led through a series of 6 modules described below.

Topics Covered

Web 2.0 Concepts Applied to GIS

Introduction to JavaScript

Basic ArcGIS Server Concepts

Programming ArcGIS Server with the JavaScript API

Programming the Google Maps API

Integrating ArcGIS Server with Google Maps

To obtain a full length syllabus for the course please contact eric at geospatialtraining.com

Who Should Attend?
This course is geared toward all levels of GIS professionals who need to create Rich Internet GIS Applications. No programming experience is necessary though it is helpful to have some knowledge and or experience of programming concepts.

Class SizeWe have room for a minimum of 4 students and a maximum of 12 students.

Dates
October 20th – November 21st – 2008

For more information please contact GeoSpatial Training Services at 210-260-4992 or eric at geospatialtraining.com

At the end of my last post I briefly introduced the concept of events and pointed you to an example that shows how to get the current extent through the use of Map events, and specifically the “onExtentChange” Map event. Today I’d like to expand on the concept of events and how they are implemented within the ArcGIS Server JavaScript API. Events are actions that are typically triggered by end users. This can include actions such as the click of a mouse, dragging the map in a pan operation, loading a page, executing a task, clicking a button, and many other actions.

Event Basics
The ArcGIS Server JavaScript API is an asynchronous, event-driven API that uses a publish/subscribe pattern. The asynchronous nature of the API means that your application can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. This means that the content of your application does not have to be reloaded with every request. As I mentioned, the API also follows a publish/subscribe pattern which means that your application will need to “register” events that are important for the functionality of the application with “listeners” which will respond to the triggering of these events. Listeners are simply code blocks that execute in response to an event that has been fired on the application side. For instance, in the example above, the “onExtentChange” Map event is registered to a code block that displays the current map extent. Let’s look at how this is accomplished.

Adding Event Listeners
In the ArcGIS JavaScript API, events are registered to listeners through the dojo.connect method. In the code example above, we’re registering the “onExtentChange” event found on the map object to the showExtent listener. The showExtent listener is simply a JavaScript function that receives an extent object from the caller, and prints out the min and max x and y coordinates.

Removing Event Listeners
You should always remove listeners when your application is being closed to avoid memory leaks. This can be accomplished through the use of the Map.onUnload event in conjunction with dojo.disconnect. The onUnload event is fired when the map is closed, and dojo.disconnect removes the connect between an event and the method being referenced.

Commonly Used Events
The Map object currently has 27 events that can be initiated including onClick, onExtentChange, onLayerAdd, onLoad, onMouseDrag, onMouseWheel, onZoom, onPan and many others. I should point out that it is not necessary to write listener code functions for every single event that can be triggered. You only write event handlers for those events that are necessary for your application. When an event is triggered for which you have not registered and written a handler, the event is simply ignored in the application. Several other objects provide important events including the Layer, GraphicsLayer, and InfoWindow.

Continuing with our series on the ArcGIS Server JavaScript API, today we’ll cover various ways that you can work with the map extent. If you don’t include extent information when an instance of the map is created in your code, the default or initial extent will be the extent of the map as it was last saved in the map document (.mxd). For example, the code snippet below does not include any extent information in the constructor for the map. This would result in a default extent being applied which was the extent of the map when it was last saved in the map document.

In the event that you are using more than one service, the default extent will be the initial extent of the base map or first layer added.

Setting the Initial Extent
There are several options for setting the initial map extent through your code. The easiest way to do so is through the constructor for the map. The constructor for the Map object takes a required parameter which points to <div> element on your page, and an options parameter which can contain the initial extent of the map as well as other options such as the layer used to initialize the map, the inclusion of navigation controls, and others. Click here to see a full description of the available options that can be included in the constructor.

For instance, the following code snippet shows how you can accomplish setting the extent through the constructor. To set the initial extent of the map you will need to know the min and max x and y values of the extent.

You can also accomplish the same task but in a slightly different manner through the use of the setExtent method on Map as you see in the code example below.

Setting the Initial Extent when using Multiple Services
If you’re using multiple map services in your application, the default extent will be the initial extent of the base layer. If you know the extent you’d like to use ahead of time then you can include the extent in the map constructor as we’ve shown above. However, at times you will either not know the extent ahead of time or you may want to use the extent of a secondary layer. For instance, if you’re using a map service that shows the extent of the world as your base layer, and a second map service with your local data you’d probably want to set the extent of your application to that of your local data. The code example below from ESRI shows how this can be accomplished through the fullExtent property found on ArcGISMapServiceLayer.

Getting the Current Extent
You can obtain the current map extent through the read-only Map.extent property or through the use of events. The later method for returning the current map extent is through the use of Map events, and specifically the “onExtentChange” event. The topic of events requires a fair amount of explanation so I will save this for my next post, but for now here is an example which uses the “onExtentChange” event to return the current map extent which is then displayed in a <div> tag below the map.

I’m starting a new series of posts today covering the new ArcGIS JavaScript API and the ArcGIS JavaScript Extension for the Google Maps API. I am particularly interested in the integration of ArcGIS Server with Google Maps and Google Mapplets so my focus will be oriented toward that particular subject. Today I’m going to introduce the ArcGIS JavaScript API and show you how easy it is to create simple web mapping applications with this API. Future posts will focus more on the integration of ArcGIS Server with Google Maps and Mapplets.

Introduction
According to ESRI the ArcGIS JavaScript API is “a browser based API for developing high performance, easy to use mapping applications. The API allows you to easily embed maps in your web pages.” Carla Wheeler, ArcWatch Editor, gives a great overview (I’ll link to the article when ESRI gets their site back up) of the JavaScript API so I’m not going to go into great detail on the high level details of the API. With some understanding of HTML and JavaScript it becomes fairly simple to create web mapping applications and mashup content from other web services. Previous to the release of the JavaScript API, the .NET and Java Web ADFs were (and still are) available, but both require considerable programming skills to implement. As I’ve mentioned before, I suspect that the new JavaScript API and the extenders for Google Maps and Virtual Earth will bring a lot of renewed interest to ArcGIS Server, and will undoubtedly bring a lot of new developers to the platform.

Getting Started with the JavaScript API for ArcGIS Server – The Basics
For those of you who are familiar with writing Google Maps API applications you will find that creating an application with the ArcGIS Server JavaScript API is remarkably similar in terms of how you structure the application code. Just as with the Google Maps API, you go through a series of four steps for initializing an ArcGIS Server application. Those four steps include the following:

Add a reference to the ArcGIS JavaScript API in a <script> tag as well as a reference to the dojo stylesheet

Create a <div> element to hold the map

Write JavaScript to create the map

Initialize the map ojbect from the dojo.addOnLoad method

Obviously you’ll also want to add some layers to your map and this can be accomplished through either the ArcGISTiledMapServiceLayer or ArcGISDynamicMapServiceLayer. Below you’ll see how code examples for both types of layer.

The ResultThe result of these few simple lines of code can be viewed here. I’d like to point out two additional things that you may have noticed. First, we did not specify any code to add map navigation controls or functionality. This is because the navigation tools are built into the API including a zoom control slider and the ability to use your mouse and keyboard for panning and zooming. I should also point out that it is not necessary to have ArcGIS Server loaded on your server. You simply need access to an existing map service somewhere on the web. In this case, we’re accessing web mapping services provided by one of ESRI’s sample ArcGIS Servers.

To view the entire source code of this simple application, right click the page and select View Source. Now, this is about as simple as an ArcGIS Server JavaScript application can get, and there is a lot more that you can do with the API. We’ll cover some of the additional functionality provided by the API in coming posts, but hopefully you now have a grasp of how easy it is to develop these applications.

My first session this morning was “Framework for Building GIS Web Applications” with Clint Brown – Director of Software Products, ESRI.

The focus of this particular session was a general framework for building GIS Web 2.0 applications. It has become obvious after a couple days at the conference that ESRI has made significant strides with their ArcGIS Server 9.3 release. The new REST JavaScript API, extensions for Google Maps and Virtual Earth, Flex API and KML integration are a testament to their focus on building technologies that effectively match the capabilities provided by the “consumer applications”. Google Earth/Maps and Virtual Earth were obviously disruptive technologies for the GIS world, and it is good to see ESRI embracing and extending the capabilities introduced by Google Earth/Maps and Virtual Earth. So, let me get to the point of today’s session presented by Clint. Clint always provides some memorable quotes, and I thought his memorable quote today summed up the focus of the session.

“Everyone including your Grandma is using Google Earth so now you can finally explain what you do to family and friends and they’ll actually understand what you mean.”

So true. I’ve been trying to explain what I do to friends and family for the past 15 years and it wasn’t until Google Earth that the light actually turned on for them. Though it was a funny and applicable quote for most people, Clint went on to make an even more important point when he stated that

“Consumer maps like Google Earth/Google Maps and Virutal Earth have defined a new user experience and GIS applications will have to support this.” The expectations for GIS web applications have indeed changed as a result of these technologies. Given that these consumer products have essentially changed the way we think about how web based mapping applications should look and function, how should ESRI users go about creating similar types of applications? Clint described a four step framework for creating these Web 2.0 GIS applications to meet these requirements.

1. GIS Applications
When developing GIS web applications you have many tool choices for building your applications including JavaScript/Flex Web Apps, ArcGIS Server Web Mapping Application, ArcGIS Mobile, Consumer Web Map Apps (Google Maps, Virtual Earth), and ArcGIS Explorer. Clint emphasized the use of JavaScript API or the new Flex API for simpler web applications for a few reasons.

The programming is much simpler

It doesn’t require any additional technology on the web application server. You simply need access to published web mapping applications somewhere on the web. Of course for most organizations this will mean that you do need to purchase ArcGIS Server. However, the point is a good one in that you can mashup the mapping services provided by your organization with other existing map services elsewhere on the web.

Of course technology does not exist in a vacuum and your web GIS application will only be useful to users if you meet their needs. Before building your application you need to identify your audience and the work tasks that they need to perform. You also need to identify the key information products that should be provided by the application.

2. Digital Base Map
In terms of the digital base map, the “consumer” mapping applications are essentially built using one map for each map scale. So, as you zoom in and out on the map, the application is toggling between the various base map versions. To simulate these various base maps in your web mapping application you will need to create group layers in the ArcMap table of contents. Each group layer should contain whatever information you want to represent at a specific scale. These layers will then turn on/off in your application as the user zooms in and out. As Clint mentioned, this is “really quite simple”. Assuming that you know how to create group layers in ArcMap containing your data and know how to set map scale drawing parameters you should be able to create these base layers easily. The prerequisite to that is obviously that you have obtained the data that you need to create the base map.

The other point that Clint made regarding your digital base map is that you don’t have to build it all. You should build maps for your area of interest or organizational responsibility and then take advantage of existing base maps such as ArcGIS Online, Google/Virtual Earth, and other GIS departments. Build the data for your area of interest and then leverage what already exists. Basically this is mashing up data from multiple providers for creating your digital base map data.

Finally, you will need to provide the ability to toggle between various basemap types. For example, in Google Maps you can toggle between vector maps, imagery, and hybrid. Your users will want to do this so make sure make sure you take the time to create the various base map types.
3. Define and Create Operational Map Layers
Operational map layers are non-base map layers that support the functionality provided by your application. Examples would include working layers, sensor feeds and observations, query results, and the results of analytical models created through geoprocessing tasks. Alternative ways to add operational information to your map applications include creating a map service for your operational layer, working with feature queries and the assignment of symbology.

4. Tasks and Tools in Your GIS Application
The final component of the framework is to add tools to work with your operational information. One of the most common tools is the Locator which allows your users to search for place names, addresses, points of interest, etc. The consumer mapping applications are really good at this, and you should plan to add this functionality. Additional tools include the use of map layers as interactive reports through popup description balloons, the ability to query, graph, report and visualize data that supports your map layers, and various tasks including geoprocessing models, queries, and other programs that your users might execute to generate a result.

Finally, Clint recommend a few final steps for implementing your application including the following:

Plan for Hosting Strategies

Test and refine your application, services, and contents

Develop a strategy to maintain your website and content

In summary, Clint gave a really good fundamental overview of a development framework for building your Web 2.0 GIS applications. I was particulary pleased to see that ESRI has embraced the ease of use and capabilities provided by “consumer” mapping applications and extended it to include advanced GIS analysis and geoprocessing.

It’s always good to be back in San Diego for the annual ESRI International User Conference! Getting out of the 100 degree heat of south Texas for a week is a bonus as well. I’ve always been impressed by the energy and focus of the conference, and this year is no different. I’ll be blogging this week on some of the more interesting developments to come out of the conference.

ArcGIS Server JavaScript API and Google Maps/Virtual Earth Extensions
Yesterday I attended a pre-conference seminar on the new ArcGIS Server JavaScript API released at version 9.3, and I have to say that I am really impressed. Prior to this release I had worked with the .NET Web ADF on a few projects and found the experience incredibly frustrating to the point that I didn’t want to have anything to do with ArcGIS Server. However, I suspect that the new JavaScript API and the extenders for Google Maps and Virtual Earth will bring a lot of renewed interest to ArcGIS Server, and will undoubtedly bring a lot of new developers to the platform. I suspect that we’ll see a lot more legacy ArcIMS applications moved to ArcGIS Server due to the ease with which simple applications can be built. The JavaScript API makes development work so much easier than anything that I have experienced with the .NET Web ADF. Not only can you access the ESRI product stack, but the ability to integrate your maps and geoprocessing with Google Maps and Microsoft Virtual Earth is something that I am particulary happy to see. For some time I have maintained that you should use ArcGIS for your analysis, geoprocessing, and map creation and then migrate the results to the new geographic visualization products (Google Earth/Google Maps/Virtual Earth). The thought being that you let each platform do what it does best. The ESRI platform is great for analysis and geoprocessing, but in terms of presentation of that data the GE/GMaps/VE platforms are, in my opinion, superior in terms of ease of use and data display. Now, with the 9.3 release of ArcGIS Server, the integration of these tools makes for a great team.

See below for some related links to the the new JavaScript API, Google Maps Extension