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

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

Removed some unused parameters form the map control.

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, 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.