Fixed #25004 -- Updated OpenLayers-based widget to OpenLayers 3

Thanks Tim Graham for the review.

2 files changed, 38 insertions, 18 deletions

diff --git a/js_tests/gis/mapwidget.test.js b/js_tests/gis/mapwidget.test.js
index 9d1daaaafd..e4e4e74777 100644
--- a/js_tests/gis/mapwidget.test.js
+++ b/js_tests/gis/mapwidget.test.js
@@ -7,42 +7,58 @@ QUnit.module('gis.OLMapWidget');
 QUnit.test('MapWidget.featureAdded', function(assert) {
     var options = {id: 'id_point', map_id: 'id_point_map', geom_name: 'Point'};
     var widget = new MapWidget(options);
-    assert.equal(widget.layers.vector.features.length, 1);
+    assert.equal(widget.featureCollection.getLength(), 1);
+    widget.serializeFeatures();
     assert.equal(
-        widget.layers.vector.features[0].geometry.toString(),
-        'POINT(7.8177 47.397)',
-        'Point addded to vector layer'
+        document.getElementById('id_point').value,
+        '{"type":"Point","coordinates":[7.8177,47.397]}',
+        'Point added to vector layer'
     );
 });
 
 QUnit.test('MapWidget.map_srid', function(assert) {
     var options = {id: 'id_point', map_id: 'id_point_map', geom_name: 'Point'};
     var widget = new MapWidget(options);
-    assert.equal(widget.options.map_srid, 4326, 'SRID 4326');
+    assert.equal(widget.map.getView().getProjection().getCode(), 'EPSG:3857', 'SRID 3857');
 });
 
 QUnit.test('MapWidget.defaultCenter', function(assert) {
     var options = {id: 'id_point', map_id: 'id_point_map', geom_name: 'Point'};
     var widget = new MapWidget(options);
-    assert.equal(widget.defaultCenter().toString(), 'lon=0,lat=0', 'Default center at 0, 0');
+    assert.equal(widget.defaultCenter().toString(), '0,0', 'Default center at 0, 0');
     options.default_lat = 47.08;
     options.default_lon = 6.81;
     widget = new MapWidget(options);
     assert.equal(
         widget.defaultCenter().toString(),
-        'lon=6.81,lat=47.08',
+        '6.81,47.08',
         'Default center at 6.81, 47.08'
     );
+    assert.equal(widget.map.getView().getZoom(), 12);
 });
 
-QUnit.test('MapWidget.getControls', function(assert) {
+QUnit.test('MapWidget.interactions', function(assert) {
     var options = {id: 'id_point', map_id: 'id_point_map', geom_name: 'Point'};
     var widget = new MapWidget(options);
-    widget.getControls(widget.layers.vector);
-    assert.equal(widget.controls.length, 3);
-    assert.equal(widget.controls[0].displayClass, 'olControlNavigation', 'Navigation control');
-    assert.equal(widget.controls[1].displayClass, 'olControlDrawFeaturePoint', 'Draw control');
-    assert.equal(widget.controls[2].displayClass, 'olControlModifyFeature', 'Modify control');
+    assert.equal(Object.keys(widget.interactions).length, 2);
+    assert.equal(widget.interactions.draw.getActive(), false, "Draw is inactive with an existing point");
+    assert.equal(widget.interactions.modify.getActive(), true, "Modify is active with an existing point");
+});
+
+QUnit.test('MapWidget.clearFeatures', function(assert) {
+    var options = {id: 'id_point', map_id: 'id_point_map', geom_name: 'Point'};
+    var widget = new MapWidget(options);
+    var initial_value = document.getElementById('id_point').value;
+    widget.clearFeatures();
+    assert.equal(document.getElementById('id_point').value, "");
+    document.getElementById('id_point').value = initial_value;
+});
+
+QUnit.test('MapWidget.multipolygon', function(assert) {
+    var options = {id: 'id_multipolygon', map_id: 'id_multipolygon_map', geom_name: 'MultiPolygon'};
+    var widget = new MapWidget(options);
+    assert.ok(widget.options.is_collection);
+    assert.equal(widget.interactions.draw.getActive(), true, "Draw is active with no existing content");
 });
 
 QUnit.test('MapWidget.IsCollection', function(assert) {
diff --git a/js_tests/tests.html b/js_tests/tests.html
index 587559757e..63e56bb52a 100644
--- a/js_tests/tests.html
+++ b/js_tests/tests.html
@@ -77,12 +77,16 @@
     <script src='../django/contrib/admin/static/admin/js/prepopulate.js' data-cover></script>
     <script src='../django/contrib/admin/static/admin/js/urlify.js' data-cover></script>
 
-    <div id="id_point_map">
-        <textarea id="id_point" name="point"
-                  class="vSerializedField required" style="display:none;"
-                  rows="10" cols="150">POINT (7.8177 47.397)</textarea>
+    <div id="id_point_map" style="display:none;">
+        <textarea id="id_point" name="point" class="vSerializedField required"
+                  style="display:none;" rows="10" cols="150"
+        >{&quot;type&quot;: &quot;Point&quot;, &quot;coordinates&quot;: [7.8177, 47.397]}</textarea>
     </div>
-    <script src='https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js'></script>
+    <div id="id_multipolygon_map" style="display:none;">
+        <textarea id="id_multipolygon" name="multipolygon" class="vSerializedField required"
+                  style="display:none;" rows="10" cols="150"></textarea>
+    </div>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.0/ol.js'></script>
     <script src='../django/contrib/gis/static/gis/js/OLMapWidget.js' data-cover></script>
     <script src='./gis/mapwidget.test.js'></script>