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

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

Accidently committed the wrong openlayers path.

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