From 1b4aa636739d10b00edcb98d6f7f5d9d4c6e032c Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Thu, 20 Mar 2014 12:18:17 -0600
Subject: [PATCH] Separate test example from modify example

---
 examples/modify-features.html |   8 +-
 examples/modify-features.js   | 246 +--------------------------------
 examples/modify-test.html     |  57 ++++++++
 examples/modify-test.js       | 248 ++++++++++++++++++++++++++++++++++
 4 files changed, 313 insertions(+), 246 deletions(-)
 create mode 100644 examples/modify-test.html
 create mode 100644 examples/modify-test.js

diff --git a/examples/modify-features.html b/examples/modify-features.html
index 9be79fe94a..9130c5d411 100644
--- a/examples/modify-features.html
+++ b/examples/modify-features.html
@@ -26,10 +26,6 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <select id="layer-select">
-            <option selected>Test data</option>
-            <option>RealData (topology)</option>
-          </select>
         </div>
       </div>
 
@@ -37,9 +33,9 @@
 
         <div class="span12">
           <h4 id="title">Modify features example</h4>
-          <p id="shortdesc">Example of using the Modify interaction.</p>
+          <p id="shortdesc">Editing features with the modify interaction.</p>
           <div id="docs">
-            <p>Select a feature on the <b>Test&nbsp;Data</b> layer and drag the circle that appears when the cursor gets close to the selected geometry. On the <b>Real&nbsp;data&nbsp;(topology)</b> layer, editing adjacent countries that are selected preserves the topology.</p>
+            <p>This example demonstrates how the modify and select interactions can be used together.  Zoom in to an area of interest and select a feature for editing.  Then drag points around to modify the feature.  You can preserve topology by selecting multiple features before editing (<code>Shift</code>+click to select multiple features).</p>
             <p>See the <a href="modify-features.js" target="_blank">modify-features.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">modify, edit, vector</div>
diff --git a/examples/modify-features.js b/examples/modify-features.js
index b71537ca89..ff26883ca4 100644
--- a/examples/modify-features.js
+++ b/examples/modify-features.js
@@ -8,10 +8,6 @@ goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.GeoJSON');
 goog.require('ol.source.MapQuest');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
 
 
 var raster = new ol.layer.Tile({
@@ -21,243 +17,24 @@ var raster = new ol.layer.Tile({
   })
 });
 
