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

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

Fixed the wrapping problem with the tree view. Also extracted the menu treeview style from the old yui directory as it isn't included with version 2.7.

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