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.

Import the drag and drop interaction into your main.js:

import DragDrop from 'ol/interaction/draganddrop';

As before, we need to assign the map to a constant, so we can add things to it:

const map = new Map({

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 DragDrop({
  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 ""