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.

First of all, we need to assign the map to a constant, so we can access it from other components we're going to add in this exercise:

const map = new Map({

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.

Drag and drop
Drag and drop

results matching ""

    No results matching ""