source: cows_wps/trunk/cows_wps/public/test/test_bbox_map_select.html @ 6125

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows_wps/trunk/cows_wps/public/test/test_bbox_map_select.html@6125
Revision 6125, 4.6 KB checked in by astephen, 11 years ago (diff)

Got bounding box added to MIDAS extractors. And in doing so they will work for all.

Line 
1<html>
2
3<head>
4
5    <script src="../js/ui/map_select/wmsc.js"></script>
6    <script src="../js/ui/map_select/OpenLayers.js"></script>
7   
8    <!-- The DDCVismap Openlayers map -->
9    <script src="../js/ui/map_select/openlayers-x.js"></script>
10   
11    <!-- The original bounds control -->
12    <script src="../js/ui/map_select/boundsControl.js"></script>
13   
14    <script src="../js/ui/map_select/utils.js"></script>
15   
16    <script src="../js/ui/map_select/boundingBoxMapSelect.js"></script>
17   
18    <script defer="defer" type="text/javascript">
19
20        var events = new OpenLayers.Events(null, null, ['LAYER_ORDER_CHANGED']);   
21
22        var baseLayerData = [
23        {
24            "url": "http://labs.metacarta.com/wms/vmap0", 
25            "params": {
26                "layers": "basic",
27                "transparent":"false", 
28                "format": "image/png"
29            }
30        },
31        {
32            "url": "http://labs.metacarta.com/wms/vmap0", 
33            "params": {
34                    "layers": "coastline_01", 
35                    "format": "image/png",
36                    "transparent":"true"
37            }
38        },
39        {
40            "url": "http://labs.metacarta.com/wms/vmap0", 
41            "params": {
42                    "layers": "coastline_02", 
43                    "format": "image/png",
44                    "transparent":"true"
45            }
46        }       
47        ];
48
49        var baseLayerData2 = {
50                "url": "http://labs.metacarta.com/wms/vmap0", 
51                "params": {
52                        "layers": "coastline_01", 
53                        "format": "image/png",
54                        "transparent":"true"
55                }
56        };       
57                   
58        var originalBoundsControlMarkup = '\
59        <div id="WMSC_sel" class="WMSC_domain">\
60        <table>\
61          <tr>\
62            <td colspan="2" align="center">\
63              <input type="text" name="bboxN" size="4" value="90"/><br/>N\
64            </td>\
65          </tr>\
66          <tr>\
67           <td><input type="text" name="bboxW" size="4" value="-180"/> W</td>\
68           <td>E <input type="text" name="bboxE" size="4" value="180"/></td>\
69          </tr>\
70          <tr><td colspan="2" align="center">S<br/>\
71                <input type="text" name="bboxS" size="4" value="-90"/>\
72              </td></tr>\
73        </table>\
74        <input id="WMSC_clear" type="button" value="Reset selection"/>\
75        </div>';
76
77
78        var bboxSelect = null;
79       
80        function init() {
81            makeBoundsControl();
82        }
83
84        function makeBoundsControl() {
85
86            var changeChk = document.getElementById('chk_changeBoundsControl');
87
88            document.getElementById('bbox_hidden_input').value ="";
89            document.getElementById('bounds_control_container').innerHTML ="";
90            document.getElementById('map').innerHTML ="";
91            document.getElementById('bbox_show_val').innerHTML = "";
92
93            if (bboxSelect !== null) {
94                bboxSelect.dispose();
95            }
96           
97            var data = null;
98            var bboxHiddenInput = null;
99            var bboxShowValue = null;
100            var boundsMarkup = null;
101           
102            if (changeChk.checked) {
103                data = baseLayerData2
104                bboxHiddenInput = 'bbox_hidden_input';
105                boundsMarkup = originalBoundsControlMarkup;
106            }
107            else {
108                // have the bounds printed to the <span id="bbox_show_val"></span>
109                bboxShowValue = 'bbox_show_val';
110                data = baseLayerData
111            }
112           
113            bboxSelect = new BoundingBoxMapSelect('map', 'bounds_control_container', data, 
114                              bboxHiddenInput, bboxShowValue, boundsMarkup);
115                       
116        }
117       
118    </script>
119   
120    <style type="text/css">
121   
122        #map{
123            width:640px;
124            height:320px;
125            border:1px solid black;
126        }
127               
128        #bbox_sel_bounds_container .input_item {
129            float:left;
130            padding-right:20px;
131        }
132       
133    </style>
134</head>
135
136<body onload="init();">
137
138    Alternative options <input type="checkbox" id="chk_changeBoundsControl" onClick="makeBoundsControl();"></input> <br />
139
140    <div id="bounding_container">
141   
142        <h4>Bounding Box</h4>   
143        <div> BBox = <span id="bbox_show_val"></span></div> 
144        <div id="bounds_control_container"></div>
145       
146        <div id="map_container">
147            <div id='map'></div>
148        </div>   
149
150        <input type="hidden" name='bbox' id='bbox_hidden_input' />
151    </div>
152
153
154
155   
156
157</body>
158
159</html>
Note: See TracBrowser for help on using the repository browser.