Ground overlays enable you to place an image onto the Earth's terrain. The Icon object contains the link to the JPEG file with the overlay image.
|
// GroundOverlay
var groundOverlay = ge.createGroundOverlay('');
// GroundOverlay/Icon
var icon = ge.createIcon('');
icon.setHref("http://www.google.com/intl/en_ALL/images/logo.gif");
groundOverlay.setIcon(icon);
// get center of lookat and create a box
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var north = lookAt.getLatitude() + .55;
var south = lookAt.getLatitude() - .55;
var east = lookAt.getLongitude() + .85;
var west = lookAt.getLongitude() - .85;
var rotation = 0;
// GroundOverlay/LatLonBox
var latLonBox = ge.createLatLonBox('');
latLonBox.setBox(north, south, east, west, rotation);
groundOverlay.setLatLonBox(latLonBox);
// add the ground overlay to Earth
ge.getFeatures().appendChild(groundOverlay);
In this example, a Google logo is draped on its location in Mountain View, California.
A screen overlay is an image overlay fixed to the screen. ScreenOverlays can be used to create compasses, logos, and heads-up displays in Google Earth. ScreenOverlay sizing is determined by the size property. Positioning of the overlay is handled by mapping a point in the image specified by overlayXY property to a point on the screen specified by the screenXY property. Then the image is rotated by setting the rotation degrees about a point relative to the screen specified by the rotationXY property.
The following example overlays a Google logo on the screen:
// ScreenOverlay
var screenOverlay = ge.createScreenOverlay('');
// ScreenOverlay/Icon
var icon = ge.createIcon('');
icon.setHref('http://www.google.com/intl/en_ALL/images/logo.gif');
screenOverlay.setIcon(icon);
// Set screen position in pixels
screenOverlay.getOverlayXY().setXUnits(ge.UNITS_PIXELS);
screenOverlay.getOverlayXY().setYUnits(ge.UNITS_PIXELS);
screenOverlay.getOverlayXY().setX(400);
screenOverlay.getOverlayXY().setY(200);
// Rotate around object's center point
screenOverlay.getRotationXY().setXUnits(ge.UNITS_FRACTION);
screenOverlay.getRotationXY().setYUnits(ge.UNITS_FRACTION);
screenOverlay.getRotationXY().setX(0.5);
screenOverlay.getRotationXY().setY(0.5);
// Set object's size in pixels
screenOverlay.getSize().setXUnits(ge.UNITS_PIXELS);
screenOverlay.getSize().setYUnits(ge.UNITS_PIXELS);
screenOverlay.getSize().setX(300);
screenOverlay.getSize().setY(75);
// Rotate 45 degrees
screenOverlay.setRotation(45);
// add the screen overlay to Earth
ge.getFeatures().appendChild(screenOverlay);
Here is what it looks like in Google Earth:
By default, the terrain layer is the only layer displayed when the Google Earth Plug-in first loads. Not all of the layers that are available in the Google Earth browser are available with the plug-in. The following JavaScript shows how you can enable and disable the layers available with the plug-in.
To enable the buildings layer:
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
To disable buildings layer:
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, false);
Other available layers include LAYER_BORDERS, LAYER_ROADS, and LAYER_TERRAIN.
A StyleMap maps between two different Styles. Typically a StyleMap object is used to provide separate normal and highlighted styles for a placemark, so that the highlighted version appears when the user mouses over the icon in Google Earth.
In the following example, first the placemark is set to a triangle and then it changes to a square when the user mouses over the placemark. The style map specifies a normal and highlighted icon that are used for placemarks:
var map = ge.createStyleMap('styleMap' + counter);
// Create icon normal for style map
var normal = ge.createIcon('');
normal.setHref('http://maps.google.com/mapfiles/kml/shapes/triangle.png');
iconNormal = ge.createStyle('styleIconNormal' + counter);
iconNormal.getIconStyle().setIcon(normal);
// Create icon highlight for style map
var highlight = ge.createIcon('');
highlight.setHref('http://maps.google.com/mapfiles/kml/shapes/square.png');
iconHighlight = ge.createStyle('styleIconHighlight' + counter);
iconHighlight.getIconStyle().setIcon(highlight);
// Set normal and highlight for stylemap
map.setNormalStyleUrl('#styleIconNormal' + counter);
map.setHighlightStyleUrl('#styleIconHighlight' + counter);
// Apply to placemark
placemark.setStyleUrl('#styleMap' + counter);
If you have KML code, you can use the Google Earth Plug-in to parse it. Use the ge.parseKml object to convert KML into JavaScript. The following is an example of KML used to create The Pentagon:
var pentagon = ge.parseKml(
'<?xml version="1.0" encoding="UTF-8"?>' +
'<kml xmlns="http://earth.google.com/kml/2.1">' +
' <Placemark>' +
' <name>The Pentagon</name>' +
' <Polygon>' +
' <extrude>1</extrude>' +
' <altitudeMode>relativeToGround</altitudeMode>' +
' <outerBoundaryIs>' +
' <LinearRing>' +
' <coordinates>' +
' -77.05788457660967,38.87253259892824,100 ' +
' -77.05465973756702,38.87291016281703,100 ' +
' -77.05315536854791,38.87053267794386,100 ' +
' -77.05552622493516,38.868757801256,100 ' +
' -77.05844056290393,38.86996206506943,100 ' +
' -77.05788457660967,38.87253259892824,100' +
' </coordinates>' +
' </LinearRing>' +
' </outerBoundaryIs>' +
' <innerBoundaryIs>' +
' <LinearRing>' +
' <coordinates>' +
' -77.05668055019126,38.87154239798456,100 ' +
' -77.05542625960818,38.87167890344077,100 ' +
' -77.05485125901024,38.87076535397792,100 ' +
' -77.05577677433152,38.87008686581446,100 ' +
' -77.05691162017543,38.87054446963351,100 ' +
' -77.05668055019126,38.87154239798456,100' +
' </coordinates>' +
' </LinearRing>' +
' </innerBoundaryIs>' +
' </Polygon>' +
' </Placemark>' +
'</kml>');
// add the parsed object to Earth
ge.getFeatures().appendChild(pentagon);
var la = ge.createLookAt('');
la.set(38.867, -77.0565, 500, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 45, 900);
ge.getView().setAbstractView(la);
View parseKml Example
View parseKml Example (Interactive)
Here is what the example looks like in Google Earth:
The Google Earth Plug-in supports dioramas (scenes, reproduced in three dimensions). When a 3D model is imported into Google Earth, it is translated, rotated, and scaled to fit into the Earth coordinate system.
The following example loads and displays a COLLADA model:
// Placemark
var placemark = ge.createPlacemark('');
placemark.setName('model');
// Placemark/Model (geometry)
var model = ge.createModel('');
placemark.setGeometry(model);
// Placemark/Model/Link
var link = ge.createLink('');
link.setHref('http://earth-api-samples.googlecode.com/svn/trunk/examples/' +
'static/splotchy_box.dae');
model.setLink(link);
// get center look at location
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
// Placemark/Model/Location
var loc = ge.createLocation('');
loc.setLatitude(lookAt.getLatitude());
loc.setLongitude(lookAt.getLongitude());
model.setLocation(loc);
// add the model placemark to Earth
ge.getFeatures().appendChild(placemark);
// zoom into the model
lookAt.setRange(300);
lookAt.setTilt(80);
ge.getView().setAbstractView(lookAt);
You can create an application that display objects in the sky, such as stars, constellations, planets, the Earth's moon, and galaxies. When the application switches to Sky mode, Google Earth transitions to show the sky above the user's current location on Earth (the zenith). The celestial data is mapped onto the inside of a virtual sphere that surrounds the Earth.
Celestial coordinates are described in terms of right ascension (RA) and declination. Right ascension, which corresponds to longitude, represents a distance from the point in the sky where the sun crosses the celestial equator at the vernal equinox. Right ascension is measured from 0 to 24 hours, with one hour of RA equal to the amount the sky rotates above a given point on the Earth's surface in one hour of time. Zero hours of RA is at the point of the vernal equinox, with RA increasing eastward from that point.
Use the following set method to change a map that is displayed in Google Earth to Sky:
ge.getOptions().setMapType(ge.MAP_TYPE_SKY);
Use the following set method to change a map that is displayed in Sky to Google Earth:
ge.getOptions().setMapType(ge.MAP_TYPE_EARTH);
Declination coordinates correspond directly to latitude values, ranging from −90° south of the celestial equator to +90° north of the celestial equator.
When you use the LookAt object with sky data, you will need to perform the following calculations to determine the range. The basic formula is as follows:
r = R*(k*sin(β/2) - cos(β/2) + 1)
where
Note: The Google Calculator is a handy tool for making such calculations.
Here are some sample ranges:
If you are a Google Maps developer and want to enhance your maps with Google Earth, you can. The Google Maps API now includes a new method for the GMap2 class and a new constant for GMapType that let you include Google Earth's 3D functionality into your existing maps.
In the following example, a new Earth button is available on a standard Google Map.
When you click Earth, the map appears as it would in Google Earth.
The following code shows how that map is created:
<!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>Using Google Earth API with the Maps API</title>
<script src="http://www.google.com/jsapi?key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
google.load('maps', '2');
function initialize() {
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GHierarchicalMapTypeControl());
// add the Earth map type
map.addMapType(G_SATELLITE_3D_MAP);
// uncomment the following line to start the map in 3D mode.
//map.setMapType(G_SATELLITE_3D_MAP);
// obtain a pointer to the Google Earth instance attached to your map.
map.getEarthInstance(getEarthInstanceCB);
}
var ge;
function getEarthInstanceCB(pluginInstance) {
ge = pluginInstance;
// you can now manipulate ge using the full Google Earth API.
}
/* ]]> */
</script>
</head>
<body onload="initialize()" onunload="GUnload">
<div id="map" class="map" style="width:500px;height:350px"></div>
</body>
</html>
View Maps/Earth Integration Demo
You can call gMap.addMapType(G_SATELLITE_3D_MAP) to add a the new map type to your existing Google Map. If you include a map control, this new map type displays as a button labeled Earth. When a user clicks this button, Google Earth displays. Markers, polylines, and info windows added to the map will work in Google Earth. You can also call gMap.setMapType(G_SATELLITE_3D_MAP) to change the map type to Earth explicitily. To hide Google Earth, call gMap.setMapType() with a different map type.