← 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/modify-feature.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/modify-feature.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
  <head>
 
3
    <title>Modify Feature</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
        #controls {
 
8
            width: 512px;
 
9
        }
 
10
        #controlToggle {
 
11
            padding-left: 1em;
 
12
        }
 
13
        #controlToggle li {
 
14
            list-style: none;
 
15
        }
 
16
    </style>
 
17
    <script src="../lib/Firebug/firebug.js"></script>
 
18
    <script src="../lib/OpenLayers.js"></script>
 
19
    <script type="text/javascript">
 
20
        var map, vectors, controls;
 
21
        function init(){
 
22
            map = new OpenLayers.Map('map');
 
23
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
 
24
                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 
 
25
            OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
 
26
            vectors = new OpenLayers.Layer.Vector("Vector Layer");
 
27
 
 
28
            map.addLayers([wms, vectors]);
 
29
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
30
            map.addControl(new OpenLayers.Control.MousePosition());
 
31
            
 
32
            function report(event) {
 
33
                OpenLayers.Console.log(event.type, event.feature.id);
 
34
            }
 
35
            vectors.events.on({
 
36
                "beforefeaturemodified": report,
 
37
                "featuremodified": report,
 
38
                "afterfeaturemodified": report
 
39
            });
 
40
            controls = {
 
41
                point: new OpenLayers.Control.DrawFeature(vectors,
 
42
                            OpenLayers.Handler.Point),
 
43
                line: new OpenLayers.Control.DrawFeature(vectors,
 
44
                            OpenLayers.Handler.Path),
 
45
                polygon: new OpenLayers.Control.DrawFeature(vectors,
 
46
                            OpenLayers.Handler.Polygon),
 
47
                regular: new OpenLayers.Control.DrawFeature(vectors,
 
48
                            OpenLayers.Handler.RegularPolygon,
 
49
                            {handlerOptions: {sides: 5}}),
 
50
                modify: new OpenLayers.Control.ModifyFeature(vectors)
 
51
            };
 
52
            
 
53
            for(var key in controls) {
 
54
                map.addControl(controls[key]);
 
55
            }
 
56
            
 
57
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
 
58
            document.getElementById('noneToggle').checked = true;
 
59
        }
 
60
        
 
61
        function update() {
 
62
            // reset modification mode
 
63
            controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
 
64
            var rotate = document.getElementById("rotate").checked;
 
65
            if(rotate) {
 
66
                controls.modify.mode |= OpenLayers.Control.ModifyFeature.ROTATE;
 
67
            }
 
68
            var resize = document.getElementById("resize").checked;
 
69
            if(resize) {
 
70
                controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
 
71
            }
 
72
            var drag = document.getElementById("drag").checked;
 
73
            if(drag) {
 
74
                controls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG;
 
75
            }
 
76
            // disable reshape mode if at least one of modes rotate, resize,
 
77
            // drag is enabled
 
78
            if (rotate || resize || drag) {
 
79
                controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
 
80
            }
 
81
            var sides = parseInt(document.getElementById("sides").value);
 
82
            sides = Math.max(3, isNaN(sides) ? 0 : sides);
 
83
            controls.regular.handler.sides = sides;
 
84
            var irregular =  document.getElementById("irregular").checked;
 
85
            controls.regular.handler.irregular = irregular;
 
86
        }
 
87
 
 
88
        function toggleControl(element) {
 
89
            for(key in controls) {
 
90
                var control = controls[key];
 
91
                if(element.value == key && element.checked) {
 
92
                    control.activate();
 
93
                } else {
 
94
                    control.deactivate();
 
95
                }
 
96
            }
 
97
        }
 
98
        
 
99
    </script>
 
100
  </head>
 
101
  <body onload="init()">
 
102
    <h3 id="title">OpenLayers Modify Feature Example</h3>
 
103
    <div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div>
 
104
    <div id="map" class="smallmap"></div>
 
105
    <div id="controls">
 
106
        <ul id="controlToggle">
 
107
            <li>
 
108
                <input type="radio" name="type" value="none" id="noneToggle"
 
109
                       onclick="toggleControl(this);" checked="checked" />
 
110
                <label for="noneToggle">navigate</label>
 
111
            </li>
 
112
            <li>
 
113
                <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
 
114
                <label for="pointToggle">draw point</label>
 
115
            </li>
 
116
            <li>
 
117
                <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
 
118
                <label for="lineToggle">draw line</label>
 
119
            </li>
 
120
            <li>
 
121
                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
 
122
                <label for="polygonToggle">draw polygon</label>
 
123
            </li>
 
124
            <li>
 
125
                <input type="radio" name="type" value="regular" id="regularToggle" onclick="toggleControl(this);" />
 
126
                <label for="regularToggle">draw regular polygon</label>
 
127
                <label for="sides"> - sides</label>
 
128
                <input id="sides" type="text" size="2" maxlength="2"
 
129
                       name="sides" value="5" onchange="update()" />
 
130
                <ul>
 
131
                    <li>
 
132
                        <input id="irregular" type="checkbox"
 
133
                               name="irregular" onchange="update()" />
 
134
                        <label for="irregular">irregular</label>
 
135
                    </li>
 
136
                </ul>
 
137
            </li>
 
138
            <li>
 
139
                <input type="radio" name="type" value="modify" id="modifyToggle"
 
140
                       onclick="toggleControl(this);" />
 
141
                <label for="modifyToggle">modify feature</label>
 
142
                <ul>
 
143
                    <li>
 
144
                        <input id="rotate" type="checkbox"
 
145
                               name="rotate" onchange="update()" />
 
146
                        <label for="rotate">allow rotation</label>
 
147
                    </li>
 
148
                    <li>
 
149
                        <input id="resize" type="checkbox"
 
150
                               name="resize" onchange="update()" />
 
151
                        <label for="resize">allow resizing</label>
 
152
                    </li>
 
153
                    <li>
 
154
                        <input id="drag" type="checkbox"
 
155
                               name="drag" onchange="update()" />
 
156
                        <label for="drag">allow dragging</label>
 
157
                    </li>
 
158
                </ul>
 
159
            </li>
 
160
        </ul>
 
161
    </div>
 
162
  </body>
 
163
</html>