Adding features to the vector layer by dragging and dropping them

In this book, we demonstrated many ways to add features to the map, such as with the Reading features directly using AJAX recipe in Chapter 3, Working with Vector Layers. We also saw an example of exporting features from a vector layer in the GeoJSON format and displaying the result inside a textbox in the Exporting features as GeoJSON recipe in Chapter 3, Working with Vector Layers. For this recipe, we'll show you how to import a file containing GeoJSON to the map by dragging a file from your computer and dropping it in the web application.

Dragging and dropping is a part of the HTML5 API, an ability, which now has good cross browser support. To read more about the specifications, refer to https://html.spec.whatwg.org/multipage/interaction.html#dnd. For a quick run down of browser support, refer to http://caniuse.com/#search=drag.

Although there are alternative ways that you can import a file from the user's computer to the...