Add drag-and-drop example

examples/drag-and-drop.js

@@ -0,0 +1,60 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.format.KML');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragAndDrop');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
+
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([
+    new ol.interaction.DragAndDrop({
+      formatConstructors: [
+        ol.format.KML
+      ]
+    })
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.BingMaps({
+        imagerySet: 'Aerial',
+        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+      })
+    })
+  ],
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+var displayFeatureInfo = function(pixel) {
+  var features = [];
+  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+    features.push(feature);
+  });
+  if (features.length > 0) {
+    var info = [];
+    var i, ii;
+    for (i = 0, ii = features.length; i < ii; ++i) {
+      info.push(features[i].get('name'));
+    }
+    document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
+  } else {
+    document.getElementById('info').innerHTML = '&nbsp;';
+  }
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+  var pixel = evt.getPixel();
+  displayFeatureInfo(pixel);
+});