summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/snapping.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/examples/snapping.html')
-rw-r--r--misc/openlayers/examples/snapping.html324
1 files changed, 0 insertions, 324 deletions
diff --git a/misc/openlayers/examples/snapping.html b/misc/openlayers/examples/snapping.html
deleted file mode 100644
index 944b4c2..0000000
--- a/misc/openlayers/examples/snapping.html
+++ /dev/null
@@ -1,324 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <title>Snapping</title>
- <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
- <!--[if lte IE 6]>
- <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
- <![endif]-->
- <link rel="stylesheet" href="style.css" type="text/css">
- <style type="text/css">
- .olControlEditingToolbar .olControlModifyFeatureItemInactive {
- background-position: -1px -1px;
- }
- .olControlEditingToolbar .olControlModifyFeatureItemActive {
- background-position: -1px -24px;
- }
- table {
- padding: 1em 0 1em;
- }
- td {
- padding: 0.5em 1em;
- border: 1px solid #ddd;
- }
- tr.head td {
- text-align: center;
- font-weight: bold;
- }
- </style>
- <script src="../lib/Firebug/firebug.js"></script>
- <script src="../lib/OpenLayers.js"></script>
- <script type="text/javascript">
- OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
-
- function init() {
- initMap();
- initUI();
- }
-
- var map, draw, modify, snap, point, line, poly;
- function initMap() {
-
- map = new OpenLayers.Map('map');
- var styles = new OpenLayers.StyleMap({
- "default": new OpenLayers.Style(null, {
- rules: [
- new OpenLayers.Rule({
- symbolizer: {
- "Point": {
- pointRadius: 5,
- graphicName: "square",
- fillColor: "white",
- fillOpacity: 0.25,
- strokeWidth: 1,
- strokeOpacity: 1,
- strokeColor: "#3333aa"
- },
- "Line": {
- strokeWidth: 3,
- strokeOpacity: 1,
- strokeColor: "#6666aa"
- },
- "Polygon": {
- strokeWidth: 1,
- strokeOpacity: 1,
- fillColor: "#9999aa",
- strokeColor: "#6666aa"
- }
- }
- })
- ]
- }),
- "select": new OpenLayers.Style(null, {
- rules: [
- new OpenLayers.Rule({
- symbolizer: {
- "Point": {
- pointRadius: 5,
- graphicName: "square",
- fillColor: "white",
- fillOpacity: 0.25,
- strokeWidth: 2,
- strokeOpacity: 1,
- strokeColor: "#0000ff"
- },
- "Line": {
- strokeWidth: 3,
- strokeOpacity: 1,
- strokeColor: "#0000ff"
- },
- "Polygon": {
- strokeWidth: 2,
- strokeOpacity: 1,
- fillColor: "#0000ff",
- strokeColor: "#0000ff"
- }
- }
- })
- ]
- }),
- "temporary": new OpenLayers.Style(null, {
- rules: [
- new OpenLayers.Rule({
- symbolizer: {
- "Point": {
- graphicName: "square",
- pointRadius: 5,
- fillColor: "white",
- fillOpacity: 0.25,
- strokeWidth: 2,
- strokeColor: "#0000ff"
- },
- "Line": {
- strokeWidth: 3,
- strokeOpacity: 1,
- strokeColor: "#0000ff"
- },
- "Polygon": {
- strokeWidth: 2,
- strokeOpacity: 1,
- strokeColor: "#0000ff",
- fillColor: "#0000ff"
- }
- }
- })
- ]
- })
- });
-
- // create three vector layers
- poly = new OpenLayers.Layer.Vector("polygons", {
- strategies: [new OpenLayers.Strategy.Fixed()],
- protocol: new OpenLayers.Protocol.HTTP({
- url: "data/poly.json",
- format: new OpenLayers.Format.GeoJSON()
- }),
- styleMap: styles,
- isBaseLayer: true
- });
- line = new OpenLayers.Layer.Vector("lines", {
- strategies: [new OpenLayers.Strategy.Fixed()],
- protocol: new OpenLayers.Protocol.HTTP({
- url: "data/line.json",
- format: new OpenLayers.Format.GeoJSON()
- }),
- styleMap: styles
- });
- point = new OpenLayers.Layer.Vector("points", {
- strategies: [new OpenLayers.Strategy.Fixed()],
- protocol: new OpenLayers.Protocol.HTTP({
- url: "data/point.json",
- format: new OpenLayers.Format.GeoJSON()
- }),
- styleMap: styles
- });
- map.addLayers([poly, line, point]);
-
- // configure the snapping agent
- snap = new OpenLayers.Control.Snapping({
- layer: poly,
- targets: [point, line, poly],
- greedy: false
- });
- snap.activate();
-
- // add some editing tools to a panel
- var panel = new OpenLayers.Control.Panel({
- displayClass: "olControlEditingToolbar"
- });
- draw = new OpenLayers.Control.DrawFeature(
- poly, OpenLayers.Handler.Polygon,
- {displayClass: "olControlDrawFeaturePoint", title: "Draw Features", handlerOptions: {holeModifier: "altKey"}}
- );
- modify = new OpenLayers.Control.ModifyFeature(
- poly, {displayClass: "olControlModifyFeature", title: "Modify Features"}
- );
- panel.addControls([
- new OpenLayers.Control.Navigation({title: "Navigate"}),
- draw, modify
- ]);
- map.addControl(panel);
-
- // give the map a location
- map.setCenter(new OpenLayers.LonLat(0, 0), 1);
- }
-
- /**
- * Add behavior to page elements. This basically lets us set snapping
- * target properties with the checkboxes and text inputs. The checkboxes
- * toggle the target node, vertex, or edge (boolean) values. The
- * text inputs set the nodeTolerance, vertexTolerance, or edgeTolerance
- * property values.
- */
- function initUI() {
- var check = document.getElementById("snapping");
- check.checked = true;
- check.onclick = function() {
- if(check.checked) {
- snap.activate();
- } else {
- snap.deactivate();
- }
- };
-
- var sel = document.getElementById("editable");
- sel.value = "poly";
- sel.onchange = function() {
- updateEditable(sel.value);
- };
-
- var target, type, tog, tol;
- var types = ["node", "vertex", "edge"];
- for(var i=0; i<snap.targets.length; ++i) {
- target = snap.targets[i];
- for(var j=0; j<types.length; ++j) {
- type = types[j];
- tog = document.getElementById(i + "_" + type);
- tog.checked = target[type];
- tog.onclick = (function(tog, type, target) {
- return function() {target[type] = tog.checked;}
- })(tog, type, target);
- tol = document.getElementById(i + "_" + type + "Tolerance");
- tol.value = target[type + "Tolerance"];
- tol.onchange = (function(tol, type, target) {
- return function() {
- target[type + "Tolerance"] = Number(tol.value) || 0;
- }
- })(tol, type, target);
- }
- }
-
- }
-
- // this function allows the editable layer to be changed
- // for the snapping control, this amounts to calling setLayer
- function updateEditable(name) {
-
- layer = window[name];
-
- // update the editable layer for the snapping control (nice)
- snap.setLayer(layer);
-
- // update the editable layer for the modify control (ugly)
- var modActive = modify.active;
- if(modActive) {
- modify.deactivate();
- }
- modify.layer = layer;
- modify.selectControl.layer = layer;
- modify.selectControl.handlers.feature.layer = layer;
- modify.dragControl.layer = layer;
- modify.dragControl.handlers.drag.layer = layer;
- modify.dragControl.handlers.feature.layer = layer;
- if(modActive) {
- modify.activate();
- }
-
- // update the editable layer for the draw control (very ugly)
- var drawActive = draw.active;
- if(drawActive) {
- draw.deactivate();
- }
- draw.layer = layer;
- var handler = ({
- point: OpenLayers.Handler.Point,
- line: OpenLayers.Handler.Path,
- poly: OpenLayers.Handler.Polygon
- })[name];
- draw.handler = new handler(draw, draw.callbacks, draw.handlerOptions);
- if(drawActive) {
- draw.activate();
- }
-
- }
-
- </script>
- </head>
- <body onload="init()">
- <h1 id="title">Snapping Example</h1>
- <div id="tags">
- vector, feature, snapping, stylemap, advanced
- </div>
- <div id="shortdesc">A demonstration snapping while editing vector features.</div>
- <div id="map" class="smallmap"></div>
- <br>
- <label for="editable">Editable Layer:</label>
- <select id="editable" name="editable">
- <option value="poly">polygons</option>
- <option value="line">lines</option>
- <option value="point">points</option>
- </select>
- <label for="snapping">Enable Snapping</label>
- <input type="checkbox" name="snapping" id="snapping" checked="checked" />
- <table>
- <tbody>
- <tr class="head">
- <td>targets</td><td>node</td><td>vertex</td><td>edge</td>
- </tr>
- <tr>
- <td>points</td>
- <td><input type="checkbox" id="0_node" /><input id="0_nodeTolerance" type="text" size="3" /></td>
- <td><input type="checkbox" id="0_vertex" /><input id="0_vertexTolerance" type="text" size="3" /></td>
- <td><input type="checkbox" id="0_edge" /><input id="0_edgeTolerance" type="text" size="3" /></td>
- </tr>
- <tr>
- <td>lines</td>
- <td><input type="checkbox" id="1_node" /><input id="1_nodeTolerance" type="text" size="3" /></td>
- <td><input type="checkbox" id="1_vertex" /><input id="1_vertexTolerance" type="text" size="3" /></td>
- <td><input type="checkbox" id="1_edge" /><input id="1_edgeTolerance" type="text" size="3" /></td>
- </tr>
- <tr>
- <td>polygons</td>
- <td><input type="checkbox" id="2_node" /><input id="2_nodeTolerance" type="text" size="3" /></td>
- <td><input type="checkbox" id="2_vertex" /><input id="2_vertexTolerance" type="text" size="3" /></td>
- <td><input type="checkbox" id="2_edge" /><input id="2_edgeTolerance" type="text" size="3" /></td>
- </tr>
- </tbody>
- </table>
- <p>Though all snapping types are shown here for all target layers, not all are sensible.
- Points don't have edges, for example.</p>
- </body>
-</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-03 14:26:42 +0000