[OpenLayers-Dev] Generate multiple polygons on a single click

Fernando López Llanos flopezlla at hotmail.com
Mon Jun 11 23:00:06 PDT 2012


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? 
Thanks in advance for any help.
Code:
<!DOCTYPE html><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <title>Test</title>    <link rel="stylesheet" href="style.css" type="text/css">    <style type="text/css">        html, body {            height: 100%;        }        #map {            width: 100%;            height: 80%;            border: 1px solid black;        }    </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 options = {numZoomLevels: 3};            var graphic = new OpenLayers.Layer.Image(                'some title',                'image.png',                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),                new OpenLayers.Size(800, 200),                options            );            graphic.events.on({                loadstart: function() {                    OpenLayers.Console.log("loadstart");                },                loadend: function() {                    OpenLayers.Console.log("loadend");                }            });            var jpl_wms = new OpenLayers.Layer.WMS( "title",                "http://t1.hypercube.telascience.org/cgi-bin/landsat7",                 {layers: "landsat7"}, options);                vectors = new OpenLayers.Layer.Vector("Vector Layer");                map.addLayers([graphic, vectors]);                map.addControl(new OpenLayers.Control.LayerSwitcher());                map.addControl(new OpenLayers.Control.MousePosition());                controls = {                    point: new OpenLayers.Control.DrawFeature(vectors,                                OpenLayers.Handler.Point),                    shape: 

 //*************This is what i'm trying to do***************************************************                    for (i=0; i<5; i++)                    {                        new OpenLayers.Control.DrawFeature(vectors,                            OpenLayers.Handler.RegularPolygon,                            {handlerOptions: {radius: 5, sides: 4, snapAngle: 45 }}),                    }

                    drag: new OpenLayers.Control.DragFeature(vectors)                };                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();                    }                }            }    </script>  </head>  <body onload="init()">    <h1 id="title">Map</h1>    <div id="tags">        image, imagelayer    </div>    <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">Move</label>                </li>                <li>                    <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);"/>                    <label for="pointToggle">Point</img></label>                </li>                <li>                    <input type="radio" name="type" value="shape" id="lineToggle" onclick="toggleControl(this);"/>                    <label for="lineToggle">Shape</label>                </li>                </li>            </ul>        </div>  </body></html> 		 	   		  
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-dev/attachments/20120611/b1770059/attachment.html>


More information about the Dev mailing list