source: mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaObservation.html @ 8211

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaObservation.html@8211
Revision 8211, 6.6 KB checked in by gparton, 9 years ago (diff)

Adding in Graham's amendments to ceda Obs views and js, plus search page content

Line 
1{% extends "base.html" %}
2        {% block extra_head %}
3        <script src="http://openlayers.org/api/OpenLayers.js"></script>
4        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
5
6    <script type="text/javascript">
7                var box_extents = [[-10,50,4,62]];
8        var map;
9                var vectorLayer = new OpenLayers.Layer.Vector("Overlay",{isBaseLayer:false});
10            function init() {
11                        map = new OpenLayers.Map('map');
12                        var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );
13                       
14                        var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
15   
16            for (var i = 0; i < box_extents.length; i++) {
17                    ext = box_extents[i];
18                                        console.log(ext[0],ext[1])
19                    bounds = new OpenLayers.Bounds(ext[0],ext[1],ext[2],ext[3]);
20                               
21
22                    box = new OpenLayers.Feature.Vector(bounds.toGeometry());
23                                       
24                    boxes.addFeatures(box);
25
26                }
27                               
28        map.addLayer([ol_wms,boxes]);
29                                                                console.log('ere')
30        map.addControl(new OpenLayers.Control.LayerSwitcher());
31        var sf = new OpenLayers.Control.SelectFeature(boxes);
32        map.addControl(sf);
33        sf.activate();
34                var proj = new OpenLayers.Projection("EPSG:4326");
35                var point = new OpenLayers.LonLat(ext[0], ext[1]);
36                point.transform(proj, map.getProjectionObject());
37
38                map.setCenter(point,3);
39        map.zoomToMaxExtent();
40                }
41                window.onload = init;
42      </script>
43
44       
45    {% endblock %}
46
47{% block title %} CEDA Observation Record {% endblock %}
48   
49{% block main %}
50
51<script type="text/javascript">
52        require(['ceda/cedaObservation']);
53</script>
54
55<div id = "upper_section" class="grid_12 whiteFill">
56  <h4>Search Results</h4>
57  <div class="grid_2" id="cedaObsLogo"></div> <!-- End of div cedaObsLogo -->
58  <div class="grid_8 " id="upper_middle">
59       
60        <div class="grid_8 alpha cedaObs" id="upper_middle_top">
61                <label for="title">Title</label><div id="title_id" class = "coObs_cite"></div>  <br />
62                <label for="citation">Citation</label><div id="citation_id"></div><br />
63                <label for="keywords">Keywords</label><div id="keywords_id"></div><br />
64        </div> <!-- End of div upper_middle_top -->
65
66  </div>   
67</div> 
68
69
70<div id = "middle_section" class="grid_12 whiteFill">
71        <div class="grid_3 cedaobs alpha" id="middleLeft cedaObs">
72                <script type="text/javascript">
73                        require(["dojo/parser", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane"]);
74                </script>
75       
76                <div data-dojo-type="dijit.layout.AccordionContainer">
77                        <div data-dojo-type="dijit.layout.ContentPane" title="Sample Data">
78            <p>Link to some Sample Data </p>
79        </div>
80                        <div data-dojo-type="dijit.layout.ContentPane" title="Download & Services" selected="true">
81            <p>Links to download and data services </p>
82        </div>
83                        <div data-dojo-type="dijit.layout.ContentPane" title="Apply for Access">
84            <p>This is a restricted dataset. To obtain access please use this link:</p>
85        </div>
86                        <div data-dojo-type="dijit.layout.ContentPane" title="Help">
87            <p>To contact the CEDA Helpdesk please use the <a href="http://www.ceda.ac.uk/contact">Contact Us page.</a></p>
88        </div>
89                </div>
90        </div> 
91        <div class="grid_5 cedaObs" id="middleMiddle">
92                <div class="grid_5 alpha" id="description">
93                        <label for="description">Description</label><div id="description_id"></div>
94                        <br />
95                </div><!-- End of div description -->
96                <div class="grid_5 omega" id="news">
97                         <p>News bar</p>
98                </div><!-- End of div news -->
99        </div>   
100        <div class="grid_3 cedaObs omega" id="middleRight">
101                <label for="geographicExtent">Geographic Extent</label><div id="geographicalExtent_id"></div> <br />
102                <!-- begin map test -->
103        <div style="width:220px; height:150px" id="map" class="smallmap"></div>
104
105                <!-- end map test -->
106
107                <label for="resolution">Resolution</label><div id="resolution_id"></div> <br /> 
108   </div> <!-- End of div upper_right -->
109</div> <!-- End of div upper_section -->
110
111
112<div id="lower_section" class="grid_12 whiteFill">
113
114 
115    <div id="lower_tab1" class="grid_7 cedaObs" style="height:300px">
116
117                <script type="text/javascript">
118                        /* require necessary classes */
119                        dojo.require('dijit.layout.TabContainer');
120                        dojo.require('dijit.layout.ContentPane');
121                        dojo.require('dijit.form.Button');
122                       
123                        /* when all classes have loaded... */
124                        dojo.ready(function() {
125                                /*
126                                        don't need to do anything programmatically!
127                                        parseOnLoad and dojoType does the magic!
128                                */
129                        });
130                </script>
131
132        <!-- will host all tabs and their content panes -->
133                <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
134               
135               
136                        <!-- content panes: title is tab name, make this tab selected -->
137                        <div dojoType="dijit.layout.ContentPane" title="Parameters" selected="true">                   
138                        <p>Parameter List to go in here</p>                     
139                </div>
140               
141                        <!-- content panes: title is tab name, no special features here -->
142                        <div dojoType="dijit.layout.ContentPane" title="Format">
143                        <p>Details of format to go in here</p>
144                </div>
145               
146                        <!-- content panes: title is tab name, make this tab closable -->
147                        <div dojoType="dijit.layout.ContentPane" title="Data Quality">
148                        <p>Quality Statement goes in here</p>
149                </div>
150               
151                        <!-- content panes: title is tab name, load content remotely, preload -->
152                        <div dojoType="dijit.layout.ContentPane" title="Data Lineage">
153                        <p><label for="id_dataLineage">Data Lineage</label><div id="records_dataLineage"></div> <br /> <br /></p>
154                </div>
155               
156                </div>
157
158        </div> <!-- End of div lower_tab1 -->
159    <div id="lower_side" class="grid_4 cedaObs">
160                <h5><i>Additional Information:</i></h5>
161               
162                <div data-dojo-type="dijit.layout.AccordionContainer">
163                        <div data-dojo-type="dijit.layout.ContentPane" title="Related Data">
164                                <p>Links to related data products</p>
165                        </div>
166                        <div data-dojo-type="dijit.layout.ContentPane" title="Project Details" selected="true">
167                                <p>Link to Project</p>
168                        </div>
169                        <div data-dojo-type="dijit.layout.ContentPane" title="Data Production Details">
170                                <p>Link to Procedure</p>
171                        </div>
172                        <div data-dojo-type="dijit.layout.ContentPane" title="Documentation and Links">
173                                <p>Links to external documentation and sites</p>
174                        </div>
175                        <div data-dojo-type="dijit.layout.ContentPane" title="Archive content details">
176                                <p>Links to external documentation and sites</p>
177                        </div>
178                        <div data-dojo-type="dijit.layout.ContentPane" title="File list and Checksums">
179                                <label for="relatedParty">Related Parties</label><div id="relatedParty"></div><br />
180
181                        </div>
182                </div>         
183    </div> <!-- End of div lower_side -->
184</div> <!-- End of div lower_section -->
185<div class="corner-content-1col-bottom"></div> 
186
187{% endblock %}
Note: See TracBrowser for help on using the repository browser.