Linked Displays


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

Key Description Format Values Default
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://realearth.ssec.wisc.edu/js/RELoader.js"></script> <script src="https://realearth.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

Loading...
Loading...
Loading...