Linking Displays
Multiple RealEarth displays can be linked so that each reflects the cursor position of the others, and they can optionally share geographical roaming and zoom properties. Products can be swapped between the views using the 
Swap control.
Keywords
| Center |
Flag to set center linking |
Boolean |
true,false |
true |
| Crosshair |
Flag to set crosshair display |
Boolean |
true,false |
true |
| Master |
Flag to set master ViewController |
Boolean |
true,false |
false |
| Zoom |
Flag to set zoom linking |
Boolean |
true,false |
true |
Code
Link multiple RealEarth ViewControllers using the GroupController:
<!-- Establish DIVs -->
<div style="position:absolute;width:300px;display:inline-block;">
<div id="re_canvas_sub1"style="width:300px;height:300px;border:1px solid black;">Loading...</div>
<div id="re_canvas_sub2" style="width:300px;height:300px;border:1px solid black;margin-top:10px;">Loading...</div>
</div>
<div style="position:relative;left:312px;">
<div id="re_canvas_main" style="width:600px;height:612px;border:1px solid black;">Loading...</div>
</div>
<!-- Initialize ViewControllers and GroupController -->
<script src="https://re.ssec.wisc.edu/js/RELoader.js"></script>
<script src="https://re.ssec.wisc.edu/js/REGroupController.js"></script>
<script>
var optionsSub1 = {
ui: false,
bounds: '42,-93,47.5,-86.5',
products: 'globalvis.75'
}
var reControllerSub1 = new ssec.realearth.ViewController('re_canvas_sub1', optionsSub1);
var optionsSub2 = {
ui: false,
bounds: '42,-93,47.5,-86.5',
products: 'globalwv.75'
}
var reControllerSub2 = new ssec.realearth.ViewController('re_canvas_sub2', optionsSub2);
var optionsMain = {
ui: true,
selector: 'mini',
bounds: '42,-93,47.5,-86.5',
products: 'globalir.75,nexrhres'
}
var reControllerMain = new ssec.realearth.ViewController('re_canvas_main', optionsMain);
var groupOptions = {
zoom: false,
center: true,
crosshair: true
}
var groupOptionsMain = {
zoom: false,
center: true,
crosshair: true,
master: true
}
var groupController = new ssec.realearth.GroupController();
groupController.addController(reControllerSub1, groupOptions);
groupController.addController(reControllerSub2, groupOptions);
groupController.addController(reControllerMain, groupOptionsMain);
</script>
Example