RealEarth™ Embedding

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>

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);

RealEarth™ Instance

Code

Example

Google Maps Overlay Layer

Code

Example