Add a layer with real data to the example

examples/modify-features.html

@@ -26,6 +26,10 @@
       <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>
 
@@ -33,8 +37,9 @@
 
         <div class="span12">
           <h4 id="title">Modify features example</h4>
-          <p id="shortdesc">Example of using the Modify interaction. Select a feature and drag the circle that appears when the cursor gets close to the selected geometry.</p>
+          <p id="shortdesc">Example of using 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>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>

examples/modify-features.js

@@ -67,7 +67,7 @@ var styleFunction = (function() {
   };
 })();
 
-var vectorSource = new ol.source.GeoJSON(
+var testDataSource = new ol.source.GeoJSON(
     /** @type {olx.source.GeoJSONOptions} */ ({
       object: {
         'type': 'FeatureCollection',
@@ -166,9 +166,18 @@ var vectorSource = new ol.source.GeoJSON(
       }
     }));
 
+var testDataLayer = new ol.layer.Vector({
+  source: testDataSource,
+  style: styleFunction
+});
 
-var vectorLayer = new ol.layer.Vector({
+var realDataSource = new ol.source.GeoJSON({
-  source: vectorSource,
+  projection: 'EPSG:3857',
+  url: 'data/geojson/countries.geojson'
+});
+
+var realDataLayer = new ol.layer.Vector({
+  source: realDataSource,
   style: styleFunction
 });
 
@@ -246,7 +255,7 @@ var modify = new ol.interaction.Modify({
 
 var map = new ol.Map({
   interactions: ol.interaction.defaults().extend([select, modify]),
-  layers: [raster, vectorLayer],
+  layers: [raster, testDataLayer, realDataLayer],
   renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
@@ -254,3 +263,14 @@ 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');