]> dev.renevier.net Git - syp.git/blob - openlayers/tests/manual/feature-handler.html
initial commit
[syp.git] / openlayers / tests / manual / feature-handler.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>Feature Handler Acceptance Test</title>
4     <style type="text/css">
5     
6         body {
7             font-size: 0.8em;
8         }
9         p {
10             padding-top: 1em;
11         }
12         li {
13             list-style: none;
14         }
15         #output {
16             width: 300px;
17             height: 300px;
18         }
19         #west {
20             width: 425px;
21         }
22
23         #east {
24             position: absolute;
25             left: 450px;
26             top: 5px;
27         }
28         #map {
29             width: 400px;
30             height: 400px;
31             border: 1px solid gray;
32         }
33
34     </style>
35
36     <script src="../../lib/OpenLayers.js"></script>
37     <script type="text/javascript"> 
38
39         var map, draw, handler, controls;
40         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
41
42         function init(){
43             map = new OpenLayers.Map('map');
44
45             var vectors = new OpenLayers.Layer.Vector(
46                 "Vector Layer",
47                 {isBaseLayer: true}
48             );
49             map.addLayer(vectors);
50             
51             
52             draw = new OpenLayers.Control.DrawFeature(
53                 vectors, OpenLayers.Handler.Polygon
54             );
55             map.addControl(draw);
56             
57             var callbacks = {
58                 "over": function(feature) {
59                     log("over " + feature.id);
60                 },
61                 "out": function(feature) {
62                     log("out " + feature.id);
63                 },
64                 "click": function(feature) {
65                     log("click " + feature.id);
66                 },
67                 "dblclick": function(feature) {
68                     log("dblclick " + feature.id);
69                 },
70                 "clickout": function(feature) {
71                     log("clickout " + feature.id);
72                 }
73             };
74             
75             handler = new OpenLayers.Handler.Feature(
76                 {map: map}, vectors, callbacks
77             );
78             
79             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
80
81         }
82         
83         function log(msg) {
84             document.getElementById('output').value += msg + "\n";
85         }
86         
87         function clearLog() {
88             document.getElementById('output').value = "";
89         }
90
91     </script>
92   </head>
93   <body onload="init()">
94     <div id="west">
95         <div id="map"></div>
96         <p>
97             Draw a few polygons on the map.  Some overlapping.  Activate the
98             feature handler and ensure that "over" and "out" are called only
99             when mousing over/out of a feature for the first time.  The
100             "click" callback should be called for every click on a feature.
101             The "clickout" callback should be called when?
102         </p>
103     </div>
104     <div id="east">
105         <ul>
106             <li>
107                 <input type="radio" name="type" value="none" id="noneToggle"
108                        onclick="draw.deactivate();handler.deactivate();" checked="checked" />
109                 <label for="noneToggle">navigate</label>
110             </li>
111             <li>
112                 <input type="radio" name="type" value="polygon" id="polygonToggle"
113                        onclick="draw.activate();handler.deactivate();" />
114                 <label for="polygonToggle">draw polygon</label>
115             </li>
116             <li>
117                 <input type="radio" name="type" value="feature" id="featureToggle"
118                        onclick="draw.deactivate();handler.activate();" />
119                 <label for="featureToggle">activate feature handler</label>
120             </li>
121         </ul>
122         <button onclick="clearLog();">clear log</button><br />
123         <textarea id="output"></textarea>
124     </div>
125   </body>
126 </html>