Embedding


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://realearth.ssec.wisc.edu/js/RELoader.js"></script> <script> var options = { ui: true, selector: true, products: 'globalir.50,nexrhres.80', center: '38,-97', zoom: '4' } var reController = new ssec.realearth.ViewController('re_canvas', options); </script>

Example

Loading...

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+'//realearth.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

Loading...