-var styleFunction = (function() {
-  var styles = {};
-  var image = new ol.style.Circle({
-    radius: 5,
-    fill: null,
-    stroke: new ol.style.Stroke({color: 'orange', width: 2})
-  });
-  styles['Point'] = [new ol.style.Style({image: image})];
-  styles['Polygon'] = [new ol.style.Style({
-    stroke: new ol.style.Stroke({
-      color: 'blue',
-      width: 3
-    }),
-    fill: new ol.style.Fill({
-      color: 'rgba(0, 0, 255, 0.1)'
-    })
-  })];
-  styles['MultiLinestring'] = [new ol.style.Style({
-    stroke: new ol.style.Stroke({
-      color: 'green',
-      width: 3
-    })
-  })];
-  styles['MultiPolygon'] = [new ol.style.Style({
-    stroke: new ol.style.Stroke({
-      color: 'yellow',
-      width: 1
-    }),
-    fill: new ol.style.Fill({
-      color: 'rgba(255, 255, 0, 0.1)'
-    })
-  })];
-  styles['default'] = [new ol.style.Style({
-    stroke: new ol.style.Stroke({
-      color: 'red',
-      width: 3
-    }),
-    fill: new ol.style.Fill({
-      color: 'rgba(255, 0, 0, 0.1)'
-    }),
-    image: image
-  })];
-  return function(feature, resolution) {
-    return styles[feature.getGeometry().getType()] || styles['default'];
-  };
-})();
-
-var testDataSource = new ol.source.GeoJSON(
-    /** @type {olx.source.GeoJSONOptions} */ ({
-      object: {
-        'type': 'FeatureCollection',
-        'crs': {
-          'type': 'name',
-          'properties': {
-            'name': 'EPSG:3857'
-          }
-        },
-        'features': [
-          {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'Point',
-              'coordinates': [0, 0]
-            }
-          },
-          {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'MultiPoint',
-              'coordinates': [[-2e6, 0], [0, -2e6]]
-            }
-          },
-          {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'LineString',
-              'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
-            }
-          },
-          {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'LineString',
-              'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
-            }
-          },
-          {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'Polygon',
-              'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
-                  [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
-                  [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
-            }
-          },
-          {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'MultiLineString',
-              'coordinates': [
-                [[-1e6, -7.5e5], [-1e6, 7.5e5]],
-                [[1e6, -7.5e5], [1e6, 7.5e5]],
-                [[-7.5e5, -1e6], [7.5e5, -1e6]],
-                [[-7.5e5, 1e6], [7.5e5, 1e6]]
-              ]
-            }
-          },
-          {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'MultiPolygon',
-              'coordinates': [
-                [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
-                    [-3e6, 6e6], [-5e6, 6e6]]],
-                [[[-2e6, 6e6], [-2e6, 8e6], [0e6, 8e6],
-                    [0e6, 6e6], [-2e6, 6e6]]],
-                [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
-                    [3e6, 6e6], [1e6, 6e6]]]
-              ]
-            }
-          },
-          {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'GeometryCollection',
-              'geometries': [
-                {
-                  'type': 'LineString',
-                  'coordinates': [[-5e6, -5e6], [0e6, -5e6]]
-                },
-                {
-                  'type': 'Point',
-                  'coordinates': [4e6, -5e6]
-                },
-                {
-                  'type': 'Polygon',
-                  'coordinates': [
-                    [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
-                  ]
-                }
-              ]
-            }
-          }
-        ]
-      }
-    }));
-
-var testDataLayer = new ol.layer.Vector({
-  source: testDataSource,
-  style: styleFunction
-});
-
-var realDataSource = new ol.source.GeoJSON({
+var source = new ol.source.GeoJSON({
   projection: 'EPSG:3857',
   url: 'data/geojson/countries.geojson'
 });
 
-var realDataLayer = new ol.layer.Vector({
-  source: realDataSource,
-  style: styleFunction
+var vector = new ol.layer.Vector({
+  source: source
 });
 
-var overlayStyle = (function() {
-  var styles = {};
-  styles['Polygon'] = [
-    new ol.style.Style({
-      fill: new ol.style.Fill({
-        color: [255, 255, 255, 0.5]
-      })
-    }),
-    new ol.style.Style({
-      stroke: new ol.style.Stroke({
-        color: [255, 255, 255, 1],
-        width: 5
-      })
-    }),
-    new ol.style.Style({
-      stroke: new ol.style.Stroke({
-        color: [0, 153, 255, 1],
-        width: 3
-      })
-    })
-  ];
-  styles['MultiPolygon'] = styles['Polygon'];
-
-  styles['LineString'] = [
-    new ol.style.Style({
-      stroke: new ol.style.Stroke({
-        color: [255, 255, 255, 1],
-        width: 5
-      })
-    }),
-    new ol.style.Style({
-      stroke: new ol.style.Stroke({
-        color: [0, 153, 255, 1],
-        width: 3
-      })
-    })
-  ];
-  styles['MultiLineString'] = styles['LineString'];
-
-  styles['Point'] = [
-    new ol.style.Style({
-      image: new ol.style.Circle({
-        radius: 7,
-        fill: new ol.style.Fill({
-          color: [0, 153, 255, 1]
-        }),
-        stroke: new ol.style.Stroke({
-          color: [255, 255, 255, 0.75],
-          width: 1.5
-        })
-      }),
-      zIndex: 100000
-    })
-  ];
-  styles['MultiPoint'] = styles['Point'];
-
-  styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
-
-  return function(feature, resolution) {
-    return styles[feature.getGeometry().getType()];
-  };
-})();
-
-var select = new ol.interaction.Select({
-  style: overlayStyle
-});
+var select = new ol.interaction.Select({});
 
 var modify = new ol.interaction.Modify({
-  features: select.getFeatures(),
-  style: overlayStyle
+  features: select.getFeatures()
 });
 
 var map = new ol.Map({
   interactions: ol.interaction.defaults().extend([select, modify]),
-  layers: [raster, testDataLayer, realDataLayer],
+  layers: [raster, vector],
   renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
@@ -265,14 +42,3 @@ var map = new ol.Map({
     zoom: 2
   })
 });
-
-$('#layer-select').change(function() {
-  select.getFeatures().clear();
-  var index = $(this).children().index($(this).find(':selected'));
-  var layers = [testDataLayer, realDataLayer];
-  var i, ii;
-  for (i = 0, ii = layers.length; i < ii; ++i) {
-    layers[i].setVisible(index == i);
-  }
-});
-$('#layer-select').trigger('change');
diff --git a/examples/modify-test.html b/examples/modify-test.html
new file mode 100644
index 0000000000..e892368e0e
--- /dev/null
+++ b/examples/modify-test.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Modify features test</title>
+    <style>
+      .map {
+        background: grey;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Modify features test</h4>
+          <p id="shortdesc">Example for testing feature modification.</p>
+          <div id="docs">
+            <p>See the <a href="modify-test.js" target="_blank">modify-test.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">modify, edit, vector</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=modify-test" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>
diff --git a/examples/modify-test.js b/examples/modify-test.js
new file mode 100644
index 0000000000..96c5c5d5a4
--- /dev/null
+++ b/examples/modify-test.js
@@ -0,0 +1,248 @@
+goog.require('ol.Collection');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.interaction');
+goog.require('ol.interaction.Modify');
+goog.require('ol.interaction.Select');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+var styleFunction = (function() {
+  var styles = {};
+  var image = new ol.style.Circle({
+    radius: 5,
+    fill: null,
+    stroke: new ol.style.Stroke({color: 'orange', width: 2})
+  });
+  styles['Point'] = [new ol.style.Style({image: image})];
+  styles['Polygon'] = [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'blue',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(0, 0, 255, 0.1)'
+    })
+  })];
+  styles['MultiLinestring'] = [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'green',
+      width: 3
+    })
+  })];
+  styles['MultiPolygon'] = [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'yellow',
+      width: 1
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 0, 0.1)'
+    })
+  })];
+  styles['default'] = [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'red',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 0, 0, 0.1)'
+    }),
+    image: image
+  })];
+  return function(feature, resolution) {
+    return styles[feature.getGeometry().getType()] || styles['default'];
+  };
+})();
+
+var source = new ol.source.GeoJSON(
+    /** @type {olx.source.GeoJSONOptions} */ ({
+      object: {
+        'type': 'FeatureCollection',
+        'crs': {
+          'type': 'name',
+          'properties': {
+            'name': 'EPSG:3857'
+          }
+        },
+        'features': [
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'Point',
+              'coordinates': [0, 0]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'MultiPoint',
+              'coordinates': [[-2e6, 0], [0, -2e6]]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'LineString',
+              'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'LineString',
+              'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'Polygon',
+              'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
+                  [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
+                  [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'MultiLineString',
+              'coordinates': [
+                [[-1e6, -7.5e5], [-1e6, 7.5e5]],
+                [[1e6, -7.5e5], [1e6, 7.5e5]],
+                [[-7.5e5, -1e6], [7.5e5, -1e6]],
+                [[-7.5e5, 1e6], [7.5e5, 1e6]]
+              ]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'MultiPolygon',
+              'coordinates': [
+                [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
+                    [-3e6, 6e6], [-5e6, 6e6]]],
+                [[[-2e6, 6e6], [-2e6, 8e6], [0e6, 8e6],
+                    [0e6, 6e6], [-2e6, 6e6]]],
+                [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
+                    [3e6, 6e6], [1e6, 6e6]]]
+              ]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'GeometryCollection',
+              'geometries': [
+                {
+                  'type': 'LineString',
+                  'coordinates': [[-5e6, -5e6], [0e6, -5e6]]
+                },
+                {
+                  'type': 'Point',
+                  'coordinates': [4e6, -5e6]
+                },
+                {
+                  'type': 'Polygon',
+                  'coordinates': [
+                    [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
+                  ]
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }));
+
+var layer = new ol.layer.Vector({
+  source: source,
+  style: styleFunction
+});
+
+var overlayStyle = (function() {
+  var styles = {};
+  styles['Polygon'] = [
+    new ol.style.Style({
+      fill: new ol.style.Fill({
+        color: [255, 255, 255, 0.5]
+      })
+    }),
+    new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: [255, 255, 255, 1],
+        width: 5
+      })
+    }),
+    new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: [0, 153, 255, 1],
+        width: 3
+      })
+    })
+  ];
+  styles['MultiPolygon'] = styles['Polygon'];
+
+  styles['LineString'] = [
+    new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: [255, 255, 255, 1],
+        width: 5
+      })
+    }),
+    new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: [0, 153, 255, 1],
+        width: 3
+      })
+    })
+  ];
+  styles['MultiLineString'] = styles['LineString'];
+
+  styles['Point'] = [
+    new ol.style.Style({
+      image: new ol.style.Circle({
+        radius: 7,
+        fill: new ol.style.Fill({
+          color: [0, 153, 255, 1]
+        }),
+        stroke: new ol.style.Stroke({
+          color: [255, 255, 255, 0.75],
+          width: 1.5
+        })
+      }),
+      zIndex: 100000
+    })
+  ];
+  styles['MultiPoint'] = styles['Point'];
+
+  styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
+
+  return function(feature, resolution) {
+    return styles[feature.getGeometry().getType()];
+  };
+})();
+
+var select = new ol.interaction.Select({
+  style: overlayStyle
+});
+
+var modify = new ol.interaction.Modify({
+  features: select.getFeatures(),
+  style: overlayStyle
+});
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([select, modify]),
+  layers: [layer],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 1000000],
+    zoom: 2
+  })
+});