1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers Regular Polygon Example</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5 <link rel="stylesheet" href="style.css" type="text/css" />
6 <style type="text/css">
32 <script src="../lib/OpenLayers.js"></script>
33 <script type="text/javascript">
34 var map, polygonControl;
35 OpenLayers.Util.onImageLoadErrorColor = "transparent";
37 map = new OpenLayers.Map('map');
39 var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
40 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
42 var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
44 map.addLayers([wmsLayer, polygonLayer]);
45 map.addControl(new OpenLayers.Control.LayerSwitcher());
46 map.addControl(new OpenLayers.Control.MousePosition());
48 polyOptions = {sides: 4};
49 polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
50 OpenLayers.Handler.RegularPolygon,
51 {handlerOptions: polyOptions});
53 map.addControl(polygonControl);
55 map.setCenter(new OpenLayers.LonLat(0, 0), 3);
57 document.getElementById('noneToggle').checked = true;
58 document.getElementById('irregularToggle').checked = false;
60 function setOptions(options) {
61 polygonControl.handler.setOptions(options);
63 function setSize(fraction) {
64 var radius = fraction * map.getExtent().getHeight();
65 polygonControl.handler.setOptions({radius: radius,
70 <body onload="init()">
71 <h2 id="title">OpenLayers Regular Polygon Example</h2>
73 Shows how to use the RegularPolygon handler to draw features with
74 different numbers of sides.
76 <div id="map" class="smallmap"></div>
79 <ul id="controls"><b>Map Controls</b>
81 <input type="radio" name="type"
82 value="none" id="noneToggle"
83 onclick="polygonControl.deactivate()"
85 <label for="noneToggle">navigate</label>
88 <input type="radio" name="type"
89 value="polygon" id="polygonToggle"
90 onclick="polygonControl.activate()" />
91 <label for="polygonToggle">draw polygon</label>
106 onchange="setOptions({sides: parseInt(this.value)})">
107 <option value="3">triangle</option>
108 <option value="4" selected="selected">square</option>
109 <option value="5">pentagon</option>
110 <option value="6">hexagon</option>
111 <option value="40">circle</option>
121 onchange="setOptions({snapAngle: parseFloat(this.value)})">
122 <option value="" selected="selected">no snap</option>
123 <option value="15">15°</option>
124 <option value="45">45°</option>
125 <option value="90">90°</option>
135 onchange="setSize(parseFloat(this.value))">
136 <option value="" selected="selected">variable</option>
137 <option value="0.1">small</option>
138 <option value="0.2">medium</option>
139 <option value="0.4">large</option>
148 <input id="irregularToggle" name="irregular"
150 onchange="setOptions({irregular: this.checked})") />
157 Regular polygons can be drawn by pointing a DrawFeature control to the
158 RegularPolygon handler class. The options above demonstrate how the
159 handler can be configured. Note if you are in angle snapping mode (if
160 the snap angle is non-null) and you hold down the <b>Shift</b> key, you
161 will toggle to non-snapping mode.
164 The <i>irregular</i> option allows drawing of irregular polygons. With this option, the fixed radius option is ignored.