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>