diff options
Diffstat (limited to 'misc/openlayers/examples/regular-polygons.html')
| -rw-r--r-- | misc/openlayers/examples/regular-polygons.html | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/misc/openlayers/examples/regular-polygons.html b/misc/openlayers/examples/regular-polygons.html new file mode 100644 index 0000000..f2725dd --- /dev/null +++ b/misc/openlayers/examples/regular-polygons.html @@ -0,0 +1,177 @@ +<!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>OpenLayers Regular Polygon Example</title> + <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="style.css" type="text/css"> + <style type="text/css"> + p { + width: 512px; + } + #config { + margin-top: 1em; + width: 512px; + position: relative; + height: 8em; + } + #controls { + padding-left: 2em; + margin-left: 0; + width: 12em; + } + #controls li { + padding-top: 0.5em; + list-style: none; + } + #options { + font-size: 1em; + top: 0; + margin-left: 15em; + position: absolute; + } + + /* avoid pink tiles */ + .olImageLoadError { + background-color: transparent !important; + } + </style> + <script src="../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, polygonControl; + function init(){ + map = new OpenLayers.Map('map'); + + var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); + + var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer"); + + map.addLayers([wmsLayer, polygonLayer]); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.addControl(new OpenLayers.Control.MousePosition()); + + polyOptions = {sides: 4}; + polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer, + OpenLayers.Handler.RegularPolygon, + {handlerOptions: polyOptions}); + + map.addControl(polygonControl); + + map.setCenter(new OpenLayers.LonLat(0, 0), 3); + + document.getElementById('noneToggle').checked = true; + document.getElementById('irregularToggle').checked = false; + } + function setOptions(options) { + polygonControl.handler.setOptions(options); + } + function setSize(fraction) { + var radius = fraction * map.getExtent().getHeight(); + polygonControl.handler.setOptions({radius: radius, + angle: 0}); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">OpenLayers Regular Polygon Example</h1> + <div id="tags"> + vector, feature, regularpolygon, drawing, draw, advanced + </div> + <p id="shortdesc"> + Shows how to use the RegularPolygon handler to draw features with + different numbers of sides. + </p> + <div id="map" class="smallmap"></div> + <div id="config"> + + <ul id="controls"><b>Map Controls</b> + <li> + <input type="radio" name="type" + value="none" id="noneToggle" + onclick="polygonControl.deactivate()" + checked="checked" /> + <label for="noneToggle">navigate</label> + </li> + <li> + <input type="radio" name="type" + value="polygon" id="polygonToggle" + onclick="polygonControl.activate()" /> + <label for="polygonToggle">draw polygon</label> + </li> + </ul> + <table id="options"> + <tbody> + <tr> + <th>Draw Option</th> + <th>Value</th> + </tr> + <tr> + <td> + shape + </td> + <td> + <select name="sides" + onchange="setOptions({sides: parseInt(this.value)})"> + <option value="3">triangle</option> + <option value="4" selected="selected">square</option> + <option value="5">pentagon</option> + <option value="6">hexagon</option> + <option value="40">circle</option> + </select> + </td> + </tr> + <tr> + <td> + snap angle + </td> + <td> + <select name="angle" + onchange="setOptions({snapAngle: parseFloat(this.value)})"> + <option value="" selected="selected">no snap</option> + <option value="15">15°</option> + <option value="45">45°</option> + <option value="90">90°</option> + </select> + </td> + </tr> + <tr> + <td> + size + </td> + <td> + <select name="size" + onchange="setSize(parseFloat(this.value))"> + <option value="" selected="selected">variable</option> + <option value="0.1">small</option> + <option value="0.2">medium</option> + <option value="0.4">large</option> + </select> + </td> + </tr> + <tr> + <td> + irregular + </td> + <td> + <input id="irregularToggle" name="irregular" + type="checkbox" + onchange="setOptions({irregular: this.checked})") /> + </td> + </tr> + </tbody> + </table> + </div> + <p> + Regular polygons can be drawn by pointing a DrawFeature control to the + RegularPolygon handler class. The options above demonstrate how the + handler can be configured. Note if you are in angle snapping mode (if + the snap angle is non-null) and you hold down the <b>Shift</b> key, you + will toggle to non-snapping mode. + </p> + <p> + The <i>irregular</i> option allows drawing of irregular polygons. With this option, the fixed radius option is ignored. + </body> +</html> |