[OpenLayers-Users] limiting a Vector layer to the last feature added

Tue Aug 18 01:14:04 EDT 2009

On Aug 16, 2009, at 11:49 AM, Eric Lemoine wrote:

> Yes. I don't understand what's going on in your case. Maybe you should
> work on a minimal example, and possibly post it here for further
> guidance. Sorry for not being more helpful...

Hi Eric,

Listed below is a example of the problem taken largely from the  
"Modify Feature" example at openlayers.org.  Thanks!

--john

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>Modify Feature</title>
     <link rel="stylesheet" href="http://www.openlayers.org/dev/theme/default/style.css 
" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
     <style type="text/css">
         #controls {
             width: 512px;
         }
         #controlToggle {
             padding-left: 1em;
         }
         #controlToggle li {
             list-style: none;
         }
     </style>
     <script src="http://www.openlayers.org/api/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]);

             vectors.events.on({
		"beforefeatureadded": clearPreviousFeatures
             });

             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)
             };

             for(var key in controls) {
                 map.addControl(controls[key]);
             }

             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
             document.getElementById('noneToggle').checked = true;
         }

         function toggleControl(element) {
             for(key in controls) {
                 var control = controls[key];
                 if(element.value == key && element.checked) {
                     control.activate();
                 } else {
                     control.deactivate();
                 }
             }
         }

	function clearPreviousFeatures(evt) {
		vectors.destroyFeatures();
		vectors.redraw();
	}

     </script>
   </head>
   <body onload="init()">
     <div id="map" class="smallmap"></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>
         </ul>
     </div>
   </body>
</html>