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

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

added in rest of error handling for ndg security and fixed bug in wmsviz template

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