[OpenLayers-Users] Can't remove point feature OL 2.6
Fred van Beelen
fred at waterwegwijzer.nl
Wed Apr 23 13:15:17 EDT 2008
Hi list,
I try to remove a point feature in OL 2.6. Line and polyline works OK in
FF2 and IE7.
"selectFeature" works OK in OL 2.5.
Removing the first point works but after then
This code example is based on modify-feature.html OL 2.6.
What's wrong and how can I do this properly?
Regards,
Fred van Beelen BICT
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Modify Feature</title>
<link rel="stylesheet" href="../theme/default/style.css"
type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 350px;
border: 1px solid gray;
}
#controls {
width: 512px;
}
#controlToggle {
padding-left: 1em;
}
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/Firebug/firebug.js"></script>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, vectors, controls;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers:
'basic'});
OpenLayers.Feature.Vector.style['default']['strokeWidth'] =
'2';
vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayers([wms, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
// Add **********
var removeOptions = {
clickout: true,
onSelect: featureRemove, // call API removeFeatures()
toggle: false,
multiple: false,
hover: false
// toggleKey: "ctrlKey",
// multipleKey: "shiftKey"
};
// **************
var modifyOptions = {
onModificationStart: function(feature) {
OpenLayers.Console.log("start modifying",
feature.id);
},
onModification: function(feature) {
OpenLayers.Console.log("modified", feature.id);
},
onModificationEnd: function(feature) {
OpenLayers.Console.log("end modifying", feature.id);
},
onDelete: function(feature) {
OpenLayers.Console.log("delete", feature.id);
}
};
controls = {
point: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon),
regular: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.RegularPolygon, {handlerOptions: {sides: 5}}),
modify: new OpenLayers.Control.ModifyFeature(vectors,
modifyOptions ),
remove: new OpenLayers.Control.SelectFeature(vectors,
removeOptions) // Add *********
};
for(var key in controls) {
map.addControl(controls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;
}
function update() {
// reset modification mode
controls.modify.mode =
OpenLayers.Control.ModifyFeature.RESHAPE;
var rotate = document.getElementById("rotate").checked;
if(rotate) {
controls.modify.mode |=
OpenLayers.Control.ModifyFeature.ROTATE;
}
var resize = document.getElementById("resize").checked;
if(resize) {
controls.modify.mode |=
OpenLayers.Control.ModifyFeature.RESIZE;
}
var drag = document.getElementById("drag").checked;
if(drag) {
controls.modify.mode |=
OpenLayers.Control.ModifyFeature.DRAG;
}
// disable reshape mode if at least one of modes rotate,
resize,
// drag is enabled
if (rotate || resize || drag) {
controls.modify.mode &=
~OpenLayers.Control.ModifyFeature.RESHAPE;
}
var sides =
parseInt(document.getElementById("sides").value);
sides = Math.max(3, isNaN(sides) ? 0 : sides);
controls.regular.handler.sides = sides;
var irregular =
document.getElementById("irregular").checked;
controls.regular.handler.irregular = irregular;
}
function toggleControl(element) {
for(key in controls) {
var control = controls[key];
if(element.value == key && element.checked) {
if (element.value == 'remove') {
controls.modify.mode=null; } // Add *******
if (element.value == 'modify') { update(); }
// Add *******
control.activate();
} else {
control.deactivate();
}
}
}
// Add ****************
function featureRemove(feature) {
var x = confirm("Remove?");
if (x==true) {
vectors.removeFeatures(feature);
}
}
// *********************
</script>
</head>
<body onload="init()">
<h3 id="title">OpenLayers Modify Feature Example</h3>
<div id="shortdesc">A demonstration of the ModifyFeature control for
editing vector features.</div>
<div id="map"></div>
<div id="controls">
<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="point"
id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
<li>
<input type="radio" name="type" value="line"
id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">draw line</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="regular"
id="regularToggle" onclick="toggleControl(this);" />
<label for="regularToggle">draw regular polygon</label>
<label for="sides"> - sides</label>
<input id="sides" type="text" size="2" maxlength="2"
name="sides" value="5" onchange="update()" />
<ul>
<li>
<input id="irregular" type="checkbox"
name="irregular" onchange="update()" />
<label for="irregular">irregular</label>
</li>
</ul>
</li>
<li>
<input type="radio" name="type" value="modify"
id="modifyToggle" onclick="toggleControl(this);" />
<label for="modifyToggle">modify feature</label>
<ul>
<li>
<input id="rotate" type="checkbox"
name="rotate" onchange="update()" />
<label for="rotate">allow rotation</label>
</li>
<li>
<input id="resize" type="checkbox"
name="resize" onchange="update()" />
<label for="resize">allow resizing</label>
</li>
<li>
<input id="drag" type="checkbox" name="drag"
onchange="update()" />
<label for="drag">allow dragging</label>
</li>
</ul>
</li>
<li>
<input type="radio" name="type" value="remove"
id="removeToggle" onclick="toggleControl(this);" />
<label for="modifyToggle">remove feature</label>
</li>
</ul>
</div>
</body>
</html>
More information about the Users
mailing list