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

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

Fixed the wcsdownload bounding box selection map so that it works with the new bounds control.

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