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

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

added test for bbox

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