RealEarth™ Instance
RealEarth can be embedded in an existing webpage by creating a <div> object and passing an initialization object with the desired parameter values.
Code
Create a new RealEarth object from a <div>:
<!-- Establish DIV -->
<div id="re_canvas" style="width:800px;height:600px;">RealEarth</div>
<!-- Initialize ViewController -->
<script src="http://clouds.ssec.wisc.edu/js/RELoader.js"></script>
<script>
var options = {
ui: true,
selector: true,
products: 'G16-C14',
center: '38,-97',
zoom: '4'
}
var reController = new ssec.realearth.ViewController('re_canvas', options);
</script>
Example
Google Maps Overlay Layer
Individual RealEarth layers can be added to an existing Google Map using a custom overlay layer.
Code
Overlay layer provider:
function RELayerProvider(product, opacity, date, time) {
this.tileSize = new google.maps.Size(256, 256);
this.maxZoom = 10;
this.tiles = {};
// Google Maps calls this to get the tile image
this.getTile = function(p, z, ownerDocument) {
var tileID = p.x + '_' + p.y + '_' + z;
if (this.tiles[tileID]) {
return this.tiles[tileID];
}
var products = product;
if (date && time) {
products += '_' + date + '_' + time;
}
if (opacity) {
products += '.' + opacity;
}
var tileURL = document.location.protocol+'//epscloud.ssec.wisc.edu';
tileURL+= '/api/image?products=' + products;
tileURL+= '&x=' + p.x + '&y=' + p.y + '&z=' + z;
var tile = ownerDocument.createElement('img');
tile.id = tileID;
tile.src = tileURL;
this.tiles[tileID] = tile;
return(tile);
}
// Google Maps calls this to release the tile image
this.releaseTile = function(tileNode) {
this.tiles[tileNode.id] = null;
}
}
Google Maps API call to add the overlay layer (Where googleMap is an existing Google Maps object):
var REOverlay = new RELayerProvider('globalir', 50);
googleMap.overlayMapTypes.push(REOverlay);
Example