Javascript API


The Javascript API provides an interface to the View Controller object. An instance of the ssec.realearth.ViewController class provided by RELoader.js must be initialized with an existing DOM element and optional dictionary of initialization parameters. Custom Product Selector interfaces can be built using the properties and methods defined in this document.

Initialization with no parameters provides a fully functional user interface.
<script type="application/javascript" src="https://re-ngfs.ssec.wisc.edu/js/RELoader.js"></script> <div id="re_canvas">Loading RealEarth...</div> <script type="application/javascript"> $(document).ready(function() { var reController = new ssec.realearth.ViewController('re_canvas'); });
Optional parameters control the features and UI presentation of the View Controller and Product Selector.
<script type="application/javascript" src="https://re-ngfs.ssec.wisc.edu/js/RELoader.js"></script> <div id="re_canvas">Loading RealEarth...</div> <script type="application/javascript"> $(document).ready(function() { var options = { products: 'lf-fbfm13', center: '43,-89', basemap: 'bw', labels: 'latlongrid', zoom: 4, ui: false } var reController = new ssec.realearth.ViewController('re_canvas', options); });

Optional Parameters

Key Description Format Values Default
animate Flag to specify Animation Boolean true,false  
animationmode Animation mode Mode type time,layer time
animationrock Flag to specify Animation rocking Boolean true,false  
animationspeed Animation speed Number 0-100 50
basemap Initial basemap to display Basemap ID bw,wb,filled,[Components],(Product ID)  
basemaps Basemaps to be made available (Basemap ID),... See basemap list  
bounds Initial lat/lon bounds of display South,West,North,East West negative  
center Latitude and longitude to display Latitude,Longitude West negative 38,-97
centerproduct Product to set center Product ID    
centervalue Value to set center ID value    
collection Initial collection to display Collection ID See collection list
databounds Lat/lon bounds of the data to load (shape data only) South,West,North,East West negative  
keyboard Flag to control keyboard interaction Boolean true,false -1
labels Label to use in display Label ID line,latlongrid,[Components]  
legend Flag to set legend display Boolean true,false 1
preloaddata Flag to control preload of next frame Boolean true,false -1
products Products to display (Product ID),...  
selector Flag to enable/disable Product Selector Boolean true,false 1
time Anchor time for display and animation Y-M-D H:m[:s] Absolute time  
timeproduct Product to define animation times Product ID    
timerange Time range for animation Y-M-D h:m[:s],Y-M-D h:m[:s] Absolute time range  
timespan Time span relative to anchor for animation period #(dhmst)[,#(dhmst)] Relative time or time range 6t
timestep Time step for animation #(dhms) Relative time 1h
ui Flag to enable/disable the User Interface Boolean true,false 1
waitdata Flag to control wait for data before next frame Boolean true,false -1
zoom Initial zoom level of display Number 1-20 4

View Controller

The ssec.realearth.ViewController class provides these methods and properties for interacting with the product layers it manages.

Product Layers

Methods:

Time and Geographic Dimensions

Methods:

Animation

Methods:

Custom Product Selector

To supply custom controls you must supply a new class (eg. MyProductSelector) that conforms to the calling signatures as outlined in this section.
<script type="application/javascript" src="https://re-ngfs.ssec.wisc.edu/js/RELoader.js"></script> <div id="re_canvas">Loading RealEarth...</div> <script type="application/javascript"> $(document).ready(function() { var options = { selector: false, ui: true } var reController = new ssec.realearth.ViewController('re_canvas', options); var mySelector = new MyProductSelector(reController); reController.setSelectorObject(mySelector); });