[OpenLayers-Users] Can't remove point feature OL 2.6
Fred WaterWegWijzer
fred at waterwegwijzer.nl
Sun Apr 27 12:48:00 EDT 2008
Hi Eric,
Sorry for the encrypted message.
My Englisch has a little lack of knowledge, but this message was
incomplete.
I hope this one is clear.
I'm develop a application with add, modify en remove functionality.
In OL 2.5 I use drag, modify and remove feature. That works OK!
In OL 2.6 I get an error when removing a second or next point.
First:
I add points (or a combination of points and lines) to the vector layer.
Second:
If I remove a point it works OK.
If I want to remove a second point, I get this error: 'this.multipleKey
has no properties' SelectFeature.js Line 191 (FF2 and IE7)
Something changed the mode. If you hover the second or other points the
cursor is changed to drag mode.
In FF2 after I add a new point, I still get the error but the point is
removed. In IE7 only the error is displayed.
If I remove a Line or Polyline it works OK.
(based on the example/modify-feature.html.
Remove functionality look at Add comments.)
Regards, Fred
-----Oorspronkelijk bericht-----
Van: Eric Lemoine [mailto:eric.c2c at gmail.com]
Verzonden: vrijdag 25 april 2008 22:44
Aan: Fred van Beelen
CC: users at openlayers.org
Onderwerp: Re: [OpenLayers-Users] Can't remove point feature OL 2.6
On Wed, Apr 23, 2008 at 7:15 PM, Fred van Beelen
<fred at waterwegwijzer.nl> wrote:
> 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?
Fred,
Would you mind being more specific on the issue you're having. I'm
having problem understanding what's bothering you.
Thanks,
--
Eric
<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