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

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

Forgot to include this file with the last commit.

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<link rel="stylesheet" type="text/css" href="$g.server/layout/bottom_controls.css" />
60
61<!-- The layer properties stuff -->
62
63<link rel="stylesheet" type="text/css" href="$g.server/layout/layer_properties.css" />
64
65<script src="$g.server/js/layerInformation.js"></script>
66<script src="$g.server/js/layerDisplayOptions.js"></script>
67<script src="$g.server/js/layerDimensions.js"></script>
68<script src="$g.server/js/layerParameters.js"></script>
69
70<script src="$g.server/js/figureBuilder.js"></script>
71
72<script src="$g.server/js/legendContainer.js"></script>
73<script src="$g.server/js/boundsControl.js"></script>
74<script src="$g.server/js/utils.js"></script>
75<script src="$g.server/js/wmcRetriever.js"></script>
76
77<!-- END: WMSC library -->
78
79<script type="text/javascript">
80
81// Hook into application for debugging.   
82var app = null;
83var control = null;
84var layerList = null;
85var layerParameters = null;
86
87<?python
88from pylons import session 
89?>   
90
91function alertWMC(wmc) {
92        //alert("wmc = " + wmc);
93}
94
95function init() 
96{
97
98        var initialSetupJSON = "${c.initialSetupJSON}";
99        var baseLayerJSON = "${c.baseLayerJSON}";
100
101        var baseLayerData = JSON.parse(baseLayerJSON);
102       
103        WMSC.log("baseLayerData.url = " + baseLayerData.url);
104        WMSC.log("baseLayerData.params = " + baseLayerData.params);
105       
106       
107    var wmcRetriever = new WMCRetriever();
108       
109        layerList = new LayerList('layer_list');       
110    layerParameters = new LayerParameters('layer_properties', 'selection_form', wmcRetriever);
111   
112    var legendContainer = new LegendContainer('legend');
113
114    var figBuilder = new FigureBuilder('figureForm','make_figure_btn');
115
116   
117    var boundsControl = new WMSC.BoundsControl('dims');
118   
119    var coordControl = null;
120    var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves',wmcRetriever, 'new_endpoint', 'add_new_endpoint'); 
121
122
123    figBuilder.addLayerOrderChangedHandlers(layerList.events);   
124    layerList.addSelectorHandlers(layerControl.events);
125    layerParameters.addLayerListHandlers(layerList.events);
126    legendContainer.addLayerParametersHandlers(layerParameters.events);
127   
128    app = new WMSC.VisApp('map', 10, 640, true, baseLayerData.url, baseLayerData.params);
129
130    boundsControl.addMapSelectionChanged(app.events)
131    figBuilder.addMapSelectionChangedHandlers(app.events);
132   
133    app.addLayersHandlers(layerList.events);
134
135    app.addBoundsControl(boundsControl);
136
137    if (document.getElementById('wcsdownload') == null) {
138        createDownloadButton(document.getElementById('wcsdownloadDiv'));   
139    }
140   
141   
142   
143
144    var initialEndpoints = JSON.parse(initialSetupJSON);
145
146    for (var i=0;i&lt;initialEndpoints.length;i++) {
147        var endpoint = initialEndpoints[i];
148
149        if (endpoint.layers != undefined) {
150                layerControl.addLayersToSelect(endpoint.url, endpoint.layers);
151        }
152       
153        layerControl.addWebMapContext(endpoint.url);
154       
155    }
156
157
158   
159}
160
161function cleanup() 
162{
163    app.destroy();
164    layerList.destroy();
165    layerParameters.destroy();
166}
167   
168<!--! Help Icons -->
169<span py:def="helpIcon(value, elementType = 'div')">
170      <span>
171         <a href="javascript:;" title="Toggle help" onclick="toggleDiv(1,'$value','shown','hidden','$elementType'); return false;">
172         <img src="$g.helpIcon" alt="Toggle help" class="helpicon"/></a>
173      </span>
174</span>   
175
176</script>
177
178<!--<replace py:replace="pagehead()"/> -->
179</head>
180
181<body onload="init()" onunload="cleanup()">
182    <div id="entirepage">
183    <!--<div py:replace="header()"/>  -->
184    <!-- <div py:replace="PageTabs('View')"/> -->
185    <!-- <div py:replace="searchOneLine()"/> -->
186
187<div id="visBody">
188        <table>
189          <tr>
190            <td align="center">
191                <div id="mapBox">
192                    <div id="map"></div>
193                    <div id="legend"></div>
194                </div>
195            </td>
196            <td valign="top">
197              <div class="optDiv">
198                <b>Selection Description</b>
199                <div id="description">
200                  Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')"/> 
201                </div>
202              </div>
203               
204                <div id="coord_help" class="hidden">
205                  <div class="helptxt">
206                        Specifying coordinate dimensions will select a region on the map;
207                        when this is appropriately sized, the map will automatically zoom to this region.<br/>
208                        'Reset selection' will return the map to its full, global size.<br/>
209                        Some map layers have additional dimensions, e.g. 'time';
210                        if these are available, they will also be displayed in this panel for selection.<br/>
211                        NB, the dimensions displayed are those relating to the selected dataset
212                        in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers.
213                </div>
214              </div>   
215               
216              <div class="optDiv">
217                <b>Domain</b>
218                    <div id="dims"></div>
219              </div>
220            <div class="wcsDiv">
221                <b>Download Data for this Selection</b>
222                    <div id="wcsdownloadDiv"></div>
223              </div>
224           
225           
226            <form id="figureForm" action="http://localhost:5005/wmsviz/get_figure" method="get" target="_blank">
227              <b>Plot type</b><br/>
228              <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/>
229              <input type="radio" name="figType" value="bw"/>B/W Contour<br/>
230              <b>Format</b><br/>
231              <select name="figFormat">
232                <option value="image/png" name="figFormat" selected="1"> PNG </option>
233                <option value="image/jpeg" name="figFormat"> JPEG </option>
234                <option value="application/postscript" name="figFormat"> EPS </option>
235                <option value="image/svg+xml" name="figFormat"> SVG </option>
236              </select>
237              <input type="button" value="Make Figure" id="make_figure_btn"/>
238            </form>
239           
240            </td>
241          </tr>
242        </table>
243
244        <table class="controlTable">
245            <col id="datasets_column"/>
246        <col id="layer_column"/>
247        <col id="properties_column"/>
248                 
249                <tr class="controlHeadings">
250                <th>Dataset  <span py:replace="helpIcon('dataset_help')"/> 
251                </th> 
252                <th> Layer <span py:replace="helpIcon('layer_help')"/></th>
253                <th> Properties</th>   
254                </tr>
255                <tr>
256                        <td>
257                            <div id="dataset_help" class="hidden">
258                                  <div class="helptxt">
259                                        Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer'
260                                        panel for visualisation.<br/> 
261                                        Remove datasets from the display by clicking their <img src="$g.server/js/img/close.gif" /> icon.
262                                </div>
263                            </div>
264                        </td>
265                        <td>
266                            <div id="layer_help" class="hidden">
267                                  <div class="helptxt">
268                                      When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list
269                                      to the top.<br/>
270                                      NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/>
271                                      Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" /> icon.
272                                </div>
273                            </div>
274                        </td>
275                </tr>
276                <tr>
277                        <td class="controlPanel">
278                             <div class="controlContent" id="layerTree">
279                                 Please wait while datasets load
280                             </div>
281                <div>
282                    New Endpoint:<input type="text" id="new_endpoint" > </input> <input type="button" id="add_new_endpoint" value="Add"/>
283                </div>                       
284                        </td>
285                        <td class="controlPanel">
286                            <div class="controlContent" id="layerLeaves">
287
288                                <div class="workarea">
289                                    <ul class="draglist" id="layer_list">
290                                    </ul>
291                                </div>
292                            <input type="button" value="Remove Selected" id="btn_remove_selected_layer" />
293                            </div>
294                        </td>
295            <td class="controlPanel">
296           
297                            <div id="layer_properties">
298                   
299                   
300                   
301                            <div id="layer_info_container">
302                                       <form id='layer_info_form'>
303                                       </form>
304                                    </div>
305       
306                            <div id="layer_display_options_container">     
307                                                    <form id='selection_form'>
308                                                    </form>
309                                            </div>
310                                           
311                                            <div id="layer_dimensions_container">
312                                                    <form id="WMSC_dimForm">
313                                                    </form>
314                                            </div>
315                                           
316                   
317                            </div>
318            </td>
319                </tr>
320        </table>
321       
322       
323
324   
325
326
327</div>
328</div>
329</body>
330</html>
Note: See TracBrowser for help on using the repository browser.