source: cowsclient/trunk/cowsclient/templates/wmsviz.html @ 5851

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

Added some code to display the split axis selects when the xml file is included in the getCapabilities metadata.

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
3<html xmlns:py="http://genshi.edgewall.org/" 
4      xmlns="http://www.w3.org/1999/xhtml"
5      xmlns:xi="http://www.w3.org/2001/XInclude">
6       
7<!-- xi:include href="utils.html" / -->
8
9<?python
10    from pylons import config
11
12    #check if we should use the minified version of the yui javascript
13    minified_yui_javascript = config.get('minified_yui_javascript', 'true').lower() == 'true'
14?>
15
16
17<head>
18
19<link type="text/css" rel="stylesheet" href="$g.server/layout/ndg2.css"/>
20<link type="text/css" rel="stylesheet" href="$g.server/layout/ddc_style.css"/>
21<link type="text/css" rel="stylesheet" href="$g.server/layout/ddc_vis.css"/>
22<link type="text/css" rel="stylesheet" href="$g.server/layout/temp_fix.css"/>
23<link type="text/css" rel="stylesheet" href="$g.server/layout/open_layers_map.css"/>
24
25<!--  script type='text/javascript'
26        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script --> 
27
28
29<!-- BEGIN: Yahoo Interface Library -->
30
31<!-- css files -->
32<link type="text/css" rel="stylesheet" href="$g.server/js/yui_2.7.0b/treeview/assets/skins/sam/treeview.css"/> 
33<link rel="stylesheet" type="text/css" href="$g.server/js/yui_old_treeview_style/treeview-menu.css"/> 
34<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/fonts/fonts.css" />
35
36<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/button/assets/skins/sam/button.css" />
37<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/autocomplete/assets/skins/sam/autocomplete.css" />
38
39<!-- Dependency source files --> 
40
41<py:choose test="minified_yui_javascript">
42  <py:when test="False">
43 
44    <script type="text/javascript" src ="$g.server/js/yui_2.7.0b/yahoo/yahoo.js" ></script> 
45    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/event/event.js"></script>
46    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dom/dom.js" ></script>
47   
48    <!-- YUI treevieew  --> 
49    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/treeview/treeview.js" ></script> 
50   
51    <!-- YUI drag and drop  -->
52    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/utilities/utilities.js" ></script>
53    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop.js" ></script>
54   
55    <!-- YUI autocomplete -->
56    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation.js"></script>
57    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/element/element.js"></script>
58    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/button/button.js"></script>
59    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/datasource/datasource.js"></script>
60    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/autocomplete/autocomplete.js"></script>
61 
62  </py:when>
63  <py:otherwise>
64
65    <!-- minified js code -->
66    <script type="text/javascript" src ="$g.server/js/yui_2.7.0b/yuiloader-dom-event/yuiloader-dom-event.js" ></script> 
67   
68    <!-- YUI treevieew  --> 
69    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/treeview/treeview-min.js" ></script> 
70   
71    <!-- YUI drag and drop  -->
72    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/utilities/utilities.js" ></script>
73    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop-min.js" ></script>
74   
75    <!-- YUI autocomplete -->
76    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation-min.js"></script>
77    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/element/element-min.js"></script>
78    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/button/button-min.js"></script>
79    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/datasource/datasource-min.js"></script>
80    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/autocomplete/autocomplete-min.js"></script> 
81 
82  </py:otherwise>
83</py:choose>
84
85
86<!-- END: Yahoo Interface Library -->
87
88<link type="text/css" rel="stylesheet" href="$g.server/layout/drag_drop_style.css"/>
89<script type="text/javascript" src = "$g.server/js/dragAndDrop.js" ></script> 
90
91<!-- BEGIN: WMSC library -->
92<link type="text/css" rel="stylesheet" href="$g.server/layout/control.css"/>
93
94
95<script type="text/javascript" src="$g.server/js/toggleDiv.js"></script>
96<script type="text/javascript" src="$g.server/js/wmsc.js"></script>
97<script type="text/javascript" src="$g.server/js/prototype.js"></script>
98<script type="text/javascript" src="${h.getOpenLayersImportPath()}"></script>
99<script type="text/javascript" src="$g.server/js/LoadingPanel.js"></script>
100
101<script type="text/javascript" src="$g.server/js/utils.js"></script>
102
103<script type="text/javascript" src="$g.server/js/openlayers-x.js"></script>
104<script type="text/javascript" src="$g.server/js/mapControl.js"></script>
105<script type="text/javascript" src="$g.server/js/layerControl.js"></script> 
106<script type="text/javascript" src="$g.server/js/capabilities.js"></script>
107<script type="text/javascript" src="$g.server/js/wcs.js"></script>
108
109<script type="text/javascript" src="$g.server/js/displayOptionsRetriever.js"></script>
110<script type="text/javascript" src="$g.server/js/json2.js"></script>
111
112<script type="text/javascript" src="$g.server/js/layerList.js"></script>
113
114<link rel="stylesheet" type="text/css" href="$g.server/layout/bottom_controls.css" />
115
116<!-- The layer properties stuff -->
117
118<link rel="stylesheet" type="text/css" href="$g.server/layout/layer_properties.css" />
119<link rel="stylesheet" type="text/css" href="$g.server/layout/yui_autocomplete.css" />
120
121<script type="text/javascript" src="$g.server/js/layerInformation.js"></script>
122<script type="text/javascript" src="$g.server/js/layerDisplayOptions.js"></script>
123<script type="text/javascript" src="$g.server/js/splitAxisConfig.js"></script>
124<script type="text/javascript" src="$g.server/js/splitAxisSelect.js"></script>
125
126<script type="text/javascript" src="$g.server/js/ajaxRetriever.js"></script>
127<script type="text/javascript" src="$g.server/js/axisConfigRetriever.js"></script>
128
129<script type="text/javascript" src="$g.server/js/layerDimensions.js"></script>
130<script type="text/javascript" src="$g.server/js/layerParameters.js"></script>
131
132<script type="text/javascript" src="$g.server/js/figureBuilder.js"></script>
133
134<script type="text/javascript" src="$g.server/js/legendContainer.js"></script>
135<script type="text/javascript" src="$g.server/js/boundsControl.js"></script>
136<script type="text/javascript" src="$g.server/js/wmcRetriever.js"></script>
137
138<script type="text/javascript" src="$g.server/js/layerDefaultSetter.js"></script>
139<script type="text/javascript" src="$g.server/js/outlineControl.js"></script>
140
141<!-- END: WMSC library -->
142<script type="text/javascript">
143
144YAHOO.util.Event.throwErrors = true;
145
146// Hook into application for debugging.   
147var app = null;
148var control = null;
149var layerList = null;
150var layerParameters = null;
151
152var initialStatus = ${h.jsonParseIfNotEmpty(c.initialStatus)};
153
154var eventsManager = null;
155
156<?python
157from pylons import session 
158?>   
159
160function init() {
161
162    var initialSetupJSON = "${c.initialSetupJSON}";
163
164    var wmcRetriever = new WMCRetriever();
165
166        var initialBounds = new OpenLayers.Bounds(-180,-90,180,90);
167
168    var allEvents = [];
169
170    allEvents = allEvents.concat(LayerList.prototype.EVENTS_RAISED,
171                                 LayerParameters.prototype.EVENTS_RAISED,
172                                 WMSC.VisAppLayers.prototype.EVENT_TYPES,
173                                 WMSC.VisApp.prototype.EVENT_TYPES,
174                                 WMSC.BoundsControl.prototype.EVENT_TYPES,
175                                 OutlineControl.prototype.EVENT_TYPES);
176
177    eventsManager =  new OpenLayers.Events(null, null,  allEvents);
178
179    WMSC.log(allEvents);
180             
181        layerList = new LayerList('layer_list', eventsManager); 
182    layerParameters = new LayerParameters('layer_properties', 'selection_form', wmcRetriever, initialStatus.HiddenDisplayOptions, eventsManager);
183   
184    var legendContainer = new LegendContainer('legend', eventsManager);
185    var downloadControl = new WCSDownloadControl('wcsdownloadDiv', initialBounds, eventsManager);
186    var figBuilder = new FigureBuilder('figureForm','make_figure_btn', initialBounds, eventsManager);
187    var outlineControl = new OutlineControl('add_outline', eventsManager, initialStatus.OutlineSettings);
188    var boundsControl = new WMSC.BoundsControl('dims', initialBounds, eventsManager);
189    var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves',wmcRetriever, 'new_endpoint', 'add_new_endpoint', initialStatus.DefaultLayerParms, eventsManager); 
190    app = new WMSC.VisApp('map', 10, 640, true, initialBounds, eventsManager);
191
192    var initialEndpoints = JSON.parse(initialSetupJSON);
193
194    outlineControl.addNewOutline();
195       
196    for (var i=0;i&lt;initialEndpoints.length;i++) {
197        var endpoint = initialEndpoints[i];
198
199        if (endpoint.layers != undefined) {
200                layerControl.addLayersToSelect(endpoint.url, endpoint.layers);
201        }
202       
203        layerControl.addWebMapContext(endpoint.url);
204    }
205
206    // build endpoint autocomplete
207    Utils.makeCombobox("new_endpoint", "endpoint_toggle", "endpoint_options", initialStatus.WMSEndpointsList);
208   
209}
210
211
212function cleanup() 
213{
214    if ( app !== null) {
215        app.destroy();
216    }
217   
218    if (layerList !== null) {
219        layerList.destroy();
220    }
221
222    if (eventsManager !== null) {
223        eventsManager.destroy();
224    }
225}
226   
227<!--! Help Icons -->
228<span py:def="helpIcon(value, elementType = 'div')">
229      <span>
230         <a href="javascript:;" title="Toggle help" onclick="toggleDiv(1,'$value','shown','hidden','$elementType'); return false;">
231         <img src="$g.helpIcon" alt="Toggle help" class="helpicon"/></a>
232      </span>
233</span>   
234
235</script>
236
237    <title> COWS client </title>
238</head>
239
240<body onload="init()" onunload="cleanup()" class="yui-skin-sam">
241
242<div id="entirepage">
243
244<div id="visBody">
245    <!--  <input type="button" value="debug" id="dbg"></input>  -->
246        <table>
247          <tr>
248            <td align="center">
249                <div id="mapBox">
250                    <div id="map"></div>
251                </div>
252            </td>
253            <td valign="top">
254              <div class="optDiv">
255                <b>Selection Description</b>
256                <div id="description">
257                  Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')" /> 
258                </div>
259              </div>
260               
261                <div id="coord_help" class="hidden">
262                  <div class="helptxt">
263                        Specifying coordinate dimensions will select a region on the map;
264                        when this is appropriately sized, the map will automatically zoom to this region.<br/>
265                        'Reset selection' will return the map to its full, global size.<br/>
266                        Some map layers have additional dimensions, e.g. 'time';
267                        if these are available, they will also be displayed in this panel for selection.<br/>
268                        NB, the dimensions displayed are those relating to the selected dataset
269                        in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers.
270                </div>
271              </div>   
272               
273              <div class="optDiv">
274                <b>Domain</b>
275                    <div id="dims"></div>
276              </div>
277            <div class="wcsDiv">
278                <b>Download Data for this Selection</b>
279                    <div id="wcsdownloadDiv"></div>
280                    <br/>
281                <b>Generate Figure</b> 
282            <br />
283                    <form id="figureForm" action="$g.server/wmsviz/get_figure" method="get">
284                      <!--  <b>Plot type</b><br/>
285                      <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/>
286                      <input type="radio" name="figType" value="bw"/>B/W Contour<br/> -->
287              <div>
288                      <select name="figFormat">
289                        <option value="image/png" selected="1"> PNG </option>
290                        <option value="image/jpeg"> JPEG </option>
291                        <option value="image/gif"> GIF </option>
292                        <option value="application/postscript"> EPS </option>
293                        <option value="image/svg+xml"> SVG </option>
294                      </select>
295                      <input type="button" value="Make Figure" id="make_figure_btn"/>
296              </div>
297                    </form>
298                   
299            </div>
300           
301           
302           
303            </td>
304          </tr>
305        </table>
306
307        <table class="controlTable">
308            <col id="datasets_column"/>
309        <col id="layer_column"/>
310        <col id="properties_column"/>
311                 
312                <tr class="controlHeadings">
313                <th>Dataset  <span py:replace="helpIcon('dataset_help')"/> 
314                </th> 
315                <th> Layer <span py:replace="helpIcon('layer_help')"/></th>
316                <th> Properties</th>   
317                </tr>
318                <tr>
319                        <td>
320                            <div id="dataset_help" class="hidden">
321                                  <div class="helptxt">
322                                        Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer'
323                                        panel for visualisation.<br/> 
324                                        Remove datasets from the display by clicking their <img src="$g.server/js/img/close.gif" alt="close" /> icon.
325                                </div>
326                            </div>
327                        </td>
328                        <td>
329                            <div id="layer_help" class="hidden">
330                                  <div class="helptxt">
331                                      When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list
332                                      to the top.<br/>
333                                      NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/>
334                                      Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" alt="close" /> icon.
335                                </div>
336                            </div>
337                        </td>
338                </tr>
339                <tr>
340                        <td class="controlPanel">
341               
342                            <div>
343                    Add new WMS:
344                    <span py:replace="helpIcon('endpoint_help', 'div')"> </span> 
345                   
346                    <div id="endpoint_autocomplete" style="display:inline;">
347                        <input id="new_endpoint" type="text" ></input> <span id="endpoint_toggle"></span>
348                        <div id="endpoint_options"></div>
349                    </div >
350                   
351                    <input type="button" id="add_new_endpoint" value="Add"/>
352                </div>
353               
354                <div id="endpoint_help" class="hidden">
355                  <div class="helptxt">
356                    You can add new datasets from other OGC Web Map Servers (WMS) here. Just add the base service URL  (without the WMS parameters) <br/>
357                    e.g. http://myserver.com/mywms
358                 </div>
359                </div>
360                <div class="controlContent" id="layerTree">
361                                 No datasets loaded.
362                        </div>
363                <input type="button" id="add_outline" value="Add Outline Layer"/>
364                        </td>
365                        <td class="controlPanel">
366                            <div class="controlContent" id="layerLeaves">
367
368                                <div class="workarea">
369                                    <ul class="draglist" id="layer_list">
370                            <li>list empty</li>
371                                    </ul>
372                                </div>
373                            <input type="button" value="Remove Selected" id="btn_remove_selected_layer" />
374                            </div>
375                        </td>
376            <td class="controlPanel">
377           
378                            <div id="layer_properties">
379                   
380                                           <div id="legend"></div> 
381                   
382                            <div id="layer_info_container">
383                                       <form id='layer_info_form'>
384                                       </form>
385                                    </div>
386       
387                            <div id="layer_display_options_container">     
388                                                    <form id='selection_form'>
389                                                    </form>
390                                            </div>
391                                           
392                                            <div id="layer_dimensions_container">
393                                                    <form id="WMSC_dimForm">
394                                                    </form>
395                                            </div>
396                                           
397                   
398                            </div>
399            </td>
400                </tr>
401        </table>
402       
403</div>
404</div>
405</body>
406</html>
Note: See TracBrowser for help on using the repository browser.