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

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

Split the layer parameters objects content up into 3 different object, layerDimensions, layerInfo and layerDisplayOptions. This was done to simplify the code and to allow the display options to be re-built when the style is changed.

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    <for py:for="i in session['viewItems']" class="dataset" py:strip="True">
111        <span py:if="i.wmcURL" py:strip="True">
112            layerControl.addWebMapContext("${i.wmcURL}");
113        </span>
114    </for>
115   
116    app = new WMSC.VisApp('map', 10, 640, true);
117
118    app.addLayersHandlers(layerList.events);
119
120    app.addBoundsControl(boundsControl);
121
122    if (document.getElementById('wcsdownload') == null) {
123        //createDownloadButton(wcsdownloadDiv);   
124        }
125   
126}
127
128function cleanup() 
129{
130    app.destroy();
131}
132   
133<!--! Help Icons -->
134<span py:def="helpIcon(value, elementType = 'div')">
135       <span>
136          <a href="javascript:;" title="Toggle help" onclick="toggleDiv(1,'$value','shown','hidden','$elementType'); return false;">
137          <img src="$g.helpIcon" alt="Toggle help" class="helpicon"/></a>
138       </span>
139</span>
140   
141
142</script>
143
144<!--<replace py:replace="pagehead()"/> -->
145</head>
146
147<body onload="init()" onunload="cleanup()">
148    <div id="entirepage">
149    <!--<div py:replace="header()"/>  -->
150    <!-- <div py:replace="PageTabs('View')"/> -->
151    <!-- <div py:replace="searchOneLine()"/> -->
152
153<div id="visBody">
154        <table>
155          <tr>
156            <td align="center">
157                <div id="mapBox">
158                    <div id="map"></div>
159                    <div id="legend"></div>
160                </div>
161            </td>
162            <td valign="top">
163              <div class="optDiv">
164                <b>Selection Description</b>
165                <div id="description">
166                  Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')"/> 
167                </div>
168              </div>
169               
170                <div id="coord_help" class="hidden">
171                  <div class="helptxt">
172                        Specifying coordinate dimensions will select a region on the map;
173                        when this is appropriately sized, the map will automatically zoom to this region.<br/>
174                        'Reset selection' will return the map to its full, global size.<br/>
175                        Some map layers have additional dimensions, e.g. 'time';
176                        if these are available, they will also be displayed in this panel for selection.<br/>
177                        NB, the dimensions displayed are those relating to the selected dataset
178                        in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers.
179                </div>
180              </div>   
181               
182              <div class="optDiv">
183                <b>Domain</b>
184                    <div id="dims"></div>
185              </div>
186            <div class="wcsDiv">
187                <b>Download Data for this Selection</b>
188                    <div id="wcsdownloadDiv"></div>
189              </div>
190           
191            <form id="figureForm">
192              <b>Plot type</b><br/>
193              <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/>
194              <input type="radio" name="figType" value="bw"/>B/W Contour<br/>
195              <b>Format</b><br/>
196              <select name="figFormat">
197                <option value="image/png" name="figFormat" selected="1"> PNG </option>
198                <option value="image/jpeg" name="figFormat"> JPEG </option>
199                <option value="application/postscript" name="figFormat"> EPS </option>
200                <option value="image/svg+xml" name="figFormat"> SVG </option>
201              </select>
202              <input type="button" value="Make Figure" 
203                  onclick="app.makeFigure(this.parentNode.figType, this.parentNode.figFormat)"/>
204            </form>
205           
206            </td>
207          </tr>
208        </table>
209
210        <table class="controlTable">
211                <tr class="controlHeadings">
212                <th>Dataset  <span py:replace="helpIcon('dataset_help')"/> 
213                </th> 
214                <th>Layer <span py:replace="helpIcon('layer_help')"/></th>
215                <th>Properties</th>   
216                </tr>
217                <tr>
218                        <td>
219                            <div id="dataset_help" class="hidden">
220                                  <div class="helptxt">
221                                        Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer'
222                                        panel for visualisation.<br/> 
223                                        Remove datasets from the display by clicking their <img src="$g.server/js/img/close.gif" /> icon.
224                                </div>
225                            </div>
226                        </td>
227                        <td>
228                            <div id="layer_help" class="hidden">
229                                  <div class="helptxt">
230                                      When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list
231                                      to the top.<br/>
232                                      NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/>
233                                      Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" /> icon.
234                                </div>
235                            </div>
236                        </td>
237                </tr>
238                <tr>
239                        <td class="controlPanel">
240                             <div class="controlContent" id="layerTree">
241                                 Please wait while datasets load
242                             </div>
243                <div>
244                    New Endpoint:<input type="text" id="new_endpoint" > </input> <input type="button" id="add_new_endpoint" value="Add"/>
245                </div>                       
246                        </td>
247                        <td class="controlPanel">
248                            <div class="controlContent" id="layerLeaves">
249
250                                <div class="workarea">
251                                    <ul class="draglist" id="layer_list">
252                                    </ul>
253                                    <input type="button" value="Remove Selected" id="btn_remove_selected_layer" />
254                                </div>
255                            </div>
256                        </td>
257            <td class="controlPanel">
258           
259                            <div id="layer_properties">
260                   
261                   
262                   
263                            <div id="layer_info_container">
264                                       <form id='layer_info_form'>
265                                       </form>
266                                    </div>
267       
268                            <div id="layer_display_options_container">     
269                                                    <form id='selection_form'>
270                                                    </form>
271                                            </div>
272                                           
273                                            <div id="layer_dimensions_container">
274                                                    <form id="WMSC_dimForm">
275                                                    </form>
276                                            </div>
277                                           
278                   
279                            </div>
280            </td>
281                </tr>
282        </table>
283       
284       
285
286   
287
288
289</div>
290</div>
291</body>
292</html>
Note: See TracBrowser for help on using the repository browser.