44543b3e36
git-svn-id: http://svn.openlayers.org/trunk/openlayers@5533 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
127 lines
3.7 KiB
HTML
127 lines
3.7 KiB
HTML
<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>
|