Drag-and-Drop Image Vector

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

#### Drag-and-Drop Image Vector

Example of using the drag-and-drop interaction with a ol.source.ImageVector.

Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.

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.Image
,
- ol.layer.Tile
,
- ol.source.BingMaps
,
- ol.source.ImageVector
,
- ol.source.Vector
,
- ol.style.Circle
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Drag-and-Drop Image Vector Example of using the drag-and-drop interaction with a ol.source.ImageVector. 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.Image({ source: new ol.source.ImageVector({ 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 Image Vector</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.Image({
              source: new ol.source.ImageVector({
                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>