diff --git a/examples/drag-and-drop.html b/examples/drag-and-drop.html new file mode 100644 index 0000000000..98a622eabe --- /dev/null +++ b/examples/drag-and-drop.html @@ -0,0 +1,56 @@ + + + + + + + + + + + Drag-and-Drop example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Drag-and-Drop example

+

Example of using the drag-and-drop interaction. Drag and drop KML files on to the map.

+
+

See the drag-and-drop.js source to see how this is done.

+
+
drag-and-drop, kml
+
+
+
+   +
+
+ +
+ +
+ + + + + + + diff --git a/examples/drag-and-drop.js b/examples/drag-and-drop.js new file mode 100644 index 0000000000..dc79f50a73 --- /dev/null +++ b/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(', ') || ' '; + } else { + document.getElementById('info').innerHTML = ' '; + } +}; + +$(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); +});