Google Earth for Browser Mashup with ArcGIS JavaScript
Google has been on the roll of pushing out new technologies lately. They are all very significant, such as the latest Google Map API for Flash and Google App Engine. The most exciting one came from yesterday’s Google IO conference, the Google Earth Plugin for Browser.
Now you can have 3D globe runs right within the browser. Released with it is the very extensive Google Earth JavaScript API for writing 3D map applications. I think it has opened a new page for GeoWeb visualization.
To have a complete GeoWeb, the analytical functions are critical and essential. That’s where the ESRI GIS technologies come to play. The coming ESRI ArcGIS 9.3 will be released with the JavaScript API to help consuming the REST based geo spatial services. To kick the tire of the Google Earth API, I did a quick mashup using ArcGIS JavaScript to add geoprocess on to the Google Earth.
It does a very simple thing. Click on the globe, the geo location information will be sent to geoprocess service called Service Area that served from the ArcGIS Online. This geoprocess will conduct street network analysis to figure out the geographic area that within certain minutes driving time from the submitted location. In my case, I asked for 1, 2, 3 minute driving time. You can ask more, of cause. The Google Earth API will draw the polygons on the globe. As you may guess, the polygon areas are not a circle, rather they are in regular shapes because you can only drive on streets or highways.
Note: Once you see the marker, you need zoom in (scroll or double click the globe) to view the drown polygon. (Might be a GE API problem)
You can play the demo from here. Since it’s all JavaScript, you can get the source from right click.
Here are some details.
First, to embed the globe to a page is very similar to embedding a 2D map. You will have a DIV to hold the map:
<div id='map3d_container' style='border: 1px solid silver; height: 400px; width: 900px;'> <div id='map3d' style='height: 100%;'></div> </div>
Then you initialize the map in JavaScript code:
google.earth.createInstance("map3d", initCallback, failureCallback); function initCallback(object) { ge = object; ge.getWindow().setVisibility(true); var lookAt = ge.createLookAt(''); lookAt.set(33.94, -118.21, 10, ge.ALTITUDE_RELATIVE_TO_GROUND, 10, 30, 500000); ge.getView().setAbstractView(lookAt); google.earth.addEventListener(ge.getGlobe(), "mousedown", handleMouseDown); google.earth.addEventListener(placemark, "click", handleClickPlacemark); }
That’s how you get the globe spinning on your page.
For the rest I think you can just track the source and figure it out by yourself. However, I do want to share some of my findings though.
- The design of the Google Earth API is different from the 2D map API. The object structure is more complicate. The engineers behind this obviously are very GIS savvy so that the API has stronger geo flavor.
- Many of the API names are geared for 3D world. At beginning you might feel they are not very consistent with 2D map API. Regardless, you can feel the keyhole team is more nerdy.
- There isn’t API reference document yet so it’s hard to navigate through the features to do what I need to do. For example, it seems the globe can only handle “mousedown” event. Any other such as “click” or even “mouseup” won’t work. Why’s that?
- After the marker is drawn, I can’t get it zoom in to it using the same code I zoomed it in the initialization function. That’s why you have to manually zoom in to view the result. By the way, there is no setLevel stuff found in 2D map API. You need “lookAt”.
- Because of the lacking of API doc, I can’t figure out how to set the alpha (aka transparency) of the polygons (I tried as you can see from the code). That’s why you can only see one polygon totally covers the map. There should be three with different colors. It’s odd no where in Google sample sets alpha either.
Regardless, the Google Earth API’s potential is huge. It could go way beyond what the 2D map serves. From the example Monster Milktruck you can see the limitation depends on your imagination.
Leave a Comment
If you would like to make a comment, please fill out the form below.
Recent Comments