]> dev.renevier.net Git - syp.git/blob - openlayers/examples/snap-split.html
reset openlayers directory to its original state at the end of build.sh
[syp.git] / openlayers / examples / snap-split.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>Snapping & Splitting</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         .olControlEditingToolbar .olControlModifyFeatureItemInactive { 
8             background-position: -1px 0px ;                                                                   
9         }
10         .olControlEditingToolbar .olControlModifyFeatureItemActive { 
11             background-position: -1px -23px ;                                                                   
12         }
13         label.head {
14             font-weight: bold;
15             padding: 1em 0 0.1em 0;
16             border-bottom: 1px solid grey;
17         }
18         td {
19             padding: 0.25em 1em;
20         }
21         tr.head td {
22             text-align: center;
23             font-weight: bold;
24         }
25     </style>
26     <script src="../lib/Firebug/firebug.js"></script>
27     <script src="../lib/OpenLayers.js"></script>
28     <script type="text/javascript">
29
30         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
31
32         function init() {
33             initMap();
34             initUI();
35         }
36
37
38         var map, draw, modify, snap, split, vectors;
39         function initMap() {
40
41             map = new OpenLayers.Map('map');
42             var styles = new OpenLayers.StyleMap({
43                 "default": new OpenLayers.Style(null, {
44                     rules: [
45                         new OpenLayers.Rule({
46                             symbolizer: {
47                                 "Point": {
48                                     pointRadius: 5,
49                                     graphicName: "square",
50                                     fillColor: "white",
51                                     fillOpacity: 0.25,
52                                     strokeWidth: 1,
53                                     strokeOpacity: 1,
54                                     strokeColor: "#333333"
55                                 },
56                                 "Line": {
57                                     strokeWidth: 3,
58                                     strokeOpacity: 1,
59                                     strokeColor: "#666666"
60                                 }
61                             }
62                         })
63                     ]
64                 }),
65                 "select": new OpenLayers.Style({
66                     strokeColor: "#00ccff",
67                     strokeWidth: 4
68                 }),
69                 "temporary": new OpenLayers.Style(null, {
70                     rules: [
71                         new OpenLayers.Rule({
72                             symbolizer: {
73                                 "Point": {
74                                     pointRadius: 5,
75                                     graphicName: "square",
76                                     fillColor: "white",
77                                     fillOpacity: 0.25,
78                                     strokeWidth: 1,
79                                     strokeOpacity: 1,
80                                     strokeColor: "#333333"
81                                 },
82                                 "Line": {
83                                     strokeWidth: 3,
84                                     strokeOpacity: 1,
85                                     strokeColor: "#00ccff"
86                                 }
87                             }
88                         })
89                     ]
90                 })
91             });
92
93             // create three vector layers
94             vectors = new OpenLayers.Layer.Vector("Lines", {
95                 isBaseLayer: true,
96                 strategies: [new OpenLayers.Strategy.Fixed()],                
97                 protocol: new OpenLayers.Protocol.HTTP({
98                     url: "data/roads.json",
99                     format: new OpenLayers.Format.GeoJSON()
100                 }),
101                 styleMap: styles,
102                 maxExtent: new OpenLayers.Bounds(
103                     1549471.9221, 6403610.94, 1550001.32545, 6404015.8
104                 )
105             });
106             map.addLayer(vectors);
107             
108             // configure the snapping agent
109             snap = new OpenLayers.Control.Snapping({layer: vectors});
110             map.addControl(snap);
111             snap.activate();
112             
113             // configure split agent
114             split = new OpenLayers.Control.Split({
115                 layer: vectors,
116                 source: vectors,
117                 tolerance: 0.0001,
118                 eventListeners: {
119                     aftersplit: function(event) {
120                         flashFeatures(event.features);
121                     }
122                 }
123             });
124             map.addControl(split);
125             split.activate();
126
127             // add some editing tools to a panel
128             var panel = new OpenLayers.Control.Panel({
129                 displayClass: "olControlEditingToolbar"
130             });
131             draw = new OpenLayers.Control.DrawFeature(
132                 vectors, OpenLayers.Handler.Path,
133                 {displayClass: "olControlDrawFeaturePoint", title: "Draw Features"}
134             );
135             modify = new OpenLayers.Control.ModifyFeature(
136                 vectors, {displayClass: "olControlModifyFeature", title: "Modify Features"}
137             );
138             panel.addControls([
139                 new OpenLayers.Control.Navigation({title: "Navigate"}),
140                 draw, modify
141             ]);
142             map.addControl(panel);
143             
144             map.addControl(new OpenLayers.Control.MousePosition());
145             
146             map.zoomToMaxExtent();
147         }
148
149         function flashFeatures(features, index) {
150             if(!index) {
151                 index = 0;
152             }
153             var current = features[index];
154             if(current && current.layer === vectors) {
155                 vectors.drawFeature(features[index], "select");
156             }
157             var prev = features[index-1];
158             if(prev && prev.layer === vectors) {
159                 vectors.drawFeature(prev, "default");
160             }
161             ++index;
162             if(index <= features.length) {
163                 window.setTimeout(function() {flashFeatures(features, index)}, 75);
164             }
165         }
166
167         /**
168          * Add behavior to page elements.  This basically lets us set snapping
169          * target properties with the checkboxes and text inputs.  The checkboxes
170          * toggle the target node, vertex, or edge (boolean) values.  The
171          * text inputs set the nodeTolerance, vertexTolerance, or edgeTolerance
172          * property values.
173          */
174         function initUI() {
175             // add behavior to snap elements
176             var snapCheck = $("snap_toggle");
177             snapCheck.checked = true;
178             snapCheck.onclick = function() {
179                 if(snapCheck.checked) {
180                     snap.activate();
181                     $("snap_options").style.display = "block";
182                 } else {
183                     snap.deactivate();
184                     $("snap_options").style.display = "none";
185                 }
186             };
187             var target, type, tog, tol;
188             var types = ["node", "vertex", "edge"];
189             var target = snap.targets[0];
190             for(var j=0; j<types.length; ++j) {
191                 type = types[j];
192                 tog = $("target_" + type);
193                 tog.checked = target[type];
194                 tog.onclick = (function(tog, type, target) {
195                     return function() {target[type] = tog.checked;}
196                 })(tog, type, target);
197                 tol = $("target_" + type + "Tolerance");
198                 tol.value = target[type + "Tolerance"];
199                 tol.onchange = (function(tol, type, target) {
200                     return function() {
201                         target[type + "Tolerance"] = Number(tol.value) || 0;
202                     }
203                 })(tol, type, target);
204             }
205
206             // add behavior to split elements
207             var splitCheck = $("split_toggle");
208             splitCheck.checked = true;
209             splitCheck.onclick = function() {
210                 if(splitCheck.checked) {
211                     split.activate();
212                     $("split_options").style.display = "block";
213                 } else {
214                     split.deactivate();
215                     $("split_options").style.display = "none";
216                 }
217             };
218             var edgeCheck = $("edge_toggle");
219             edgeCheck.checked = split.edge;
220             edgeCheck.onclick = function() {
221                 split.edge = edgeCheck.checked;
222             };
223             
224             $("clear").onclick = function() {
225                 modify.deactivate();
226                 vectors.destroyFeatures();
227             };
228             
229         }
230     
231     </script>
232   </head>
233   <body onload="init()">
234     <h1 id="title">Snapping & Splitting Example</h1>
235     <div id="shortdesc">A demonstration snapping and splitting while editing vector features.</div>
236     <div id="map" class="smallmap"></div>
237     <br/>
238     <input type="checkbox" id="snap_toggle" />
239     <label for="snap_toggle" class="head">Enable Snapping</label>
240     <table id="snap_options">
241         <tbody>
242             <tr class="head">
243                 <td>target</td><td>node</td><td>vertex</td><td>edge</td>
244             </tr>
245             <tr>
246                 <td>roads</td>
247                 <td><input type="checkbox" id="target_node" /><input id="target_nodeTolerance" type="text" size="3" /></td>
248                 <td><input type="checkbox" id="target_vertex" /><input id="target_vertexTolerance" type="text" size="3" /></td>
249                 <td><input type="checkbox" id="target_edge" /><input id="target_edgeTolerance" type="text" size="3" /></td>
250             </tr>
251         </tbody>
252     </table>
253     <br />
254     <input type="checkbox" id="split_toggle" />
255     <label for="split_toggle" class="head">Enable Splitting</label>
256     <table id="split_options">
257         <tbody>
258             <tr>
259                 <td><label for="edge_toggle">edges split</label></td>
260                 <td><input type="checkbox" id="edge_toggle" /></td>
261             </tr>
262         </tbody>
263     </table>
264     <br />
265     <button id="clear">clear</button> Clear all features.
266   </body>
267 </html>