source: cowsclient/branches/qesdi/cowsclient/templates/wmsviz.html @ 5522

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cowsclient/branches/qesdi/cowsclient/templates/wmsviz.html@5522
Revision 5522, 9.6 KB checked in by pnorton, 11 years ago (diff)

Made some minor changes to stop the enpoint tree items always being expanded when added via the URL.

Line 
1<html xmlns:py="http://genshi.edgewall.org/" 
2      xmlns="http://www.w3.org/1999/xhtml"
3      xmlns:xi="http://www.w3.org/2001/XInclude">   
4<xi:include href="utils.html" />
5<head>
6<link type="text/css" rel="stylesheet" href="$g.server/layout/ddc_style.css"/>
7<link type="text/css" rel="stylesheet" href="$g.server/layout/ddc_vis.css"/>
8<link type="text/css" rel="stylesheet" href="$g.server/layout/ndg2.css"/>
9<!-- <script type='text/javascript'
10        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> -->
11
12
13<!-- BEGIN: Yahoo Interface Library -->
14<link type="text/css" rel="stylesheet"
15    href="$g.server/js/yui/treeview/assets/skins/sam/treeview.css"/> 
16     
17<!-- Dependency source files --> 
18<script src = "$g.server/js/yui/yahoo/yahoo-min.js" ></script> 
19<script src = "$g.server/js/yui/event/event-min.js" ></script> 
20 
21<!-- TreeView source file --> 
22<script src = "$g.server/js/yui/treeview/treeview-min.js" ></script> 
23
24<!-- TreeView Menu Style -->
25<link rel="stylesheet" type="text/css" href="$g.server/js/yui/treeview/assets/treeview-menu.css"/> 
26
27<link rel="stylesheet" type="text/css" href="$g.server/js/yui/fonts/fonts-min.css?_yuiversion=2.5.0" />
28
29<!-- needed for the drag and drop list -->
30<script type="text/javascript" src="$g.server/js/yui/utilities/utilities.js" ></script>
31<script type="text/javascript" src="$g.server/js/yui/dragdrop/dragdrop.js" ></script>
32
33
34<link type="text/css" rel="stylesheet" href="$g.server/layout/drag_drop_style.css"/>
35<script src = "$g.server/js/dragAndDrop.js" ></script> 
36
37<!-- END: Yahoo Interface Library -->
38
39<!-- BEGIN: WMSC library -->
40<link type="text/css" rel="stylesheet" href="$g.server/layout/control.css"/>
41
42
43<script src="$g.server/js/wmsc.js"></script>
44<script src="$g.server/js/prototype.js"></script>
45<script src="$g.server/js/OpenLayers/lib/OpenLayers.js" />
46<script src="$g.server/js/openlayers-x.js"/>
47<!-- script src="$g.server/js/dimensionControl.js"/ -->
48<script src="$g.server/js/mapControl.js"/>
49<script src="$g.server/js/layerControl.js"></script> 
50<script src="$g.server/js/capabilities.js"></script>
51<script src="$g.server/js/wcs.js"></script>
52
53<script src="$g.server/js/displayOptionsRetriever.js"></script>
54<script src="$g.server/js/legendRetriever.js"></script>
55<script src="$g.server/js/json2.js"></script>
56
57<script src="$g.server/js/layerList.js"></script>
58
59<!-- The layer properties stuff -->
60
61<link rel="stylesheet" type="text/css" href="$g.server/layout/layer_properties.css" />
62
63<script src="$g.server/js/layerInformation.js"></script>
64<script src="$g.server/js/layerDisplayOptions.js"></script>
65<script src="$g.server/js/layerDimensions.js"></script>
66<script src="$g.server/js/layerParameters.js"></script>
67
68<script src="$g.server/js/legendContainer.js"></script>
69<script src="$g.server/js/boundsControl.js"></script>
70<script src="$g.server/js/utils.js"></script>
71<script src="$g.server/js/wmcRetriever.js"></script>
72
73<!-- END: WMSC library -->
74
75<script type="text/javascript">
76
77// Hook into application for debugging.   
78var app = null;
79var control = null;
80
81<?python
82from pylons import session 
83?>   
84
85function alertWMC(wmc) {
86        //alert("wmc = " + wmc);
87}
88
89function init() 
90{
91
92    var wmcRetriever = new WMCRetriever();
93       
94        var layerList = new LayerList('layer_list');
95       
96    var layerParameters = new LayerParameters('layer_properties', 'selection_form', wmcRetriever);
97    console.log("loaded layer params");
98    var legendContainer = new LegendContainer('legend');
99   
100    var boundsControl = new WMSC.BoundsControl('dims');
101   
102    var coordControl = null;
103    var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves',wmcRetriever, 'new_endpoint', 'add_new_endpoint'); 
104   
105    layerList.addSelectorHandlers(layerControl.events);
106    layerParameters.addLayerListHandlers(layerList.events);
107    legendContainer.addLayerListHandlers(layerList.events);
108    legendContainer.addLayerParametersHandlers(layerParameters.events);
109   
110    app = new WMSC.VisApp('map', 10, 640, true);
111
112    app.addLayersHandlers(layerList.events);
113
114    app.addBoundsControl(boundsControl);
115
116    if (document.getElementById('wcsdownload') == null) {
117        //createDownloadButton(wcsdownloadDiv);   
118    }
119
120    var initialSetupJSON = "${c.initialSetupJSON}";
121
122    var initialEndpoints = JSON.parse(initialSetupJSON);
123
124    for (var i=0;i&lt;initialEndpoints.length;i++) {
125        var endpoint = initialEndpoints[i];
126
127        if (endpoint.layers != undefined) {
128                layerControl.addLayersToSelect(endpoint.url, endpoint.layers);
129        }
130       
131        layerControl.addWebMapContext(endpoint.url);
132       
133    }
134
135
136   
137}
138
139function cleanup() 
140{
141    app.destroy();
142}
143   
144   
145
146</script>
147
148<!--<replace py:replace="pagehead()"/> -->
149</head>
150
151<body onload="init()" onunload="cleanup()">
152    <div id="entirepage">
153    <!--<div py:replace="header()"/>  -->
154    <!-- <div py:replace="PageTabs('View')"/> -->
155    <!-- <div py:replace="searchOneLine()"/> -->
156
157<div id="visBody">
158        <table>
159          <tr>
160            <td align="center">
161                <div id="mapBox">
162                    <div id="map"></div>
163                    <div id="legend"></div>
164                </div>
165            </td>
166            <td valign="top">
167              <div class="optDiv">
168                <b>Selection Description</b>
169                <div id="description">
170                  Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')"/> 
171                </div>
172              </div>
173               
174                <div id="coord_help" class="hidden">
175                  <div class="helptxt">
176                        Specifying coordinate dimensions will select a region on the map;
177                        when this is appropriately sized, the map will automatically zoom to this region.<br/>
178                        'Reset selection' will return the map to its full, global size.<br/>
179                        Some map layers have additional dimensions, e.g. 'time';
180                        if these are available, they will also be displayed in this panel for selection.<br/>
181                        NB, the dimensions displayed are those relating to the selected dataset
182                        in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers.
183                </div>
184              </div>   
185               
186              <div class="optDiv">
187                <b>Domain</b>
188                    <div id="dims"></div>
189              </div>
190            <div class="wcsDiv">
191                <b>Download Data for this Selection</b>
192                    <div id="wcsdownloadDiv"></div>
193              </div>
194           
195            <form id="figureForm">
196              <b>Plot type</b><br/>
197              <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/>
198              <input type="radio" name="figType" value="bw"/>B/W Contour<br/>
199              <b>Format</b><br/>
200              <select name="figFormat">
201                <option value="image/png" name="figFormat" selected="1"> PNG </option>
202                <option value="image/jpeg" name="figFormat"> JPEG </option>
203                <option value="application/postscript" name="figFormat"> EPS </option>
204                <option value="image/svg+xml" name="figFormat"> SVG </option>
205              </select>
206              <input type="button" value="Make Figure" 
207                  onclick="app.makeFigure(this.parentNode.figType, this.parentNode.figFormat)"/>
208            </form>
209           
210            </td>
211          </tr>
212        </table>
213
214        <table class="controlTable">
215                <tr class="controlHeadings">
216                <th>Dataset  <span py:replace="helpIcon('dataset_help')"/> 
217                </th> 
218                <th>Layer <span py:replace="helpIcon('layer_help')"/></th>
219                <th>Properties</th>   
220                </tr>
221                <tr>
222                        <td>
223                            <div id="dataset_help" class="hidden">
224                                  <div class="helptxt">
225                                        Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer'
226                                        panel for visualisation.<br/> 
227                                        Remove datasets from the display by clicking their <img src="$g.server/js/img/close.gif" /> icon.
228                                </div>
229                            </div>
230                        </td>
231                        <td>
232                            <div id="layer_help" class="hidden">
233                                  <div class="helptxt">
234                                      When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list
235                                      to the top.<br/>
236                                      NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/>
237                                      Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" /> icon.
238                                </div>
239                            </div>
240                        </td>
241                </tr>
242                <tr>
243                        <td class="controlPanel">
244                             <div class="controlContent" id="layerTree">
245                                 Please wait while datasets load
246                             </div>
247                <div>
248                    New Endpoint:<input type="text" id="new_endpoint" > </input> <input type="button" id="add_new_endpoint" value="Add"/>
249                </div>                       
250                        </td>
251                        <td class="controlPanel">
252                            <div class="controlContent" id="layerLeaves">
253
254                                <div class="workarea">
255                                    <ul class="draglist" id="layer_list">
256                                    </ul>
257                                    <input type="button" value="Remove Selected" id="btn_remove_selected_layer" />
258                                </div>
259                            </div>
260                        </td>
261            <td class="controlPanel">
262           
263                            <div id="layer_properties">
264                   
265                   
266                   
267                            <div id="layer_info_container">
268                                       <form id='layer_info_form'>
269                                       </form>
270                                    </div>
271       
272                            <div id="layer_display_options_container">     
273                                                    <form id='selection_form'>
274                                                    </form>
275                                            </div>
276                                           
277                                            <div id="layer_dimensions_container">
278                                                    <form id="WMSC_dimForm">
279                                                    </form>
280                                            </div>
281                                           
282                   
283                            </div>
284            </td>
285                </tr>
286        </table>
287       
288       
289
290   
291
292
293</div>
294</div>
295</body>
296</html>
Note: See TracBrowser for help on using the repository browser.