<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>