]> dev.renevier.net Git - syp.git/blob - openlayers/examples/regular-polygons.html
forbird creation or deletion of item; forbids adding or deleting an image
[syp.git] / openlayers / examples / regular-polygons.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
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">
7         p {
8             width: 512px;
9         }
10         #config {
11             margin-top: 1em;
12             width: 512px;
13             position: relative;
14             height: 8em;
15         }
16         #controls {
17             padding-left: 2em;
18             margin-left: 0;
19             width: 12em;
20         }
21         #controls li {
22             padding-top: 0.5em;
23             list-style: none;
24         }
25         #options {
26             font-size: 1em;
27             top: 0;
28             margin-left: 15em;
29             position: absolute;
30         }
31     </style>
32     <script src="../lib/OpenLayers.js"></script>
33     <script type="text/javascript">
34         var map, polygonControl;
35         OpenLayers.Util.onImageLoadErrorColor = "transparent";
36         function init(){
37             map = new OpenLayers.Map('map');
38             
39             var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
40                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 
41
42             var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
43
44             map.addLayers([wmsLayer, polygonLayer]);
45             map.addControl(new OpenLayers.Control.LayerSwitcher());
46             map.addControl(new OpenLayers.Control.MousePosition());
47
48             polyOptions = {sides: 4};
49             polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
50                                             OpenLayers.Handler.RegularPolygon,
51                                             {handlerOptions: polyOptions});
52             
53             map.addControl(polygonControl);
54             
55             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
56             
57             document.getElementById('noneToggle').checked = true;
58              document.getElementById('irregularToggle').checked = false;
59         }
60         function setOptions(options) {
61             polygonControl.handler.setOptions(options);
62         }
63         function setSize(fraction) {
64             var radius = fraction * map.getExtent().getHeight();
65             polygonControl.handler.setOptions({radius: radius,
66                                                angle: 0});
67         }
68     </script>
69   </head>
70   <body onload="init()">
71     <h2 id="title">OpenLayers Regular Polygon Example</h2>
72     <p id="shortdesc">
73       Shows how to use the RegularPolygon handler to draw features with
74       different numbers of sides.
75     </p>
76     <div id="map" class="smallmap"></div>
77     <div id="config">
78         
79         <ul id="controls"><b>Map Controls</b>
80             <li>
81                 <input type="radio" name="type"
82                        value="none" id="noneToggle"
83                        onclick="polygonControl.deactivate()"
84                        checked="checked" />
85                 <label for="noneToggle">navigate</label>
86             </li>
87             <li>
88                 <input type="radio" name="type"
89                        value="polygon" id="polygonToggle"
90                        onclick="polygonControl.activate()" />
91                 <label for="polygonToggle">draw polygon</label>
92             </li>
93         </ul>
94         <table id="options">
95             <tbody>
96                 <tr>
97                     <th>Draw Option</th>
98                     <th>Value</th>
99                 </tr>
100                 <tr>
101                     <td>
102                         shape
103                     </td>
104                     <td>
105                         <select name="sides"
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>
112                         </select>
113                     </td>
114                 </tr>
115                 <tr>
116                     <td>
117                         snap angle
118                     </td>
119                     <td>
120                         <select name="angle"
121                                 onchange="setOptions({snapAngle: parseFloat(this.value)})">
122                             <option value="" selected="selected">no snap</option>
123                             <option value="15">15&deg;</option>
124                             <option value="45">45&deg;</option>
125                             <option value="90">90&deg;</option>
126                         </select>
127                     </td>
128                 </tr>
129                 <tr>
130                     <td>
131                         size
132                     </td>
133                     <td>
134                         <select name="size"
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>
140                         </select>
141                     </td>
142                 </tr>
143                 <tr>
144                     <td>
145                         irregular
146                     </td>
147                     <td>
148                         <input id="irregularToggle" name="irregular"
149                                type="checkbox"
150                                onchange="setOptions({irregular: this.checked})") />
151                     </td>
152                 </tr>
153             </tbody>
154         </table>
155     </div>
156     <p>
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.
162     </p>
163     <p>
164          The <i>irregular</i> option allows drawing of irregular polygons.  With this option, the fixed radius option is ignored.
165   </body>
166 </html>