← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/openlayers/examples/regular-polygons.html

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/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>