<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 800px;
height: 350px;
border: 1px solid gray;
}
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls, select;
function onFeatureSelect(feature) {
popup = new OpenLayers.Popup.Anchored("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(250,75),
"<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
null, true);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function onFeatureSelect1(feature) {
popup = new OpenLayers.Popup.Anchored("turkey",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(250,75),
"<div style='font-size:.10em'>Feature1: " + feature.id +"<br />Area1: " + feature.geometry.getArea()+"</div>",
null, true);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect1(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var wmsLayer1 = new OpenLayers.Layer.WMS( "OpenLayers WMS 1",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
var polygonLayer1 = new OpenLayers.Layer.Vector("Polygon Layer1");
map.addLayers([wmsLayer, wmsLayer1, polygonLayer, polygonLayer1]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
drawControls = {
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon),
select: new OpenLayers.Control.SelectFeature(polygonLayer,
{onSelect: onFeatureSelect,
onUnselect: onFeatureUnselect
})
};
drawControls1 = {
polygon: new OpenLayers.Control.DrawFeature(polygonLayer1,
OpenLayers.Handler.Polygon),
select: new OpenLayers.Control.SelectFeature(polygonLayer1,
{onSelect: onFeatureSelect1,
onUnselect: onFeatureUnselect1
})
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
for(var key in drawControls1) {
map.addControl(drawControls1[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function toggleControl1(element) {
for(key in drawControls1) {
var control = drawControls1[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
</script>
</head>
<body onload="init()">
<h1>OpenLayers Draw Feature Example</h1>
<div id="map"></div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle"
onclick="toggleControl(this);" />
<label for="polygonToggle">draw polygon</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle1"
onclick="toggleControl1(this);" />
<label for="polygonToggle1">draw polygon1</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle"
onclick="toggleControl(this);" />
<label for="selectToggle">select polygon on click</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle1"
onclick="toggleControl1(this);" />
<label for="selectToggle1">select polygon1 on click</label>
</li>
</ul>
<p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
to do fun things -- like open a popup.
</p>
</body>
</html>