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