| 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> |
|---|
