source: cowsclient/cowsclient/templates/wmsviz.html @ 5270

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

adding templates

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
9<!-- BEGIN: Yahoo Interface Library -->
10<link type="text/css" rel="stylesheet"
11        href="$g.server/js/yui/treeview/assets/skins/sam/treeview.css"/> 
12         
13<!-- Dependency source files --> 
14<script src = "$g.server/js/yui/yahoo/yahoo-min.js" ></script> 
15<script src = "$g.server/js/yui/event/event-min.js" ></script> 
16 
17<!-- TreeView source file --> 
18<script src = "$g.server/js/yui/treeview/treeview-min.js" ></script> 
19
20<!-- TreeView Menu Style -->
21<link rel="stylesheet" type="text/css" href="$g.server/js/yui/treeview/assets/treeview-menu.css"/> 
22
23<link rel="stylesheet" type="text/css" href="$g.server/js/yui/fonts/fonts-min.css?_yuiversion=2.5.0" />
24<script type="text/javascript" src="$g.server/js/yui/utilities/utilities.js?_yuiversion=2.5.0"></script>
25
26<script type="text/javascript" src="$g.server/js/yui/yahoo-dom-event/yahoo-dom-event.js" ></script> 
27<script type="text/javascript" src="$g.server/js/yui/dragdrop/dragdrop-min.js" ></script>
28<link type="text/css" rel="stylesheet" href="$g.server/layout/drag_drop_style.css"/>
29<script src = "$g.server/js/dragAndDrop.js" ></script> 
30
31<!-- END: Yahoo Interface Library -->
32
33<!-- BEGIN: WMSC library -->
34<link type="text/css" rel="stylesheet" href="$g.server/layout/control.css"/>
35
36<script src="$g.server/js/wmsc.js"></script>
37<script src="$g.server/js/prototype.js"></script>
38<script src="http://www.openlayers.org/api/2.4/OpenLayers.js"></script>
39<script src="$g.server/js/openlayers-x.js"/>
40<script src="$g.server/js/dimensionControl.js"/>
41<script src="$g.server/js/mapControl.js"/>
42<script src="$g.server/js/layerControl.js"></script>
43<script src="$g.server/js/capabilities.js"></script>
44<script src="$g.server/js/wcs.js"></script>
45<!-- END: WMSC library -->
46
47<script type="text/javascript">
48
49// Hook into application for debugging.   
50var app = null;
51var control = null;
52
53<?python
54from pylons import session 
55?>     
56       
57function init() 
58{
59    var coordControl = new WMSC.DimControl('dims');
60    var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves', coordControl); 
61        <for py:for="i in session['viewItems']" class="dataset" py:strip="True">
62        <span py:if="i.wmcURL" py:strip="True">
63                layerControl.addWebMapContext("${i.wmcURL}");
64            </span>
65    </for>
66    app = new WMSC.VisApp('map', 10, 640, true);
67    app.addDimensionControl(coordControl);
68    app.addLayerControl(layerControl); 
69        if (document.getElementById('wcsdownload') == null) {
70                createDownloadButton(wcsdownloadDiv);   
71                }       
72}
73
74function cleanup() 
75{
76    app.destroy();
77}
78
79</script>
80
81<!--<replace py:replace="pagehead()"/> -->
82</head>
83
84<body onload="init()" onunload="cleanup()">
85        <div id="entirepage">
86    <!--<div py:replace="header()"/>  -->
87        <!-- <div py:replace="PageTabs('View')"/> -->
88    <!-- <div py:replace="searchOneLine()"/> -->
89
90<div id="visBody">
91      <div id="coord_help" class="hidden">
92        <div class="helptxt">
93                                Specifying coordinate dimensions will select a region on the map;
94                                when this is appropriately sized, the map will automatically zoom to this region.<br/>
95                                'Reset selection' will return the map to its full, global size.<br/>
96                                Some map layers have additional dimensions, e.g. 'time';
97                                if these are available, they will also be displayed in this panel for selection.<br/>
98                                NB, the dimensions displayed are those relating to the selected dataset
99                                in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers.
100        </div>
101      </div>
102<table>
103  <tr>
104    <td align="center">
105        <div id="mapBox">
106                        <div id="map"></div>
107                        <div id="legend"></div>
108                </div>
109    </td>
110    <td valign="top">
111      <div class="optDiv">
112        <b>Selection Description</b>
113                <div id="description">
114                  Complete your selection below to view  <span py:replace="helpIcon('coord_help')"/>
115                </div>
116      </div>
117      <div class="optDiv">
118        <b>Domain</b>
119                        <div id="dims"></div>
120      </div>
121        <div class="wcsDiv">
122        <b>Download Data for this Selection</b>
123                        <div id="wcsdownloadDiv"></div>
124      </div>
125    <div class="hiddenDiv">
126        <form id="figureForm">
127          <b>Plot type</b><br/>
128          <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/>
129          <input type="radio" name="figType" value="bw"/>B/W Contour<br/>
130          <b>Format</b><br/>
131          <select name="figFormat">
132            <option value="image/png" name="figFormat" selected="1"> PNG </option>
133            <option value="image/jpeg" name="figFormat"> JPEG </option>
134            <option value="application/postscript" name="figFormat"> EPS </option>
135            <option value="image/svg+xml" name="figFormat"> SVG </option>
136          </select>
137          <input type="button" value="Make Figure" 
138                onclick="app.makeFigure(this.parentNode.figType, this.parentNode.figFormat)"/>
139        </form>
140      </div>
141    </td>
142  </tr>
143</table>
144
145<table class="controlTable">
146<tr class="controlHeadings">
147<th>Dataset  <span py:replace="helpIcon('dataset_help')"/>
148</th>
149<th>Layer <span py:replace="helpIcon('layer_help')"/></th> 
150</tr>
151<tr>
152<td>
153        <div id="dataset_help" class="hidden">
154        <div class="helptxt">
155                        Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer'
156                        panel for visualisation.<br/> 
157                        Remove datasets from the display by clicking their <img src="$g.server/js/img/close.gif" /> icon.
158        </div>
159    </div>
160</td>
161<td>
162        <div id="layer_help" class="hidden">
163        <div class="helptxt">
164                When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list
165                to the top.<br/>
166                NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/>
167                Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" /> icon.
168        </div>
169    </div>
170</td>
171</tr>
172<tr>
173<td class="controlPanel"><div class="controlContent" id="layerTree">
174        Please wait while datasets load</div>
175</td>
176<td class="controlPanel">
177        <div class="controlContent" id="layerLeaves">
178                <div id="layerMessage" class="layerMessage">
179            <span py:if="'viewItems' not in session" py:strip="True">
180                Please select a dataset to view - from the 'Selections' tab.
181            </span>
182            <span py:if="'viewItems' in session" py:strip="True">
183                                Expand a dataset and select a layer to view
184                        </span>
185                </div>
186                <div class="workarea">
187                        <ul class="draglist" id="layerlist">
188                        </ul>
189                </div>
190        </div>
191</td>
192</tr>
193</table>
194
195</div>
196</div>
197</body>
198</html>
Note: See TracBrowser for help on using the repository browser.