]> dev.renevier.net Git - syp.git/blob - openlayers/examples/modify-feature.html
reset openlayers directory to its original state at the end of build.sh
[syp.git] / 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 ? event.feature.id : event.components);
34             }
35             vectors.events.on({
36                 "beforefeaturemodified": report,
37                 "featuremodified": report,
38                 "afterfeaturemodified": report,
39                 "vertexmodified": report,
40                 "sketchmodified": report,
41                 "sketchstarted": report,
42                 "sketchcomplete": report
43             });
44             controls = {
45                 point: new OpenLayers.Control.DrawFeature(vectors,
46                             OpenLayers.Handler.Point),
47                 line: new OpenLayers.Control.DrawFeature(vectors,
48                             OpenLayers.Handler.Path),
49                 polygon: new OpenLayers.Control.DrawFeature(vectors,
50                             OpenLayers.Handler.Polygon),
51                 regular: new OpenLayers.Control.DrawFeature(vectors,
52                             OpenLayers.Handler.RegularPolygon,
53                             {handlerOptions: {sides: 5}}),
54                 modify: new OpenLayers.Control.ModifyFeature(vectors)
55             };
56             
57             for(var key in controls) {
58                 map.addControl(controls[key]);
59             }
60             
61             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
62             document.getElementById('noneToggle').checked = true;
63         }
64         
65         function update() {
66             // reset modification mode
67             controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
68             var rotate = document.getElementById("rotate").checked;
69             if(rotate) {
70                 controls.modify.mode |= OpenLayers.Control.ModifyFeature.ROTATE;
71             }
72             var resize = document.getElementById("resize").checked;
73             if(resize) {
74                 controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
75                 var keepAspectRatio = document.getElementById("keepAspectRatio").checked;
76                 if (keepAspectRatio) {
77                     controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
78                 }
79             }
80             var drag = document.getElementById("drag").checked;
81             if(drag) {
82                 controls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG;
83             }
84             if (rotate || drag) {
85                 controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
86             }
87             var sides = parseInt(document.getElementById("sides").value);
88             sides = Math.max(3, isNaN(sides) ? 0 : sides);
89             controls.regular.handler.sides = sides;
90             var irregular =  document.getElementById("irregular").checked;
91             controls.regular.handler.irregular = irregular;
92         }
93
94         function toggleControl(element) {
95             for(key in controls) {
96                 var control = controls[key];
97                 if(element.value == key && element.checked) {
98                     control.activate();
99                 } else {
100                     control.deactivate();
101                 }
102             }
103         }
104         
105     </script>
106   </head>
107   <body onload="init()">
108     <h1 id="title">OpenLayers Modify Feature Example</h1>
109     <div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div>
110     <div id="map" class="smallmap"></div>
111     <div id="controls">
112         <ul id="controlToggle">
113             <li>
114                 <input type="radio" name="type" value="none" id="noneToggle"
115                        onclick="toggleControl(this);" checked="checked" />
116                 <label for="noneToggle">navigate</label>
117             </li>
118             <li>
119                 <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
120                 <label for="pointToggle">draw point</label>
121             </li>
122             <li>
123                 <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
124                 <label for="lineToggle">draw line</label>
125             </li>
126             <li>
127                 <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
128                 <label for="polygonToggle">draw polygon</label>
129             </li>
130             <li>
131                 <input type="radio" name="type" value="regular" id="regularToggle" onclick="toggleControl(this);" />
132                 <label for="regularToggle">draw regular polygon</label>
133                 <label for="sides"> - sides</label>
134                 <input id="sides" type="text" size="2" maxlength="2"
135                        name="sides" value="5" onchange="update()" />
136                 <ul>
137                     <li>
138                         <input id="irregular" type="checkbox"
139                                name="irregular" onchange="update()" />
140                         <label for="irregular">irregular</label>
141                     </li>
142                 </ul>
143             </li>
144             <li>
145                 <input type="radio" name="type" value="modify" id="modifyToggle"
146                        onclick="toggleControl(this);" />
147                 <label for="modifyToggle">modify feature</label>
148                 <ul>
149                     <li>
150                         <input id="rotate" type="checkbox"
151                                name="rotate" onchange="update()" />
152                         <label for="rotate">allow rotation</label>
153                     </li>
154                     <li>
155                         <input id="resize" type="checkbox"
156                                name="resize" onchange="update()" />
157                         <label for="resize">allow resizing</label>
158                         (<input id="keepAspectRatio" type="checkbox"
159                                name="keepAspectRatio" onchange="update()" checked="checked" />
160                         <label for="keepAspectRatio">keep aspect ratio</label>)
161                     </li>
162                     <li>
163                         <input id="drag" type="checkbox"
164                                name="drag" onchange="update()" />
165                         <label for="drag">allow dragging</label>
166                     </li>
167                 </ul>
168             </li>
169         </ul>
170     </div>
171   </body>
172 </html>