<HTML><HEAD>
<META content="text/html; charset=UTF-8" http-equiv=Content-Type></HEAD>
<BODY dir=ltr bgColor=#ffffff text=#000000>
<DIV dir=ltr>
<DIV style="FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: 12pt">
<DIV>Hi,</DIV>
<DIV> </DIV>
<DIV>I’ve made a start on modifying the code so it does what i need. However I
need it work in standalone mode, and it seems to exhibit some odd
behaviour.</DIV>
<DIV> </DIV>
<DIV>If I start editing and selecting points it all works fine, but if I click
outside of the polygon (it remains editable since it is in standalone mode)when
I go back to the polygon the click event no longer fires, so I can no longer
select a vertex. </DIV>
<DIV> </DIV>
<DIV>Any ideas what might be causing this?</DIV>
<DIV> </DIV>
<DIV>I’ve pasted the page code below. I have not changed the
modifyFeatureVertexSelection code at all except putting it in a seperate js
file.</DIV>
<DIV> </DIV>
<DIV>Thanks,</DIV>
<DIV> </DIV>
<DIV>Rob Smart</DIV>
<DIV> </DIV>
<DIV><div id="map" style="width:500px; height:500px; " ></div></DIV>
<DIV> <input id="Button4" type="button"
value="Delete Selected Vertex" onclick="deleteSelectedVertex()" /></DIV>
<DIV> </DIV>
<DIV> <script type="text/javascript"></DIV>
<DIV> </DIV>
<DIV> var map, vectors, modify, feature, selectedVertex;</DIV>
<DIV> </DIV>
<DIV> $(document).ready(function () {</DIV>
<DIV> </DIV>
<DIV> map = new OpenLayers.Map('map');</DIV>
<DIV> var wms = new
OpenLayers.Layer.WMS("OpenLayers WMS",</DIV>
<DIV> "<A
href='http://vmap0.tiles.osgeo.org/wms/vmap0?"'>http://vmap0.tiles.osgeo.org/wms/vmap0?"</A>,
{ layers: 'basic' });</DIV>
<DIV>
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';</DIV>
<DIV> </DIV>
<DIV> // allow testing of specific renderers
via "?renderer=Canvas", etc</DIV>
<DIV> var renderer =
OpenLayers.Util.getParameters(window.location.href).renderer;</DIV>
<DIV> renderer = (renderer) ? [renderer] :
OpenLayers.Layer.Vector.prototype.renderers;</DIV>
<DIV> </DIV>
<DIV> var style = $.extend(true, {},
OpenLayers.Feature.Vector.style['default']); // get a copy of the default
style</DIV>
<DIV> style.fillColor = "Red";</DIV>
<DIV> style.fillOpacity = 1;</DIV>
<DIV> </DIV>
<DIV> var myStyleMap = new
OpenLayers.StyleMap({</DIV>
<DIV> "temporary":
new OpenLayers.Style(style)</DIV>
<DIV> });</DIV>
<DIV> </DIV>
<DIV> vectors = new
OpenLayers.Layer.Vector("Vector Layer", {</DIV>
<DIV> renderers:
renderer, styleMap: myStyleMap</DIV>
<DIV> });</DIV>
<DIV> </DIV>
<DIV> map.addLayers([wms, vectors]);</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> feature = new
OpenLayers.Feature.Vector(</DIV>
<DIV>
OpenLayers.Geometry.Polygon.createRegularPolygon(</DIV>
<DIV> new
OpenLayers.Geometry.Point(0, 0),</DIV>
<DIV> 10,</DIV>
<DIV> 5</DIV>
<DIV> ),</DIV>
<DIV> {}</DIV>
<DIV> );</DIV>
<DIV> vectors.addFeatures([feature]);</DIV>
<DIV> </DIV>
<DIV> if (console && console.log)
{</DIV>
<DIV> // register a
callback function to our new "vertexclicked" event</DIV>
<DIV>
vectors.events.on({ "vertexclicked": function report(event) {</DIV>
<DIV>
console.log(event.type, event.feature.id);</DIV>
<DIV> </DIV>
<DIV>
myVertices = feature.geometry.getVertices();</DIV>
<DIV>
realVertex = false;</DIV>
<DIV> </DIV>
<DIV>
//TEST TO SEE IF ITS A REAL VERTEX</DIV>
<DIV>
for (var i = 0; i < myVertices.length; i++) {</DIV>
<DIV>
//console.log(myVertices[i]);</DIV>
<DIV> </DIV>
<DIV>
if (myVertices[i] == event.feature.geometry) { realVertex = true; }</DIV>
<DIV>
//Do something</DIV>
<DIV>
}</DIV>
<DIV> </DIV>
<DIV>
if (realVertex == false) { console.log("virtualVertex"); return; }</DIV>
<DIV> </DIV>
<DIV>
console.log(event.feature)</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>
if (selectedVertex == null) {</DIV>
<DIV>
selectedVertex = event.feature;</DIV>
<DIV>
vectors.drawFeature(event.feature, "temporary");</DIV>
<DIV>
return;</DIV>
<DIV>
}</DIV>
<DIV> </DIV>
<DIV>
if (event.feature == selectedVertex) {</DIV>
<DIV>
vectors.drawFeature(event.feature, "default");</DIV>
<DIV>
selectedVertex = null;</DIV>
<DIV>
return;</DIV>
<DIV>
}</DIV>
<DIV> </DIV>
<DIV>
if (event.feature != selectedVertex) {</DIV>
<DIV>
vectors.drawFeature(selectedVertex, "default");</DIV>
<DIV>
selectedVertex = event.feature;</DIV>
<DIV>
vectors.drawFeature(event.feature, "temporary");</DIV>
<DIV>
}</DIV>
<DIV> </DIV>
<DIV>
// change the color - sure !</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>
//
// do more - popup to delete the vertex</DIV>
<DIV>
//
c = [];</DIV>
<DIV>
//
c.push("Selected feature id: ");</DIV>
<DIV>
//
c.push(vectors.selectedFeatures[0].id);</DIV>
<DIV>
//
c.push("\nSelected vertex id: ");</DIV>
<DIV>
//
c.push(event.feature.id);</DIV>
<DIV>
//
c.push("\n\nRemove this vertex?")</DIV>
<DIV>
//
var removeVertex = confirm(c.join(""));</DIV>
<DIV> </DIV>
<DIV>
//
if (removeVertex) {</DIV>
<DIV>
//
// I noticed that the ModifyFeature control doesn't have</DIV>
<DIV>
//
// a method to manage a vertices removal, it's only done inside</DIV>
<DIV>
//
// the 'handleKeypress' callback method... but it doesn't</DIV>
<DIV>
//
// prevent us from using it :) so we'll emulate a 'delete' key</DIV>
<DIV>
//
// pressed</DIV>
<DIV>
//
modify.dragControl.feature = event.feature;</DIV>
<DIV>
//
modify.handleKeypress({ keyCode: 46 });</DIV>
<DIV>
//
} else {</DIV>
<DIV>
//
// simply redraw the vertex back to its default style</DIV>
<DIV>
//
vectors.drawFeature(event.feature, "default");</DIV>
<DIV>
//
}</DIV>
<DIV> }</DIV>
<DIV> });</DIV>
<DIV> }</DIV>
<DIV> </DIV>
<DIV> modify = new
OpenLayers.Control.ModifyFeatureVertexClick(vectors);</DIV>
<DIV> modify.standalone = true;</DIV>
<DIV> map.addControls([modify]);</DIV>
<DIV> modify.activate();</DIV>
<DIV> </DIV>
<DIV> map.setCenter(new OpenLayers.LonLat(0,
0), 3);</DIV>
<DIV> </DIV>
<DIV> // select with a delay to let the map
render and apply the default style</DIV>
<DIV> // to the feature, which emulates a
selection that would be made using a</DIV>
<DIV> // click on the feature</DIV>
<DIV> setTimeout(function () {</DIV>
<DIV>
modify.selectControl.select(feature);</DIV>
<DIV> });</DIV>
<DIV> </DIV>
<DIV> });</DIV>
<DIV> </DIV>
<DIV> function deleteSelectedVertex() {</DIV>
<DIV> </DIV>
<DIV> if (selectedVertex != null) { </DIV>
<DIV> modify.dragControl.feature =
selectedVertex;</DIV>
<DIV> modify.handleKeypress({ keyCode: 46
});</DIV>
<DIV> //This works for some of the issues
but not all of the them</DIV>
<DIV>
//vectors.destroyFeatures([selectedVertex])</DIV>
<DIV> modify.dragControl.feature =
null;</DIV>
<DIV> selectedVertex = null;</DIV>
<DIV>
modify.selectControl.select(feature);</DIV>
<DIV> </DIV>
<DIV> }</DIV>
<DIV> </DIV>
<DIV> }</DIV>
<DIV> </DIV>
<DIV> </script></DIV>
<DIV
style="FONT-STYLE: normal; DISPLAY: inline; FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: small; FONT-WEIGHT: normal; TEXT-DECORATION: none">
<DIV style="FONT: 10pt tahoma">
<DIV> </DIV>
<DIV style="BACKGROUND: #f5f5f5">
<DIV style="font-color: black"><B>From:</B> <A title=adube@mapgears.com
href="mailto:adube@mapgears.com">Alexandre Dubé</A> </DIV>
<DIV><B>Sent:</B> Thursday, February 28, 2013 7:05 PM</DIV>
<DIV><B>To:</B> <A title=r_n_smart@hotmail.com
href="mailto:r_n_smart@hotmail.com">Robert Smart</A> </DIV>
<DIV><B>Cc:</B> <A title=openlayers-users@lists.osgeo.org
href="mailto:openlayers-users@lists.osgeo.org">openlayers-users@lists.osgeo.org</A>
</DIV>
<DIV><B>Subject:</B> Re: [OpenLayers-Users] ModifyControl Select/Delete
Vertex?</DIV></DIV></DIV>
<DIV> </DIV></DIV>
<DIV
style="FONT-STYLE: normal; DISPLAY: inline; FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: small; FONT-WEIGHT: normal; TEXT-DECORATION: none">
<DIV class=moz-cite-prefix>Hi Robert,<BR><BR> Yep, all the things you ask
are quite possible but not without getting your hand a bit dirty :) You
can do all that by programming. Extend the ModifyControl more to make it
do what you want. Don't be afraid to look at the source code to see what
the components do. You'll get more knowledge that way.<BR><BR> I'd
be happy to see the end result. Best of luck to you.<BR><BR>Kind
regards,<BR><BR>Alexandre<BR><BR> <BR><BR>On 13-02-28 12:36 PM, Robert
Smart wrote:<BR></DIV><BR>
<BLOCKQUOTE cite=mid:SNT127-DS14390D2D2EFF542465EF14AAFE0@phx.gbl type="cite">
<DIV dir=ltr>
<DIV style="FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: 12pt">
<DIV>This there a way to define a style for the selected vertex?
</DIV></DIV></DIV></BLOCKQUOTE><BR>Sure. Look at the
OpenLayers.Layer.Feature drawFeature method, second argument.<BR><BR><BR>
<BLOCKQUOTE cite=mid:SNT127-DS14390D2D2EFF542465EF14AAFE0@phx.gbl type="cite">
<DIV dir=ltr>
<DIV style="FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: 12pt">
<DIV> </DIV>
<DIV>Is there a way to store a reference to the selected vertex in the modify
feature control? So that I could allow a user to select a vertex and then if
they choose to delete it, I can just pull out a reference to it in the code
from the modify feature. I suppose this could also just be a
deleteSeletectedVertex function on the modifyFeature control
too.</DIV></DIV></DIV></BLOCKQUOTE><BR>Yep, but you'll need to program
that.<BR><BR><BR>
<BLOCKQUOTE cite=mid:SNT127-DS14390D2D2EFF542465EF14AAFE0@phx.gbl type="cite">
<DIV dir=ltr>
<DIV style="FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: 12pt">
<DIV> </DIV>
<DIV>Is there a way to deselect the the vertex too? So if I click on it and it
changes its style to the ‘selected’ style, I can then click on it again to
deselect it?</DIV></DIV></DIV></BLOCKQUOTE><BR>If you keep track of the current
one selected, yeah you could. This is also done
programmatically.<BR><BR><BR><BR><PRE class=moz-signature cols="72">--
Alexandre Dubé
Mapgears
<A class=moz-txt-link-abbreviated href="http://www.mapgears.com">www.mapgears.com</A>
</PRE></DIV></DIV></DIV></BODY></HTML>