Drag-and-Drop

This example uses OpenLayers v4.0.1. The latest is v.

#### Drag-and-Drop

Example of using the drag-and-drop interaction.

Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.format.GPX
,
- ol.format.GeoJSON
,
- ol.format.IGC
,
- ol.format.KML
,
- ol.format.TopoJSON
,
- ol.interaction
,
- ol.interaction.DragAndDrop
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.BingMaps
,
- ol.source.Vector
,
- ol.style.Circle
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Drag-and-Drop Example of using the drag-and-drop interaction. var defaultStyle = { 'Point': new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: 'rgba(255,255,0,0.5)' }), radius: 5, stroke: new ol.style.Stroke({ color: '#ff0', width: 1 }) }) }), 'LineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#f00', width: 3 }) }), 'Polygon': new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,255,255,0.5)' }), stroke: new ol.style.Stroke({ color: '#0ff', width: 1 }) }), 'MultiPoint': new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: 'rgba(255,0,255,0.5)' }), radius: 5, stroke: new ol.style.Stroke({ color: '#f0f', width: 1 }) }) }), 'MultiLineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#0f0', width: 3 }) }), 'MultiPolygon': new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,0,255,0.5)' }), stroke: new ol.style.Stroke({ color: '#00f', width: 1 }) }) }; var styleFunction = function(feature, resolution) { var featureStyleFunction = feature.getStyleFunction(); if (featureStyleFunction) { return featureStyleFunction.call(feature, resolution); } else { return defaultStyle[feature.getGeometry().getType()]; } }; 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([dragAndDropInteraction]), layers: [ new ol.layer.Tile({ source: new ol.source.BingMaps({ imagerySet: 'Aerial', key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here' }) }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); dragAndDropInteraction.on('addfeatures', function(event) { var vectorSource = new ol.source.Vector({ features: event.features }); map.addLayer(new ol.layer.Vector({ source: vectorSource, style: styleFunction })); map.getView().fit(vectorSource.getExtent()); }); var displayFeatureInfo = function(pixel) { var features = []; map.forEachFeatureAtPixel(pixel, function(feature) { 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.on('pointermove', function(evt) { if (evt.dragging) { return; } var pixel = map.getEventPixel(evt.originalEvent); displayFeatureInfo(pixel); }); map.on('click', function(evt) { displayFeatureInfo(evt.pixel); }); <div id="map" class="map"></div> <div id="info">&nbsp;</div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Drag-and-Drop</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div id="info">&nbsp;</div>
        <script>
          var defaultStyle = {
            'Point': new ol.style.Style({
              image: new ol.style.Circle({
                fill: new ol.style.Fill({
                  color: 'rgba(255,255,0,0.5)'
                }),
                radius: 5,
                stroke: new ol.style.Stroke({
                  color: '#ff0',
                  width: 1
                })
              })
            }),
            'LineString': new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: '#f00',
                width: 3
              })
            }),
            'Polygon': new ol.style.Style({
              fill: new ol.style.Fill({
                color: 'rgba(0,255,255,0.5)'
              }),
              stroke: new ol.style.Stroke({
                color: '#0ff',
                width: 1
              })
            }),
            'MultiPoint': new ol.style.Style({
              image: new ol.style.Circle({
                fill: new ol.style.Fill({
                  color: 'rgba(255,0,255,0.5)'
                }),
                radius: 5,
                stroke: new ol.style.Stroke({
                  color: '#f0f',
                  width: 1
                })
              })
            }),
            'MultiLineString': new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: '#0f0',
                width: 3
              })
            }),
            'MultiPolygon': new ol.style.Style({
              fill: new ol.style.Fill({
                color: 'rgba(0,0,255,0.5)'
              }),
              stroke: new ol.style.Stroke({
                color: '#00f',
                width: 1
              })
            })
          };

          var styleFunction = function(feature, resolution) {
            var featureStyleFunction = feature.getStyleFunction();
            if (featureStyleFunction) {
              return featureStyleFunction.call(feature, resolution);
            } else {
              return defaultStyle[feature.getGeometry().getType()];
            }
          };

          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([dragAndDropInteraction]),
            layers: [
              new ol.layer.Tile({
                source: new ol.source.BingMaps({
                  imagerySet: 'Aerial',
                  key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
                })
              })
            ],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          dragAndDropInteraction.on('addfeatures', function(event) {
            var vectorSource = new ol.source.Vector({
              features: event.features
            });
            map.addLayer(new ol.layer.Vector({
              source: vectorSource,
              style: styleFunction
            }));
            map.getView().fit(vectorSource.getExtent());
          });

          var displayFeatureInfo = function(pixel) {
            var features = [];
            map.forEachFeatureAtPixel(pixel, function(feature) {
              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.on('pointermove', function(evt) {
            if (evt.dragging) {
              return;
            }
            var pixel = map.getEventPixel(evt.originalEvent);
            displayFeatureInfo(pixel);
          });

          map.on('click', function(evt) {
            displayFeatureInfo(evt.pixel);
          });
        </script>
      </body>
    </html>