]> dev.renevier.net Git - syp.git/blob - openlayers/examples/snapping.html
when selecting a cluster, zoom until features are detached
[syp.git] / openlayers / examples / snapping.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>Snapping</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         table {
14             padding: 1em 0 1em;
15         }
16         td {
17             padding: 0.5em 1em;
18             border: 1px solid #ddd;
19         }
20         tr.head td {
21             text-align: center;
22             font-weight: bold;
23         }
24     </style>
25     <script src="../lib/Firebug/firebug.js"></script>
26     <script src="../lib/OpenLayers.js"></script>
27     <script type="text/javascript">
28         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
29
30         function init() {
31             initMap();
32             initUI();
33         }
34         
35         var map, draw, modify, snap, point, line, poly;
36         function initMap() {
37
38             map = new OpenLayers.Map('map');
39             var styles = new OpenLayers.StyleMap({
40                 "default": new OpenLayers.Style(null, {
41                     rules: [
42                         new OpenLayers.Rule({
43                             symbolizer: {
44                                 "Point": {
45                                     pointRadius: 5,
46                                     graphicName: "square",
47                                     fillColor: "white",
48                                     fillOpacity: 0.25,
49                                     strokeWidth: 1,
50                                     strokeOpacity: 1,
51                                     strokeColor: "#3333aa"
52                                 },
53                                 "Line": {
54                                     strokeWidth: 3,
55                                     strokeOpacity: 1,
56                                     strokeColor: "#6666aa"
57                                 },
58                                 "Polygon": {
59                                     strokeWidth: 1,
60                                     strokeOpacity: 1,
61                                     fillColor: "#9999aa",
62                                     strokeColor: "#6666aa"
63                                 }
64                             }
65                         })
66                     ]
67                 }),
68                 "select": new OpenLayers.Style(null, {
69                     rules: [
70                         new OpenLayers.Rule({
71                             symbolizer: {
72                                 "Point": {
73                                     pointRadius: 5,
74                                     graphicName: "square",
75                                     fillColor: "white",
76                                     fillOpacity: 0.25,
77                                     strokeWidth: 2,
78                                     strokeOpacity: 1,
79                                     strokeColor: "#0000ff"
80                                 },
81                                 "Line": {
82                                     strokeWidth: 3,
83                                     strokeOpacity: 1,
84                                     strokeColor: "#0000ff"
85                                 },
86                                 "Polygon": {
87                                     strokeWidth: 2,
88                                     strokeOpacity: 1,
89                                     fillColor: "#0000ff",
90                                     strokeColor: "#0000ff"
91                                 }
92                             }
93                         })
94                     ]
95                 }),
96                 "temporary": new OpenLayers.Style(null, {
97                     rules: [
98                         new OpenLayers.Rule({
99                             symbolizer: {
100                                 "Point": {
101                                     graphicName: "square",
102                                     pointRadius: 5,
103                                     fillColor: "white",
104                                     fillOpacity: 0.25,
105                                     strokeWidth: 2,
106                                     strokeColor: "#0000ff"
107                                 },
108                                 "Line": {
109                                     strokeWidth: 3,
110                                     strokeOpacity: 1,
111                                     strokeColor: "#0000ff"
112                                 },
113                                 "Polygon": {
114                                     strokeWidth: 2,
115                                     strokeOpacity: 1,
116                                     strokeColor: "#0000ff",
117                                     fillColor: "#0000ff"
118                                 }
119                             }
120                         })
121                     ]
122                 })
123             });
124
125             // create three vector layers
126             poly = new OpenLayers.Layer.Vector("polygons", {
127                 strategies: [new OpenLayers.Strategy.Fixed()],                
128                 protocol: new OpenLayers.Protocol.HTTP({
129                     url: "data/poly.json",
130                     format: new OpenLayers.Format.GeoJSON()
131                 }),
132                 styleMap: styles,
133                 isBaseLayer: true
134             });
135             line = new OpenLayers.Layer.Vector("lines", {
136                 strategies: [new OpenLayers.Strategy.Fixed()],                
137                 protocol: new OpenLayers.Protocol.HTTP({
138                     url: "data/line.json",
139                     format: new OpenLayers.Format.GeoJSON()
140                 }),
141                 styleMap: styles
142             });
143             point = new OpenLayers.Layer.Vector("points", {
144                 strategies: [new OpenLayers.Strategy.Fixed()],                
145                 protocol: new OpenLayers.Protocol.HTTP({
146                     url: "data/point.json",
147                     format: new OpenLayers.Format.GeoJSON()
148                 }),
149                 styleMap: styles
150             });
151             map.addLayers([poly, line, point]);
152             
153             // configure the snapping agent
154             snap = new OpenLayers.Control.Snapping({
155                 layer: poly,
156                 targets: [point, line, poly],
157                 greedy: false
158             });
159             snap.activate();
160
161             // add some editing tools to a panel
162             var panel = new OpenLayers.Control.Panel({
163                 displayClass: "olControlEditingToolbar"
164             });
165             draw = new OpenLayers.Control.DrawFeature(
166                 poly, OpenLayers.Handler.Polygon,
167                 {displayClass: "olControlDrawFeaturePoint", title: "Draw Features"}
168             );
169             modify = new OpenLayers.Control.ModifyFeature(
170                 poly, {displayClass: "olControlModifyFeature", title: "Modify Features"}
171             );            
172             panel.addControls([
173                 new OpenLayers.Control.Navigation({title: "Navigate"}),
174                 draw, modify
175             ]);
176             map.addControl(panel);
177             
178             // give the map a location
179             map.setCenter(new OpenLayers.LonLat(0, 0), 1);
180         }
181         
182         /**
183          * Add behavior to page elements.  This basically lets us set snapping
184          * target properties with the checkboxes and text inputs.  The checkboxes
185          * toggle the target node, vertex, or edge (boolean) values.  The
186          * text inputs set the nodeTolerance, vertexTolerance, or edgeTolerance
187          * property values.
188          */
189         function initUI() {
190             var check = $("snapping");
191             check.checked = true;
192             check.onclick = function() {
193                 if(check.checked) {
194                     snap.activate();
195                 } else {
196                     snap.deactivate();
197                 }
198             };
199             
200             var sel = $("editable");
201             sel.value = "poly";
202             sel.onchange = function() {
203                 updateEditable(sel.value);
204             }
205             
206             var target, type, tog, tol;
207             var types = ["node", "vertex", "edge"];
208             for(var i=0; i<snap.targets.length; ++i) {
209                 target = snap.targets[i];
210                 for(var j=0; j<types.length; ++j) {
211                     type = types[j];
212                     tog = $(i + "_" + type);
213                     tog.checked = target[type];
214                     tog.onclick = (function(tog, type, target) {
215                         return function() {target[type] = tog.checked;}
216                     })(tog, type, target);
217                     tol = $(i + "_" + type + "Tolerance");
218                     tol.value = target[type + "Tolerance"];
219                     tol.onchange = (function(tol, type, target) {
220                         return function() {
221                             target[type + "Tolerance"] = Number(tol.value) || 0;
222                         }
223                     })(tol, type, target);
224                 }
225             }
226             
227         }
228         
229         // this function allows the editable layer to be changed
230         // for the snapping control, this amounts to calling setLayer
231         function updateEditable(name) {
232
233             layer = window[name];
234             
235             // update the editable layer for the snapping control (nice)
236             snap.setLayer(layer);
237
238             // update the editable layer for the modify control (ugly)
239             var modActive = modify.active;
240             if(modActive) {
241                 modify.deactivate();
242             }
243             modify.layer = layer;
244             modify.selectControl.layer = layer;
245             modify.selectControl.handlers.feature.layer = layer;
246             modify.dragControl.layer = layer;
247             modify.dragControl.handlers.drag.layer = layer;
248             modify.dragControl.handlers.feature.layer = layer;
249             if(modActive) {
250                 modify.activate();
251             }
252             
253             // update the editable layer for the draw control (very ugly)
254             var drawActive = draw.active;
255             if(drawActive) {
256                 draw.deactivate();
257             }
258             draw.layer = layer;
259             var handler = ({
260                 point: OpenLayers.Handler.Point,
261                 line: OpenLayers.Handler.Path,
262                 poly: OpenLayers.Handler.Polygon
263             })[name];
264             draw.handler = new handler(draw, draw.callbacks, draw.handlerOptions);
265             if(drawActive) {
266                 draw.activate();
267             }
268
269         }
270
271     </script>
272   </head>
273   <body onload="init()">
274     <h1 id="title">Snapping Example</h1>
275     <div id="shortdesc">A demonstration snapping while editing vector features.</div>
276     <div id="map" class="smallmap"></div>
277     <br/>
278     <label for="editable">Editable Layer:</label>
279     <select id="editable" name="editable">
280         <option value="poly">polygons</option>
281         <option value="line">lines</option>
282         <option value="point">points</option>
283     </select>
284     <label for="snapping">Enable Snapping</label>
285     <input type="checkbox" name="snapping" id="snapping" checked="checked" />
286     <table>
287         <tbody>
288             <tr class="head">
289                 <td>targets</td><td>node</td><td>vertex</td><td>edge</td>
290             </tr>
291             <tr>
292                 <td>points</td>
293                 <td><input type="checkbox" id="0_node" /><input id="0_nodeTolerance" type="text" size="3" /></td>
294                 <td><input type="checkbox" id="0_vertex" /><input id="0_vertexTolerance" type="text" size="3" /></td>
295                 <td><input type="checkbox" id="0_edge" /><input id="0_edgeTolerance" type="text" size="3" /></td>
296             </tr>
297             <tr>
298                 <td>lines</td>
299                 <td><input type="checkbox" id="1_node" /><input id="1_nodeTolerance" type="text" size="3" /></td>
300                 <td><input type="checkbox" id="1_vertex" /><input id="1_vertexTolerance" type="text" size="3" /></td>
301                 <td><input type="checkbox" id="1_edge" /><input id="1_edgeTolerance" type="text" size="3" /></td>
302             </tr>
303             <tr>
304                 <td>polygons</td>
305                 <td><input type="checkbox" id="2_node" /><input id="2_nodeTolerance" type="text" size="3" /></td>
306                 <td><input type="checkbox" id="2_vertex" /><input id="2_vertexTolerance" type="text" size="3" /></td>
307                 <td><input type="checkbox" id="2_edge" /><input id="2_edgeTolerance" type="text" size="3" /></td>
308             </tr>
309         </tbody>
310     </table>
311     <p>Though all snapping types are shown here for all target layers, not all are sensible.
312     Points don't have edges, for example.</p>
313   </body>
314 </html>