Drag and drop

For our feature editor, we want users to be able to import their own data for editing. We'll use the DragAndDrop interaction for this. As before, we'll stick with the GeoJSON format for parsing features, but the interaction can be configured to work with any number of feature formats.

Start by editing the map configuration in your main.js file so that there are no layers added. We're going to be passing our map to a number of other components in this exercise, so make sure you have assigned the map to a variable named map.:

const map = new Map({
  target: 'map-container',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

Next, import the drag and drop interaction into your main.js:

import DragAndDrop from 'ol/interaction/DragAndDrop';

Next, we'll create a vector source with no initial data. Instead of loading data from a remote location as in the previous example, this source will store features that the user drags and drops onto the map.

const source = new VectorSource();

Now, remove the old layers list from the map, create a new layer with our empty vector source, and add it to the map.

const layer = new VectorLayer({
  source: source,
});
map.addLayer(layer);

Finally, we'll create a drag and drop interaction, configure it to work with our vector source, and add it to the map:

map.addInteraction(
  new DragAndDrop({
    source: source,
    formatConstructors: [GeoJSON],
  }),
);

Now you should be able to drag and drop GeoJSON files onto the map and see them rendered.