1 <html xmlns="http://www.w3.org/1999/xhtml">
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 ;
10 .olControlEditingToolbar .olControlModifyFeatureItemActive {
11 background-position: -1px -23px ;
18 border: 1px solid #ddd;
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';
35 var map, draw, modify, snap, point, line, poly;
38 map = new OpenLayers.Map('map');
39 var styles = new OpenLayers.StyleMap({
40 "default": new OpenLayers.Style(null, {
46 graphicName: "square",
51 strokeColor: "#3333aa"
56 strokeColor: "#6666aa"
62 strokeColor: "#6666aa"
68 "select": new OpenLayers.Style(null, {
74 graphicName: "square",
79 strokeColor: "#0000ff"
84 strokeColor: "#0000ff"
90 strokeColor: "#0000ff"
96 "temporary": new OpenLayers.Style(null, {
101 graphicName: "square",
106 strokeColor: "#0000ff"
111 strokeColor: "#0000ff"
116 strokeColor: "#0000ff",
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()
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()
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()
151 map.addLayers([poly, line, point]);
153 // configure the snapping agent
154 snap = new OpenLayers.Control.Snapping({
156 targets: [point, line, poly],
161 // add some editing tools to a panel
162 var panel = new OpenLayers.Control.Panel({
163 displayClass: "olControlEditingToolbar"
165 draw = new OpenLayers.Control.DrawFeature(
166 poly, OpenLayers.Handler.Polygon,
167 {displayClass: "olControlDrawFeaturePoint", title: "Draw Features"}
169 modify = new OpenLayers.Control.ModifyFeature(
170 poly, {displayClass: "olControlModifyFeature", title: "Modify Features"}
173 new OpenLayers.Control.Navigation({title: "Navigate"}),
176 map.addControl(panel);
178 // give the map a location
179 map.setCenter(new OpenLayers.LonLat(0, 0), 1);
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
190 var check = $("snapping");
191 check.checked = true;
192 check.onclick = function() {
200 var sel = $("editable");
202 sel.onchange = function() {
203 updateEditable(sel.value);
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) {
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) {
221 target[type + "Tolerance"] = Number(tol.value) || 0;
223 })(tol, type, target);
229 // this function allows the editable layer to be changed
230 // for the snapping control, this amounts to calling setLayer
231 function updateEditable(name) {
233 layer = window[name];
235 // update the editable layer for the snapping control (nice)
236 snap.setLayer(layer);
238 // update the editable layer for the modify control (ugly)
239 var modActive = modify.active;
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;
253 // update the editable layer for the draw control (very ugly)
254 var drawActive = draw.active;
260 point: OpenLayers.Handler.Point,
261 line: OpenLayers.Handler.Path,
262 poly: OpenLayers.Handler.Polygon
264 draw.handler = new handler(draw, draw.callbacks, draw.handlerOptions);
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>
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>
284 <label for="snapping">Enable Snapping</label>
285 <input type="checkbox" name="snapping" id="snapping" checked="checked" />
289 <td>targets</td><td>node</td><td>vertex</td><td>edge</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>
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>
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>
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>