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>