<html>
<head>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 10pt;
font-family:Tahoma
}
--></style></head>
<body class='hmmessage'><div dir='ltr'>
<div>Hi I'm a newbie in openlayers, I took the following code from the examples provided by openlayers, I'm trying to create 4 polygons with a single click, is this possible? </div><div><br></div><div>Thanks in advance for any help.</div><div><br></div><div>Code:</div><div><br></div><div><!DOCTYPE html></div><div><html></div><div> <head></div><div> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></div><div> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"></div><div> <meta name="apple-mobile-web-app-capable" content="yes"></div><div> <title>Test</title></div><div> <link rel="stylesheet" href="style.css" type="text/css"></div><div> <style type="text/css"></div><div> html, body {</div><div> height: 100%;</div><div> }</div><div> #map {</div><div> width: 100%;</div><div> height: 80%;</div><div> border: 1px solid black;</div><div> }</div><div> </style></div><div> <script src="../lib/Firebug/firebug.js"></script></div><div> <script src="../lib/OpenLayers.js"></script></div><div> <script type="text/javascript"></div><div> var map, vectors, controls;</div><div> function init(){</div><div> map = new OpenLayers.Map('map');</div><div> var options = {numZoomLevels: 3};</div><div> var graphic = new OpenLayers.Layer.Image(</div><div> 'some title',</div><div> 'image.png',</div><div> new OpenLayers.Bounds(-180, -88.759, 180, 88.759),</div><div> new OpenLayers.Size(800, 200),</div><div> options</div><div> );</div><div> graphic.events.on({</div><div> loadstart: function() {</div><div> OpenLayers.Console.log("loadstart");</div><div> },</div><div> loadend: function() {</div><div> OpenLayers.Console.log("loadend");</div><div> }</div><div> });</div><div> var jpl_wms = new OpenLayers.Layer.WMS( "title",</div><div> "http://t1.hypercube.telascience.org/cgi-bin/landsat7", </div><div> {layers: "landsat7"}, options);</div><div> vectors = new OpenLayers.Layer.Vector("Vector Layer");</div><div> map.addLayers([graphic, vectors]);</div><div> map.addControl(new OpenLayers.Control.LayerSwitcher());</div><div> map.addControl(new OpenLayers.Control.MousePosition());</div><div> controls = {</div><div> point: new OpenLayers.Control.DrawFeature(vectors,</div><div> OpenLayers.Handler.Point),</div><div> shape: </div><div><span style="font-size: 10pt; "><br></span></div><div><span style="font-size: 10pt; "><br></span></div><div><span style="font-size: 10pt; "> //*************This is what i'm trying to do***************************************************</span></div><div> for (i=0; i<5; i++)</div><div> { </div><div> new OpenLayers.Control.DrawFeature(vectors,</div><div> OpenLayers.Handler.RegularPolygon,</div><div> {handlerOptions: {radius: 5, sides: 4, snapAngle: 45 }}),</div><div> }</div><div><br></div><div><br></div><div> drag: new OpenLayers.Control.DragFeature(vectors)</div><div> };</div><div> for(var key in controls) {</div><div> map.addControl(controls[key]);</div><div> }</div><div> map.setCenter(new OpenLayers.LonLat(0, 0), 3);</div><div> document.getElementById('noneToggle').checked = true;</div><div> }</div><div> function toggleControl(element) {</div><div> for(key in controls) {</div><div> var control = controls[key];</div><div> if(element.value == key && element.checked) {</div><div> control.activate();</div><div> } else {</div><div> control.deactivate();</div><div> }</div><div> }</div><div> }</div><div> </script></div><div> </head></div><div> <body onload="init()"></div><div> <h1 id="title">Map</h1></div><div> <div id="tags"></div><div> image, imagelayer</div><div> </div></div><div> <div id="map" class="smallmap"></div></div><div> <div id="controls"></div><div> <ul id="controlToggle"></div><div> <li></div><div> <input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" /></div><div> <label for="noneToggle">Move</label></div><div> </li></div><div> <li></div><div> <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);"/></div><div> <label for="pointToggle">Point</img></label></div><div> </li></div><div> <li></div><div> <input type="radio" name="type" value="shape" id="lineToggle" onclick="toggleControl(this);"/></div><div> <label for="lineToggle">Shape</label></div><div> </li></div><div> </li></div><div> </ul></div><div> </div></div><div> </body></div><div></html></div> </div></body>
</html>