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

{% extends "base.html" %} 
        {% block extra_head %}
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">

    <script type="text/javascript">
                var box_extents = [[-10,50,4,62]];
        var map;
                var vectorLayer = new OpenLayers.Layer.Vector("Overlay",{isBaseLayer:false});
            function init() {
                        map = new OpenLayers.Map('map');
                        var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );
                        
                        var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
    
            for (var i = 0; i < box_extents.length; i++) {
                    ext = box_extents[i];
                                        console.log(ext[0],ext[1])
                    bounds = new OpenLayers.Bounds(ext[0],ext[1],ext[2],ext[3]);
                                

                    box = new OpenLayers.Feature.Vector(bounds.toGeometry());
                                        
                    boxes.addFeatures(box);

                }
                                
        map.addLayer([ol_wms,boxes]);
                                                                console.log('ere')
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        var sf = new OpenLayers.Control.SelectFeature(boxes);
        map.addControl(sf);
        sf.activate();
                var proj = new OpenLayers.Projection("EPSG:4326");
                var point = new OpenLayers.LonLat(ext[0], ext[1]);
                point.transform(proj, map.getProjectionObject());

                map.setCenter(point,3);
        map.zoomToMaxExtent();
                }
                window.onload = init;
      </script>

        
    {% endblock %}

{% block title %} CEDA Observation Record {% endblock %}
    
{% block main %}

<script type="text/javascript">
        require(['ceda/cedaObservation']);
</script>

<div id = "upper_section" class="grid_12 whiteFill">
  <h4>Search Results</h4>
  <div class="grid_2" id="cedaObsLogo"></div> <!-- End of div cedaObsLogo -->
  <div class="grid_8 " id="upper_middle">
        
        <div class="grid_8 alpha cedaObs" id="upper_middle_top">
                <label for="title">Title</label><div id="title_id" class = "coObs_cite"></div>  <br />
                <label for="citation">Citation</label><div id="citation_id"></div><br />
                <label for="keywords">Keywords</label><div id="keywords_id"></div><br />
        </div> <!-- End of div upper_middle_top -->

  </div>    
</div>  


<div id = "middle_section" class="grid_12 whiteFill">
        <div class="grid_3 cedaobs alpha" id="middleLeft cedaObs">
                <script type="text/javascript">
                        require(["dojo/parser", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane"]);
                </script>
        
                <div data-dojo-type="dijit.layout.AccordionContainer">
                        <div data-dojo-type="dijit.layout.ContentPane" title="Sample Data">
            <p>Link to some Sample Data </p>
        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Download & Services" selected="true">
            <p>Links to download and data services </p>
        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Apply for Access">
            <p>This is a restricted dataset. To obtain access please use this link:</p>
        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Help">
            <p>To contact the CEDA Helpdesk please use the <a href="http://www.ceda.ac.uk/contact">Contact Us page.</a></p>
        </div>
                </div>
        </div>  
        <div class="grid_5 cedaObs" id="middleMiddle">
                <div class="grid_5 alpha" id="description">
                        <label for="description">Description</label><div id="description_id"></div>
                        <br />
                </div><!-- End of div description -->
                <div class="grid_5 omega" id="news">
                         <p>News bar</p>
                </div><!-- End of div news -->
        </div>    
        <div class="grid_3 cedaObs omega" id="middleRight">
                <label for="geographicExtent">Geographic Extent</label><div id="geographicalExtent_id"></div> <br />
                <!-- begin map test -->
        <div style="width:220px; height:150px" id="map" class="smallmap"></div>

                <!-- end map test -->

                <label for="resolution">Resolution</label><div id="resolution_id"></div> <br /> 
   </div> <!-- End of div upper_right -->
</div> <!-- End of div upper_section -->


<div id="lower_section" class="grid_12 whiteFill">

  
    <div id="lower_tab1" class="grid_7 cedaObs" style="height:300px">

                <script type="text/javascript">
                        /* require necessary classes */
                        dojo.require('dijit.layout.TabContainer');
                        dojo.require('dijit.layout.ContentPane');
                        dojo.require('dijit.form.Button');
                        
                        /* when all classes have loaded... */
                        dojo.ready(function() {
                                /* 
                                        don't need to do anything programmatically!
                                        parseOnLoad and dojoType does the magic!
                                */
                        });
                </script>

        <!-- will host all tabs and their content panes -->
                <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
                
                
                        <!-- content panes: title is tab name, make this tab selected -->
                        <div dojoType="dijit.layout.ContentPane" title="Parameters" selected="true">                    
                        <p>Parameter List to go in here</p>                     
                </div>
                
                        <!-- content panes: title is tab name, no special features here -->
                        <div dojoType="dijit.layout.ContentPane" title="Format">
                        <p>Details of format to go in here</p>
                </div>
                
                        <!-- content panes: title is tab name, make this tab closable -->
                        <div dojoType="dijit.layout.ContentPane" title="Data Quality">
                        <p>Quality Statement goes in here</p>
                </div>
                
                        <!-- content panes: title is tab name, load content remotely, preload -->
                        <div dojoType="dijit.layout.ContentPane" title="Data Lineage">
                        <p><label for="id_dataLineage">Data Lineage</label><div id="records_dataLineage"></div> <br /> <br /></p>
                </div>
                
                </div>

        </div> <!-- End of div lower_tab1 -->
    <div id="lower_side" class="grid_4 cedaObs">
                <h5><i>Additional Information:</i></h5>
                
                <div data-dojo-type="dijit.layout.AccordionContainer">
                        <div data-dojo-type="dijit.layout.ContentPane" title="Related Data">
                                <p>Links to related data products</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Project Details" selected="true">
                                <p>Link to Project</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Data Production Details">
                                <p>Link to Procedure</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Documentation and Links">
                                <p>Links to external documentation and sites</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Archive content details">
                                <p>Links to external documentation and sites</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="File list and Checksums">
                                <label for="relatedParty">Related Parties</label><div id="relatedParty"></div><br />

                        </div>
                </div>          
    </div> <!-- End of div lower_side -->
</div> <!-- End of div lower_section -->
<div class="corner-content-1col-bottom"></div>  

{% endblock %}