Use ol.interaction.DragAndDrop addfeatures event in drag-and-drop example

examples/drag-and-drop.js

@@ -9,7 +9,9 @@ goog.require('ol.format.TopoJSON');
 goog.require('ol.interaction');
 goog.require('ol.interaction.DragAndDrop');
 goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
 goog.require('ol.source.BingMaps');
+goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
@@ -82,19 +84,18 @@ var styleFunction = function(feature, resolution) {
   }
 };
 
+var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+  formatConstructors: [
+    ol.format.GPX,
+    ol.format.GeoJSON,
+    ol.format.IGC,
+    ol.format.KML,
+    ol.format.TopoJSON
+  ]
+});
+
 var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([
+  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
-    new ol.interaction.DragAndDrop({
-      formatConstructors: [
-        ol.format.GPX,
-        ol.format.GeoJSON,
-        ol.format.IGC,
-        ol.format.KML,
-        ol.format.TopoJSON
-      ],
-      styleFunction: styleFunction
-    })
-  ]),
   layers: [
     new ol.layer.Tile({
       source: new ol.source.BingMaps({
@@ -111,6 +112,19 @@ var map = new ol.Map({
   })
 });
 
+dragAndDropInteraction.on('addfeatures', function(event) {
+  var vectorSource = new ol.source.Vector({
+    features: event.getFeatures(),
+    projection: event.getProjection()
+  });
+  map.getLayers().push(new ol.layer.Vector({
+    source: vectorSource,
+    styleFunction: styleFunction
+  }));
+  var view2D = map.getView().getView2D();
+  view2D.fitExtent(vectorSource.getExtent(), map.getSize());
+});
+
 var displayFeatureInfo = function(pixel) {
   var features = [];
   map.forEachFeatureAtPixel(pixel, function(feature, layer) {