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

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

Modified the behaviour of the layerList so that new items added are automatically selected and added to the start of the list.

Also implemented an attempt at setting up the initial selection via the URL arguments.

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