Sorry, you need to enable JavaScript to visit this website.

octo

Office of the Chief Technology Officer
 

DC Agency Top Menu

-A +A
Bookmark and Share

Add a ArcGIS Server Dynamic Map Service to Google Maps

First Step: Create a Basemap with Google Maps

This example shows how to display a Google map inside a web page.

In an HTML or text editor, create a new web page or file. Create the page in a Web server's folders, or in any location on the hard disk.

Paste or type the following content to create an outline for the HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>ArcGIS JavaScript Extension for the Google Maps API Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

</head>
<body>
...
</body>
</html>

Load the Google Maps API by adding the following line in the header section, just after the meta tag (see the complete code at the bottom of this page if unsure where it goes):

<script src=“http://maps.google.com/maps?file=api&v=2&key=abcdefg” type=“text/javascript”></script>

This line tells the page where to find the JavaScript file that includes all of the symbols and definitions needed for using the Google Maps API. It also includes the unique Google Maps API key. In this example the key is shown as “abcdefg.” Replace it with a unique key.

Inside the page body, add a div element that will contain the map. The width and height of the map are specified in the style attribute of the div:

<div id="gmap" style="width: 500px; height:500px;"></div>

In the head of the page, add a script block with a function to create the Google Map:

<script type="text/javascript">
var gmap = null;

function initialize() {
gmap = new GMap2(document.getElementById("gmap"));
var centerat = new GLatLng(38.897000, -77.02000);

gmap.addControl(new GLargeMapControl());
gmap.addControl(new GMapTypeControl());
gmap.setCenter(centerat, 11);
}
</script>

What's happening here?

The initialize function creates a map and connects it with the DIV tag created in the previous step.
 
The centerat variable is a GLatLng object. It's a way to specify a set of coordinates. In this case, the coordinate 38.897000, -77.02000 is where the code will center the map when it opens (Washington DC).

The function then does three things to the map. It adds a large map control (navigation buttons and a zoom level slider) and a map type control (buttons that allows to switch between Map, Satellite, and Hybrid maps). It then centers the map on the coordinates named earlier, at zoom level 11.

Finally, in the body tag, tells the page what to do when it loads and unloads. When the page loads, it should run the initialize function from the previous step. When the page unloads, it should call GUnload. This is a Google Maps function designed to prevent memory leaks.

<body onload="initialize();" onunload="GUnload();">

Save the page and load it into a browser (double-click on the file in the file browser, or access it through the Web server's URL). The Google map is centered and zoomed at the location specified.

Second Step: Add a ArcGIS Server Map to Google Maps

This walkthrough shows how to display a map from ArcGIS Server on top of Google Maps. Displaying the map is not required in order to query or work with map layers, but it does show the map layer to the user of the website.

Maps from ArcGIS Server can either be dynamic (drawn on the fly), or tiled (constructed from a cache of images that the server administrator has previously generated). Since ArcGIS Server map services are dynamic by default, this sample uses DynamicMapServiceLayer. For better performance, where feasible, build map caches on your server so that you can use TiledMapServiceLayer.

Add a reference to the ArcGIS JavaScript client script. This is required for every page that uses the ArcGIS JavaScript Extension for the Google Maps API. Add the following line in the header section, just below the reference to the Google Maps API script.

<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.4" type="text/javascript" ></script>

Modify the initialize function as shown below. This centers the map at (38.897000, -77.02000) at zoom level 11, so that the whole DC will be the center of the map.

function initialize() {

gmap = new GMap2(document.getElementById("gmap"));
var centerat = new GLatLng(38.897000, -77.02000);

gmap.addControl(new GLargeMapControl());
gmap.addControl(new GMapTypeControl());
gmap.setCenter(centerat, 11);

}

In the “initialize” function, add the following line immediately before the end of the function:

This code creates a layer from a dynamic ArcGIS Server map service.

To create the layer, four arguments were passed to the DynamicMapServiceLayer constructor:

  1. The URL of the map service. The URL provided in this sample is from an ESRI sample server. Replace it with the URL to another map services. If unsure of how to construct the URL to another map service, use the Services Directory to discover it.
  2. Optional parameters to specify the image format (left as null).
  3. An opacity setting determining how much to see through the map. This is a value between 0 and 1. The closer to 0, the more you can see through the map. Here a 0.75 setting is used.
  4. A callback function. This is an optional function that runs once the map is created. This code function is added (dynmapcallback) in the next step.

If writing this code without using the example, use the API Reference to learn how to supply these parameters to the constructor. Although the dynamic map service layer is created, it is necessary to add it on top of the Google map. Do this in the callback function. Remember from the previous step, an argument to the DynamicMapServiceLayer constructor was passed containing the name of this function (dynmapcallback). This function runs once the dynamic map has been created. The code in the callback function is what adds the ArcGIS Server map on top of Google Maps.

Add the following in the header section below the “initialize” function:

function dynmapcallback(mapservicelayer) {
gmap.addOverlay(mapservicelayer);
}

Notice that this function has one argument, mapservicelayer, which represents the layer that will be added to the map. Save the page and load it into a browser (double-click on the file in your file browser, or access it through the Web server's URL). The sample population density map over the Google Maps base map is seen.